/* The cookie banner. Views/Shared/Components/CookieConsent/Default.cshtml.
 *
 * Fixed to the bottom and NEVER a modal: nothing on the site waits for an
 * answer, and a banner that blocks the page until it is answered is the design
 * regulators have ruled against. Bootstrap's own surface and border colours, so
 * it follows the dark/light toggle with the rest of the page. */
.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1045; /* above page content and toasts' container, below modals (1055) */
    padding: 0 .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    pointer-events: none; /* the gutters around the card stay clickable */
}

.cookie-banner-inner {
    pointer-events: auto;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: .75rem 1rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35);
}

.cookie-banner-text {
    flex: 1 1 22rem;
    min-width: 0;
    font-size: .9rem;
}

/* Editor-typed text; line breaks they typed are kept, markup is not. */
.cookie-banner-message {
    white-space: pre-line;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

@media (max-width: 575.98px) {
    .cookie-banner-actions {
        width: 100%;
    }

    .cookie-banner-actions > * {
        flex: 1 1 auto;
    }
}

/* The secondary action - "Cookie details" / "Choose" - in the app's own dark
 * violet. site.css re-themes .btn-primary for dark mode but not the outline
 * variant, so Bootstrap's stock blue sat next to a violet "Got it". It was
 * outline-secondary before 2026-09-24, and grey on this background read as a
 * disabled button. */
[data-bs-theme="dark"] .cookie-banner .btn-outline-primary {
    --bs-btn-color: #c4b5fd;
    --bs-btn-border-color: #8b5cf6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7c3aed;
    --bs-btn-hover-border-color: #7c3aed;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6d28d9;
    --bs-btn-active-border-color: #6d28d9;
}

/* ROOM UNDER THE PAGE WHILE THE BANNER IS UP. It is fixed to the bottom and the
 * footer is in normal flow, so without this the last ~130px of every page -
 * the footer's Privacy and Cookies links included - sat under the banner at
 * the bottom of the scroll with no way to reach them. Found checking widths on
 * 2026-09-24.
 *
 * :has() so it lifts by itself the moment the banner is answered and removed.
 * 9rem covers the tallest banner (two lines of text over a row of buttons at
 * 375px); cookie-consent.js replaces it with the measured height. */
body:has(> #cookie-banner) {
    padding-bottom: 9rem;
}

/* HEADINGS PASTED INTO THE COOKIES PAGE, NO BIGGER THAN ITS OWN.
 * Views/Cookies/Index.cshtml. A Word heading arrives as h3 to h6 (h1/h2 are
 * demoted - see EventContentSanitizer and app-editor.js), and Bootstrap draws an
 * h3 at 1.75rem, bigger than the section's own h2.h5 - so a pasted heading would
 * outrank the section it sits in.
 *
 * h3 is capped at the section heading's size, not below it: when the whole
 * policy is pasted into one box, its numbered headings ("3. TYPES OF COOKIES WE
 * USE") ARE the section headings. Then each level steps down, so "A. Strictly
 * Necessary Cookies" (h4) and "First-Party Cookies" (h5) still read as levels
 * of one outline - flattening them all to one size lost it, seen in the
 * preview of legal's first policy on 2026-10-06. */
.cookie-policy-text :is(h3, h4, h5, h6) {
    margin-top: 1.25rem;
    margin-bottom: .5rem;
}

.cookie-policy-text h3 {
    font-size: 1.25rem;
}

.cookie-policy-text h4 {
    font-size: 1.05rem;
    font-weight: 600;
}

.cookie-policy-text :is(h5, h6) {
    font-size: 1rem;
    font-weight: 600;
    font-style: italic;
}