/* ==============================================================================================
   NOURISH-Durham public site — shared stylesheet.

   One file for every page (index, about, support, contact, privacy, terms, 404) so a change to the
   header, footer or card treatment lands everywhere at once. This replaced a per-page <style> block
   the moment the site grew past one page.

   DESIGN SYSTEM — taken from the two shipping products so all three read as one brand:
     · Mobile app       ../NOURISHDurham/shared/…/core/ui/theme/{Color,Shape,Type}.kt
     · Admin dashboard  shared/…/designsystem/theme/{Color,Theme}.kt, plus admin/ and sup-admin/

   WHERE THE TWO DISAGREE: the dashboard's primary is #7A1F2E; the mobile app's is NCCU's official
   #862633, and the shared logo badge (favicon.svg — the mobile launcher icon) is drawn with #862633
   too. This site follows the app, because the app is the product and #862633 is the institutional
   colour. Worth reconciling in the admin theme: it is currently very slightly off-brand from its
   own logo.

   LIGHT ONLY, ON PURPOSE. `NourishAdminTheme` builds a `lightColorScheme` with no dark counterpart
   and every mockup is light; a dark variant would invent a treatment neither product has.

   No external fonts, no external anything — the whole site is self-contained.
   ============================================================================================== */

/* ---- Tokens, named after their source so the mapping stays legible ------------------------- */
:root {
  /* Brand — mobile Color.kt */
  --maroon:      #862633;   /* NccuMaroon */
  --maroon-rich: #6A2C3E;   /* RichMaroon */
  --maroon-tint: #FBF1F3;   /* MaroonTint */

  /* Neutrals — mobile Color.kt, near-identical to the admin's */
  --page:        #FAF9F8;   /* PageBackground */
  --surface:     #FFFFFF;   /* CardSurface */
  --subtle:      #F4F5F7;   /* SubtleSurface */
  --hairline:    #E2E8F0;   /* HairlineOutline */
  --ink:         #151515;   /* NccuBlack */
  --ink-muted:   #5B6770;   /* RichGray */
  --ink-faint:   #8A8D8F;   /* MetallicSilver */

  /* Accent pairs — the container / on-container convention both products use for badges */
  --green: #00843D;  --green-tint: #F0FDF4;   /* OKellyGreen */
  --blue:  #2563EB;  --blue-tint:  #EFF6FF;
  --purple:#6D28D9;  --purple-tint:#EDE9FE;
  --amber: #B45309;  --amber-tint: #FFF7ED;

  /* Radii — mobile Shape.kt: 6 badge · 10 compact button · 14 field/nested · 16 card · 20 sheet.
     The admin's AppCard is 12 and its buttons 8; these sit a pixel or two apart. */
  --r-badge: 6px; --r-button: 10px; --r-inner: 14px; --r-card: 16px; --r-sheet: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--page); color: var(--ink);
  /* Both products bundle their own sans; a static site can't, so this is the closest system stack.
     Kept in one place so it's trivial to swap for a self-hosted webfont later. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  display: flex; flex-direction: column; min-height: 100vh;   /* footer sits at the bottom on short pages */
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; letter-spacing: -0.015em; }
.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 46rem; }
[hidden] { display: none !important; }
:where(a, button):focus-visible { outline: 2px solid var(--maroon); outline-offset: 3px; }

/* Skip link — the site is keyboard-navigable and the nav is repeated on every page. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--maroon); font-weight: 700;
  padding: 12px 18px; border: 1px solid var(--maroon); border-radius: var(--r-button);
}
.skip:focus { left: 16px; top: 12px; }

/* ---- Header ------------------------------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: rgba(250, 249, 248, 0.88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.lockup .mark { width: 34px; height: 34px; border-radius: 10px; flex: none; }  /* 28/96 ≈ 0.29 */
.lockup .word { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
nav.site { display: flex; align-items: center; gap: 4px; }
nav.site a {
  color: var(--ink-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-button); white-space: nowrap;
}
nav.site a:hover, nav.site a:focus-visible { color: var(--maroon); background: var(--maroon-tint); }
nav.site a[aria-current="page"] { color: var(--maroon); font-weight: 700; }
/* The filled pill from the reference's top bar. */
nav.site a.pill { background: var(--ink); color: #fff; font-weight: 700; padding: 9px 16px; }
nav.site a.pill:hover, nav.site a.pill:focus-visible { background: var(--maroon); color: #fff; }
/* Mid widths: tighten the nav before resorting to a second row. */
@media (max-width: 860px) {
  .header-inner { gap: 10px; }
  nav.site a { padding: 8px 9px; font-size: 0.9063rem; }
}
/* Narrow: the nav WRAPS onto its own row rather than scrolling sideways. A horizontally scrolled nav
   pushed "Get the app" — the primary call to action — off-screen with no visible affordance, and on a
   multi-page site an unreachable nav also means unreachable legal pages, which is exactly what an
   app-store review checks for. Two rows costs ~44px of header and keeps everything visible. */
@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; min-height: 0; row-gap: 4px; }
  nav.site { width: 100%; flex-wrap: wrap; gap: 2px; margin-left: -9px; }
  nav.site a { padding: 7px 9px; font-size: 0.875rem; }
  nav.site a.pill { margin-left: auto; }   /* CTA pinned to the end of the row, always in view */
}

/* ---- Section rhythm ----------------------------------------------------------------------- */
section { padding: 72px 0; }
section + section { border-top: 1px solid var(--hairline); }
section[id] { scroll-margin-top: 68px; }
/* The wide-tracked uppercase section label from the mobile type scale. */
.eyebrow {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--maroon); margin: 0 0 14px;
}
h2 { font-size: 1.75rem; line-height: 1.22; font-weight: 700; }
.intro { margin: 12px 0 0; color: var(--ink-muted); font-size: 1.0625rem; }

/* ---- Hero (index) ------------------------------------------------------------------------- */
.hero { padding: 76px 0 8px; text-align: center; }
.hero-inner { max-width: 44rem; margin: 0 auto; }
.hero h1 { font-size: clamp(2.1rem, 5.4vw, 3.25rem); line-height: 1.08; font-weight: 700; }
.hero .lead { margin: 20px auto 0; max-width: 36rem; font-size: 1.125rem; color: var(--ink-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 7px 15px 7px 12px; font-size: 0.875rem; font-weight: 600; color: var(--ink);
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ---- Page header (inner pages) ------------------------------------------------------------ */
.page-head { padding: 60px 0 34px; border-bottom: 1px solid var(--hairline); }
.page-head h1 { font-size: clamp(1.85rem, 4.2vw, 2.5rem); line-height: 1.12; font-weight: 700; }
.page-head .intro { max-width: 42rem; }
.page-meta { margin: 16px 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

/* ---- Cards: white, hairline border, NO elevation shadow ----------------------------------- */
/* Both design systems avoid elevation deliberately — the admin's AppCard exists precisely because
   Material3's `Card` adds a tinted, shadowed surface the mockups never use. */
.card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 26px; display: flex; flex-direction: column;
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.tile { width: 42px; height: 42px; border-radius: var(--r-button); display: grid; place-items: center; margin-bottom: 16px; }
.tile svg { width: 21px; height: 21px; }
.card h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 7px; }
.card p { margin: 0; color: var(--ink-muted); font-size: 0.9375rem; }
.card .in-app {
  display: block; margin-top: auto; padding-top: 16px; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--maroon);
}

/* ---- The interactive tour (index) -------------------------------------------------------- */
#tour { padding-top: 56px; }
.tour-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 32px; align-items: start; }
/* Two columns: options beside the phone, detail panel drops under the options. */
@media (max-width: 1080px) {
  .tour-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .tour-detail { grid-column: 1; grid-row: 2; }
}
@media (max-width: 760px) {
  .tour-grid { grid-template-columns: 1fr; }
  .tour-phone { order: -1; justify-self: center; }
  .tour-detail { grid-column: 1; grid-row: auto; }
}
.tour-options { display: flex; flex-direction: column; gap: 8px; }
.opt {
  display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-inner);
  padding: 13px 15px; font: inherit; color: inherit;
  transition: background-color .16s ease, border-color .16s ease;
}
.opt:hover { background: var(--surface); border-color: var(--hairline); }
.opt[aria-selected="true"] { background: var(--surface); border-color: var(--maroon); box-shadow: inset 0 0 0 1px var(--maroon); }
.opt .oi { width: 38px; height: 38px; border-radius: var(--r-button); display: grid; place-items: center; }
.opt .oi svg { width: 19px; height: 19px; }
/* Both must be block: they're <span>s (a <button> may not contain <p>/<div>), so without this the
   label and description run together on one line. */
.opt .ol { display: block; font-size: 0.9688rem; font-weight: 700; line-height: 1.35; }
.opt .od { display: block; margin: 3px 0 0; font-size: 0.8438rem; color: var(--ink-muted); line-height: 1.45; }
.opt[aria-selected="true"] .ol { color: var(--maroon-rich); }
.tour-hint { margin: 18px 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

/* ---- Phone frames ------------------------------------------------------------------------ */
/* A hairline bezel in the same flat, shadowless language as the cards. The screenshots are 393px
   wide native, so they're never upscaled past 1:1 on a normal display. */
.phone {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 26px; padding: 9px; margin: 0; width: 318px; max-width: 100%; position: relative;
}
.phone .screen { position: relative; border-radius: 18px; overflow: hidden; background: var(--subtle); aspect-ratio: 393 / 840; }
.phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .28s ease; }
.phone .screen img.is-active { opacity: 1; }
.phone figcaption { font-size: 0.8125rem; font-weight: 600; color: var(--ink-muted); text-align: center; padding: 12px 4px 2px; }
.tour-phone { justify-self: center; }

/* Detail panel — mirrors the reference's right-hand column. */
.tour-detail { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 24px; }
.tour-detail .tag {
  display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; padding: 5px 10px; border-radius: var(--r-badge); margin-bottom: 14px;
}
.tour-detail h3 { font-size: 1.1875rem; font-weight: 700; }
.tour-detail > div > p { margin: 9px 0 0; color: var(--ink-muted); font-size: 0.9375rem; }
.tour-detail ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.tour-detail li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 12px 0 0; font-size: 0.9063rem; }
.tour-detail li svg { width: 17px; height: 17px; margin-top: 3px; color: var(--green); }

/* ---- Download call-to-action ------------------------------------------------------------- */
.store-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: #fff; text-decoration: none;
  border: 1px solid var(--ink); border-radius: var(--r-button);
  padding: 12px 20px; font-weight: 700; font-size: 0.9375rem;
}
.store-btn:hover, .store-btn:focus-visible { background: var(--maroon); border-color: var(--maroon); }
.store-btn svg { width: 19px; height: 19px; flex: none; }
.store-btn small { display: block; font-size: 0.6875rem; font-weight: 600; opacity: .75; letter-spacing: .04em; text-transform: uppercase; }
.note {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px;
  padding: 9px 17px; font-size: 0.875rem; font-weight: 600; color: var(--maroon-rich);
}
.hero .store-row, .hero .note, .band .store-row, .band .note { justify-content: center; }

.band { background: var(--maroon-tint); border-top: 1px solid #F0DFE3; text-align: center; }
.band .inner { max-width: 38rem; margin: 0 auto; }
.band p { color: var(--maroon-rich); }
.band .badge-lg { width: 68px; height: 68px; border-radius: 19px; margin: 0 auto 20px; }
.band .note { background: var(--surface); border-color: #F0DFE3; }
.sample-note { margin: 26px 0 0; font-size: 0.8125rem; color: var(--ink-faint); }

/* ---- Prose (legal + about pages) --------------------------------------------------------- */
.prose { padding: 44px 0 76px; font-size: 1rem; }
.prose .doc {
  /* pre-line, because the API stores legal text as PLAIN TEXT with newlines, not HTML. It is
     inserted with textContent (never innerHTML) so the dashboard's form can't become an injection
     vector into this public site — see site.js. */
  white-space: pre-line;
}
.prose h2 { font-size: 1.375rem; margin: 36px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 8px; }
.prose a { color: var(--maroon); }
.doc-status {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-inner);
  padding: 20px 22px; color: var(--ink-muted);
}
.doc-status strong { color: var(--ink); }

/* ---- Contact details -------------------------------------------------------------------- */
/* Rendered from landing-config.js — only filled-in fields appear, so the site never shows an
   invented address or a dead mailto:. */
.contact-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 12px; }
.contact-list li {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-inner);
  padding: 15px 18px;
}
.contact-list .ci { width: 40px; height: 40px; border-radius: var(--r-button); display: grid; place-items: center; background: var(--maroon-tint); }
.contact-list .ci svg { width: 19px; height: 19px; }
.contact-list .ck { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.contact-list .cv { display: block; font-weight: 600; font-size: 0.9688rem; word-break: break-word; }
.contact-list a { color: var(--maroon); text-decoration: none; }
.contact-list a:hover, .contact-list a:focus-visible { text-decoration: underline; }

/* ---- FAQ accordion ---------------------------------------------------------------------- */
/* Native <details> — keyboard accessible and findable by the browser's find-in-page with no JS. */
.faq { margin-top: 30px; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-inner); padding: 0 18px; }
.faq details[open] { border-color: var(--maroon); }
.faq summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; font-size: 0.9688rem;
  display: grid; grid-template-columns: 1fr 20px; gap: 12px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 9px; height: 9px; justify-self: center;
  border-right: 2px solid var(--ink-muted); border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq .fa { padding: 0 0 18px; margin: 0; color: var(--ink-muted); font-size: 0.9375rem; white-space: pre-line; }

/* ---- Footer ----------------------------------------------------------------------------- */
footer.site { border-top: 1px solid var(--hairline); padding: 44px 0 52px; background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
.footer-brand p { margin: 14px 0 0; color: var(--ink-muted); font-size: 0.9063rem; max-width: 22rem; }
footer.site h4 { margin: 0 0 12px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
footer.site ul a { color: var(--ink-muted); text-decoration: none; font-size: 0.9063rem; }
footer.site ul a:hover, footer.site ul a:focus-visible { color: var(--maroon); }
.footer-base {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
}
.footer-base p { margin: 0; color: var(--ink-faint); font-size: 0.875rem; }
.footer-base .sep { color: var(--hairline); margin: 0 8px; }
/* Staff sign-in: deliberately the same size and weight as the copyright line beside it.
   Residents are the audience for this page; the dashboard link needs to be findable, not
   advertised. */
.footer-base .staff-link { color: var(--ink-faint); text-decoration: none; }
.footer-base .staff-link:hover, .footer-base .staff-link:focus-visible {
  color: var(--maroon); text-decoration: underline;
}

/* Structure inferred from the plain text by renderDoc() in site.js. These carry the whole
   readability of a 5,000-character policy, so they are sized against the prose rather than reusing
   the marketing h2 — a section label inside a document should not shout like a page heading. */
.doc-h {
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--maroon); margin: 34px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.doc > .doc-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc p { margin: 0 0 14px; }
.doc-list { margin: 0 0 16px; padding-left: 0; list-style: none; }
.doc-list li { position: relative; padding-left: 18px; margin: 0 0 8px; }
/* A real bullet rather than the hyphen the source text uses — the hyphen is an artefact of the
   field being plain text, not something the reader should see. */
.doc-list li::before {
  content: ""; position: absolute; left: 4px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--maroon); opacity: .55;
}

/* ---- 404 --------------------------------------------------------------------------------- */
.center-page { text-align: center; padding: 96px 0; }
.center-page h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
.center-page .intro { margin-left: auto; margin-right: auto; max-width: 30rem; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 28px;
  background: var(--maroon); color: #fff; text-decoration: none; font-weight: 700;
  border-radius: var(--r-button); padding: 12px 22px;
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--maroon-rich); }

/* ---- Responsive tuning ------------------------------------------------------------------- */
/* Everything above is layout-structural (what goes beside what). These rules are about density:
   desktop whitespace reads as generous, but the same values on a 360px phone waste a third of the
   screen and push the first real content below the fold. Scaled in two steps rather than one so a
   tablet doesn't get phone spacing. */

@media (max-width: 900px) {
  section { padding: 56px 0; }
  .hero { padding: 56px 0 8px; }
  .page-head { padding: 44px 0 28px; }
  .prose { padding: 34px 0 60px; }
  h2 { font-size: 1.5rem; }
  footer.site { padding: 36px 0 44px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 18px; }             /* 12px of extra content width on each side */
  section { padding: 44px 0; }
  .hero { padding: 40px 0 4px; }
  /* A lower floor than the desktop clamp: 2.1rem over four lines at 320px is a wall of text. */
  .hero h1 { font-size: clamp(1.75rem, 8.2vw, 2.4rem); }
  .hero .lead { font-size: 1.0313rem; }
  .page-head h1 { font-size: clamp(1.6rem, 7.4vw, 2rem); }
  .intro, .section-head p { font-size: 1rem; }
  h2 { font-size: 1.375rem; }
  .card { padding: 22px; }
  .tour-detail { padding: 20px; }
  .contact-list li { grid-template-columns: 34px 1fr; gap: 12px; padding: 13px 15px; }
  .contact-list .ci { width: 34px; height: 34px; }
  .band .badge-lg { width: 58px; height: 58px; }
  /* Full-width store buttons stack cleanly instead of one-and-a-half per row. */
  .store-row { gap: 10px; }
  .store-btn { flex: 1 1 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-base { margin-top: 28px; }
}

/* Very narrow (small Androids, split-screen). The phone frame is the one fixed-width element on the
   site, so it needs an explicit ceiling or it drives horizontal overflow. */
@media (max-width: 400px) {
  .phone { width: 100%; }
  .prose { font-size: 0.9688rem; }
}

/* Landscape phones: the tour's phone frame is taller than the viewport, so let the page breathe
   rather than reserving hero space that pushes it out of sight. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding: 32px 0 4px; }
  section { padding: 40px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}