/* The third-party assistant (#partak-widget) anchors itself to the bottom edge
   of the viewport and has to stay there on every layout. Moving its host is not
   an option: a transform on the host lifts the launcher into the middle of
   short laptop viewports and turns the host into a containing block for the
   fixed elements inside its shadow DOM. So the bottom strip below belongs to
   the assistant and our own fixed UI stacks above it instead. */
:root {
    --ai-widget-clearance: 8rem;
}

/* Width the launcher keeps in the bottom-right corner. The mobile CTA bar ends
   before it instead of moving up. */
:root {
    --ai-widget-inline-clearance: 6.5rem;
}

@media (max-width: 680px) {
    :root {
        /* Phones get the compact launcher, not the wider teaser card. */
        --ai-widget-clearance: 7rem;
    }
}

.cookie-banner {
    position: fixed;
    left: auto;
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--ai-widget-clearance, 8rem));
    z-index: 60;
    width: min(480px, calc(100% - 2rem));
    border: 1px solid rgba(120, 135, 160, 0.26);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    color: #071225;
    box-shadow: 0 18px 52px rgba(7, 18, 37, 0.16);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.cookie-banner:focus-visible {
    outline: 3px solid rgba(40, 104, 232, 0.32);
    outline-offset: -3px;
}

.cookie-banner .cookie-inner,
.cookie-inner {
    width: 100%;
    margin: 0;
    padding: 0.85rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}

.cookie-copy {
    min-width: 0;
}

.cookie-copy p {
    margin: 0;
    color: #4f6078;
    font-size: 0.82rem;
    line-height: 1.42;
}

.cookie-copy .cookie-title {
    margin-bottom: 0.12rem;
    color: #071225;
    font-weight: 800;
}

.cookie-copy a {
    color: #2868e8;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-preferences {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}

.cookie-preferences[hidden],
.cookie-actions [hidden] {
    display: none !important;
}

.cookie-text-min {
    display: none;
}

.cookie-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: flex-start;
    min-width: 0;
    min-height: 0;
    padding: 0.65rem;
    border: 1px solid rgba(120, 135, 160, 0.28);
    border-radius: 8px;
    background: #fff;
}

.cookie-choice input {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.12rem;
    accent-color: #2868e8;
}

.cookie-choice strong,
.cookie-choice small {
    display: block;
}

.cookie-choice strong {
    color: #071225;
    font-size: 0.82rem;
    line-height: 1.25;
}

.cookie-choice small {
    margin-top: 0.2rem;
    color: #5f6f86;
    font-size: 0.73rem;
    line-height: 1.35;
}

.cookie-choice-disabled {
    background: #f5f8ff;
}

.cookie-banner .cookie-actions,
.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.4rem;
}

.cookie-btn {
    min-height: 44px;
    padding: 0 0.72rem;
    border-radius: 8px;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
}

.cookie-btn-primary {
    border: 1px solid #2868e8;
    background: #2868e8;
    color: #fff;
}

.cookie-btn-decision {
    border: 1px solid #2868e8;
    background: #fff;
    color: #1747ad;
}

.cookie-btn-decision:hover {
    background: #edf3ff;
}

.cookie-btn-secondary {
    border: 1px solid rgba(120, 135, 160, 0.34);
    background: #fff;
    color: #1747ad;
}

.cookie-btn:focus-visible {
    outline: 3px solid rgba(40, 104, 232, 0.28);
    outline-offset: 2px;
}

/* Reaching the settings again is a footer link, in with the legal ones. The
   wrapper only exists so the script can show and hide the pair at once, so it
   is taken out of the layout - the buttons become items of the footer's own
   link row and inherit its gap, wrapping and alignment like an <a> would. */
.cookie-persistent-controls {
    display: contents;
}

.cookie-persistent-controls[hidden],
.cookie-control-btn[hidden] {
    display: none !important;
}

/* Colour comes from whichever footer hosts it: the landing footers define
   --blue-2 for their legal links, the rest inherit their own tone. */
.cookie-control-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue-2, currentColor);
    font: inherit;
    cursor: pointer;
}

/* Same tap target the footers give their own links below this width. */
@media (max-width: 680px) {
    .cookie-control-btn {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}

.landing-footer-legal-links .cookie-control-btn {
    padding: 0.35rem 0;
    color: var(--muted-soft);
    font-size: 0.84rem;
    font-weight: 700;
}

.footer-main .cookie-control-btn {
    color: inherit;
}

/* The assistant floats over the bottom edge of the viewport, so at the end of
   the page the footer's last row - legal links, cookie settings - would sit
   under it. Reserve the strip it occupies; it also covers the mobile CTA bar,
   which is shorter. The body prefix is what outweighs the page stylesheets
   that base.html pulls in through extra_head, after this file. */
body .site-footer,
body .landing-footer {
    padding-bottom: calc(2.5rem + var(--ai-widget-clearance, 8rem));
}

.cookie-control-btn:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cookie-control-btn:focus-visible {
    outline: 3px solid rgba(40, 104, 232, 0.28);
    outline-offset: 2px;
}

.cookie-consent-status {
    position: fixed;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Phones read top to bottom: notice, page, assistant. The banner leaves the
   overlay layer entirely and becomes the first block of the document, so it
   pushes the page down instead of covering it, scrolls away with the header,
   and never competes with the assistant for the bottom edge. The markup sits
   at the top of <body> for exactly this reason. */
@media (max-width: 760px) {
    .cookie-banner {
        position: static;
        width: 100%;
        border: 0;
        border-bottom: 1px solid rgba(120, 135, 160, 0.2);
        border-radius: 0;
        background: #eef4ff;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .cookie-banner .cookie-inner {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        width: min(100%, 34rem);
        margin: 0 auto;
        padding: calc(0.5rem + env(safe-area-inset-top)) 0.75rem 0.55rem;
    }

    /* Kept for aria-labelledby, which reads hidden nodes too. */
    .cookie-copy .cookie-title {
        display: none;
    }

    .cookie-copy p {
        font-size: 0.72rem;
        line-height: 1.35;
        text-align: center;
    }

    .cookie-text-full {
        display: none;
    }

    .cookie-text-min {
        display: inline;
    }

    .cookie-preferences {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .cookie-banner .cookie-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .cookie-btn {
        width: 100%;
        padding: 0 0.65rem;
    }
}