/*
 * The consent layer's own styles. Every selector starts with .ee-consent, so
 * nothing here can reach an element outside the dialog, and every colour, size
 * and tempo is a --ee-consent-* custom property with a neutral fallback: a theme
 * sets the properties (eenvoud.css does, from its presets) and never edits this
 * file. Layout follows the banner this replaces: a full-width sheet at the foot
 * of the viewport, title, one paragraph, the purposes as a grid of cards when
 * opened, the actions in a row that keeps its place while the cards scroll.
 */

/* --- The sheet ------------------------------------------------------------ */

/* A non-modal <dialog> is positioned like any element, so the fixed box is ours
   to declare. No shadow: the sheet is separated from the page by its top
   hairline, which is how this site draws every box. */
.ee-consent {
    box-sizing: border-box;
    position: fixed;
    inset: auto 0 0;
    z-index: var(--ee-consent-z, 1000);
    width: auto;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid var(--ee-consent-edge, var(--ee-consent-border, #d9d9d9));
    background: var(--ee-consent-bg, #fff);
    color: var(--ee-consent-fg, #111);
    font-family: var(--ee-consent-font, inherit);
    font-size: var(--ee-consent-size, 16px);
    line-height: 1.6;
    overflow: hidden;
}

.ee-consent[open] {
    display: flex;
    flex-direction: column;
}

.ee-consent-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100dvh;
    width: 100%;
    /* The content width plus both gutters, so the text lines up with a page
       grid of the same width behind it. */
    max-width: calc(var(--ee-consent-max-width, 1360px) + 2 * var(--ee-consent-gutter, 24px));
    margin: 0 auto;
    padding: 24px var(--ee-consent-gutter, 24px);
}

/* The one scroller: title, paragraph and cards. The actions stay below it. */
.ee-consent-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* The same title as the site's other floating layer (.ee-modal-title): the
   display face at its regular weight. A bold serif is a face this site never
   uses; the theme maps the family and size through the tokens. */
.ee-consent-title {
    margin: 0 0 8px;
    font-family: var(--ee-consent-font-display, inherit);
    font-size: var(--ee-consent-size-xl, 24px);
    font-weight: 400;
    line-height: 1.12;
}

/* The title is a focus target on open and needs no ring of its own: the reader
   hears it, and the first Tab lands on the policy link. Both halves of a
   theme's ring are cleared, the outline and any halo drawn as a shadow. */
.ee-consent-title:focus {
    outline: none;
    box-shadow: none;
}

.ee-consent-intro,
.ee-consent-more {
    max-width: var(--ee-consent-measure, 760px);
    margin: 0;
    color: var(--ee-consent-muted, #555);
}

/* The way to the policy, on a line of its own under the paragraph. */
.ee-consent-more {
    margin-top: 8px;
}

/* The prose link recipe: the text colour of its line, a 1px accent rule under
   it; on hover and focus the text goes to the action colour and the rule
   thickens to 2px in that same colour, so the state change is both a colour
   and a shape. */
.ee-consent-more a {
    color: var(--ee-consent-fg, #111);
    text-decoration-line: underline;
    text-decoration-color: var(--ee-consent-accent, currentcolor);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition:
        color var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out),
        text-decoration-color var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out);
}

.ee-consent-more a:hover,
.ee-consent-more a:focus-visible {
    color: var(--ee-consent-action, #111);
    text-decoration-color: currentcolor;
    text-decoration-thickness: 2px;
}

/* --- Layer two: the purposes ----------------------------------------------- */

.ee-consent-settings {
    margin-top: 24px;
}

/* A kicker, not a heading in the display face: the theme sets its heading
   font on every h3, and a serif in small capitals reads as a mistake here.
   Same recipe as the site's kickers: regular weight, wide tracking, a short
   accent dash in front. */
.ee-consent-settings-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 12px;
    font-family: var(--ee-consent-font, inherit);
    font-size: var(--ee-consent-size-xs, 13px);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ee-consent-muted-label, #555);
}

.ee-consent-settings-title::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--ee-consent-accent, currentcolor);
}

.ee-consent-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ee-consent-cat {
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid var(--ee-consent-border, #d9d9d9);
    border-radius: var(--ee-consent-radius, 0);
    background: var(--ee-consent-surface, #f6f6f6);
}

/* As tall as the switch row, so the titles of a badge card and a switch card
   sit on one line. */
.ee-consent-cat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

.ee-consent-cat-title {
    font-weight: 600;
}

.ee-consent-cat-desc {
    margin: 8px 0 0;
    font-size: var(--ee-consent-size-xs, 13px);
    color: var(--ee-consent-muted, #555);
}

.ee-consent-badge {
    flex: none;
    padding: 2px 8px;
    /* The badge takes the label colour and a rule in the accent at half
       strength, the same pair as the kicker. */
    border: 1px solid color-mix(in srgb, var(--ee-consent-accent, currentcolor) 55%, transparent);
    border-radius: var(--ee-consent-radius, 0);
    font-size: var(--ee-consent-size-xs, 13px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ee-consent-muted-label, #555);
}

/* --- The switch ------------------------------------------------------------- */

/* A real checkbox, hidden the accessible way, with a drawn box as its face:
   this site draws boxes with hairlines, and a sliding knob has no metaphor once
   its corners are square. The label is the hit area and stays 44px tall
   whatever the box measures. The state word beside the box says on or off in
   words, so the state is never only a colour. */
.ee-consent-switch {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
}

.ee-consent-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ee-consent-switch-track {
    position: relative;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 1px solid var(--ee-consent-fg, #111);
    border-radius: var(--ee-consent-switch-radius, 0);
    background: transparent;
    transition:
        background-color var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out),
        border-color var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out);
}

/* The check mark: two borders of a small box turned 45 degrees. */
.ee-consent-switch-track::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid var(--ee-consent-on-action, var(--ee-consent-bg, #fff));
    border-width: 0 2px 2px 0;
    rotate: 45deg;
    opacity: 0;
    transition: opacity var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out);
}

.ee-consent-switch input:checked + .ee-consent-switch-track {
    border-color: var(--ee-consent-action, #111);
    background: var(--ee-consent-action, #111);
}

.ee-consent-switch input:checked + .ee-consent-switch-track::before {
    opacity: 1;
}

/* The same ring the theme draws: an accent line with a halo in the page colour,
   so it reads on a light and on a dark sheet alike. */
.ee-consent-switch input:focus-visible + .ee-consent-switch-track {
    outline: 2px solid var(--ee-consent-focus, var(--ee-consent-accent, #111));
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--ee-consent-focus-halo, var(--ee-consent-bg, #fff));
}

/* Hover adds form as well as a hue: the border takes the action colour and an
   unchecked box gains the warm fill; the box stays legible in both states. */
.ee-consent-switch:hover .ee-consent-switch-track {
    border-color: var(--ee-consent-action, #111);
}

.ee-consent-switch:hover input:not(:checked) + .ee-consent-switch-track {
    background: var(--ee-consent-hover, #eee);
}

.ee-consent-switch-state {
    min-width: 2.4em;
    font-size: var(--ee-consent-size-sm, 14px);
}

.ee-consent-switch-on,
.ee-consent-switch input:checked ~ .ee-consent-switch-state .ee-consent-switch-off {
    display: none;
}

.ee-consent-switch input:checked ~ .ee-consent-switch-state .ee-consent-switch-on {
    display: inline;
}

/* --- The actions ------------------------------------------------------------ */

/* Buttons first, then the arrow link at the gap the site keeps between a button
   and its neighbouring link. The hairline above appears with layer two: the
   cards scroll under it, so the actions read as pinned rather than as cut. */
.ee-consent-foot {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 24px;
    padding-top: 16px;
    border-top: 1px solid transparent;
}

.ee-consent.is-expanded .ee-consent-foot {
    border-top-color: var(--ee-consent-border, #d9d9d9);
}

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

/* The display rules below would outrank the user agent's [hidden], so the
   attribute is restated once for everything in the layer: the save button until
   layer two opens, layer two itself until it is asked for. */
.ee-consent [hidden] {
    display: none !important;
}

/* Accept, refuse and save are the same button: same height, same outline, same
   hover. The equal weight is the point (spec: cookie-consent). */
.ee-consent-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12.5em;
    min-height: var(--ee-consent-button-height, 48px);
    padding: 0 var(--ee-consent-button-pad, 24px);
    border: 1px solid var(--ee-consent-fg, #111);
    border-radius: var(--ee-consent-radius, 0);
    background: transparent;
    color: var(--ee-consent-fg, #111);
    font: inherit;
    font-size: var(--ee-consent-button-size, inherit);
    line-height: 1.4;
    cursor: pointer;
    transition:
        background-color 0.35s var(--ee-consent-easing, ease-out),
        border-color 0.35s var(--ee-consent-easing, ease-out),
        color 0.35s var(--ee-consent-easing, ease-out);
}

.ee-consent-button:hover,
.ee-consent-button:focus-visible {
    border-color: var(--ee-consent-action, #111);
    background: var(--ee-consent-action, #111);
    color: var(--ee-consent-on-action, var(--ee-consent-bg, #fff));
}

/* The way into layer two is the site's arrow link, not a fourth button: a 1px
   accent rule under label and arrow together; on hover and focus the rule
   thickens to 2px in the text colour and grows the 6px the arrow steps, so it
   ends under the arrow's point in both states. No rotation when open: the
   swapped label and aria-expanded carry the state. */
.ee-consent-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ee-consent-fg, #111);
    font: inherit;
    font-size: var(--ee-consent-size-sm, 14px);
    cursor: pointer;
    transition: color var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out);
}

/* The rule under the arrow link is the same 1px accent as under the prose
   link and grows to 2px in the text colour on hover, plus the 6px the arrow
   steps (motion block below). */

.ee-consent-toggle::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    height: 1px;
    background: var(--ee-consent-accent, currentcolor);
    transition:
        height var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out),
        right var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out),
        background-color var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out);
}

.ee-consent-toggle:hover,
.ee-consent-toggle:focus-visible {
    color: var(--ee-consent-action, #111);
}

.ee-consent-toggle:hover::before,
.ee-consent-toggle:focus-visible::before {
    height: 2px;
    background: currentcolor;
}

.ee-consent-arrow {
    display: inline-block;
    transition: translate var(--ee-consent-duration, 180ms) var(--ee-consent-easing, ease-out);
}

/* "Hide" is not a way forward, so the arrow goes with the label swap. */
.ee-consent-toggle[aria-expanded="true"] .ee-consent-arrow {
    display: none;
}

/* --- Small screens ---------------------------------------------------------- */

@media (max-width: 640px) {
    .ee-consent-panel {
        padding: 16px var(--ee-consent-gutter-small, 16px);
    }

    .ee-consent-list {
        grid-template-columns: 1fr;
    }

    .ee-consent-actions,
    .ee-consent-button {
        width: 100%;
    }

    .ee-consent-foot {
        justify-content: flex-start;
    }
}

/* --- Motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
    .ee-consent[open] {
        animation: ee-consent-in var(--ee-consent-duration-reveal, 600ms) var(--ee-consent-easing, ease-out);
    }

    .ee-consent-toggle:hover .ee-consent-arrow,
    .ee-consent-toggle:focus-visible .ee-consent-arrow {
        translate: 6px 0;
    }

    .ee-consent-toggle:hover::before,
    .ee-consent-toggle:focus-visible::before {
        right: -6px;
    }
}

@keyframes ee-consent-in {
    from {
        translate: 0 16px;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ee-consent-switch-track,
    .ee-consent-switch-track::before,
    .ee-consent-button,
    .ee-consent-toggle,
    .ee-consent-toggle::before,
    .ee-consent-arrow {
        transition: none;
    }
}