/* ==========================================================================
   Footer V2
   --------------------------------------------------------------------------
   Every selector in this file MUST start with .gpau-footer-v2.
   tests/Feature/FooterV2Test.php enforces this — the footer ships on every
   page of the site, so an unscoped rule here would repaint the whole site.

   Design tokens are declared on .gpau-footer-v2 rather than :root for the
   same reason: a :root block would override the host page's own tokens.
   ========================================================================== */

.gpau-footer-v2 {
    /* Dark is the default theme; .gpau-footer-v2--light below overrides only
       the tokens that actually differ in Figma. Everything past this block is
       theme-agnostic and reads these variables. */
    --fv2-bg: #151c1f;
    --fv2-heading: #f3f5f5;
    --fv2-heading-strong: #f3f5f5;
    --fv2-text: #bcbfc1;
    --fv2-muted: #6e767a;
    --fv2-border: #515b60;
    --fv2-action: #e6f7f9;
    --fv2-accent: #00acc1;
    --fv2-copyright: #f3f5f5;
    --fv2-input-border: #bcbfc1;

    --fv2-font: 'Poppins', 'Poppins Fallback', Arial, sans-serif;
    --fv2-font-action: 'Nunito Sans', 'Nunito Sans Fallback', Arial, sans-serif;
    --fv2-size: 14px;

    --fv2-pad-x: 16px;
    --fv2-row-y: 16px;

    /* Widest the footer content column is allowed to get. The background is not
       affected — it always spans the viewport. */
    --fv2-content-max: 1320px;

    display: block;
    width: 100%;
    background: var(--fv2-bg);
    padding: 0 var(--fv2-pad-x);
    font-family: var(--fv2-font);
    font-size: var(--fv2-size);
    line-height: 1.5;
    color: var(--fv2-text);
    text-align: left;
}

/* Light theme.

   Only the tokens Figma actually changes are redefined. Three stay identical
   across both themes and are deliberately absent here: the newsletter
   placeholder (#6e767a), the newsletter underline (#bcbfc1) and the cyan
   separators (#00acc1).

   Two shades that are the same in dark diverge in light: the COMMITMENT label
   goes darker than the section headings, which is why they are separate
   tokens. */
.gpau-footer-v2.gpau-footer-v2--light {
    --fv2-bg: #fafafa;
    --fv2-heading: #232e33;
    --fv2-heading-strong: #151c1f;
    --fv2-text: #515b60;
    --fv2-border: #e9ebeb;
    --fv2-action: #00acc1;
    --fv2-copyright: #515b60;
}

.gpau-footer-v2,
.gpau-footer-v2 * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Defensive inbound reset.

   src/frontend/css/style.css is global, large, and its effect differs from
   page to page. Without resetting the elements we use, a global `ul` or `a`
   rule would break the footer on some pages and not others — the kind of bug
   that only shows up after rollout.
   -------------------------------------------------------------------------- */

/* Specificity matters here, in both directions.

   These resets score (0,1,1) so they outrank a host page's own element rules
   like `.some-section ul`, which is the whole point of the guard.

   That also means they outrank a bare `.gpau-footer-v2__heading` (0,1,0) and
   would silently flatten this component's own typography. So every component
   rule below is written as `.gpau-footer-v2 .gpau-footer-v2__x` (0,2,0), one
   class above the reset.

   FooterV2Test enforces that. Do not drop the repeated prefix. */
.gpau-footer-v2 p,
.gpau-footer-v2 h2,
.gpau-footer-v2 h3,
.gpau-footer-v2 ul,
.gpau-footer-v2 li,
.gpau-footer-v2 address {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-transform: none;
    letter-spacing: normal;
    list-style: none;
}

.gpau-footer-v2 a {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--fv2-text);
    text-decoration: none;
    text-transform: none;
    box-shadow: none;
    transition: color 0.15s ease;
}

.gpau-footer-v2 a:hover,
.gpau-footer-v2 a:focus-visible {
    color: var(--fv2-heading);
}

.gpau-footer-v2 a:focus-visible,
.gpau-footer-v2 button:focus-visible,
.gpau-footer-v2 input:focus-visible {
    outline: 2px solid var(--fv2-accent);
    outline-offset: 2px;
}

.gpau-footer-v2 button,
.gpau-footer-v2 input {
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    line-height: normal;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
}

.gpau-footer-v2 button {
    padding: 0;
    cursor: pointer;
}

.gpau-footer-v2 img,
.gpau-footer-v2 svg {
    display: block;
    max-width: none;
    border: 0;
}

/* --------------------------------------------------------------------------
   Rows
   -------------------------------------------------------------------------- */

/* The footer background stays full-bleed — the <footer> itself is a full-width
   block. Only the rows are capped and centred, so on wide screens the content
   sits in a 1320px column while the dark band still runs edge to edge.

   Below roughly 1408px the footer's own horizontal padding is the narrower
   constraint and governs instead, which keeps the layout unchanged at 1366. */
.gpau-footer-v2 .gpau-footer-v2__row {
    max-width: var(--fv2-content-max);
    margin: 0 auto;
    padding: var(--fv2-row-y) 0;
    border-bottom: 1px solid var(--fv2-border);
}

.gpau-footer-v2 .gpau-footer-v2__legal {
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.gpau-footer-v2 .gpau-footer-v2__heading {
    font-size: var(--fv2-size);
    font-weight: 600;
    line-height: normal;
    color: var(--fv2-heading);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.gpau-footer-v2 .gpau-footer-v2__subheading {
    font-size: var(--fv2-size);
    font-weight: 600;
    line-height: normal;
    color: var(--fv2-text);
}

.gpau-footer-v2 .gpau-footer-v2__address {
    font-style: normal;
    line-height: normal;
}

.gpau-footer-v2 .gpau-footer-v2__sep {
    color: var(--fv2-accent);
}

/* --------------------------------------------------------------------------
   Blocks and lists
   -------------------------------------------------------------------------- */

.gpau-footer-v2 .gpau-footer-v2__block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

.gpau-footer-v2 .gpau-footer-v2__group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.gpau-footer-v2 .gpau-footer-v2__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.gpau-footer-v2 .gpau-footer-v2__link {
    display: inline-flex;
    align-items: flex-start;
    gap: 4px;
}

/* Fixed 16x16 box with the glyph centred at its exported size. No broad
   descendant rule is used, so unlike icons cannot be stretched to one size. */
.gpau-footer-v2 .gpau-footer-v2__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    align-self: center;
}

/* --------------------------------------------------------------------------
   Brand row
   -------------------------------------------------------------------------- */

.gpau-footer-v2 .gpau-footer-v2__logo {
    width: 111px;
    height: 34px;
    flex: 0 0 auto;
}

/* Only differs from the section headings in the light theme. */
.gpau-footer-v2 .gpau-footer-v2__brand .gpau-footer-v2__heading {
    color: var(--fv2-heading-strong);
}

.gpau-footer-v2 .gpau-footer-v2__commitment {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gpau-footer-v2 .gpau-footer-v2__divider {
    display: block;
    background: var(--fv2-border);
}

/* --------------------------------------------------------------------------
   Newsletter (visual only)
   -------------------------------------------------------------------------- */

.gpau-footer-v2 .gpau-footer-v2__newsletter {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fv2-input-border);
}

.gpau-footer-v2 .gpau-footer-v2__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    color: var(--fv2-text);
}

.gpau-footer-v2 .gpau-footer-v2__input::placeholder {
    color: var(--fv2-muted);
    opacity: 1;
}

.gpau-footer-v2 .gpau-footer-v2__action {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    font-family: var(--fv2-font-action);
    font-size: var(--fv2-size);
    color: var(--fv2-action);
    text-decoration: underline;
    text-transform: capitalize;
    letter-spacing: 0.28px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Global presence and legal
   -------------------------------------------------------------------------- */

.gpau-footer-v2 .gpau-footer-v2__regions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    line-height: normal;
}

.gpau-footer-v2 .gpau-footer-v2__legal-links {
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

/* :not([hidden]) matters. An author `display` rule beats the UA stylesheet's
   [hidden] { display: none }, so a plain `display: flex` here would reveal the
   toggle button even when JS never runs — the exact failure the hidden
   attribute exists to prevent. */
.gpau-footer-v2 .gpau-footer-v2__toggle-row:not([hidden]) {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.gpau-footer-v2 .gpau-footer-v2__toggle {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Desktop, 1200px and up.

   The three bands become display:contents so their blocks join a single
   four-column grid. If a browser does not support display:contents the bands
   simply stay as rows — degraded layout, never lost content.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
    .gpau-footer-v2 {
        --fv2-pad-x: 44px;
        --fv2-row-y: 24px;
    }

    .gpau-footer-v2 .gpau-footer-v2__brand {
        display: flex;
        gap: 44px;
        align-items: center;
    }

    .gpau-footer-v2 .gpau-footer-v2__divider {
        width: 1px;
        height: 44px;
        flex: 0 0 auto;
    }

    .gpau-footer-v2 .gpau-footer-v2__commitment {
        flex: 1 1 0;
        min-width: 0;
    }

    .gpau-footer-v2 .gpau-footer-v2__links {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            'contact explore watch  follow'
            'contact getinv  read   newsl';
        align-content: start;
        column-gap: 44px;
        row-gap: 32px;
    }

    .gpau-footer-v2 .gpau-footer-v2__band {
        display: contents;
    }

    .gpau-footer-v2 .gpau-footer-v2__block--contact { grid-area: contact; }
    .gpau-footer-v2 .gpau-footer-v2__block--explore { grid-area: explore; }
    .gpau-footer-v2 .gpau-footer-v2__block--getinvolved { grid-area: getinv; }
    .gpau-footer-v2 .gpau-footer-v2__block--watch { grid-area: watch; }
    .gpau-footer-v2 .gpau-footer-v2__block--read { grid-area: read; }
    .gpau-footer-v2 .gpau-footer-v2__block--follow { grid-area: follow; }
    .gpau-footer-v2 .gpau-footer-v2__block--newsletter { grid-area: newsl; }

    .gpau-footer-v2 .gpau-footer-v2__presence {
        display: flex;
        gap: 44px;
        align-items: center;
    }

    .gpau-footer-v2 .gpau-footer-v2__regions {
        flex: 1 1 0;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .gpau-footer-v2 .gpau-footer-v2__legal {
        display: flex;
        gap: 44px;
        align-items: center;
    }

    .gpau-footer-v2 .gpau-footer-v2__copyright {
        flex: 1 1 0;
        min-width: 0;
        color: var(--fv2-copyright);
    }

    .gpau-footer-v2 .gpau-footer-v2__legal-links {
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-end;
    }

    /* No accordion on desktop: everything is always visible. */
    .gpau-footer-v2 .gpau-footer-v2__toggle-row {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Below desktop, up to 1199px.

   Shared by tablet and mobile: the brand row stacks, the divider becomes a
   horizontal rule, the legal row stacks, and each link band draws its own
   bottom rule (on desktop those bands are display:contents and the single
   grid row draws one rule instead).
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .gpau-footer-v2 .gpau-footer-v2__brand {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .gpau-footer-v2 .gpau-footer-v2__divider {
        width: 100%;
        height: 1px;
    }

    .gpau-footer-v2 .gpau-footer-v2__band--a,
    .gpau-footer-v2 .gpau-footer-v2__band--b {
        padding-bottom: var(--fv2-row-y);
        margin-bottom: var(--fv2-row-y);
        border-bottom: 1px solid var(--fv2-border);
    }

    .gpau-footer-v2 .gpau-footer-v2__presence {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }

    .gpau-footer-v2 .gpau-footer-v2__legal {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .gpau-footer-v2 .gpau-footer-v2__copyright {
        color: var(--fv2-copyright);
    }
}

/* --------------------------------------------------------------------------
   Tablet, 768px to 1199px. Two columns per band.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1199px) {
    .gpau-footer-v2 .gpau-footer-v2__band {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 44px;
        row-gap: 32px;
        align-content: start;
    }

    /* CONTACT US spans both rows on the left; GET INVOLVED sits under EXPLORE. */
    .gpau-footer-v2 .gpau-footer-v2__band--a {
        grid-template-areas:
            'contact explore'
            'contact getinv';
    }

    .gpau-footer-v2 .gpau-footer-v2__band--a .gpau-footer-v2__block--contact { grid-area: contact; }
    .gpau-footer-v2 .gpau-footer-v2__band--a .gpau-footer-v2__block--explore { grid-area: explore; }
    .gpau-footer-v2 .gpau-footer-v2__band--a .gpau-footer-v2__block--getinvolved { grid-area: getinv; }
}

/* --------------------------------------------------------------------------
   Mobile, below 768px. Single column throughout.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .gpau-footer-v2 {
        --fv2-pad-x: 24px;
    }

    .gpau-footer-v2 .gpau-footer-v2__band {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }
}

/* --------------------------------------------------------------------------
   Accordion.

   `is-collapsed` is only ever added by footer-v2.js. display:none is used
   rather than height/visibility so collapsed content is removed from the tab
   order and from screen readers.
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .gpau-footer-v2.is-collapsed .gpau-footer-v2__collapsible {
        display: none;
    }
}

/* GET INVOLVED stays visible on tablet when collapsed but is hidden on mobile.
   This asymmetry is intentional and reproduces the Figma variants. */
@media (max-width: 767px) {
    .gpau-footer-v2.is-collapsed .gpau-footer-v2__collapsible-mobile {
        display: none;
    }
}

.gpau-footer-v2.is-collapsed .gpau-footer-v2__toggle-row {
    border-bottom: 1px solid var(--fv2-border);
}