/* ═══════════════════════════════════════════════════════════════════════════
   oro-legal.css — namespace `orol-`
   The minimal footer for privacy.html and terms.html. Loaded on those two
   pages only; index.html never links it and keeps its own `orof-` footer.

   Replaces the inherited Webflow "docs-page" footer removed on 2026-08-04,
   which carried six dead social links and a Support link that pointed at the
   privacy policy.

   What this deliberately does NOT have: social icons, newsletter, promotional
   copy, placeholder links. A legal page should end quietly and let the reader
   leave. Every link here resolves to a real page.

   px-authored throughout — the host document sets 1rem == 1vw (landmine L9),
   so a rem here would collapse to nothing on a phone.
   ═══════════════════════════════════════════════════════════════════════════ */

.orol {
  --orol-ink:    #080808;
  --orol-paper:  #F5F2EC;
  --orol-dim:    #B8B2A6;   /* 7.4:1 on the ink  */
  --orol-muted:  #757A7F;   /* 4.62:1 — clears AA for the 12px copyright */
  --orol-gold:   #C9A46A;
  --orol-line:   rgb(245 242 236 / .10);

  position: relative;
  /* `div.main` already carries 121px of its own padding below the last
     paragraph, so this only needs to add separation, not create it. 72px here
     read as half a phone screen of nothing. */
  margin: 40px 0 0;
  padding: 40px 24px calc(38px + env(safe-area-inset-bottom, 0px));
  background: var(--orol-ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: center;
}

/* The gold hairline. The house signature — the loading plate, the toast stack
   and the install dialog all draw the same line. */
.orol::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(201 164 106 / .5), transparent);
}

.orol__in {
  width: min(680px, 100%);
  max-width: 100%;
  margin: 0 auto;
}

/* ── the mark ─────────────────────────────────────────────────────────────── */

.orol__mark {
  display: inline-block;
  width: 92px;
  margin: 0 0 26px;
  line-height: 0;
  border-radius: 4px;
  transition: opacity .22s ease;
}
.orol__mark:hover { opacity: .82; }
.orol__mark svg { width: 100%; height: auto; display: block; }

/* ── navigation ───────────────────────────────────────────────────────────── */

.orol__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 18px;
  margin: 0 0 22px;
}

.orol__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;          /* clears WCAG 2.2 SC 2.5.8 (24px) comfortably */
  padding: 0 2px;
  color: var(--orol-dim);
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color .2s ease;
}
.orol__link:hover { color: var(--orol-paper); }

/* The page you are already on is stated, not linked to nowhere. */
.orol__link[aria-current="page"] {
  color: var(--orol-paper);
  cursor: default;
}
.orol__link[aria-current="page"]::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--orol-gold);
}

/* ── copyright ────────────────────────────────────────────────────────────── */

.orol__copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--orol-muted);
  letter-spacing: .01em;
}

/* ── wider screens ────────────────────────────────────────────────────────── */

@media (min-width: 700px) {
  .orol { padding-top: 46px; }
  .orol__nav { gap: 4px 26px; }
}

/* ── motion, contrast, print ──────────────────────────────────────────────── */

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

@media (forced-colors: active) {
  .orol::before { display: none; }
  .orol { border-top: 1px solid CanvasText; }
  .orol__link, .orol__copy { color: LinkText; }
}

@media print {
  .orol { margin-top: 32px; padding: 16px 0; }
  .orol::before, .orol__mark { display: none; }
}

/* ── palette parity with index.html ──────────────────────────────────────────
   privacy.html and terms.html load only oro.css, oro-pwa.css, oro-a11y.css and
   this file. The gold layers (oro-gold.css / oro-gold-auto.css) are index-only
   and deliberately stay that way, because oro-gold-auto.css carries rules that
   target index-only markup.

   The consequence was that oro.css's four accent tokens still resolved to their
   original inherited values on these two pages, so the legal pages painted blue
   while every other surface on the site was gold. Same tokens, same values that
   index.html actually resolves to (from oro-gold-auto.css), redeclared here
   because this is the last stylesheet on both pages. */
:root {
  --_colors---color--blue:       #f3b720;
  --_colors---color--sky-blue:   #ffc355;
  --_colors---color--light-blue: #ffe3a5;
  --_colors---color--turquoise:  #e57f02;
}