/*
 * The cookie notice, dressed for this site.
 *
 * gia-core ships the notice and its stylesheet, but that stylesheet is written
 * against giaglobalgroup.com's design tokens — --color-white, --color-ink,
 * --text-small and ten others. None of them exist in this theme, which names
 * everything --scc-*, so every colour, size and radius in the component resolved
 * to nothing: a bar with no background, no type scale and no corners.
 *
 * Rather than fork the component, this maps the names it asks for onto the
 * palette this site actually has. The mapping is scoped to the two cookie
 * elements so nothing else can pick these generic names up by accident, and
 * gia-core's own CSS is left untouched — it still has to work on the site it was
 * written for.
 *
 * Loaded after gia-core's stylesheet (declared as a dependency), which is what
 * lets the handful of overrides at the bottom win.
 */

.gia-cookie-banner,
.gia-cookie-settings {
    /* Surfaces. The bar and the dialog are white plates, as on giaglobalgroup —
       this site is dark, so a light bar is what separates it from the page. */
    --color-white: #FFFFFF;
    --color-ink: var(--scc-btn-fg);

    /* The accent, on white.
       --scc-accent is #9EA2EF, which is the brand's periwinkle and the right
       colour on the site's dark ground — but it lands at about 2.3:1 on white and
       fails AA for text. This is the same family two steps down: the indigo the
       ticket cards are built from, at roughly 7.4:1. */
    --color-brand-red: #4D519C;

    --color-section-bg: rgba(47, 49, 63, 0.06);
    --color-checkbox-border: rgba(47, 49, 63, 0.18);
    --color-checkbox-checked: #4D519C;
    --color-newsletter-label: rgba(47, 49, 63, 0.7);

    --font-weight-regular: var(--scc-weight-regular);
    --font-weight-semibold: var(--scc-weight-display);
    --font-weight-bold: var(--scc-weight-bold);

    --radius-md: var(--scc-radius);
    --text-small: var(--scc-text-small);
    --text-tiny: 0.75rem;

    /* The component inherits the page font otherwise, which on a fixed bar
       outside .scc-main is whatever the UA decides. */
    font-family: var(--scc-font);
}

/*
 * The one place the mapping is not enough.
 *
 * "Got it!" and "Accept all" use the theme's own .btn--primary, which on this
 * site is a WHITE button with dark text — invisible on a white bar. Filled with
 * the same indigo instead, which also makes it read as the primary action beside
 * the outlined "Save my preferences".
 *
 * (0,3,0) to clear `.btn.btn--primary` in base.css, and the hover answered
 * separately because the kit's `button:hover` is (0,2,1) and would otherwise
 * repaint it mid-interaction.
 */
.gia-cookie-banner .btn.gia-cookie-banner__accept,
.gia-cookie-settings .btn.gia-cookie-settings__accept {
    background: var(--color-brand-red);
    border: 1px solid var(--color-brand-red);
    color: #FFFFFF;
}

.gia-cookie-banner .btn.gia-cookie-banner__accept:hover,
.gia-cookie-banner .btn.gia-cookie-banner__accept:focus-visible,
.gia-cookie-settings .btn.gia-cookie-settings__accept:hover,
.gia-cookie-settings .btn.gia-cookie-settings__accept:focus-visible {
    background: #3E4180;
    border: 1px solid #3E4180;
    color: #FFFFFF;
    filter: none;
}

/*
 * The bar sits above everything, including the sticky header. gia-core sets 20,
 * and this theme's fixed header is 50 (header-footer.css) — a consent bar the
 * header can cover is a consent bar nobody can dismiss.
 */
.gia-cookie-banner { z-index: 60; }

/*
 * A closed <dialog> is hidden by the UA rule `dialog:not([open])`, and gia-core
 * relies on that rather than stating it. Stated here as well: it costs one line,
 * and if any rule ever gives this element a `display` the UA rule loses and the
 * whole preferences panel sits open on the page. That is not hypothetical — the
 * same mistake put a price plate on screen on the checkout earlier today.
 */
.gia-cookie-settings:not([open]) { display: none; }

/* The dialog is the browser's top layer, so it needs no z-index — but it does
   need a backdrop dark enough to read as modal over a dark page. */
.gia-cookie-settings::backdrop { background: rgba(8, 10, 29, 0.7); }

/*
 * The dialog holds its own focus (tabindex="-1" in gia-core's markup) so opening
 * the panel does not draw a ring around the close button. The panel is a
 * container, not a control; everything inside it keeps its own focus ring.
 */
.gia-cookie-settings:focus { outline: none; }