/* The cookie banner (25 October 2026) and the cookie table of the privacy notice. Linked from the footer partial, so it
   is on every page with the site footer and nowhere else. Accept and Reject share one rule (.consent__choice) and no
   rule targets one of them: equal buttons, as the ICO asks (tests/consent.test.js). Sizes and spacing from the scale in
   styles.css; colours from its tokens. */
.consent { position: fixed; z-index: 200; right: 0; bottom: 0; left: 0; font-family: var(--font); color: var(--white); }
.consent[hidden] { display: none; }

/* Modal: the lower part of the screen, the page dimmed above it. */
.consent--modal { top: 0; display: flex; align-items: flex-end; background: rgba(5, 10, 28, 0.64); }

.consent__card {
  position: relative; width: 100%; max-height: 100vh; max-height: 100dvh; margin: 0 auto; overflow-y: auto;
  overscroll-behavior: contain; padding: 24px var(--gutter); background: var(--navy-2);
  border-top: 1px solid var(--line); box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.45); outline: none;
}
@media (min-width: 768px) {
  .consent--modal .consent__card { max-width: 720px; margin-bottom: 24px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); }
}

.consent__close {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer;
}
.consent__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.consent__close:hover { color: var(--white); }
.consent__close:focus-visible,
.consent__choice:focus-visible,
.consent__more a:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

.consent__title { margin: 0 48px 8px 0; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.consent__text,
.consent__more,
.consent__state { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.consent__more a { color: var(--sky); }
.consent__state { color: var(--white); font-weight: 600; }

/* Side by side, half and half, on every screen. */
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.consent__choice {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 16px; white-space: normal; text-align: center;
  font-size: 14px; line-height: 20px; color: var(--navy); background: var(--white);
}
.consent__choice:hover { background: #DCE8FF; }

/* Bar (privacy notice, terms): the notice stays readable above it. */
.consent--bar .consent__card { padding: 16px var(--gutter); }
@media (min-width: 768px) {
  .consent--bar .consent__card { display: grid; grid-template-columns: 1fr minmax(0, 480px); column-gap: 32px; align-items: center; padding: 24px max(var(--gutter), calc(50% - 560px)); }
  .consent--bar .consent__title,
  .consent--bar .consent__text,
  .consent--bar .consent__more,
  .consent--bar .consent__state { grid-column: 1; }
  .consent--bar .consent__actions { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}

/* While the bar shows (privacy notice, terms), the page makes room for it: a focused element is scrolled clear of the
   bar, and the footer can be scrolled above it (audit P3, WCAG 2.2 SC 2.4.11). consent.js sets the bar's height. */
html.consent-bar { scroll-padding-bottom: var(--consent-bar-space, 40vh); }
html.consent-bar body { padding-bottom: var(--consent-bar-space, 40vh); }

/* While the banner holds the page, the page doesn't scroll. */
html.consent-open,
html.consent-open body { overflow: hidden; }

/* The cookie table of the privacy notice: it scrolls on its own on a phone, the page doesn't. */
.cookie-table-wrap { margin: 16px 0 24px; overflow-x: auto; }
.cookie-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; line-height: 20px; color: var(--text-2); }
.cookie-table th,
.cookie-table td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cookie-table th { color: var(--white); font-weight: 600; }
.cookie-table code { color: var(--white); overflow-wrap: anywhere; }