/* Studio DT — cookie consent banner. Frosted card identical to the landing modal.
   Non-blocking: the overlay passes pointer events through; only the card is interactive.
   Sits at --z-modal; rendered last in wp_footer so it stacks above the filter popup. */

.consent {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;            /* page stays usable; no dim overlay */
}
.consent[hidden] { display: none; }
.consent:focus { outline: none; }   /* container is a focus sink on open; ring belongs on controls */
.consent__btn:focus-visible,
.consent__links a:focus-visible {
    outline: var(--border-width-default) solid var(--color-text-default);
    outline-offset: var(--focus-outline-offset);
}

/* Card metrics mirror the landing splash card exactly (--frost-* in tokens.css):
   square corners, landing padding, 1.45 leading, headline/body/footer type sizes. */
.consent__card {
    pointer-events: auto;
    position: relative;
    top: 12%;                        /* sit lower-center, per the design */
    width: clamp(var(--frost-card-min), 60%, 42rem);
    background: var(--frost-bg);
    -webkit-backdrop-filter: var(--frost-blur);
            backdrop-filter: var(--frost-blur);
    border-radius: var(--frost-radius);
    box-shadow: 0 1px 1px rgba(20, 20, 30, .02), 0 14px 40px rgba(20, 20, 30, .04),
                0 40px 100px rgba(20, 20, 30, .04), 0 0 80px rgba(244, 66, 79, .06);
    padding: calc(var(--frost-pad) + 12px);   /* +12 on every edge */
    line-height: var(--frost-leading);
    will-change: transform;          /* parallax (consent.js) translates the card */
}

.consent__title {
    margin: 0 0 var(--space-xs);   /* +4px above the body */
    color: var(--color-text-default);
    font-family: var(--font-family-sans);
    font-size: 24px;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
}
.consent__body {
    margin: 0 0 var(--space-lg);   /* = gap above the links (kept equal to the gap below) */
    color: var(--color-text-default);
    font-family: var(--font-family-sans);
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: var(--font-weight-medium);
}
.consent__links {
    display: flex;
    gap: var(--space-lg);
    margin: 0 0 var(--space-lg);   /* gap below the links, = gap above */
}
.consent__links a {
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    text-decoration-thickness: 1.1px;   /* hover underline 0.2 thinner than the nav (1.3) */
}

.consent__actions {
    display: flex;
    gap: var(--space-xs);
}
.consent__btn {
    flex: 1;
    border-radius: var(--radius-pill);
    cursor: pointer;
    /* same box as the footer social pills (→ same 30px height) */
    padding: 6px var(--space-sm);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}
.consent__btn--decline {
    background: transparent;
    border: var(--border-width-hairline) solid var(--color-border-default);
    color: var(--color-text-default);
}
.consent__btn--accept {
    background: var(--palette-green-500);
    border: var(--border-width-hairline) solid var(--palette-green-500);
    color: var(--color-text-on-brand);
}

/* Footer reopen trigger (JS-injected into .site-footer__bottom). */
.consent-reopen {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Full-width bottom-sheet only when the hero logo goes vertical (portrait), matching it. */
@media (orientation: portrait) {
    .consent { align-items: flex-end; }
    .consent__card {
        top: 0;
        width: 100%;
        border-radius: var(--frost-radius);
        transform: none;             /* no parallax on the touch bottom-sheet */
    }
    .consent__actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
    .consent__card { transition: none; }
}