/* ============================================================================
   tinyyy studio — legal pages (privacy / terms / imprint)
   Shared prose layout for the three static legal pages. Linked AFTER
   shared.css so it can lean on the suite's tokens (--bg, --ink, --y, --line,
   font families, the .yyy-* wordmark, .lang-toggle, .site-footer)
   and only add what those pages need: a header bar, a readable prose column,
   and the EN/ES show-hide rules.

   These pages do NOT load i18n.js/app.js. Both languages live inline in the
   HTML; a small per-page inline <script> toggles a .lang-es class on <html>
   and this file hides whichever language isn't active. A visitor's language
   (localStorage tinyyy.lang) carries across the suite; the theme is Warm Sand.
   ============================================================================ */

/* 1. Bilingual show/hide -----------------------------------------------------
   Default (no .lang-es on <html>, matching the static markup) shows English
   and hides Spanish, so there's no flash before the inline script runs. We
   only ever hide the inactive language — the visible one keeps its natural
   display (block, inline, list-item …), which is why this is robust. The
   <html> element carries lang="en" / lang="es-419"; it's always the ancestor
   in these selectors, never the matched [lang] descendant, so it never hides
   itself. */
:root:not(.lang-es) [lang="es"] { display: none; }
:root.lang-es [lang="en"] { display: none; }

/* 2. Header ------------------------------------------------------------------
   Mirrors the studio's .site-header (which lives in the home page's styles.css,
   not linked here) so the three pages wear the same hat. */
.site-header {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px var(--page-pad);
}
.brand-nav { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; }
.brand-nav .yyy-pinch { font-size: 17px; }
.site-nav { display: flex; gap: 30px; align-items: center; }

/* 3. Prose column ------------------------------------------------------------ */
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px var(--page-pad) 96px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  overflow-wrap: break-word;
}

.legal-badge {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--y);
  margin: 8px 0 10px;
}

.legal h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -1px;
  margin: 0 0 22px;
  color: var(--ink);
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  margin: 52px 0 12px;
  color: var(--ink);
}

.legal h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  margin: 34px 0 10px;
  color: var(--ink);
}

.legal p { margin: 0 0 16px; }

.legal a {
  color: var(--y);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: opacity .2s;
}
.legal a:hover { opacity: .7; }

.legal strong, .legal b { font-weight: 700; color: var(--ink); }
.legal em, .legal i { font-style: italic; }

.legal ul, .legal ol { margin: 0 0 18px; padding-left: 1.4em; }
.legal li { margin: 0 0 8px; }
.legal li::marker { color: var(--muted); }

/* "last updated / this covers …" strap (privacy, terms) and the standalone
   governing-language note (imprint). Whichever ends the intro carries the
   divider before the first section. */
.legal-meta {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 4px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.legal-langnote {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted2);
  margin: 0 0 4px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

/* Placeholders left for the user to fill before publishing. Kept quietly
   visible so they can't ship by accident. */
.legal .ph {
  background: color-mix(in srgb, var(--y) 12%, transparent);
  color: var(--y);
  border-radius: 4px;
  padding: 0 4px;
  font-style: normal;
  font-weight: 600;
}

/* Section wrappers carry the anchor ids; give them room under a scrolled-to
   jump even though the header isn't sticky. */
.legal-section { scroll-margin-top: 32px; }
.legal-section h2 { scroll-margin-top: 32px; }
.legal [id] { scroll-margin-top: 32px; }

/* Occasional tables (none required today, styled for safety). */
.legal table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 15px; }
.legal th, .legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { font-weight: 700; background: var(--panel); }

/* 4. Footer legal links (footer chrome itself comes from shared.css) --------- */
.footer-legal { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted2); }
.footer-links a { color: var(--muted); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--ink); }
.footer-links .sep { color: var(--muted2); }

/* 5. Small screens ----------------------------------------------------------- */
@media (max-width: 640px) {
  .legal { font-size: 16px; padding-top: 8px; }
  .legal h1 { font-size: 34px; }
  .legal h2 { font-size: 22px; }
  .site-header { padding: 22px var(--page-pad); }
  .site-nav { gap: 18px; }
}
@media (max-width: 560px) {
  .footer-legal { align-items: flex-start; text-align: left; }
}
