/**
 * CSRC Accordion System
 * Class-based accordion component for content editors
 *
 * Usage:
 * <div class="csrc-accordion">
 *   <div class="csrc-accordion-item">
 *     <button class="csrc-accordion-header">Title</button>
 *     <div class="csrc-accordion-content">Content</div>
 *   </div>
 * </div>
 */

/* ============================================================================
   Accordion Container
   ========================================================================== */

.csrc-accordion {
    font-family: Helvetica, Arial, sans-serif;
    margin: 0 auto;
}

/* ============================================================================
   Accordion Item
   ========================================================================== */

.csrc-accordion-item {
    margin-bottom: 0;
}

.csrc-accordion-item:not(:last-child) {
    margin-bottom: 2rem;
}

/* ============================================================================
   Accordion Header (Button)
   ========================================================================== */

.csrc-accordion-header {
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

.csrc-accordion-header:focus {
    outline: none !important;
}

.csrc-accordion-header:focus-visible {
    outline: 2px solid #00568c !important;
    outline-offset: 2px !important;
}

/* Header Inner Container */
.csrc-accordion-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Header Title */
.csrc-accordion-title {
    font-size: var(--wp--preset--font-size--medium, clamp(1.25rem, 0.8382rem + 2.9412vw, 1.5rem));
    font-weight: 700;
    color: #000;
    letter-spacing: -0.025em;
    margin: 0;
    transition: color 0.2s ease;
}

.csrc-accordion-header:hover .csrc-accordion-title {
    color: #2774ae;
}

/* Header Icon */
.csrc-accordion-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: #000;
    transition: transform 0.3s ease, color 0.2s ease;
    flex-shrink: 0;
}

.csrc-accordion-header:hover .csrc-accordion-icon {
    color: #2774ae;
}

.csrc-accordion-icon.is-open {
    transform: rotate(180deg);
}

/* Header Separator */
.csrc-accordion-separator {
    border: none;
    border-top: 1px solid #d4d4d4;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* ============================================================================
   Accordion Content
   ========================================================================== */

.csrc-accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.csrc-accordion-content.is-open {
    max-height: 2000px; /* Generous max-height for most content */
    opacity: 1;
}

/* Content Inner Wrapper (optional for padding) */
.csrc-accordion-content-inner {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ============================================================================
   Simplified Structure Support
   ========================================================================== */

/*
 * If editors use simplified structure without inner wrappers,
 * apply default spacing to direct children
 */
.csrc-accordion-content > *:first-child {
    margin-top: 2rem;
}

.csrc-accordion-content > *:last-child {
    margin-bottom: 2rem;
}

/* ============================================================================
   Header Variants
   ========================================================================== */

/* Simple text-only header (no icon/separator wrapper needed) */
.csrc-accordion-header--simple {
    font-size: var(--wp--preset--font-size--medium, clamp(1.25rem, 0.8382rem + 2.9412vw, 1.5rem));
    font-weight: 700;
    color: #000;
    letter-spacing: -0.025em;
    padding-bottom: 1rem;
    border-bottom: 1px solid #d4d4d4;
    transition: color 0.2s ease;
}

.csrc-accordion-header--simple:hover {
    color: #2774ae;
}

/* ============================================================================
   Utility Classes
   ========================================================================== */

/* Remove bottom margin from last accordion in a group */
.csrc-accordion-item:last-child {
    margin-bottom: 0;
}

/* Allow content to be always open (disable collapse) */
.csrc-accordion-content.is-permanent {
    max-height: none;
    opacity: 1;
    overflow: visible;
}