/* Analytics consent banner (#ee-consent in layouts/base.njk), shown by
   assets/js/ee-analytics.js to visitors from the EU, the EEA, the UK and
   Switzerland. It sits in the page flow above the navigation, not fixed to
   the window, so it never covers the element that has focus (WCAG 2.4.11).
   Loaded on every page: whether it shows is only known in the browser. */

.ee-consent {
    background: var(--bg-light-gray);
    border-bottom: 2px solid var(--ee-blue);
    color: var(--ee-black);
}

/* display is set below, so hidden needs its own rule. */
.ee-consent[hidden],
.ee-consent [hidden] {
    display: none;
}

/* On the header's side inset (ee-nav.css), so the text lines up with the
   logo below, as the footer does. */
.ee-consent-inner {
    padding: 20px var(--ee-header-inset, 20px) 24px;
}

.ee-consent .ee-consent-title {
    margin: 0 0 8px;
    font-family: 'Lato', sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ee-black);
}

/* Focus starts here on load while the banner asks; as with the page's h1,
   the outline shows only after a key press (ee-analytics.js). */
.ee-consent .ee-consent-title.ee-quiet-focus:focus-visible {
    outline: none;
}

.ee-consent p {
    max-width: 75ch;
    margin: 0 0 16px;
    font-size: 1.125rem;
    line-height: 1.5;
}

.ee-consent a {
    color: var(--ee-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ee-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

.ee-consent .ee-consent-status {
    margin: 0;
    font-weight: 700;
}