/* Cookie consent notice.
   Loaded last-ish in head.php; it styles one component and overrides nothing. */

.consent {
  position: fixed;
  /* Sits above the page and the navbar (100), below the intro wipe (9999) so
     it cannot appear over the loading overlay, and below the blend-mode
     cursor (9998), which is pointer-events:none and harmless on top. */
  z-index: 9997;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--container-pad) max(var(--container-pad), env(safe-area-inset-bottom));
  /* The bar is a bottom-anchored strip, not a full-width block: without this
     it would swallow clicks across the whole viewport width on tall screens. */
  pointer-events: none;
}

.consent__inner {
  pointer-events: auto;
  max-width: var(--container-max);
  margin: 0 auto var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  padding: 20px 24px;
  border: 1px solid var(--white-100);
  border-radius: var(--radius-lg);
  /* Opaque enough to stay readable over the photographic sections. The blur
     is decoration — note that backdrop-filter makes this element the
     containing block for any position:fixed descendant, so do not nest one. */
  background: rgba(13, 13, 13, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 48px -20px rgba(0, 0, 0, .9);
}

.consent__copy { flex: 1 1 320px; }

.consent__title {
  font-family: var(--font-body);
  font-size: var(--h6);
  font-weight: var(--w-medium);
  line-height: var(--lh-m);
  margin: 0 0 6px;
}

.consent__text {
  font-family: var(--font-secondary);
  font-size: var(--p2);
  line-height: var(--lh-xl);
  /* --text-muted, not --white-400: this is small body copy and has to clear
     4.5:1 on --black. See the note in tokens.css. */
  color: var(--text-muted);
  margin: 0;
  max-width: 62ch;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}

/* .btn is sized for hero calls to action; this is a notice, not a pitch. */
.consent__btn {
  font-size: 15px;
  padding: 11px 26px;
}

/* Entry. Kept off the initial paint so the bar cannot flash before the
   stored decision has been read. */
.consent[hidden] { display: none; }

.consent__inner {
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.consent.is-in .consent__inner {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .consent__inner { transition: none; }
}

@media (max-width: 640px) {
  .consent__inner { padding: 18px 18px 20px; }
  .consent__actions { width: 100%; }
  .consent__btn { flex: 1 1 auto; }
}

/* The footer's "Cookies" control, in the bottom row next to the copyright.
   Deliberately NOT .footer__link: that is the navigation size — Clash Display
   at --h6 with a 44px tap target — and next to two lines of --p2 muted text
   it would read as a heading. This matches its neighbours instead, and takes
   the underline only on hover, since it is the one interactive thing there. */
.footer__cookies {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color .25s, text-decoration-color .25s;
}

.footer__cookies:hover,
.footer__cookies:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .footer__cookies { transition: none; }
}

/* The policy link inside the notice. Underlined by default, unlike the rest
   of the site's links — in a block of muted grey copy an unmarked link is
   invisible, and this is the one the visitor may actually need. */
.consent__link {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--white-400);
  transition: text-decoration-color .25s;
  white-space: nowrap;
}

.consent__link:hover,
.consent__link:focus-visible { text-decoration-color: currentColor; }

/* Footer legal link. Matches the bottom row's muted copy, same as
   .footer__cookies beside it. */
.footer__legal {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: color .25s, text-decoration-color .25s;
}

.footer__legal:hover,
.footer__legal:focus-visible {
  color: var(--white);
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .consent__link,
  .footer__legal { transition: none; }
}