/*
 * quebecstudio/cookie-consent-kit — default styles
 *
 * Every rule is prefixed with `.qsc`, an element-internal wrapper, for a
 * specificity of 0-2-0: enough to survive framework resets such as the
 * Tailwind preflight (0-1-0), while a site using the same selector still
 * wins, since its stylesheet loads after this one. No @layer — an unlayered
 * site rule would beat a layered one whatever its specificity.
 *
 * 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 .qsc-root,
.qsc .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.

   The scheme selectors are wrapped in `:where()` so every one of these rules
   sits at 0-0-1. They win over each other by order, and a site rule on
   `qs-consent` — loaded after this sheet — wins over all of them, in every
   scheme. */
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);

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

    color-scheme: light;
}

qs-consent:where([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) {
    qs-consent:where([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 .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 .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 .qsc-banner:focus {
    outline: none;
}

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

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

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

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

/* Accept and decline share this rule: their visual weight is equal by
   construction, not by convention. */
.qsc .qsc-button {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0.5rem 1.5rem;
    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 .qsc-button:hover {
    background: var(--qsc-accent);
    color: var(--qsc-accent-fg);
}

.qsc .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 .qsc-button--manage {
    border-color: transparent;
    padding-inline: 0.75rem;
    font-weight: 400;
    text-decoration: underline;
}

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

/* Screen-reader announcements: `display: none` would silence them. */
.qsc .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 .qsc-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--qsc-gap) * 2);
    }

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

    .qsc .qsc-actions {
        flex-shrink: 0;
    }
}


.qsc .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 .qsc-reopen {
    position: fixed;
    left: var(--qsc-reopen-offset, 1.5rem);
    bottom: 0;
    z-index: var(--qsc-z);
    box-sizing: border-box;
    align-items: center;
    margin: 0;
    padding: 0.3125rem 0.75rem;
    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: 0.75rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    box-shadow: 0 -1px 8px rgb(0 0 0 / 0.15);
    cursor: pointer;
}

.qsc .qsc-reopen:hover {
    opacity: 1;
}

.qsc .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 .qsc-dialog {
    box-sizing: border-box;
    width: min(46rem, 100%);
    max-width: 100%;
    max-height: 85dvh;
    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 .qsc-dialog::backdrop {
    background: rgb(0 0 0 / 0.35);
}

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

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

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

.qsc .qsc-dialog-inner {
    display: flex;
    flex-direction: column;
    max-height: 85dvh;
}

.qsc .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 .qsc-dialog-title {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    color: var(--qsc-fg);
}

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

.qsc .qsc-close {
    appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    margin: -0.5rem -0.5rem 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--qsc-radius);
    background: transparent;
    color: var(--qsc-fg);
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

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

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

.qsc .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 .qsc-category {
    display: flex;
    flex-direction: column;
    gap: calc(var(--qsc-gap) * 0.4);
}

.qsc .qsc-switch {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

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

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

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

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

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

.qsc .qsc-always {
    font-size: 0.75rem;
    opacity: 0.7;
}

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

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

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

.qsc .qsc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    text-align: left;
}

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

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

.qsc .qsc-table code {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    word-break: break-all;
}

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

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

@media (min-width: 40rem) {
    .qsc .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 .qsc-details {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out;
}

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

.qsc .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 .qsc-details[inert] {
    pointer-events: none;
}

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

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

.qsc .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 .qsc-dialog {
    opacity: 0;
    translate: 0 1.5rem;
    transition:
        opacity 0.2s ease-out,
        translate 0.2s ease-out,
        overlay 0.2s allow-discrete,
        display 0.2s allow-discrete;
}

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

@starting-style {
    .qsc .qsc-dialog[open] {
        opacity: 0;
        translate: 0 1.5rem;
    }
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .qsc .qsc-root,
    .qsc .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: 0.75rem;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1.5rem;
    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: 0.25rem;
    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: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.qsc-video-cta {
    font-size: 0.9375rem;
    font-weight: 600;
}

.qsc-video-notice {
    font-size: 0.75rem;
    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;
    }
}