/*
 * Tempo pra Rezar — the cookie banner and the footer's "Preferências de cookies".
 *
 * Paired with /assets/consent.js, which builds the banner only when a tag ID is
 * configured, or for a ?cookies=preview. Every value is a site.css token; as
 * there, a raw colour, radius or duration here is a bug.
 *
 * The banner is a labelled region, not a dialog. In the DOM it follows the skip
 * link, so the keyboard meets it early; on screen it is the last thing in the
 * page (order) and sticks to the bottom of the viewport while there is more page
 * below, so it can cover what sits behind it until the visitor chooses. While it
 * shows, a scroll margin keeps a keyboard focus stop above the card (WCAG 2.2
 * 2.4.11), and the end of the page always scrolls clear of it. The skip link
 * stays above it.
 *   <section class="consent" id="consent" aria-labelledby="consent-title" tabindex="-1">
 *     <div class="consent-inner">
 *       <div class="consent-copy">
 *         <p class="consent-title" id="consent-title">…</p>
 *         <p class="consent-text">… <a href="/privacidade/#cookies">…</a></p>
 *         <p class="consent-status" hidden>…</p>
 *       </div>
 *       <div class="consent-actions">
 *         <button class="btn btn-tonal" type="button">Recusar</button>
 *         <button class="btn btn-tonal" type="button">Aceitar</button>
 *       </div>
 *     </div>
 *   </section>
 * Footer: <li><button class="consent-prefs" type="button" hidden>Preferências de cookies</button></li>
 */

/* hidden has to beat the display these pieces set. */
.consent[hidden],
.consent-status[hidden],
.consent-prefs[hidden] {
  display: none;
}

/* While its button is hidden, the footer list item takes no place in the row either. */
.footer-links li:has(> .consent-prefs[hidden]) {
  display: none;
}

/* ── Banner ──────────────────────────────────────────────────────────────── */
.consent {
  position: sticky;
  bottom: 0;
  z-index: 50;
  order: 1;
  padding: var(--s-md) var(--gutter);
  padding-bottom: max(var(--s-md), env(safe-area-inset-bottom));
  /* The strip around the card lets taps through to the page. */
  pointer-events: none;
}

.consent:focus,
.consent:focus-visible {
  outline: none;
}

.consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-lg) var(--s-xxl);
  max-width: var(--content);
  margin-inline: auto;
  padding: var(--s-lg) var(--s-xl);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--surface-elevated);
  color: var(--text);
  box-shadow: var(--shadow-floating);
  pointer-events: auto;
}

/* Reopened from the footer by keyboard, the card shows where focus went. */
.consent:focus-visible .consent-inner {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* --ink, the darker accent step, is the ring on the elevated card. */
.consent-inner :focus-visible {
  outline-color: var(--ink);
}

/* The copy takes the row; the buttons keep their size beside it, or fill a row of their own. */
.consent-copy {
  flex: 999 1 26rem;
  min-width: 0;
}

.consent-title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
}

.consent-text,
.consent-status {
  margin-top: var(--s-xs);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.consent-text {
  color: var(--text-muted);
}

.consent-text a {
  font-weight: 800;
  white-space: nowrap;
}

.consent-status {
  font-weight: 800;
}

.consent-actions {
  display: flex;
  flex: 1 0 auto;
  flex-wrap: wrap;
  gap: var(--s-sm);
}

.consent-actions .btn {
  flex: 1 1 0;
  min-width: 8rem;
}

/* On a phone the card packs tighter, so it covers less of a small screen. The buttons keep 48 px. */
@media (max-width: 519px) {
  .consent {
    padding-top: var(--s-sm);
    padding-bottom: max(var(--s-sm), env(safe-area-inset-bottom));
  }

  .consent-inner {
    gap: var(--s-md);
    padding: var(--s-md) var(--s-lg);
  }

  .consent-text,
  .consent-status {
    font-size: 0.875rem;
  }
}

/*
 * While the banner shows, a focused link or button outside it scrolls into view above
 * the card, never under it (WCAG 2.2 SC 2.4.11). This is a scroll margin on the page,
 * not scroll-padding on html: with padding, focusing the banner's own buttons would
 * scroll the page away under the sticky card. Each clearance is the tallest card in its
 * width range, reopened with the current-choice line (at 320, 520 and 880 px), plus the
 * strip below the card and a little air. Re-measure if the banner copy grows.
 */
html:has(.consent:not([hidden])) {
  --consent-clearance: calc(17rem + max(var(--s-sm), env(safe-area-inset-bottom)));
}

@media (min-width: 520px) {
  html:has(.consent:not([hidden])) {
    --consent-clearance: calc(15.5rem + max(var(--s-md), env(safe-area-inset-bottom)));
  }
}

@media (min-width: 880px) {
  html:has(.consent:not([hidden])) {
    --consent-clearance: calc(10.5rem + max(var(--s-md), env(safe-area-inset-bottom)));
  }
}

html:has(.consent:not([hidden])) body > :not(.consent),
html:has(.consent:not([hidden])) body > :not(.consent) * {
  scroll-margin-bottom: var(--consent-clearance);
}

@media (prefers-reduced-motion: no-preference) {
  .consent-inner {
    animation: consent-rise var(--t-slow) var(--ease) both;
  }
}

@keyframes consent-rise {
  from {
    opacity: 0;
    transform: translateY(var(--s-lg));
  }
}

/* ── Footer control: a button dressed as the footer's links ─────────────── */
.consent-prefs {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  text-align: left;
  text-decoration-thickness: 2.5px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.consent-prefs:hover {
  color: var(--ink);
  text-decoration-line: underline;
}

@media print {
  .consent {
    display: none;
  }
}