/* Palette and typography from the official Intentional Parents Branding Guide
   2023 (V3 Refresh), pages 5-6. Not sampled, not invented.

     GREENS (brand main)      #052313  #244436  #5C765D  #74826F
     GREEN SHADE (secondary)  #9EC590
     TERTIARY / BACKGROUND    #CAD5B7  #DCDCCB
     ACCENT + BUTTONS         #E3D094
     NEUTRALS (brand base)    #F2F0ED  #FEFCF0  #C9C0B1  #F4EFE9
     BLACK                    #231E15

     Header font    Articulat CF v2
     Body font      Inter Regular
     Accent font    FreightMicro Pro Light Italic

   All three are self-hosted from the licensed files, subset to Latin-1 plus the
   punctuation the UI renders (curly quotes, ellipsis, the play triangle) and
   converted to woff2: 1MB of source OTF/TTF down to 96KB total. Self-hosting
   also avoids a Google Fonts round trip and the privacy question that carries.

   font-display:swap so text paints immediately in the fallback and reflows when
   the face lands, rather than showing nothing. */

@font-face {
  font-family: "Articulat CF";
  src: url("fonts/articulat-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("fonts/articulat-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("fonts/articulat-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;   /* variable */
  font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FreightMicro Pro";
  src: url("fonts/freightmicro-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}

:root {
  --green-deep:  #052313;
  --green:       #244436;
  --green-mid:   #5C765D;
  --green-muted: #74826F;
  --green-soft:  #9EC590;
  --tertiary:    #CAD5B7;
  --tertiary-2:  #DCDCCB;
  --accent:      #E3D094;   /* ACCENT + BUTTONS, per brand guide */
  --base:        #F2F0ED;
  --base-warm:   #FEFCF0;
  --base-tan:    #C9C0B1;
  --base-blush:  #F4EFE9;
  --ink:         #231E15;

  --font-head: "Articulat CF", "Inter", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-accent: "FreightMicro Pro", Georgia, "Times New Roman", serif;

  --radius: 10px;
  --max: 720px;
}

* { box-sizing: border-box; }

/* Any class setting display (grid/flex) overrides the hidden attribute's
   default display:none, so "hidden" elements stay visible and, when they are
   fixed-position overlays, keep swallowing clicks. Make hidden authoritative. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--base-warm);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: var(--font-head); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- password gate ---------- */
.gate {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: var(--green-deep);
  padding: 24px;
}
/* `display: grid` overrides the hidden attribute's default display:none, so a
   hidden fixed-position overlay keeps covering the page and swallowing clicks:
   after entering the password the Ask button was unclickable. */
.gate[hidden] { display: none; }
.gate-card {
  background: var(--base-warm);
  border-radius: 14px;
  padding: 34px 28px;
  width: 100%; max-width: 380px;
  text-align: center;
}
.gate-card h1 { margin: 10px 0 4px; font-size: 25px; }
.gate-card .sub { margin: 0 0 20px; color: var(--green-muted); font-size: 14px; }
.gate-card form { display: flex; gap: 8px; }
.gate-card input {
  flex: 1; padding: 11px 12px; font: inherit;
  border: 1px solid var(--base-tan); border-radius: var(--radius);
  background: #fff;
}
.gate-card button {
  padding: 11px 20px; font: 600 15px var(--font-head);
  background: var(--green); color: var(--base-warm);
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.err { color: #8C2F2F; font-size: 13px; margin: 12px 0 0; }

/* ---------- layout ---------- */
main { max-width: var(--max); margin: 0 auto; padding: 30px 20px 80px; }

header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; }
header h1 { margin: 0; font-size: 27px; }
header .sub {
  margin: 3px 0 0; color: var(--green-muted); font-size: 15px;
  font-family: var(--font-accent); font-style: italic; font-weight: 300;
}

.mark {
  width: 38px; height: 38px; flex: 0 0 38px;
  display: grid; place-items: center;
  background: var(--green); color: var(--tertiary);
  border-radius: 50%; font-size: 19px; line-height: 1;
}
.gate-card .mark { margin: 0 auto; }

/* ---------- ask ---------- */
#ask-form { display: flex; gap: 10px; align-items: flex-start; }
#q {
  flex: 1; padding: 13px 14px; font: inherit;
  border: 1px solid var(--base-tan); border-radius: var(--radius);
  background: #fff; resize: vertical; min-height: 58px;
}
#q:focus { outline: 2px solid var(--green-soft); outline-offset: 1px; }

/* Accent #E3D094 is a soft gold: it needs dark ink, not white, to stay legible. */
#send {
  padding: 15px 24px; font: 600 15px var(--font-head);
  background: var(--accent); color: var(--green-deep);
  border: 0; border-radius: var(--radius); cursor: pointer;
  min-height: 58px;
}
#send:hover { filter: brightness(.96); }
#send:disabled { opacity: .55; cursor: default; }

.examples {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; font-size: 13px; color: var(--green-muted);
}
.examples button {
  font: inherit; color: var(--green); background: var(--base-blush);
  border: 1px solid var(--tertiary-2); border-radius: 999px;
  padding: 6px 13px; cursor: pointer;
}
.examples button:hover { border-color: var(--green-soft); background: #fff; }

/* ---------- answer ---------- */
#result { margin-top: 32px; }
.status { font-size: 13px; color: var(--green-muted); min-height: 20px; }
.status.safety { color: #8C2F2F; font-weight: 600; }

.answer { font-size: 17px; line-height: 1.74; white-space: pre-wrap; }
.answer sup {
  font-size: 11px; color: var(--green-mid); font-weight: 700;
  padding: 0 1px; cursor: pointer;
}

/* ---------- clips ---------- */
#clips-wrap h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--green-muted); margin: 32px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--tertiary-2);
}
.clips { display: grid; gap: 10px; }
.clip {
  background: #fff; border: 1px solid var(--tertiary-2);
  border-radius: var(--radius); padding: 15px 16px;
}
.clip.target { border-color: var(--green-soft); box-shadow: 0 0 0 2px rgba(158,197,144,.3); }
.clip-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.clip-n {
  font: 700 11px var(--font-body); color: var(--green-deep);
  background: var(--tertiary); border-radius: 4px; padding: 2px 7px;
}
.clip-title { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.clip-meta { font-size: 12.5px; color: var(--green-muted); margin: 5px 0 9px; }
.clip-quote {
  font-family: var(--font-accent); font-style: italic; font-weight: 300; font-size: 15px;
  color: var(--green-deep);
  border-left: 2px solid var(--tertiary); padding-left: 11px; margin: 0 0 11px;
}
.clip a.watch {
  display: inline-block; font: 600 13.5px var(--font-head);
  color: var(--green-deep); background: var(--accent); text-decoration: none;
  padding: 8px 14px; border-radius: 7px;
}
.clip a.watch:hover { filter: brightness(.96); }
/* Audio-only episodes: RedCircle mid-roll ad insertion shifts playback by up to
   ~2 minutes, so these deliberately have no seek control. */
.noseek { font-size: 12.5px; color: var(--green-muted); }

/* ---------- feedback ---------- */
.feedback {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--tertiary-2);
  font-size: 13.5px; color: var(--green-muted);
}
.feedback button {
  font: inherit; background: #fff; border: 1px solid var(--tertiary-2);
  border-radius: 999px; padding: 6px 13px; cursor: pointer;
}
.feedback button.on { background: var(--green); color: var(--base-warm); border-color: var(--green); }
.feedback input {
  flex: 1; min-width: 180px; font: inherit; padding: 7px 10px;
  border: 1px solid var(--tertiary-2); border-radius: var(--radius);
}
.thanks { color: var(--green-mid); font-weight: 600; }

@media (max-width: 560px) {
  #ask-form { flex-direction: column; }
  #send { width: 100%; }
  header h1 { font-size: 23px; }
}