/* Site theme for the landing and Learn pages (#57), adapted from Ale Maleddu's ScreenMe
   design. The survey (screenme-prototype.html) keeps its own styles for now. */

:root{
  --bg:#F3F5F4; --surface:#FFFFFF; --ink:#1C2A2E; --muted:#56666B; --line:#D8DFDD;
  --primary:#2B5F66; --primary-ink:#FFFFFF; --primary-soft:#E2ECEC;
  --alert:#9A2B21; --alert-bg:#F9E6E2; --notice-bg:#EEF2F1;
  --t-breast:#E4C6EA; --t-cervical:#E6BDBD; --t-colorectal:#D2C3BD; --t-lung:#BFE6E6;
  --t-prostate:#C6C5C5; --t-skin:#F1E394; --t-testicular:#C4D2EE; --t-general:#CFDAD6;
  --radius:10px;
  --font:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111A1C; --surface:#182326; --ink:#E3EBEA; --muted:#9BAAAD; --line:#2C3B3E;
    --primary:#86BFC5; --primary-ink:#0D191B; --primary-soft:#1F3134;
    --alert:#F2A497; --alert-bg:#3A201C; --notice-bg:#1C2A2D;
    --t-breast:#5E4466; --t-cervical:#613E3E; --t-colorectal:#55463F; --t-lung:#2F5A5A;
    --t-prostate:#4B4B4B; --t-skin:#5F5724; --t-testicular:#34466B; --t-general:#34443F;
  }
}
:root[data-theme="dark"]{
  --bg:#111A1C; --surface:#182326; --ink:#E3EBEA; --muted:#9BAAAD; --line:#2C3B3E;
  --primary:#86BFC5; --primary-ink:#0D191B; --primary-soft:#1F3134;
  --alert:#F2A497; --alert-bg:#3A201C; --notice-bg:#1C2A2D;
  --t-breast:#5E4466; --t-cervical:#613E3E; --t-colorectal:#55463F; --t-lung:#2F5A5A;
  --t-prostate:#4B4B4B; --t-skin:#5F5724; --t-testicular:#34466B; --t-general:#34443F;
}
*,*::before,*::after{box-sizing:border-box}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.55}
img,svg{max-width:100%}
a{color:var(--primary);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.025em}
h2{font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:700}
h3{font-size:1.1rem;font-weight:700}
p{margin:0 0 1em}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:680px;margin:0 auto;padding:0 20px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:60px;flex-wrap:wrap}
.brand{font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.brand-mark{display:inline-grid;grid-template-columns:repeat(4,5px);gap:2px}
.brand-mark i{width:5px;height:14px;border-radius:2px;display:block}
nav.main{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav.main a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:500;font-size:.95rem}
nav.main a:hover{color:var(--ink);background:var(--primary-soft)}
nav.main a[aria-current="page"]{color:var(--ink);background:var(--primary-soft)}

/* buttons */
.btn{appearance:none;border:1px solid transparent;border-radius:999px;padding:12px 22px;font:600 1rem/1.2 var(--font);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px}
.btn-primary{background:var(--primary);color:var(--primary-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-link{background:none;border:none;color:var(--primary);font:600 1rem var(--font);cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:2px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* home */
.hero{padding:56px 0 24px}
.hero h1{max-width:15ch}
.hero .lede{font-size:1.2rem;color:var(--muted);max-width:58ch;margin-bottom:28px}
.hero .fine{color:var(--muted);font-size:.9rem;margin-top:14px}
.sw{flex:0 0 12px;height:12px;border-radius:3px;margin-top:4px}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0 8px}
.topic-link{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--ink)}
.topic-link:hover{border-color:var(--muted)}
.topic-link strong{display:block}
.topic-link span{color:var(--muted);font-size:.9rem;line-height:1.35}
.section{padding:40px 0}
.disclaimer{color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);padding:24px 0 40px;margin-top:32px}

/* learn */
.learn{display:grid;grid-template-columns:230px 1fr;gap:40px;padding:36px 0 60px}
.learn-nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 80px);align-self:start;display:grid;gap:2px}
.learn-nav a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem}
.learn-nav a:hover{color:var(--ink)}
.learn-nav a[aria-current="page"]{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
article.doc{max-width:68ch}
article.doc .tintline{height:6px;width:64px;border-radius:3px;margin-bottom:18px}
article.doc h2{margin-top:1.6em;font-size:1.3rem}
article.doc ul,article.doc ol{padding-left:1.2em;margin:0 0 1em}
article.doc li{margin-bottom:.4em}
.schedule{display:grid;gap:8px;margin:0 0 1.4em}
.schedule div{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.schedule div span:last-child{font-weight:600;text-align:right}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px}
.faq summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style-position:inside}
.faq details > div{padding:0 18px 16px}
.faq details > div p:last-child{margin:0}

@media (max-width:760px){
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 120px)} /* header wraps to two rows */
  body{font-size:16px}
  .learn{grid-template-columns:1fr;gap:20px}
  .learn-nav{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .learn-nav a{border:1px solid var(--line);background:var(--surface);padding:7px 10px}
  nav.main{margin-left:0;width:100%;padding-bottom:8px}
  .hero{padding-top:36px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}
@media print{
  .site-header,.no-print,.learn-nav{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .learn{display:block}
  article.doc section{break-inside:avoid-page}
}

/* ScreenMe additions (#57): average-risk box, eligibility check, Learn sections */
.who{background:var(--notice-bg);border-left:4px solid var(--primary);border-radius:var(--radius);padding:18px 22px;margin:8px 0 0}
.who h2{font-size:1.2rem}
.who p:last-child{margin:0}
.elig{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 28px;margin-top:12px}
.elig fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.elig legend{color:var(--muted);margin-bottom:10px}
.elig label{display:flex;gap:14px;align-items:flex-start;padding:13px 16px;border:1.5px solid var(--line);border-radius:var(--radius);cursor:pointer;line-height:1.35}
.elig label:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.elig input{margin:2px 0 0;width:20px;height:20px;accent-color:var(--primary);flex:0 0 auto}
.elig .result{margin-top:14px}
.elig .result.no{color:var(--alert)}
.elig .fine{color:var(--muted);font-size:.9rem;margin:12px 0 0}
.faq{margin-top:12px}
article.doc section{padding-top:8px;margin-bottom:48px}
article.doc section > h2:first-of-type{margin-top:0}
article.doc h1{font-size:clamp(1.8rem,4vw,2.5rem)}
article.doc section h2{font-size:1.5rem}
article.doc section h3{margin-top:1.4em}
.site-footer{color:var(--muted);font-size:.9rem;padding-bottom:40px}