/*
 * BrighterDay legal pages — shared stylesheet (on-brand v2)
 * Brand: "White Canvas + Optimistic Doodles" / "Golden Hour Storybook Adventure".
 * Translation for a long legal document on the web:
 *   - a soft SKY-BLUE gradient page, with the document in a floating WHITE rounded
 *     card (exactly the app's "white cards on sky" pattern, e.g. the Me screen);
 *   - navy-slate text (not flat gray) so it harmonises with the sky;
 *   - Poppins for headings, DM Sans for body, Shantell Sans used DELIBERATELY for
 *     the "Brighter Day" wordmark only (the app's rule: Shantell stays special);
 *   - pastel sky / mint / coral / gold accents and gentle rounded, soft-shadow cards.
 * Tokens mirror design-system/colors.js + typography.js in the app repo.
 */

:root {
  /* Brand palette (from design-system/colors.js) */
  --sky:        #5DCDF1;   /* primary brand */
  --sky-deep:   #136f93;   /* readable sky for link text on white */
  --coral:      #FD976D;
  --gold:       #F5D76E;
  --mint:       #A8E6C4;
  --leaf:       #7EC8A4;
  --lavender:   #C4A6E0;

  /* Neutrals */
  --ink:        #2D3B50;   /* textPrimary — navy slate */
  --ink-soft:   #4A5B6D;   /* textSecondary */
  --ink-muted:  #8a97a6;
  --card:       #FFFFFF;
  --line:       #E5E7EB;

  /* Soft washes for callouts (light marker washes) */
  --wash-sky:   #eaf7fd;
  --wash-sky-bd:#cdeaf6;
  --wash-gold:  #fff6e0;
  --wash-gold-bd:#f6dca6;
  --wash-mint:  #ebfaf2;

  --max: 760px;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  /* Airy sky gradient — light at the top, fading to a soft haze */
  background: linear-gradient(180deg, #bfe7f8 0%, #d8f1fb 28%, #ecf8fd 60%, #f4fbfe 100%) no-repeat;
  background-attachment: fixed;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Shared centering container */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; }

/* ---- Header: sits directly on the sky, with a soft white "haze" for legibility ---- */
header.site {
  background: transparent;
  padding: 40px 22px 14px;
  text-align: center;
}
header.site .brand {
  font-family: "Shantell Sans", "Poppins", sans-serif;  /* the deliberate hand-drawn brand moment */
  font-weight: 700;
  font-size: 22px;
  color: var(--sky-deep);
  margin: 0 0 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.85), 0 2px 14px rgba(255,255,255,0.7);
}
header.site .doc-title {
  font-family: "Poppins", -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.18;
  margin: 4px 0 8px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 3px 16px rgba(255,255,255,0.6);
}
header.site .meta {
  margin: 0;
  font-size: 15px;
  color: var(--ink-soft);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* ---- The document card: white, rounded, floating on the sky ---- */
main.wrap {
  background: var(--card);
  border-radius: 28px;
  padding: 38px clamp(20px, 5vw, 48px) 40px;
  margin: 8px auto 80px;
  box-shadow: 0 2px 8px rgba(45,59,80,0.06), 0 20px 50px rgba(45,59,80,0.12);
  position: relative;
  overflow: hidden;
}
/* a playful palette strip across the top of the card */
main.wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--sky) 0%, var(--mint) 33%, var(--gold) 66%, var(--coral) 100%);
}

/* ---- Typography ---- */
main.wrap > p:first-of-type { margin-top: 6px; }
h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -0.01em;
  margin: 42px 0 12px;
  color: var(--ink);
}
/* a short marker-style underline accent under each section heading */
h2::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-top: 8px;
  border-radius: 4px;
  background: var(--sky);
  opacity: 0.85;
}
h3 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 26px 0 6px;
  color: var(--ink);
}
p, li { color: var(--ink); }
a { color: var(--sky-deep); text-underline-offset: 2px; }
a:hover { color: var(--sky); }
strong { color: var(--ink); font-weight: 700; }
ul, ol { padding-left: 22px; }
li { margin: 6px 0; }

/* ---- Table of contents ---- */
nav.toc {
  background: linear-gradient(180deg, #f6fcfe 0%, #ffffff 100%);
  border: 1px solid var(--wash-sky-bd);
  border-radius: 18px;
  padding: 18px 22px;
  margin: 26px 0 10px;
}
nav.toc p {
  margin: 0 0 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--ink);
}
nav.toc ol { margin: 0; columns: 2; column-gap: 30px; font-size: 15px; }
nav.toc li { margin: 4px 0; }
nav.toc a { text-decoration: none; }
nav.toc a:hover { text-decoration: underline; }

/* ---- Callouts (soft marker-wash cards) ---- */
.callout {
  background: var(--wash-sky);
  border: 1px solid var(--wash-sky-bd);
  border-left: 5px solid var(--sky);
  border-radius: 16px;
  padding: 15px 20px;
  margin: 20px 0;
}
.callout.warn {
  background: var(--wash-gold);
  border-color: var(--wash-gold-bd);
  border-left-color: var(--coral);
}
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }
.callout em { color: var(--ink); font-style: italic; }

/* ---- Draft / placeholder markers ---- */
.placeholder {
  background: #fef0c7;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 0.92em;
  color: #8a5a00;
  font-weight: 600;
}
.draft-banner {
  background: #fff1e8;
  border: 1px dashed var(--coral);
  border-radius: 14px;
  padding: 13px 18px;
  margin: 4px 0 18px;
  font-size: 15px;
  color: #9a4a23;
}

/* ---- Footer ---- */
footer.site {
  border-top: 1px solid var(--line);
  margin-top: 50px;
  padding-top: 22px;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}
footer.site a { color: var(--sky-deep); }

/* ---- Small screens ---- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  header.site { padding-top: 30px; }
  main.wrap { border-radius: 22px; margin: 6px 12px 60px; padding: 28px 20px 32px; }
  nav.toc ol { columns: 1; }
  h2 { font-size: 21px; }
}