/* Cookie consent banner (design: .claude/design/consent-banner.md).
   One stylesheet for both kinds of page: ConsentBanner.astro imports it, and
   integrations/legacy-consent.mjs ships it as /consent.css for the hand-written
   pages in /root, which have no Tailwind. So: no utilities, and every site token
   is read with its value as the fallback, which only those pages use.

   Those pages also bring their own global rules (Bootstrap and a theme: p at
   13px / #444 / opacity .8, yellow links, section padding and stripes, button
   focus outlines). So every element here sets its own colour, opacity, font,
   spacing, decoration and background explicitly, with selectors of at least
   one class plus one element/pseudo-class, rather than inheriting anything. */

.consent {
  --consent-night: var(--color-night, #020925);
  --consent-ice: var(--color-ice, #eef3fb);
  --consent-ink: var(--color-ink, #06112f);
  --consent-cyan: var(--color-cyan, #19e8ff);
  --consent-white: #fff;
  --consent-text: color-mix(in srgb, var(--consent-ice) 80%, transparent);
  --consent-ring: var(--gradient-ring, linear-gradient(120deg, #0241fd 0%, #0196fe 50%, #18f2fe 100%));
  --consent-font: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  --consent-ease: var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  /* Same as .container-x padding, so the card lines up with the content column. */
  --consent-inset: clamp(1rem, 0.5rem + 2.5vw, 3rem);

  position: fixed;
  z-index: 40;
  top: auto;
  left: 0.75rem;
  right: 0.75rem;
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  /* Compact: phones keep the banner around 95px so the hero stays in view. */
  gap: 0.25rem;
  box-sizing: border-box;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.3125rem 0.75rem 0.4375rem;
  border: 1.5px solid transparent;
  border-radius: 1.25rem;
  /* Night fill inside the logo-ring gradient border (as .ring-brand). */
  background:
    linear-gradient(var(--consent-night), var(--consent-night)) padding-box,
    var(--consent-ring) border-box;
  box-shadow: 0 24px 60px -24px rgb(2 65 253 / 0.55), 0 2px 8px rgb(2 9 37 / 0.25);
  color: var(--consent-text);
  font: 400 0.8125rem/1.3 var(--consent-font);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-shadow: none;
  /* Entrance start state; consent.ts moves it to data-state="open". */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--consent-ease), transform 500ms var(--consent-ease);
}
/* Beats host rules such as `section:nth-child(odd) { background-color }`. */
.consent[data-consent-banner] { background-color: var(--consent-night); }
.consent[hidden] { display: none; }
.consent[data-state='open'] { opacity: 1; transform: none; }
.consent[data-state='closing'] {
  opacity: 0;
  transform: translateY(12px);
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
/* The card takes focus when re-opened from "Cookie settings"; no ring on the card itself. */
.consent:focus { outline: none; }

.consent .consent-text {
  flex: 0 1 auto;
  margin: 0;
  padding: 0;
  color: var(--consent-text);
  opacity: 1;
  font: 400 0.8125rem/1.3 var(--consent-font);
  letter-spacing: normal;
  text-align: left;
  background: none;
}
/* Short wording on phones and on short windows (laptops ~720-800px tall), where every pixel of
   the first screen counts; full wording otherwise. consent.ts and the legacy pages need no change. */
.consent .consent-text-short { display: none; }
@media (max-width: 767.98px), (max-height: 800px) {
  .consent .consent-text-full { display: none; }
  .consent .consent-text-short { display: inline; }
}
.consent .consent-text strong {
  margin: 0;
  padding: 0;
  color: var(--consent-white);
  opacity: 1;
  font: inherit;
  font-weight: 500;
  background: none;
}
.consent .consent-text a,
.consent .consent-text a:hover,
.consent .consent-text a:focus {
  /* A 24px-high target (WCAG 2.5.8) that takes no extra line height: the padding is cancelled by the negative margin. */
  display: inline-block;
  box-sizing: border-box;
  min-height: 24px;
  margin: -0.3125rem 0;
  padding: 0.3125rem 0;
  color: var(--consent-white);
  opacity: 1;
  font: inherit;
  background: none;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 4px;
}
.consent .consent-text a { text-decoration-color: color-mix(in srgb, var(--consent-cyan) 50%, transparent); transition: text-decoration-color 200ms; }
.consent .consent-text a:hover { text-decoration-color: var(--consent-cyan); }

/* Equal weight on purpose: same style, same size (AEPD / EDPB guidance). */
.consent .consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  background: none;
  opacity: 1;
}
.consent .consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  margin: 0;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--consent-white) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--consent-white);
  color: var(--consent-white);
  opacity: 1;
  font: 550 0.9rem/1.2 var(--consent-font);
  letter-spacing: normal;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
  appearance: none;
  cursor: pointer;
  transition: transform 250ms var(--consent-ease), background-color 200ms, color 200ms, box-shadow 250ms;
}
.consent .consent-btn:hover {
  background: var(--consent-white);
  color: var(--consent-ink);
  box-shadow: inset 0 0 0 1.5px var(--consent-white);
}
.consent .consent-btn:active { transform: scale(0.97); }

/* Keyboard focus only; host `button:focus` outlines must not show on click. */
.consent :focus:not(:focus-visible) { outline: none; }
.consent :focus-visible {
  outline: 2px solid var(--consent-cyan);
  outline-offset: 3px;
}
.consent .consent-text a:focus-visible { border-radius: 4px; }

/* Desktop: a narrow card in the bottom-left corner, text above the two buttons,
   so it stays clear of the hero headline, intro text and buttons. */
@media (min-width: 768px) {
  .consent {
    left: var(--consent-inset);
    right: auto;
    bottom: 1.5rem;
    width: min(26rem, 100vw - 2 * var(--consent-inset));
    gap: 0.75rem;
    padding: 0.875rem 1rem 1rem;
    font-size: 0.875rem;
    line-height: 1.4;
  }
  .consent .consent-text { font-size: 0.875rem; line-height: 1.4; }
  .consent .consent-btn { min-height: 40px; }
}
/* Touch tablets and phones: 44px targets (WCAG 2.5.5 / platform guidance). */
@media (pointer: coarse) {
  .consent .consent-btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .consent,
  .consent[data-state] { transform: none; transition: none; }
}

/* "Cookie settings" at the end of the legacy pages in /root (the Astro pages
   have it in the site footer). Those pages are dark text on white. */
.consent-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  box-sizing: border-box;
  margin: 2.5rem 0 1rem;
  /* Side inset keeps text and focus ring off the screen edge on pages whose body
     has no margin (it matches Bootstrap's 15px gutter there); a fixed 1rem rather
     than the site's container clamp, so pages with body padding don't double up. */
  padding: 1rem 1rem 0;
  border: 0;
  border-top: 1px solid var(--color-line, rgb(6 17 47 / 0.12));
  background: none;
  color: var(--color-ink-2, #4a5775);
  opacity: 1;
  font: 400 0.875rem/1.5 var(--font-sans, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: normal;
  text-align: left;
}
.consent-settings button,
.consent-settings a,
.consent-settings a:hover,
.consent-settings a:focus {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 0.25rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-ink-2, #4a5775);
  opacity: 1;
  font: inherit;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: none;
  appearance: none;
  cursor: pointer;
}
.consent-settings button:hover,
.consent-settings a:hover { color: var(--color-ink, #06112f); }
/* When focus scrolls a sideways-overflowing page (consent.ts), leave room for the 5px ring. */
.consent-settings button,
.consent-settings a { scroll-margin-inline: 0.5rem; }
.consent-settings :focus:not(:focus-visible) { outline: none; }
.consent-settings :focus-visible {
  outline: 2px solid var(--color-blue, #0b5cff);
  outline-offset: 3px;
  border-radius: 4px;
}

/* While the banner is up, keep the end of the page and focused elements clear
   of it (WCAG 2.4.11). consent.ts measures the card into --consent-space.
   Astro pages pad <body>. Legacy pages pad their "Cookie settings" block instead,
   the last thing on the page: some fix <body> at 100% height, which makes body
   padding add no scroll room. */
html[data-consent-visible] { scroll-padding-bottom: calc(var(--consent-space, 0px) + 1rem); }
html[data-consent-visible] body { padding-bottom: var(--consent-space, 0px); }
html[data-consent-visible] body:has(.consent-settings) { padding-bottom: 0; }
/* + 1rem, as scroll-padding above, so the focus ring clears the banner too. */
html[data-consent-visible] .consent-settings { padding-bottom: calc(var(--consent-space, 0px) + 1rem); }