/*
 * quebecstudio/cookie-consent-kit — default styles
 *
 * Component rules read `.qsc :where(.qsc-x)`, a specificity of 0-1-0: enough
 * to survive framework resets such as the Tailwind preflight and the bare
 * element rules purchased themes ship, low enough that the documented override
 * `.qsc .qsc-button { … }` (0-2-0) wins on its own merits. Load order is not
 * part of the bargain: Craft prints registered assets just before `</head>`,
 * after every `<link>` written into the template, so on most sites this sheet
 * is the last one in. No @layer — an unlayered site rule would beat a layered
 * one whatever its specificity, including the container reset below.
 *
 * Variable defaults sit at 0-0-0, under `:where(qs-consent)`, so a site rule
 * on `qs-consent` wins in every colour scheme, again regardless of order.
 *
 * Every length is a multiple of one anchor, `--qsc-scale`, whose default clamps
 * a `rem` between a pixel floor and ceiling. A theme that rewrites the root
 * font size — `html { font-size: 10px }`, standard in Bootstrap 3 and its
 * descendants — therefore cannot shrink the component, while a reader who
 * enlarges the browser's own default still gets a larger panel. On a site that
 * leaves the root alone, the anchor is 16px and every size is what it was.
 *
 * Override with the CSS variables below, set on `qs-consent` itself, or with
 * `.qsc .qsc-button { … }`.
 *
 * The focus rings are the one exception: they carry `!important`, because a
 * host suppressing outlines with `a, button, input { outline: none !important }`
 * cannot be answered any other way. Restyle them through `--qsc-focus-ring`
 * (and `--qsc-video-focus-ring` for the facade, which renders outside the
 * host) rather than by redeclaring the rule — a plain rule no longer wins.
 */

/* Nothing shows until the element is defined, so a failed script leaves the
   page clean. The component then sets `data-state`. */
qs-consent:not(:defined) {
    display: none;
}

/* `display` is a discrete property: `allow-discrete` is what makes the exit
   animate, and `@starting-style` gives the entry something to interpolate
   from. */
.qsc :where(.qsc-root),
.qsc :where(.qsc-reopen) {
    display: none;
    opacity: 0;
    translate: 0 100%;
    transition:
        opacity 0.25s ease-out,
        translate 0.25s ease-out,
        display 0.25s allow-discrete;
}

.qsc[data-state='banner'] .qsc-root {
    display: block;
    opacity: 1;
    translate: 0 0;
}

.qsc[data-state='idle'] .qsc-reopen {
    display: inline-flex;
    opacity: 0.55;
    translate: 0 0;
}

@starting-style {
    .qsc[data-state='banner'] .qsc-root {
        opacity: 0;
        translate: 0 100%;
    }

    .qsc[data-state='idle'] .qsc-reopen {
        opacity: 0;
        translate: 0 100%;
    }
}

/* Variables live on the host, never on a descendant: a value declared on an
   element always beats the same value inherited from an ancestor, so
   declaring them on `.qsc` would make site overrides impossible.

   Every default here sits at 0-0-0, inside `:where()`, colour schemes included.
   They win over each other by order, and any site rule on `qs-consent` wins
   over all of them, in every scheme, whichever sheet the browser reads last. */
:where(qs-consent) {
    --qsc-bg: #ffffff;
    --qsc-fg: #1b1b1b;
    --qsc-accent: #1b1b1b;
    --qsc-accent-fg: #ffffff;
    --qsc-rule: rgb(0 0 0 / 0.15);
    --qsc-hover: rgb(0 0 0 / 0.06);

    /* The scale everything else is measured against. The pixel floor survives a theme
       that rewrites the root font size — `html { font-size: 10px }`, standard in Bootstrap 3
       and its descendants — while the `rem` in the middle still follows the reader's own
       browser setting. */
    --qsc-scale: clamp(14px, 1rem, 1.5rem);

    --qsc-font: system-ui, sans-serif;
    --qsc-size: calc(var(--qsc-scale) * 0.9375);
    --qsc-radius: 2px;
    --qsc-border: 1px solid var(--qsc-accent);
    --qsc-focus-ring: 2px solid var(--qsc-accent);
    --qsc-max-width: calc(var(--qsc-scale) * 72);
    --qsc-gap: var(--qsc-scale);
    --qsc-max-height: 85dvh;
    --qsc-shadow: 0 -4px 24px rgb(0 0 0 / 0.18);
    --qsc-z: 2147483000;

    color-scheme: light;
}

:where(qs-consent[data-scheme='dark']) {
    --qsc-bg: #1b1b1b;
    --qsc-fg: #ffffff;
    --qsc-accent: #ffffff;
    --qsc-accent-fg: #1b1b1b;
    --qsc-rule: rgb(255 255 255 / 0.15);
    --qsc-hover: rgb(255 255 255 / 0.12);
    --qsc-shadow: 0 -4px 24px rgb(0 0 0 / 0.4);

    color-scheme: dark;
}

/* `color-scheme` matters as much as the colours: without it the native
   checkbox stays light on a dark background. */
@media (prefers-color-scheme: dark) {
    :where(qs-consent[data-scheme='auto']) {
        --qsc-bg: #1b1b1b;
        --qsc-fg: #ffffff;
        --qsc-accent: #ffffff;
        --qsc-accent-fg: #1b1b1b;
        --qsc-rule: rgb(255 255 255 / 0.15);
        --qsc-hover: rgb(255 255 255 / 0.12);
        --qsc-shadow: 0 -4px 24px rgb(0 0 0 / 0.4);

        color-scheme: dark;
    }
}

.qsc {
    display: block;
}

/* A bare element selector in the host stylesheet reaches inside the component:
   `section { background: #ffffff }` ships with most purchased themes. Our
   containers declare no background of their own — they expect `.qsc-root` to
   show through — so the host wins by default on a property we never claimed,
   and a white block lands over the banner.

   Specificity is not the fix: an unclaimed property has nothing to outrank.
   One reset covers every container at 0-1-0, which each component rule at
   0-2-0 still overrides. Controls are left out on purpose: their own rules
   already set the background they need. */
.qsc :where(section, article, aside, div, header, footer,
    p, h1, h2, h3, h4, h5, h6,
    ul, ol, li, dl, dt, dd,
    label, span, fieldset, legend,
    table, thead, tbody, tr, th, td) {
    background: transparent;
}

.qsc :where(.qsc-root) {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--qsc-z);
    background: var(--qsc-bg);
    color: var(--qsc-fg);
    font-family: var(--qsc-font);
    font-size: var(--qsc-size);
    box-shadow: var(--qsc-shadow);
}

.qsc :where(.qsc-banner) {
    box-sizing: border-box;
    max-width: var(--qsc-max-width);
    margin: 0 auto;
    padding: calc(var(--qsc-gap) * 1.25);
    display: flex;
    flex-direction: column;
    gap: var(--qsc-gap);
}

.qsc :where(.qsc-banner:focus) {
    outline: none;
}

/* Every property a global `h2` rule might set is reset explicitly. */
.qsc :where(.qsc-title) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: calc(var(--qsc-scale) * 1.0625);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qsc-fg);
}

.qsc :where(.qsc-body) {
    margin: 0;
    padding: 0;
    max-width: 68ch;
    font-size: inherit;
    line-height: 1.5;
    color: var(--qsc-fg);
}

.qsc :where(.qsc-link) {
    color: var(--qsc-accent);
    text-decoration: underline;
}

/* Stacked, so accept and decline get exactly the same width. */
.qsc :where(.qsc-actions) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(var(--qsc-gap) * 0.5);
    min-width: calc(var(--qsc-scale) * 14);
}

/* Accept and decline share this rule: their visual weight is equal by
   construction, not by convention. */
.qsc :where(.qsc-button) {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: max(44px, calc(var(--qsc-scale) * 2.75));
    margin: 0;
    padding: calc(var(--qsc-scale) * 0.5) calc(var(--qsc-scale) * 1.5);
    border: var(--qsc-border);
    border-radius: var(--qsc-radius);
    background: transparent;
    color: var(--qsc-accent);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

.qsc :where(.qsc-button:hover) {
    background: var(--qsc-accent);
    color: var(--qsc-accent-fg);
}

.qsc :where(.qsc-button:focus-visible) {
    outline: var(--qsc-focus-ring) !important;
    outline-offset: 2px;
}

/* Visually secondary, but still a full button: same hit area, same focus ring. */
.qsc :where(.qsc-button--manage) {
    border-color: transparent;
    padding-inline: calc(var(--qsc-scale) * 0.75);
    font-weight: 400;
    text-decoration: underline;
}

.qsc :where(.qsc-panel[hidden]) {
    display: none;
}

/* Screen-reader announcements: `display: none` would silence them. */
.qsc :where(.qsc-status) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (min-width: 56rem) {
    .qsc :where(.qsc-banner) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--qsc-gap) * 2);
    }

    .qsc .qsc-text {
        flex: 1;
    }

    .qsc :where(.qsc-actions) {
        flex-shrink: 0;
    }
}


.qsc :where(.qsc-text) {
    display: flex;
    flex-direction: column;
    gap: calc(var(--qsc-gap) * 0.4);
}

/* Reopen tab: discreet, but always reachable and always keyboard focusable. */
.qsc :where(.qsc-reopen) {
    position: fixed;
    left: var(--qsc-reopen-offset, calc(var(--qsc-scale) * 1.5));
    bottom: 0;
    z-index: var(--qsc-z);
    box-sizing: border-box;
    align-items: center;
    margin: 0;
    padding: calc(var(--qsc-scale) * 0.3125) calc(var(--qsc-scale) * 0.75);
    border: 0;
    border-radius: var(--qsc-radius) var(--qsc-radius) 0 0;
    background: var(--qsc-bg);
    color: var(--qsc-fg);
    font-family: var(--qsc-font);
    font-size: calc(var(--qsc-scale) * 0.75);
    line-height: 1.4;
    letter-spacing: 0.01em;
    box-shadow: 0 -1px 8px rgb(0 0 0 / 0.15);
    cursor: pointer;
}

.qsc :where(.qsc-reopen:hover) {
    opacity: 1;
}

.qsc :where(.qsc-reopen:focus-visible) {
    opacity: 1;
    outline: var(--qsc-focus-ring) !important;
    outline-offset: -2px;
}

/* Manage panel. A native <dialog> renders in the top layer, so no z-index
   has to be negotiated with the site. */
.qsc :where(.qsc-dialog) {
    box-sizing: border-box;
    width: min(calc(var(--qsc-scale) * 46), 100%);
    max-width: 100%;
    max-height: var(--qsc-max-height);
    margin: auto auto 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--qsc-radius) var(--qsc-radius) 0 0;
    background: var(--qsc-bg);
    color: var(--qsc-fg);
    font-family: var(--qsc-font);
    font-size: var(--qsc-size);
    overflow: hidden;
}

.qsc :where(.qsc-dialog)::backdrop {
    background: rgb(0 0 0 / 0.35);
}

.qsc :where(.qsc-dialog[data-backdrop='blur'])::backdrop {
    background: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(6px);
}

.qsc :where(.qsc-dialog[data-backdrop='dim'])::backdrop {
    background: rgb(0 0 0 / 0.6);
    backdrop-filter: none;
}

.qsc :where(.qsc-dialog[data-backdrop='none'])::backdrop {
    background: transparent;
    backdrop-filter: none;
}

.qsc :where(.qsc-dialog-inner) {
    display: flex;
    flex-direction: column;
    max-height: var(--qsc-max-height);
}

.qsc :where(.qsc-dialog-head) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--qsc-gap);
    padding: calc(var(--qsc-gap) * 1.25);
    border-bottom: 1px solid var(--qsc-rule);
}

.qsc :where(.qsc-dialog-title) {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: calc(var(--qsc-scale) * 1.125);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qsc-fg);
}

.qsc :where(.qsc-dialog-title:focus) {
    outline: none;
}

.qsc :where(.qsc-close) {
    appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
    width: max(44px, calc(var(--qsc-scale) * 2.75));
    height: max(44px, calc(var(--qsc-scale) * 2.75));
    margin: -0.calc(var(--qsc-scale) * 5) -0.calc(var(--qsc-scale) * 5) 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--qsc-radius);
    background: transparent;
    color: var(--qsc-fg);
    font-family: inherit;
    font-size: calc(var(--qsc-scale) * 1.5);
    line-height: 1;
    cursor: pointer;
}

.qsc :where(.qsc-close:hover) {
    background: var(--qsc-hover);
}

.qsc :where(.qsc-close:focus-visible) {
    outline: var(--qsc-focus-ring) !important;
    outline-offset: -2px;
}

.qsc :where(.qsc-categories) {
    flex: 1;
    overflow-y: auto;
    padding: calc(var(--qsc-gap) * 1.25);
    display: flex;
    flex-direction: column;
    gap: calc(var(--qsc-gap) * 1.5);
}

.qsc :where(.qsc-category) {
    display: flex;
    flex-direction: column;
    gap: calc(var(--qsc-gap) * 0.4);
}

.qsc :where(.qsc-switch) {
    display: flex;
    align-items: center;
    gap: calc(var(--qsc-scale) * 0.625);
}

.qsc :where(.qsc-checkbox) {
    flex-shrink: 0;
    width: calc(var(--qsc-scale) * 1.125);
    height: calc(var(--qsc-scale) * 1.125);
    margin: 0;
    accent-color: var(--qsc-accent);
    cursor: pointer;
}

.qsc :where(.qsc-checkbox:disabled) {
    cursor: default;
    opacity: 0.6;
}

.qsc :where(.qsc-checkbox:focus-visible) {
    outline: var(--qsc-focus-ring) !important;
    outline-offset: 2px;
}

.qsc :where(.qsc-switch-label) {
    font-weight: 600;
    cursor: pointer;
}

.qsc :where(.qsc-checkbox:disabled + .qsc-switch-label) {
    cursor: default;
}

.qsc :where(.qsc-always) {
    font-size: calc(var(--qsc-scale) * 0.75);
    opacity: 0.7;
}

.qsc :where(.qsc-category-desc) {
    margin: 0;
    padding: 0;
    max-width: 68ch;
    line-height: 1.5;
    opacity: 0.85;
}

.qsc :where(.qsc-details-toggle) {
    appearance: none;
    align-self: flex-start;
    min-height: 32px;
    margin: 0;
    padding: calc(var(--qsc-scale) * 0.25) 0;
    border: 0;
    background: transparent;
    color: var(--qsc-accent);
    font-family: inherit;
    font-size: calc(var(--qsc-scale) * 0.8125);
    text-decoration: underline;
    cursor: pointer;
}

.qsc :where(.qsc-details-toggle:focus-visible) {
    outline: var(--qsc-focus-ring) !important;
    outline-offset: 2px;
}

.qsc :where(.qsc-table) {
    width: 100%;
    border-collapse: collapse;
    font-size: calc(var(--qsc-scale) * 0.8125);
    text-align: left;
}

.qsc :where(.qsc-table th),
.qsc :where(.qsc-table td) {
    padding: calc(var(--qsc-scale) * 0.5) calc(var(--qsc-scale) * 0.75) calc(var(--qsc-scale) * 0.5) 0;
    border-bottom: 1px solid var(--qsc-rule);
    vertical-align: top;
}

.qsc :where(.qsc-table th) {
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.7;
}

.qsc :where(.qsc-table code) {
    font-family: ui-monospace, monospace;
    font-size: calc(var(--qsc-scale) * 0.75);
    word-break: break-all;
}

.qsc :where(.qsc-dialog-actions) {
    padding: calc(var(--qsc-gap) * 1.25);
    border-top: 1px solid var(--qsc-rule);
}

.qsc :where(.qsc-button--save) {
    width: 100%;
}

@media (min-width: 40rem) {
    .qsc :where(.qsc-dialog) {
        margin: auto;
        border-radius: var(--qsc-radius);
    }
}

/* A 0fr → 1fr grid is the reliable way to animate an unknown height:
   `height: auto` does not animate, and `interpolate-size` is still too new. */
.qsc :where(.qsc-details) {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
}

.qsc :where(.qsc-details > *) {
    overflow: hidden;
    min-height: 0;
}

.qsc :where(.qsc-details[data-open]) {
    grid-template-rows: 1fr;
}

/* Collapsed content stays rendered so it can animate; `inert` takes it out
   of the keyboard and screen-reader flow. */
.qsc :where(.qsc-details[inert]) {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .qsc :where(.qsc-details) {
        transition: none;
    }
}

/* The single child carries the clipping during the animation. */
.qsc :where(.qsc-details-inner) {
    overflow: hidden auto;
    min-height: 0;
}

.qsc :where(.qsc-details[data-open] .qsc-details-inner) {
    overflow-x: auto;
}

/* Animating a <dialog> needs `allow-discrete`: `display` and `overlay` are
   discrete properties. A browser ignoring these rules just shows the panel. */
.qsc :where(.qsc-dialog) {
    opacity: 0;
    translate: 0 calc(var(--qsc-scale) * 1.5);
    transition:
        opacity 0.2s ease-out,
        translate 0.2s ease-out,
        overlay 0.2s allow-discrete,
        display 0.2s allow-discrete;
}

.qsc :where(.qsc-dialog[open]) {
    opacity: 1;
    translate: 0 0;
}

@starting-style {
    .qsc :where(.qsc-dialog[open]) {
        opacity: 0;
        translate: 0 calc(var(--qsc-scale) * 1.5);
    }
}

.qsc :where(.qsc-dialog)::backdrop {
    opacity: 0;
    transition:
        opacity 0.2s ease-out,
        overlay 0.2s allow-discrete,
        display 0.2s allow-discrete;
}

.qsc :where(.qsc-dialog[open])::backdrop {
    opacity: 1;
}

@starting-style {
    .qsc :where(.qsc-dialog[open])::backdrop {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qsc :where(.qsc-dialog),
    .qsc :where(.qsc-dialog)::backdrop {
        transition: none;
        translate: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qsc :where(.qsc-root),
    .qsc :where(.qsc-reopen) {
        transition: none;
        translate: none;
    }
}

/* Video facade. Lives in the site's content, not in the component, hence no
   `.qsc` prefix. The poster is a local gradient: `i.ytimg.com` is a Google
   domain, and loading the official thumbnail would send the visitor's IP
   address before any consent. */
.qsc-video {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: #14161a;
}

.qsc-video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.qsc-video-button {
    appearance: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--qsc-scale) * 0.75);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: calc(var(--qsc-scale) * 1.5);
    border: 0;
    background: transparent;
    color: #ffffff;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.qsc-video-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qsc-video-poster--empty {
    background: radial-gradient(120% 90% at 50% 0%, #2c3138 0%, #14161a 70%);
}

/* Only rendered when a poster image is present. A real thumbnail can be bright
   anywhere in the frame, so the label needs its own contrast rather than
   relying on the photo. Denser at the centre, where the text sits. */
.qsc-video-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(100% 80% at 50% 50%, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0.28) 100%);
    transition: background 0.15s ease-out;
}

.qsc-video-button:hover .qsc-video-scrim,
.qsc-video-button:focus-visible .qsc-video-scrim {
    background: radial-gradient(100% 80% at 50% 50%, rgb(0 0 0 / 0.34) 0%, rgb(0 0 0 / 0.16) 100%);
}

.qsc-video-play {
    position: relative;
    display: block;
    opacity: 0.9;
    transition: opacity 0.15s ease-out, scale 0.15s ease-out;
}

.qsc-video-button:hover .qsc-video-play,
.qsc-video-button:focus-visible .qsc-video-play {
    opacity: 1;
    scale: 1.06;
}

.qsc-video-play-bg {
    fill: #212121;
    fill-opacity: 0.8;
}

.qsc-video-play-arrow {
    fill: #ffffff;
}

.qsc-video-button:hover .qsc-video-play-bg {
    fill: #cc0000;
    fill-opacity: 1;
}

.qsc-video-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: calc(var(--qsc-scale) * 0.25);
    max-width: 42ch;
    /* A thumbnail often carries its own titles. The shadow separates our label
       from whatever sits behind it, and buys back the contrast that lets the
       scrim stay light enough to show the image. */
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.85);
}

.qsc-video-title {
    font-size: calc(var(--qsc-scale) * 1);
    font-weight: 700;
    line-height: 1.3;
}

.qsc-video-cta {
    font-size: calc(var(--qsc-scale) * 0.9375);
    font-weight: 600;
}

.qsc-video-notice {
    font-size: calc(var(--qsc-scale) * 0.75);
    line-height: 1.4;
    opacity: 0.8;
}

.qsc-video-button:focus-visible {
    outline: var(--qsc-video-focus-ring, 2px solid #ffffff) !important;
    outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
    .qsc-video-play {
        transition: none;
    }

    .qsc-video-button:hover .qsc-video-play,
    .qsc-video-button:focus-visible .qsc-video-play {
        scale: none;
    }
}