/* ===== Cookie consent banner =====
   Loaded by every page. The class prefix is avc- so nothing here can collide with
   the per-page inline styles, which are large and all differently named.

   Colours come from each page's own tokens where they exist, with literal
   fallbacks, so this file works whether or not the page that loads it defines
   them and whichever way round the stylesheets end up in the cascade. */

.avc-banner {
    position: fixed;
    left: 50%;
    bottom: clamp(12px, 2.4vh, 26px);
    transform: translateX(-50%) translateY(14px);
    z-index: 1000;
    width: min(1100px, calc(100vw - 24px));
    display: none;
    gap: clamp(16px, 2.4vw, 34px);
    align-items: center;
    padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
    background: var(--surface-dark, #ffffff);
    border: 1px solid var(--border-dark, #e1e4e8);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(6, 20, 24, 0.22);
    color: var(--text-on-dark, #0d1117);
    font-family: var(--font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
    opacity: 0;
    transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.avc-banner.avc-shown  { display: flex; }
.avc-banner.avc-in     { opacity: 1; transform: translateX(-50%) translateY(0); }

.avc-copy { flex: 1 1 auto; min-width: 0; }
.avc-title {
    font-family: var(--font-display, "Montserrat", sans-serif);
    font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
    margin: 0 0 6px; color: var(--text-on-dark, #0d1117);
}
.avc-text {
    margin: 0; font-size: 0.9rem; line-height: 1.55;
    color: var(--text-muted-dark, #57606a);
}
.avc-text a { color: var(--blue, #2176c5); text-decoration: underline; text-underline-offset: 2px; }
.avc-text a:hover { opacity: 0.82; }

/* Both buttons are the same shape, the same size and the same typographic weight.
   A reject that is quieter than accept is the thing regulators pull people up on,
   so the only difference between them is the fill. */
.avc-actions { flex: 0 0 auto; display: flex; gap: 10px; }
.avc-btn {
    appearance: none; border: 0; cursor: pointer;
    font-family: var(--font-display, "Montserrat", sans-serif);
    font-weight: 600; font-size: 0.92rem; line-height: 1;
    padding: 13px 22px; border-radius: 10px; white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.avc-btn:hover  { opacity: 0.9; transform: translateY(-1px); }
.avc-btn:active { transform: none; }
.avc-btn:focus-visible { outline: 2px solid var(--blue, #2176c5); outline-offset: 3px; }
.avc-accept { background: var(--blue, #2176c5); color: #ffffff; }
.avc-reject { background: #4a545e; color: #ffffff; }

/* The way back in, for pages that have no footer to put the link in. It removes
   itself when the page provides its own [data-consent-open] control. */
.avc-pill {
    position: fixed; left: 16px; bottom: 16px; z-index: 999;
    display: none; align-items: center; gap: 7px;
    padding: 9px 14px; border-radius: 999px; cursor: pointer;
    background: var(--surface-dark, #ffffff);
    border: 1px solid var(--border-dark, #e1e4e8);
    color: var(--text-muted-dark, #57606a);
    font-family: var(--font-body, "Inter", sans-serif); font-size: 0.78rem; font-weight: 500;
    box-shadow: 0 6px 20px rgba(6, 20, 24, 0.14);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.avc-pill.avc-shown { display: inline-flex; }
.avc-pill:hover { color: var(--blue, #2176c5); border-color: var(--blue, #2176c5); }
.avc-pill:focus-visible { outline: 2px solid var(--blue, #2176c5); outline-offset: 3px; }
.avc-pill svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }

@media (max-width: 760px) {
    .avc-banner { flex-direction: column; align-items: stretch; gap: 16px;
                  bottom: 10px; width: calc(100vw - 20px); border-radius: 14px; }
    .avc-actions { flex-direction: column; }
    .avc-btn { width: 100%; padding: 14px 20px; }
    /* the pill would sit on top of the banner on a narrow screen */
    .avc-pill { left: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .avc-banner { transition: none; transform: translateX(-50%); opacity: 1; }
    .avc-banner.avc-in { transform: translateX(-50%); }
    .avc-btn:hover { transform: none; }
}