/* =====================================================================
   WiseDine — legal pages (Privacy Policy / Terms of Use)
   ---------------------------------------------------------------------
   Self-contained stylesheet for the two standalone legal subpages at
   /privacy-policy/ and /terms-of-use/. It deliberately does NOT depend on
   the marketing site's css/styles.css so those pages can never be broken
   by future changes there — but it REUSES the same brand tokens (colors,
   fonts, radii) so the legal pages stay visually on-brand with the site.

   Anatomy (per the app team's brief): slim forest-green header → LEGAL
   eyebrow → page title → effective-date line → hairline-ruled sections
   (real <h2>) → paragraphs / bulleted <ul> / mint callout boxes, all in a
   centered ≈720px reading column. Web-scaled type (~16–17px body) so it is
   comfortable on both laptop and phone. WCAG AA color pairs throughout.
   ===================================================================== */

/* ============================== TOKENS ============================== */
:root{
  /* Brand palette — same hex values as the marketing site (css/styles.css) */
  --brand-green:      #009068;   /* graphic accents: eyebrow, bullet markers */
  --brand-green-dark: #00674A;   /* AA-safe green for links / pressed states */
  --mint-50:          #EAF6F1;   /* callout background */
  --mint-100:         #D7EDE5;   /* callout border */

  --color-bg:       #FFFFFF;     /* page background */
  --color-ink:      #0A0A0A;     /* titles + section headings */
  --color-ink-soft: #44524B;     /* body paragraphs, list text */
  --color-muted:    #6B746E;     /* effective-date line, footnotes (AA ~4.8:1) */

  --legal-line:     #D3DED8;     /* hairline rule above each section heading */

  /* Forest-green header band — matches the site hero (#23503E) */
  --forest:         #23503E;
  --on-forest:      #FFFFFF;
  --on-forest-soft: rgba(255,255,255,.82);
  --forest-accent:  #8FE6C4;     /* mint accent that pops on the forest green */

  /* Type — same families as the site: Poppins (display) + Inter (body).
     Weight is capped at 700 app-wide, so nothing here exceeds 700. */
  --ff-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-body:    "Inter",   system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale — comfortable on phone (min) through laptop (max) */
  --fs-title:   clamp(1.9rem, 1.45rem + 1.9vw, 2.5rem);   /* ~30 → 40px */
  --fs-h2:      clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem);/* ~16 → 19px */
  --fs-h3:      1.0625rem;                                 /* ~17px */
  --fs-h4:      0.95rem;                                   /* ~15px */
  --fs-body:    clamp(1rem, 0.965rem + 0.18vw, 1.0625rem);/* ~16 → 17px */
  --fs-eyebrow: 0.8rem;
  --fs-date:    0.95rem;
  --lh-body:    1.7;

  /* Shape (app team radii) + soft shadow used by the header band */
  --radius-callout: 14px;
  --radius-pill:    999px;

  /* Layout */
  --reading-w: 720px;   /* legal reading measure */
  --band-w:    1180px;  /* header/footer band inner width (matches site --maxw) */
  --gutter:    clamp(1.25rem, 0.9rem + 1.8vw, 2rem);  /* 20 → 32px page gutter */

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .22s;
}

/* =============================== RESET ============================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
:target{ scroll-margin-top:1.5rem; }

body.legal{
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  display: flex;              /* sticky footer: header + main + footer column */
  flex-direction: column;
  min-height: 100vh;
}

img{ max-width:100%; display:block; }
a{ color: inherit; }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link — appears on focus */
.legal-skip{
  position:absolute; left:1rem; top:-100%;
  z-index:50;
  background: var(--brand-green);
  color:#fff;
  font-family: var(--ff-body);
  font-weight:600;
  padding:.7rem 1.1rem;
  border-radius: var(--radius-pill);
  transition: top var(--dur) var(--ease);
}
.legal-skip:focus{ top:1rem; }

/* ========================= HEADER (forest band) ==================== */
.legal-header{
  background: var(--forest);
  color: var(--on-forest);
}
.legal-header__inner{
  width:100%;
  max-width: var(--band-w);
  margin-inline:auto;
  padding: 0.9rem var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
}
.legal-header__brand{ display:inline-flex; align-items:center; }
.legal-header__logo{
  height: 42px;
  width: auto;
  /* logo-transparent.png renders light on the dark band (no white box) */
}
.legal-header__nav{
  display:flex;
  align-items:center;
  gap: clamp(.85rem, .4rem + 1.6vw, 1.6rem);
  font-family: var(--ff-display);
  font-size: .9rem;
  font-weight:600;
}
.legal-header__nav a{
  color: var(--on-forest-soft);
  text-decoration:none;
  padding: .25rem 0;
  position:relative;
  transition: color var(--dur) var(--ease);
}
.legal-header__nav a:hover{ color: var(--on-forest); }
.legal-header__nav a[aria-current="page"]{
  color: var(--forest-accent);
}
.legal-header__nav a[aria-current="page"]::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:2px; border-radius:2px;
  background: var(--forest-accent);
}

/* ============================ DOCUMENT ============================= */
.legal-main{
  flex: 1 0 auto;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  padding-inline: var(--gutter);
}
.legal-doc{
  max-width: var(--reading-w);
  margin-inline: auto;
}

/* --- Head: eyebrow → title → effective-date --- */
.legal-doc__head{ margin-bottom: 2rem; }
.legal-eyebrow{
  font-family: var(--ff-display);
  font-size: var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--brand-green-dark);
  margin-bottom:.75rem;
}
.legal-title{
  font-family: var(--ff-display);
  font-size: var(--fs-title);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.015em;
  color: var(--color-ink);
}
.legal-date{
  margin-top:.85rem;
  font-size: var(--fs-date);
  color: var(--color-muted);
}

/* --- Body blocks --- */
.legal-body > * + *{ margin-top: 1.05rem; }

.legal-body p{ color: var(--color-ink-soft); }

/* Section heading — the key scannability device: a thin hairline rule +
   generous top padding precede every ALL-CAPS <h2>. Real heading element. */
.legal-body h2{
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight:700;
  line-height:1.3;
  letter-spacing:.035em;
  color: var(--color-ink);
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--legal-line);
}
.legal-body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }

/* Sub-headings (e.g. "Personal Information You Provide" / collection methods) */
.legal-body h3{
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight:700;
  line-height:1.35;
  color: var(--color-ink);
  margin-top: 1.85rem;
}
.legal-body h4{
  font-family: var(--ff-display);
  font-size: var(--fs-h4);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.005em;
  color: var(--color-ink);
  margin-top: 1.4rem;
}
.legal-body h3 + p,
.legal-body h4 + p{ margin-top:.5rem; }

/* Bulleted lists — custom brand-green marker, comfortable line-height */
.legal-body ul{
  list-style:none;
  margin-top: 1.05rem;
  padding-left: 0;
}
.legal-body li{
  position:relative;
  padding-left: 1.5rem;
  color: var(--color-ink-soft);
}
.legal-body li + li{ margin-top:.6rem; }
.legal-body li::before{
  content:"";
  position:absolute;
  left:.15rem;
  top:.62em;
  width:.42rem;
  height:.42rem;
  border-radius:50%;
  background: var(--brand-green);
}
/* Bold lead-in inside a bullet (ink, weight 700) */
.legal-body li strong,
.legal-body p strong{ color: var(--color-ink); font-weight:700; }

/* Text links — AA-safe dark green, underlined */
.legal-body a{
  color: var(--brand-green-dark);
  font-weight:600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: from-font;
  overflow-wrap: anywhere;   /* long emails/URLs never overflow on mobile */
}
.legal-body a:hover{ color:#0A4A36; }

/* Callout box — emphasized notice (mint surface, app-team radius 14) */
.legal-callout{
  background: var(--mint-50);
  border: 1px solid var(--mint-100);
  border-radius: var(--radius-callout);
  padding: 1rem 1.15rem;
  font-weight:600;
  color: var(--color-ink-soft);
}
.legal-body .legal-callout{ margin-top: 1.5rem; }
.legal-callout + *{ margin-top: 1.5rem; }

/* DMCA mailing-address callout (address lines, company name emphasized) */
.legal-address{ font-style:normal; }
.legal-address strong{ display:block; color: var(--color-ink); font-weight:700; }

/* ============================= FOOTER ============================== */
.legal-footer{
  flex-shrink:0;
  border-top: 1px solid var(--legal-line);
  padding-block: 1.75rem;
  padding-inline: var(--gutter);
  color: var(--color-muted);
}
.legal-footer__inner{
  width:100%;
  max-width: var(--band-w);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  font-size:.9rem;
}
.legal-footer__nav{ display:flex; gap: 1.25rem; flex-wrap:wrap; }
.legal-footer__nav a{
  color: var(--brand-green-dark);
  font-weight:600;
  text-decoration:none;
}
.legal-footer__nav a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ============================ RESPONSIVE =========================== */
/* Mobile-first above. On narrow phones the logo + cross-nav can't share one
   row without clipping, so stack them (nav drops below the logo). */
@media (max-width: 34rem){
  .legal-header__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
  }
  .legal-header__logo{ height: 36px; }
  .legal-header__nav{ gap: 1.25rem; flex-wrap: wrap; }
  .legal-footer__inner{ flex-direction: column; align-items: flex-start; }
}

/* ========================= REDUCED MOTION ========================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* ============================== PRINT ============================== */
/* Clean, chrome-free printout for a legal document. */
@media print{
  .legal-header,
  .legal-footer,
  .legal-skip{ display:none !important; }
  body.legal{ color:#000; }
  .legal-main{ padding:0; }
  .legal-doc{ max-width:none; }
  .legal-body a{ color:#000; }
  .legal-callout{ background:transparent; border:1px solid #999; }
  .legal-body h2{ border-top-color:#999; }
}