/* Analytics consent banner.

   Its own stylesheet rather than an addition to main.css, because it has to work
   on the two standalone pages (access/, request-access/) that carry their own
   inline styles and never load main.css.

   Every colour resolves from the shared theme tokens, so the banner follows dark
   and light with no rules of its own. Where a token only exists in main.css, the
   fallback keeps the standalone pages correct rather than transparent. */

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Under the mobile header (z-index 100) and the section rail (20); the banner
     sits at the bottom so it never covers navigation in either case. */
  z-index: 90;
  box-sizing: border-box;
  background: var(--color-canvas);
  border-top: 1px solid rgba(var(--color-rule-rgb), 0.3);
  color: var(--color-text-primary);
  font-family: inherit;
}

.consent[hidden] { display: none; }

.consent__inner {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 32px);
  padding: clamp(16px, 1.6vw, 24px) clamp(20px, 3vw, 48px);
  /* Matches the editorial measure used elsewhere rather than running edge to
     edge on a wide display. */
  max-width: 1600px;
  margin: 0 auto;
}

.consent__copy {
  min-width: 0;
  /* Below this the copy and the buttons stack instead of squeezing. */
  flex: 1 1 32ch;
}

.consent__title {
  margin: 0 0 0.4em;
  font-size: clamp(11px, 0.72vw, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-primary);
}

.consent__body {
  margin: 0;
  font-size: clamp(12px, 0.82vw, 14px);
  line-height: 1.55;
  color: var(--color-text-muted, var(--color-text-primary));
  max-width: 68ch;
}

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

.consent__btn {
  -webkit-appearance: none;
  appearance: none;
  /* Square and rule-bound, like the rest of the interface -- deliberately not a
     rounded cookie pill. */
  border: 1px solid rgba(var(--color-rule-rgb), 0.3);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: clamp(11px, 0.72vw, 13px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  /* 44px minimum target on both axes. */
  min-height: 44px;
  padding: 0 clamp(14px, 1.4vw, 22px);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.24s ease, border-color 0.24s ease, background-color 0.24s ease;
}

/* The affirmative action carries the accent, but neither button is preselected
   or focused on open -- the visitor makes an explicit choice either way. */
.consent__btn--allow {
  color: var(--color-accent-soft, var(--color-accent));
  border-color: var(--color-accent-soft, var(--color-accent));
}

.consent__btn:hover {
  border-color: var(--color-accent-soft, var(--color-accent));
  color: var(--color-accent-soft, var(--color-accent));
  background-color: rgba(var(--color-text-rgb), 0.06);
}

.consent__btn:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-accent));
  outline-offset: -4px;
}

.consent__btn:active { transform: scale(0.99); }

/* Shown only when the banner is reopened from the preferences control, so the
   current setting is visible before it is changed. */
.consent__current {
  margin: 0.6em 0 0;
  font-size: clamp(10px, 0.62vw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, var(--color-text-primary));
}

.consent__btn[aria-current="true"] {
  border-color: var(--color-accent-soft, var(--color-accent));
}

/* The reopen control that lives with the site's other footer actions. */
.consent-preferences {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 44px;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--color-text-muted, var(--color-text-primary));
  cursor: pointer;
  transition: color 0.24s ease;
}

.consent-preferences:hover,
.consent-preferences:focus-visible {
  color: var(--color-accent-soft, var(--color-accent));
}

.consent-preferences:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-accent));
  outline-offset: 2px;
}

/* Phones: stack, full-width buttons. Gated on height as well as width, because a
   short landscape viewport (which is also what 200% zoom produces) has the
   horizontal room for the row layout and cannot spare the vertical space. */
/* Deliberately no max-height here. A cap clipped the second action below the
   fold, and an answer you must scroll a banner to reach is worse than a banner
   that is tall. The header and the page above it stay visible and interactive,
   so navigation is not blocked. */
@media screen and (max-width: 768px) and (min-height: 561px) {
  .consent__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 5.33333vw;
  }
  .consent__actions { width: 100%; }
  .consent__btn {
    flex: 1 1 auto;
    white-space: normal;
  }
}

/* Hard ceiling so the banner can never take over a short viewport. At 200% zoom
   the stacked layout was filling 84% of the screen, which blocks the page it is
   asking permission about. */
@media screen and (max-height: 560px) {
  .consent {
    max-height: 45vh;
    overflow-y: auto;
  }
  .consent__inner {
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 12px;
  }
  .consent__body { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .consent__btn,
  .consent-preferences { transition: none; }
  .consent__btn:active { transform: none; }
}

/* Footer legal row. Sits with the copyright in the Contact section, so it rides
   the same layout on desktop and in the stacked mobile flow rather than needing
   its own placement rules. */
.contacts__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.4em;
}
.contacts__legal a {
  color: var(--color-text-muted, var(--color-text-primary));
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.24s ease;
}
.contacts__legal a:hover,
.contacts__legal a:focus-visible { color: var(--color-accent-soft, var(--color-accent)); }
.contacts__legal a:focus-visible {
  outline: 2px solid var(--color-focus, var(--color-accent));
  outline-offset: 2px;
}
.contacts__legal span[aria-hidden] { color: var(--color-text-muted, var(--color-text-primary)); }

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