/*
  Site chrome: the footer and the consent card.

  These two are the only components that appear on every page — homepage, scan
  landing, privacy — so they live in one file the three of them load, rather
  than being copied into each page's own stylesheet. Everything here reads from
  the tokens in pryor-tokens.css and defines no new colour literals.

  This file is served from /assets/, which is immutable-cached, so any edit
  needs the ?v= in each page's <link> bumped.
*/

/* ---------- Footer ---------- */

/*
  The lime rule in the tokens file says acid lime belongs on dark. The footer is
  the deliberate exception: it is the page's last plane, it closes the reading
  surface with the brand's loudest colour, and the ink-on-lime pairing clears
  contrast comfortably (about 14:1). Ink, not paper, is the text here.
*/
.site-footer {
  background: var(--lime-on-dark);
  color: var(--ink);
  padding: clamp(28px, 4vw, 44px) clamp(20px, 5vw, 56px);
  border-top: 1px solid rgba(var(--ink-rgb), .14);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2.4vw, 28px);
  max-width: 1240px;
  margin-inline: auto;
}

.site-footer__brand,
.site-footer__legal {
  margin: 0;
  font: 600 12px/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-footer__legal { font-weight: 500; opacity: .72; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
}

.site-footer__links a {
  color: inherit;
  font: 500 14px/1.4 inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-micro) var(--ease);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible { border-bottom-color: currentColor; }

.site-footer__links button.site-footer__link-button {
  /* "Cookie settings" reopens the consent card, so it is a button wearing a
     link's clothes rather than a link that goes nowhere. */
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0 0 2px;
  margin: 0;
  color: inherit;
  font: 500 14px/1.4 inherit;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease);
}

.site-footer__links button.site-footer__link-button:hover,
.site-footer__links button.site-footer__link-button:focus-visible { border-bottom-color: currentColor; }

.site-footer :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 720px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ---------- Consent card ---------- */

/*
  Bottom-left, small, glass. It gates Google Analytics and Microsoft Clarity.
  In the EU it is the whole mechanism — nothing identifies a visitor before
  Accept; elsewhere measurement is already on and the same card is the
  opt-out. consent.js picks the copy; the shape is the same.
*/
.consent-card {
  position: fixed;
  inset: auto auto 20px 20px;
  z-index: 9999;
  width: min(340px, calc(100vw - 40px));
  /* Right padding leaves a lane for the close button. */
  padding: 18px 44px 16px 18px;
  border-radius: 16px;
  background: var(--glass-face-bg);
  border: 1px solid var(--glass-face-border);
  -webkit-backdrop-filter: var(--glass-face-blur);
  backdrop-filter: var(--glass-face-blur);
  box-shadow: var(--glass-face-shadow);
  color: var(--ink);
}

/* Without backdrop-filter the card would read as a pale smear over the page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .consent-card { background: rgba(var(--paper-rgb), .97); }
}

.consent-card[hidden] { display: none !important; }

.consent-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease);
}

.consent-card__close:hover { background: rgba(var(--ink-rgb), .08); color: var(--ink); }

.consent-card__title {
  margin: 0 0 6px;
  font: 600 11px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.consent-card__copy {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}

.consent-card__copy a { color: inherit; text-underline-offset: 3px; }

.consent-card__actions { display: flex; align-items: center; gap: 10px; }

.consent-card__btn {
  appearance: none;
  font: 600 13px/1 inherit;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease);
}

/* Accept and Decline are the same size and sit side by side: a one-click
   refusal, not a dark pattern with a buried opt-out. */
.consent-card__btn--accept {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}

.consent-card__btn--accept:hover { background: var(--accent); border-color: var(--accent); }

.consent-card__btn--decline {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(var(--ink-rgb), .3);
}

.consent-card__btn--decline:hover { border-color: rgba(var(--ink-rgb), .6); }

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

.consent-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .24s var(--ease), transform .24s var(--ease);
}

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

@media (prefers-reduced-motion: reduce) {
  .consent-card { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 520px) {
  .consent-card { inset: auto 12px 12px 12px; width: auto; }
}