/*---*\
    Fullwidth Accordion Section
    Centered accordion panels with optional header, description, and CTA buttons.

    KEY FEATURES:
    - Full-width section with centered accordion panels
    - Two background variants: light (bg-light) and dark (bg-dark)
    - Only one panel open at a time
    - Each panel has an icon image, title, and chevron arrow
    - Optional subheading badge, h2 heading, description
    - CTA button group below the accordion

    DEPENDENCIES:
    - global.css (buttons, typography, icons)
    - header.css (btn-outline-dark, btn-outline-light)
    - custom-properties.css (all CSS variables)

    MODIFIERS:
    - .bg-light : light blue background (#e9edf0)
    - .bg-dark  : dark teal background (#436577)
\*---*/


/* ==========================================================================
   BASE STYLES (Mobile First)
   ========================================================================== */

.fullwidth-accordion {
    position: relative;
    overflow: hidden;
}

.bg-dark .fullwidth-accordion__panel-text  {
    color: var(--color-text-inverse)!important;
}

.fullwidth-accordion__header.no-animation {
    padding-top: 60px;
}


/* --- Header --- */

.fullwidth-accordion__header {
    margin-bottom: 2.5rem;
    text-align: center;
}

.fullwidth-accordion__header .sub-heading {
    margin-bottom: var(--spacing-xs);
}

.fullwidth-accordion__title {
    margin: 0;
}

.fullwidth-accordion__description {
    margin: var(--paragraph-spacing) 0 0;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-primary);
}


/* --- Panels Container --- */

.fullwidth-accordion__panels {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    margin: 0 auto;
}


/* --- Panel --- */

.fullwidth-accordion__panel {
    border: none;
    border-radius: 0;
    background: transparent;
}


/* --- Panel Toggle --- */

.fullwidth-accordion__panel-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem;
    border: none;
    border-bottom: 1px solid #e9f0f4;
    text-align: left;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    transition: background-color 0.3s,
                border-color 0.3s;
    cursor: pointer;
    color: var(--color-secondary);
}

.fullwidth-accordion__panel-toggle i {
    color: inherit;
    font-size: 24px;
}

.fullwidth-accordion__panel-toggle img {
    max-width: 25px;
    height: auto;
}

.fullwidth-accordion__panel:first-child .fullwidth-accordion__panel-toggle {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.fullwidth-accordion__panel:last-child .fullwidth-accordion__panel-toggle {
    border-bottom: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-toggle {
    background: rgba(67, 101, 119, 0.1);
    border-bottom-color: transparent;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.fullwidth-accordion__panel.is-active + .fullwidth-accordion__panel .fullwidth-accordion__panel-toggle {
    border-radius: 0;
}

.fullwidth-accordion__panel.is-active:last-child .fullwidth-accordion__panel-toggle {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.fullwidth-accordion__panel-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}


/* Panel Toggle Icon */

.fullwidth-accordion__panel-icon {
    flex-shrink: 0;
    width: 24px;
    height: 19px;
    object-fit: contain;
    opacity: 0.5;
}

.fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-icon {
    opacity: 1;
}


/* Panel Toggle Title */

.fullwidth-accordion__panel-title {
    flex: 1;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    color: var(--color-secondary);
}

.fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-title,
.fullwidth-accordion__panel.is-active i  {
    color: var(--color-heading);
}


/* Panel Toggle Arrow (icon-arrow-down / icon-arrow-up) */

.fullwidth-accordion__panel-arrow {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-secondary);
    transition: color 0.3s;
}

.fullwidth-accordion__panel-arrow.icon-arrow-up {
    display: none;
}

.fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-arrow.icon-arrow-down {
    display: none;
}

.fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-arrow.icon-arrow-up {
    display: inline-block;
}

.fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-arrow {
    color: var(--color-primary);
}


/* --- Panel Content --- */

.fullwidth-accordion__panel-content {
    display: none;
    padding: 1.5rem 1.25rem;
    background: transparent;
}

.fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-content {
    display: block;
}

.fullwidth-accordion__panel-text {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-primary);
}

.fullwidth-accordion__panel-text > *:first-child {
    margin-top: 0;
}

.fullwidth-accordion__panel-text > *:last-child {
    margin-bottom: 0;
}


/* --- CTA Buttons --- */

.fullwidth-accordion__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.5rem;
}


/* ==========================================================================
   DARK BACKGROUND VARIANT (bg-dark)
   ========================================================================== */

.fullwidth-accordion.bg-dark {
    background-color: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__title {
    color: var(--color-heading-inverse);
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__description {
    color: var(--color-text-inverse);
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__panel-toggle {
    background: rgba(255, 255, 255, 0.85);
    border-bottom-color: #e9f0f4;
}

.bg-light-blue .fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-toggle,
.bg-navy .fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-toggle,
.bg-medium-blue .fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-toggle,
.bg-gradient-blue .fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-toggle {
    background: rgba(255, 255, 255, 1);
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__panel-title {
    color: var(--color-secondary);
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-title {
    color: var(--color-heading);
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__panel-arrow {
    color: var(--color-secondary);
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__panel.is-active .fullwidth-accordion__panel-arrow {
    color: var(--color-primary);
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__panel-icon {
    filter: none;
}

.fullwidth-accordion.bg-dark .fullwidth-accordion__panel-toggle:focus-visible {
    outline-color: var(--color-white);
}

.fullwidth-accordion.bg-dark .btn-white,
.fullwidth-accordion.bg-dark .btn-primary-light {
    color: var(--color-primary);
}


/* ==========================================================================
   LIGHT BACKGROUND VARIANT (bg-light)
   ========================================================================== */

.fullwidth-accordion.bg-light {
    background-color: var(--color-bg-light);
}


/* ==========================================================================
   TABLET (min-width: 768px)
   ========================================================================== */

@media (min-width: 768px) {
    .fullwidth-accordion__header {
        max-width: 660px;
        margin-right: auto;
        margin-left: auto;
    }

    .fullwidth-accordion__panels {
        max-width: 664px;
    }

    .fullwidth-accordion__panel-toggle {
        padding: 1.25rem 1.9375rem;
    }

    .fullwidth-accordion__panel-title {
        font-size: 1.5rem;
    }

    .fullwidth-accordion__panel-content {
        padding: 2rem;
    }
}


/* ==========================================================================
   DESKTOP (min-width: 1025px)
   ========================================================================== */

@media (min-width: 1025px) {
    .fullwidth-accordion__header {
        max-width: 800px;
    }

    .fullwidth-accordion__panels {
        max-width: 1184px;
    }

    .fullwidth-accordion__panel-content {
        padding: 2rem;
    }
}


/* ==========================================================================
   LARGE DESKTOP - HOVER STATES (min-width: 1200px)
   ========================================================================== */

@media (min-width: 1200px) {
    .fullwidth-accordion__panel-toggle:hover {
        background: rgba(255, 255, 255, 1);
    }

    .fullwidth-accordion.bg-dark .fullwidth-accordion__panel-toggle:hover {
        background: rgba(255, 255, 255, 0.92);
    }
}


/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .fullwidth-accordion {
        padding: 20px 0;
        background: none !important;
        color: #000;
    }

    .fullwidth-accordion__panel {
        page-break-inside: avoid;
    }

    .fullwidth-accordion__panel-content {
        display: block !important;
    }
}