/*
 * Colour contract (theme-inheritable).
 * The banner never hardcodes a brand colour: every visible colour resolves an
 * --acc-* custom property that first chains to the host theme preset
 * (--wp--preset--color--*) and only falls back to a product-generic neutral as a
 * last resort. Any child theme can retheme the banner just by exposing those
 * presets (or by overriding the --acc-* variables directly). See README.md.
 */
.acc-cookie-banner,
.acc-consent-backdrop,
.acc-cookie-manage-button,
.acc-cookie-manage-inline,
.acc-embed-placeholder {
    --acc-surface: var(--wp--preset--color--surface, #ffffff);
    --acc-canvas: var(--wp--preset--color--canvas, #f8fafc);
    --acc-text: var(--wp--preset--color--text, #0f172a);
    --acc-text-soft: var(--wp--preset--color--text-soft, #475467);
    --acc-border: var(--wp--preset--color--border, #d0d5dd);
    --acc-primary: var(--wp--preset--color--brand, #0b6e69);
    --acc-on-primary: var(--wp--preset--color--inverse, #f8fafc);
    /* Decorative scrim behind the modal dialog; never under the dialog's text. */
    --acc-backdrop: rgba(15, 23, 42, 0.6);
}

/*
 * Modal consent dialog (0.2.0). A native <dialog>: frontend.js opens it with
 * showModal(), which puts it in the top layer (the page behind is inert and
 * ::backdrop blocks the pointer). Without JavaScript the server renders it
 * `open` (non-modal) over .acc-consent-backdrop; the same geometry applies to
 * both, so the dialog is centred in the viewport either way.
 */
.acc-cookie-banner__dialog:not([open]) {
    display: none;
}

.acc-cookie-banner__dialog[open] {
    background: var(--acc-surface);
    border: 2px solid var(--acc-text);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 3rem rgba(15, 23, 42, 0.2);
    color: var(--acc-text);
    display: grid;
    gap: 1rem;
    inset: 0;
    margin: auto;
    padding: 1.25rem;
    position: fixed;
    z-index: 100000;
    width: calc(100% - 2rem);
    max-width: 42rem;
    height: fit-content;
    /* border + padding count towards the height cap below, so the capped dialog
     * fits the viewport exactly and its top edge is never clipped. */
    box-sizing: border-box;
    /*
     * A fixed dialog cannot scroll with the page. When it is taller than the
     * viewport — the preferences panel expanded (or revealed by <noscript>) on a
     * short/zoomed viewport — its top edge would be clipped off-screen with no
     * way to reach the decision controls (WCAG 1.4.10 reflow, 1.4.4 resize
     * text). Cap the height to the viewport and let the dialog itself scroll so
     * every control stays reachable. (100vh fallback for browsers without
     * dynamic viewport units.)
     */
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

/* Native modal: the browser's top-layer backdrop. */
.acc-cookie-banner__dialog::backdrop {
    background: var(--acc-backdrop, rgba(15, 23, 42, 0.6));
}

/* No-JS / fallback backdrop: covers the viewport and catches the pointer. */
.acc-consent-backdrop {
    background: var(--acc-backdrop);
    inset: 0;
    position: fixed;
    z-index: 99999;
}

.acc-consent-backdrop[hidden] {
    display: none;
}

/*
 * The dialog container takes focus when it opens (neither decision is
 * pre-selected). The ring is drawn INSIDE the dialog border, on the dialog
 * surface, so it keeps the --acc-text contrast instead of sitting on the
 * dark backdrop.
 */
.acc-cookie-banner__dialog:focus-visible {
    outline: 3px solid var(--acc-text);
    outline-offset: -7px;
}

.acc-cookie-banner__form {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.acc-cookie-banner__copy h2 {
    margin: 0 0 0.5rem;
}

.acc-cookie-banner__copy p,
.acc-cookie-banner__policy,
.acc-cookie-banner__note,
.acc-cookie-banner__status {
    margin: 0.25rem 0 0;
}

.acc-cookie-banner__actions,
.acc-cookie-banner__preferences-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.acc-cookie-banner__actions .button,
.acc-cookie-banner__preferences-actions .button,
.acc-cookie-manage-button,
.acc-cookie-manage-inline {
    background: var(--acc-surface);
    border: 2px solid var(--acc-text);
    border-radius: 999px;
    color: var(--acc-text);
    cursor: pointer;
    font: inherit;
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
}

.acc-cookie-banner__actions .button.button-primary,
.acc-cookie-banner__preferences-actions .button.button-primary {
    background: var(--acc-primary);
    border-color: var(--acc-primary);
    color: var(--acc-on-primary);
}

.acc-cookie-banner__actions .button:focus-visible,
.acc-cookie-banner__preferences-actions .button:focus-visible,
.acc-cookie-manage-button:focus-visible,
.acc-cookie-manage-inline:focus-visible,
.acc-cookie-banner__choice input:focus-visible,
#acc-cookie-banner-title:focus-visible {
    /*
     * Focus indicator with >=3:1 contrast against both surfaces it can sit on
     * (WCAG 2.4.11 + 1.4.11). The previous amber (#f59e0b) only reached ~2.15:1 on
     * white and ~1.85:1 on light-tinted host surfaces (both < 3:1). It now inherits
     * the theme's own text colour (--acc-text): a strong neutral/ink that stays
     * well above 3:1 on every host surface. With the product's violet palette it
     * measures ~16.9:1 on the dialog surface and ~15.1:1 on the page canvas.
     */
    outline: 3px solid var(--acc-text);
    outline-offset: 3px;
}

.acc-cookie-banner__preferences {
    border-top: 1px solid var(--acc-border);
    padding-top: 1rem;
}

.acc-cookie-banner__fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.acc-cookie-banner__choice {
    align-items: start;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr auto;
    margin: 0.75rem 0;
}

.acc-cookie-banner__choice-copy {
    display: grid;
    gap: 0.25rem;
}

.acc-cookie-banner__vendors {
    color: var(--acc-text-soft);
    font-size: 0.95rem;
}

.acc-cookie-banner__status {
    color: var(--acc-primary);
    font-weight: 600;
}

/*
 * Screen-reader-text utility. Used by the always-rendered status live region
 * (WCAG 4.1.3) — which now lives outside the banner so it survives the banner
 * being hidden — and by the form's hidden default submit button (WCAG 3.3.4).
 * Both must be in the accessibility tree / the form, but not shown or focusable.
 * If a host theme prefers a visible confirmation, remove this class from the
 * status node: its .acc-cookie-banner__status styling above keeps it readable.
 */
.acc-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.acc-cookie-manage-button {
    bottom: 1rem;
    left: 1rem;
    position: fixed;
    z-index: 99998;
}

.acc-embed-placeholder {
    background: var(--acc-canvas);
    border: 2px dashed var(--acc-border);
    border-radius: 0.75rem;
    color: var(--acc-text);
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
}

@media (max-width: 48rem) {
    .acc-cookie-manage-button {
        /*
         * Explicit insets for the fixed floating button. The previous
         * `top: auto; bottom: auto` on a position:fixed element let it fall to
         * its static-flow position — off-screen at the foot of a tall page
         * (WCAG 1.4.10 reflow, 2.4.7). Pin it to the bottom-right of the viewport.
         */
        bottom: 1rem;
        left: auto;
        right: 1rem;
    }
}

/*
 * Reduced motion (WCAG 2.3.3): the plugin animates nothing; this keeps any
 * open/close transition a theme adds to the dialog or its backdrop gated.
 */
@media (prefers-reduced-motion: reduce) {
    .acc-cookie-banner__dialog,
    .acc-cookie-banner__dialog::backdrop,
    .acc-consent-backdrop {
        animation: none !important;
        transition: none !important;
    }
}

/* Print: the consent UI must not obscure or blank the printed page. */
@media print {
    .acc-cookie-banner__dialog,
    .acc-consent-backdrop {
        display: none !important;
    }

    .acc-cookie-banner__dialog::backdrop {
        display: none !important;
    }
}