/* Mental Health Awareness Month stylesheet.
   Green is the awareness colour; indigo is this site's supporting tone and is
   not part of the ribbon. Values are generated from _data/palette.yml. */

:root {
  --green:       #1f7a45;
  --green-deep:  #14522f;
  --green-light: #9fd9b4;
  --green-wash:  #eef7f1;

  --indigo:       #2e3a6e;
  --indigo-deep:  #1d2547;
  --indigo-light: #b9c2e8;
  --indigo-wash:  #f0f2fa;

  --ink:      #1b1d22;
  --ink-soft: #474b57;
  --ink-mute: #6a6f7d;

  --bg:      #fafbf9;
  --surface: #ffffff;
  --line:    #e4e6ec;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, Cambria, 'Times New Roman', serif;

  --wrap: 1120px;
  --prose: 68ch;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--indigo-deep);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; font-family: var(--sans); font-weight: 650; }

p { margin: 0 0 1.1em; }
a { color: var(--green-deep); text-underline-offset: 2px; }
a:hover { color: var(--indigo); }

img, svg { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.prose { max-width: var(--prose); }
.center { text-align: center; margin-inline: auto; }

/* ---------- Crisis bar ---------- */

.crisis-bar {
  background: var(--indigo-deep);
  color: #eef1fb;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 9px 0;
}
.crisis-bar .wrap {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  align-items: baseline; justify-content: center; text-align: center;
}
.crisis-bar strong { font-weight: 600; color: #fff; }
.crisis-bar a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.crisis-bar a:hover { color: var(--green-light); }
.crisis-bar .sep { opacity: .4; }

/* ---------- Header ---------- */

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 74px; flex-wrap: wrap;
}

.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600;
  color: var(--indigo-deep); text-decoration: none; line-height: 1.25;
}
.brand:hover { color: var(--green-deep); }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand span { white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a {
  padding: 8px 13px; border-radius: 7px; font-size: .95rem; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
}
.nav a:hover { background: var(--green-wash); color: var(--green-deep); }
.nav a[aria-current="page"] { color: var(--indigo); background: var(--indigo-wash); font-weight: 600; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 24px; border-radius: 8px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); color: #fff; }
.btn-secondary { background: transparent; color: var(--indigo); border-color: var(--indigo-light); }
.btn-secondary:hover { background: var(--indigo-wash); color: var(--indigo-deep); }
.btn-sm { padding: 8px 15px; font-size: .875rem; }

/* ---------- Sections ---------- */

.section { padding: 68px 0; }
.section-tight { padding: 46px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }

.eyebrow {
  font-family: var(--sans); font-size: .78rem; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--green-deep);
  margin: 0 0 12px;
}

.lede { font-size: 1.16rem; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Hero ---------- */

.hero {
  padding: 76px 0 68px;
  background:
    radial-gradient(900px 400px at 15% -10%, var(--indigo-wash), transparent 70%),
    radial-gradient(760px 380px at 88% 8%, var(--green-wash), transparent 68%);
  border-bottom: 1px solid var(--line);
}
.hero h1 { margin-bottom: .35em; }
.hero .lede { font-size: 1.24rem; max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- Grids & cards ----------
   minmax(min(Npx, 100%), 1fr) rather than minmax(Npx, 1fr): a bare minimum
   larger than the available width forces horizontal overflow on narrow
   phones. At 320px the container is only 272px wide after padding. */

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
}
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin-bottom: 14px;
  background: var(--green-wash); color: var(--green-deep);
  font-size: .88rem; font-weight: 700;
}

/* ---------- Featured CTA module ---------- */

.feature {
  background: linear-gradient(135deg, var(--indigo-deep), var(--green-deep));
  border-radius: 14px; padding: 46px; color: #fff;
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 38px; align-items: center;
}
.feature h2 { color: #fff; margin-bottom: .35em; }
.feature p { color: rgba(255,255,255,.9); }
.feature .btn-primary { background: #fff; color: var(--indigo-deep); }
.feature .btn-primary:hover { background: var(--green-light); color: var(--indigo-deep); }
.feature-list { list-style: none; margin: 0; padding: 0; font-size: .96rem; }
.feature-list li { padding: 7px 0 7px 26px; position: relative; color: rgba(255,255,255,.92); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 12px; height: 2px; border-radius: 2px; background: var(--green-light);
}
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; padding: 32px; } }

/* ---------- Org list ---------- */

.org-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.org {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 24px;
  align-items: start; padding: 22px 26px; border-bottom: 1px solid var(--line);
}
.org:last-child { border-bottom: 0; }
.org h3 { margin: 0 0 4px; font-size: 1.05rem; }
.org p { margin: 0; font-size: .94rem; color: var(--ink-soft); }
.org .region {
  display: inline-block; margin-top: 8px; padding: 3px 9px; border-radius: 20px;
  background: var(--indigo-wash); color: var(--indigo);
  font-size: .76rem; font-weight: 600; letter-spacing: .03em;
}
@media (max-width: 620px) { .org { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--indigo-deep); color: rgba(255,255,255,.82);
  padding: 56px 0 34px; font-size: .92rem; margin-top: 0;
}
.site-footer h4 { color: #fff; font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.site-footer a:hover { color: var(--green-light); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; line-height: 1.5; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 38px; }
.footer-bottom {
  margin-top: 42px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .8rem; line-height: 1.6; color: rgba(255,255,255,.6);
}
.footer-bottom p { margin-bottom: .8em; }
.footer-bottom a { color: rgba(255,255,255,.82); }

/* ---------- Utilities ---------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--indigo-deep); color: #fff; padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 3px; }

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

/* ================= Media resources page ================= */

/* Jump nav */
.jumpnav {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 0; border-block: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
.jumpnav .wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jumpnav a {
  padding: 6px 13px; border-radius: 20px; font-size: .875rem; font-weight: 500;
  text-decoration: none; color: var(--ink-soft); border: 1px solid var(--line);
}
.jumpnav a:hover { background: var(--green-wash); border-color: var(--green-light); color: var(--green-deep); }

/* Notice */
.notice {
  border: 1px solid var(--indigo-light); background: var(--indigo-wash);
  border-radius: var(--radius); padding: 18px 22px; font-size: .94rem; color: var(--indigo-deep);
}
.notice p:last-child { margin-bottom: 0; }
.notice strong { font-weight: 650; }

/* Asset cards */
.asset-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(258px, 100%), 1fr)); }

.asset {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.asset-thumb {
  background: var(--bg); border-bottom: 1px solid var(--line);
  padding: 18px; display: flex; align-items: center; justify-content: center;
  min-height: 168px;
}
.asset-thumb img { max-height: 190px; width: auto; border-radius: 3px; }
.asset-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; gap: 4px; }
.asset-body h3 { font-family: var(--sans); font-size: 1rem; font-weight: 650; color: var(--ink); margin: 0; }
.asset-meta { font-size: .82rem; color: var(--ink-mute); margin: 0; }
.asset-desc { font-size: .89rem; color: var(--ink-soft); margin: 6px 0 0; }
.asset-dl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.asset-dl a {
  font-size: .8rem; font-weight: 600; text-decoration: none;
  padding: 6px 12px; border-radius: 6px;
  background: var(--green-wash); color: var(--green-deep); border: 1px solid transparent;
}
.asset-dl a:hover { background: var(--green); color: #fff; }

/* Color palette */
.swatch-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(178px, 100%), 1fr)); }
.swatch {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface);
}
.swatch-chip { height: 92px; }
.swatch-info { padding: 13px 15px 15px; }
.swatch-info h4 { margin: 0 0 3px; font-size: .92rem; font-weight: 650; color: var(--ink); }
.swatch-info .role { font-size: .78rem; color: var(--ink-mute); margin: 0 0 10px; }

.copy-btn {
  display: inline-flex; align-items: center; gap: 7px; width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  padding: 7px 11px; border-radius: 6px; cursor: pointer;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  text-align: left; transition: background .15s ease, border-color .15s ease;
}
.copy-btn:hover { background: var(--green-wash); border-color: var(--green-light); }
.copy-btn .ico { margin-left: auto; font-size: .72rem; color: var(--ink-mute); font-family: var(--sans); }
.copy-btn.copied { background: var(--green); color: #fff; border-color: var(--green); }
.copy-btn.copied .ico { color: rgba(255,255,255,.85); }

/* Palette strip / code block */
.codeblock {
  background: #17203d; color: #e6eaf6; border-radius: var(--radius);
  padding: 20px 22px; overflow-x: auto; white-space: pre;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .84rem; line-height: 1.75;
}
.codeblock .c { color: #8f97b4; }
.codeblock .k { color: var(--green-light); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head p { margin: 0; }
.section-head .lede { max-width: 62ch; }

/* Definition-style spec list */
.spec { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.spec li { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.spec li:last-child { border-bottom: 0; }
.spec dt, .spec .term { font-weight: 600; color: var(--ink); min-width: 148px; flex: none; }
.spec .val { color: var(--ink-soft); }

@media (max-width: 620px) {
  /* The header already wraps nav onto its own row here, so the wordmark has the
     full width and does not need a max-width forcing it onto three lines. */
  .brand { font-size: .95rem; }
  .brand span { white-space: nowrap; max-width: none; }
  .site-header .wrap { min-height: 64px; padding-block: 10px; }

  /* One item per line: the separators dangle at line ends once these wrap, and
     removing them without a column gap runs the numbers into the next label. */
  .crisis-bar .sep { display: none; }
  .crisis-bar .wrap { gap: 3px 0; }
  .crisis-bar .wrap > span { flex: 0 0 100%; }
  .crisis-bar { font-size: .82rem; padding: 8px 0; }
}

/* ================= Forms ================= */

.form { max-width: 34rem; }

.field { margin-bottom: 20px; }
.field label {
  display: block; margin-bottom: 6px;
  font-size: .93rem; font-weight: 600; color: var(--ink);
}
.field .hint { font-weight: 400; color: var(--ink-mute); font-size: .85rem; }

.field input,
.field select,
.field textarea {
  width: 100%; padding: 11px 13px;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-wash);
}

/* Netlify honeypot: real people never see this, bots fill it in. */
.hp { position: absolute; left: -9999px; }

.form button[type="submit"] { border: 0; font-family: var(--sans); }

/* Crisis callout, stronger than .notice because it must not be skimmed past. */
.crisis-note {
  border-left: 4px solid var(--indigo);
  background: var(--indigo-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin-bottom: 34px;
}
.crisis-note h2 {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 700;
  color: var(--indigo-deep); margin: 0 0 6px;
}
.crisis-note p { margin: 0 0 .5em; font-size: .95rem; color: var(--ink-soft); }
.crisis-note p:last-child { margin-bottom: 0; }
.crisis-note strong { color: var(--indigo-deep); }

/* ---------- Additions for this site ---------- */

/* Four-card sections read better as a 2x2 than as 3 + 1 orphan. 430px is above
   half the 1072px content width, so auto-fit settles on two columns. */
.grid-2x2 { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }

/* .spec is a two-column flex row with a 148px fixed term. At 320px the content
   box is only 272px wide, so the value column had nowhere to go and pushed the
   page 31px wide. Stack the two below phone width instead. */
@media (max-width: 520px) {
  .spec li { flex-direction: column; gap: 4px; }
  .spec dt, .spec .term { min-width: 0; }
}

/* The role email address and other long unbroken strings are wider than a
   320px content box on their own. Let them break rather than push the page. */
body { overflow-wrap: break-word; }

/* This site's wordmark is longer than the sibling's, so nowrap costs 2px of
   horizontal overflow at 320px. Nav already sits on its own row here, so the
   brand can take two lines. */
@media (max-width: 400px) {
  .brand { font-size: .9rem; }
  .brand span { white-space: normal; }
}