/* ADHD Field Guide - "Cognitive Equilibrium" theme layer.
   Loaded LAST on every page. Re-skins the existing markup only: colors,
   type, cards, buttons and the hero artwork. No layout or behavior changes.
   Warm linen canvas, deep forest accent, soft tactile cards. */

/* ---------- palette ---------- */
:root{
  --paper:#fbf9f5;
  --surface:#ffffff;
  --surface-2:#f5f2eb;
  --ink:#171d1a;
  --ink-soft:#414844;
  --grey:#626d66;
  --line:#e6e2d9;
  --accent:#1d4332;
  --accent-soft:#e8f0eb;
  --teal:#2d6a4f;
  --teal-soft:#e6efe9;
  --blue:#436c82;
  --amber:#b27a38;
  --amber-soft:#f9f0e2;
  --red:#9e3b30;
  --green:#2d6a4f;
  --shadow:0 4px 6px -1px rgba(30,36,33,.03),0 20px 35px -8px rgba(30,36,33,.07);
  --shadow-lg:0 6px 12px -2px rgba(30,36,33,.05),0 30px 60px -12px rgba(30,36,33,.14);
  --ce-glass:rgba(255,255,255,.62);
  --ce-cta-shadow:0 8px 24px -4px rgba(29,67,50,.28);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1412;
    --surface:#171d1a;
    --surface-2:#1e2622;
    --ink:#ecf2ed;
    --ink-soft:#c1c8c2;
    --grey:#9aa59e;
    --line:#2a332e;
    --accent:#7fbf9c;
    --accent-soft:#1c2e25;
    --teal:#7fbf9c;
    --teal-soft:#1a2b23;
    --blue:#8fb8cf;
    --amber:#e2b77f;
    --amber-soft:#2e2517;
    --red:#e8857a;
    --green:#7fbf9c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
    --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 22px 50px rgba(0,0,0,.5);
    --ce-glass:rgba(23,29,26,.78);
    --ce-cta-shadow:0 8px 24px -6px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#0f1412;
  --surface:#171d1a;
  --surface-2:#1e2622;
  --ink:#ecf2ed;
  --ink-soft:#c1c8c2;
  --grey:#9aa59e;
  --line:#2a332e;
  --accent:#7fbf9c;
  --accent-soft:#1c2e25;
  --teal:#7fbf9c;
  --teal-soft:#1a2b23;
  --blue:#8fb8cf;
  --amber:#e2b77f;
  --amber-soft:#2e2517;
  --red:#e8857a;
  --green:#7fbf9c;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 22px 50px rgba(0,0,0,.5);
  --ce-glass:rgba(23,29,26,.78);
  --ce-cta-shadow:0 8px 24px -6px rgba(0,0,0,.6);
}

/* ---------- type: Figtree (Latin-script pages: English, Hungarian) ----------
   Arabic and Hebrew keep their own script fonts. */
html:is([lang="en"],[lang="hu"]){
  --fh:"Figtree",system-ui,sans-serif;
  --fb:"Figtree",system-ui,sans-serif;
  --fm:"Figtree",system-ui,sans-serif;
}
html:is([lang="en"],[lang="hu"]) body,
html:is([lang="en"],[lang="hu"]) body *:not(code,pre,kbd,samp,svg,svg *){
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif!important;
}
html:is([lang="en"],[lang="hu"]) body :is(h1,h2,h3,h4,.display,.brand,.dl-t,.tool-t,.exp-go,.btn,.auth-primary),
html:is([lang="en"],[lang="hu"]) body :is(h1,h2,h3,h4,.display,.brand) *{
  font-family:"Figtree",system-ui,sans-serif!important;
}
html:is([lang="en"],[lang="hu"]) body{font-size:17px;line-height:1.7;letter-spacing:-.003em}
h1,h2,h3,h4,.display{letter-spacing:-.02em}
html:is([lang="en"],[lang="hu"]) h1{font-weight:700;letter-spacing:-.03em}
html:is([lang="en"],[lang="hu"]) h2{font-weight:700}
html:is([lang="en"],[lang="hu"]) h3{font-weight:650}

/* ---------- canvas ---------- */
body{
  background:
    radial-gradient(1100px 620px at 100% -8%, rgba(178,122,56,.07), transparent 60%),
    radial-gradient(950px 700px at -12% 112%, rgba(45,106,79,.06), transparent 55%),
    var(--paper)!important;
  background-attachment:fixed;
}
::selection{background:var(--accent);color:#fff}
a{color:var(--teal)}

/* ---------- nav: frosted linen ---------- */
.nav{
  background:color-mix(in srgb,var(--paper) 88%,transparent)!important;
  -webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line)!important;
}
@media (max-width:760px){.nav{background:color-mix(in srgb,var(--paper) 97%,transparent)!important;-webkit-backdrop-filter:none;backdrop-filter:none}}
.nav-links a{letter-spacing:.1em;font-weight:600;font-size:.7rem}
.nav-links a:hover{color:var(--accent)}

/* ---------- eyebrows: label-caps ---------- */
.eyebrow{
  color:var(--teal)!important;
  font-weight:600;letter-spacing:.12em;
}
.eyebrow::before{background:var(--amber)!important}

/* ---------- buttons: pills ---------- */
.btn,.kofi-btn,.auth-primary,.exp-go{border-radius:999px!important}
.btn-primary,.kofi-btn,.auth-primary{
  background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;
  box-shadow:var(--ce-cta-shadow)!important;
}
:root[data-theme="dark"] :is(.btn-primary,.kofi-btn,.auth-primary,.cad-nav){color:#0d1f17!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.btn-primary,.kofi-btn,.auth-primary,.cad-nav){color:#0d1f17!important}}
.btn-primary:hover,.kofi-btn:hover{transform:translateY(-1px) scale(1.02)}
.btn-ghost{background:transparent!important;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent)!important;color:var(--ink)!important}
.btn-ghost:hover{background:var(--surface-2)!important}

/* ---------- cards: soft tactile ---------- */
.medcard,.dx-card,.dl-card,.tool-card,.support-card,.focus-card,
#diagnosis .dx-card{
  border-radius:24px!important;
  border:1px solid color-mix(in srgb,var(--ink) 7%,transparent)!important;
  box-shadow:var(--shadow)!important;
}
.medcard:hover,.dx-card:hover,.dl-card:hover,.tool-card:hover{
  border-color:color-mix(in srgb,var(--teal) 35%,transparent)!important;
  box-shadow:var(--shadow-lg)!important;
}
.dl-ic,.dx-n{border-radius:12px!important}

/* the big "Live a day with ADHD" banner */
.exp-card{
  background:linear-gradient(135deg,#2d6a4f 0%,#1d4332 55%,#143326 100%)!important;
  box-shadow:0 18px 44px -10px rgba(29,67,50,.45)!important;
  border-radius:28px!important;
}
.exp-card:hover{box-shadow:0 26px 60px -10px rgba(29,67,50,.55)!important}
.exp-go{color:#1d4332!important}

/* ---------- hero: glass brain behind the profile card ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{
  background:
    radial-gradient(560px 320px at 18% 22%, rgba(178,122,56,.10), transparent 62%),
    radial-gradient(520px 340px at 92% 8%, rgba(45,106,79,.08), transparent 60%)!important;
}
@media (max-width:760px){.hero-grid > *{min-width:0}}
/* right column: the brain sits on top, fully visible; the profile card sits below it */
.hero-grid > :last-child{position:relative;display:flex;flex-direction:column;align-items:center}
.hero-grid > :last-child::before{
  content:"";display:block;position:relative;z-index:0;pointer-events:none;
  width:min(500px,118%);aspect-ratio:760/620;margin:-3rem 0 -4.5rem;
  background:url("/hero-brain-glass.webp") center/contain no-repeat;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
  opacity:.95;
}
.hero-grid > :last-child > .focus-card{position:relative;z-index:1;width:100%;max-width:420px}
@media (max-width:860px){
  .hero-grid > :last-child::before{width:min(420px,100%);margin:-1rem 0 -3.5rem;opacity:.9}
}
:root[data-theme="dark"] .hero-grid > :last-child::before{opacity:.35}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-grid > :last-child::before{opacity:.35}}

/* article / subpage heroes: faint neural pathways */
.hero:not(:has(.hero-grid))::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/neural-bg.jpg") center/cover no-repeat;
  opacity:.22;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);
          mask-image:linear-gradient(#000 40%,transparent);
}
.hero:not(:has(.hero-grid)) > *{position:relative;z-index:1}
:root[data-theme="dark"] .hero:not(:has(.hero-grid))::after{opacity:.06}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero:not(:has(.hero-grid))::after{opacity:.06}}

/* headline highlight word: forest instead of orange */
:root:not([data-calm="on"]) .hl{
  background:linear-gradient(115deg,#2d6a4f 0%,#1d4332 60%,#436c82 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
}
:root[data-theme="dark"]:not([data-calm="on"]) .hl{background:linear-gradient(115deg,#a6d0b9,#7fbf9c 60%,#8fb8cf)!important;-webkit-background-clip:text!important;background-clip:text!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-calm="on"]) .hl{background:linear-gradient(115deg,#a6d0b9,#7fbf9c 60%,#8fb8cf)!important;-webkit-background-clip:text!important;background-clip:text!important}}
@media (max-width:520px){.hl{white-space:normal!important}}
.hl::after{display:none!important}

/* ---------- calm mode & reduced motion: keep it flat ---------- */
:root[data-calm="on"] .hero-grid > :last-child::before,
:root[data-calm="on"] .hero:not(:has(.hero-grid))::after{display:none}
@media (prefers-reduced-motion:reduce){
  .btn-primary:hover,.kofi-btn:hover{transform:none}
}
@media print{
  .hero-grid > :last-child::before,.hero::after{display:none!important}
  body{background:#fff!important}
}

/* ---------- hero fit (wider Latin font) ---------- */
.hl{white-space:normal!important}
@media (min-width:861px){
  .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(300px,.9fr)!important}
}
html:is([lang="en"],[lang="hu"]) .hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem)!important}

/* ---------- hero brain: glass brain + animated ADHD neurotransmitter pathways ---------- */
@keyframes brainFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
/* both layers share one width so the pathways stay locked to the anatomy (image 1070x847; svg adds a 104px key strip below) */
.hero-grid > :last-child::before,
.hero-grid > :last-child::after{
  width:min(600px,140%);aspect-ratio:1070/847;
  animation:brainFloat 7s ease-in-out infinite;
}
.hero-grid > :last-child::before{
  margin:-2.5rem 0 calc(min(600px,140%) * 104 / 1070 + .4rem);opacity:1;
  background:url("/hero-brain-glass.webp") center/contain no-repeat;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(farthest-side,#000 82%,transparent 100%);
          mask-image:radial-gradient(farthest-side,#000 82%,transparent 100%);
}
.hero-grid > :last-child::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-2.5rem;left:50%;translate:-50% 0;aspect-ratio:1070/951;
  background:url("/brain-chemicals-en.svg") center/contain no-repeat;
}
html[lang="ar"] .hero-grid > :last-child::after{background-image:url("/brain-chemicals-ar.svg")}
html[lang="he"] .hero-grid > :last-child::after{background-image:url("/brain-chemicals-he.svg")}
html[lang="hu"] .hero-grid > :last-child::after{background-image:url("/brain-chemicals-hu.svg")}
@media (max-width:860px){
  .hero-grid > :last-child::before,
  .hero-grid > :last-child::after{width:min(480px,112%)}
  .hero-grid > :last-child::before{margin:-1rem 0 calc(min(480px,112%) * 104 / 1070 + .4rem)}
  .hero-grid > :last-child::after{top:-1rem}
}
/* dark backgrounds: multiply would swallow the glass, so draw it normally and dimmer */
:root[data-theme="dark"] .hero-grid > :last-child::before{mix-blend-mode:normal;opacity:.55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-grid > :last-child::before{mix-blend-mode:normal;opacity:.55}}
:root[data-calm="on"] .hero-grid > :last-child::after{display:none}
@media (prefers-reduced-motion:reduce){
  .hero-grid > :last-child::before,.hero-grid > :last-child::after{animation:none}
  .hero-grid > :last-child::after{display:none}
}
@media print{.hero-grid > :last-child::after{display:none!important}}

/* ---------- no header jump when langmenu.js swaps in the globe button ----------
   the inline language links are hidden from first paint and the globe's exact box is reserved,
   so the late (deferred) swap doesn't change the nav's size */
.nav-tools > a.icon-btn:is([href="/"],[href="/ar"],[href="/he"],[href="/hu"],[href$="index.html"],[href$="ar.html"],[href$="he.html"],[href$="hu.html"]){display:none}
.nav-tools:has(> a.icon-btn:is([href="/"],[href="/ar"],[href="/he"],[href="/hu"]))::before{content:"";flex:0 0 55.5px;height:30.8px}
/* on narrow screens the late-shown Sign in / Saved buttons wrap to two lines (37.8px);
   reserve that row height up front so the hero isn't pushed down when they appear */
@media (max-width:900px){.nav-inner .nav-tools{min-height:38px;align-items:center}}

/* =========================================================================
   frontend-design pass: fewer template tells, one memorable element.
   ========================================================================= */

/* 1. Labels in sentence case, not tracked capitals (Latin-script pages; Arabic/Hebrew have no case) */
html:is([lang="en"],[lang="hu"]) :is(.eyebrow,.nav-links a,.focus-card h2,.exp-badge,.med-badge,.movr .badge,
  .strat .k,.pc h4,.medcard .mpc h5,.cmdk-item .kind,.timer-mode,.a11y-panel h4,#diagnosis .dx-group,
  .tracker-form label,.auth-modal label){
  text-transform:none!important;letter-spacing:0!important;
}
html:is([lang="en"],[lang="hu"]) .eyebrow{font-size:.95rem!important;font-weight:600}
html:is([lang="en"],[lang="hu"]) .nav-links a{font-size:.88rem!important;font-weight:500!important}
html:is([lang="en"],[lang="hu"]) .focus-card h2{font-size:1rem!important;font-weight:700}

/* 2. The headline: one ink colour; the wave of weights (wave-type.js) carries the idea */
.hero h1 .hl,
:root:not([data-calm="on"]) .hero h1 .hl{
  background:none!important;-webkit-text-fill-color:currentColor!important;color:inherit!important;
}
.hero h1 .hl span{font-variation-settings:normal}

/* 3. Card hierarchy: the hero card keeps its depth; small grid cards go flat */
.dx-card,#diagnosis .dx-card,.dl-card,.tool-card,.medcard{
  border-radius:14px!important;box-shadow:none!important;
  border:1px solid var(--line)!important;background:var(--surface)!important;
}
.dx-card:hover,.dl-card:hover,.tool-card:hover,.medcard:hover{
  transform:none!important;box-shadow:none!important;border-color:var(--teal)!important;
}

/* 4. No slide-in on scroll: content is simply there */
.reveal,.reveal.in{opacity:1!important;transform:none!important;transition:none!important}

/* =========================================================================
   ui-ux-pro-max pass: article reading comfort & accessibility
   ========================================================================= */

/* Keyboard focus is always visible (none was defined) */
:focus-visible{outline:2px solid var(--teal)!important;outline-offset:3px;border-radius:6px}
summary:focus-visible{border-radius:8px}

/* Article header links: readable size, AA contrast, >=32px tap targets */
.nav .lnks a{font-size:.86rem!important;padding:.45rem .8rem!important;min-height:32px;display:inline-flex;align-items:center;color:var(--ink-soft)!important}
.nav .lnks a.on{color:var(--accent)!important;font-weight:600}

/* Article pages only (not the homepages): comfortable 65-75 character measure */
html:not(:has(.hero-grid)) .wrap > :is(p,ul,ol,blockquote,details){max-width:60ch}
html:not(:has(.hero-grid)) .wrap h2[id],html:not(:has(.hero-grid)) .wrap h3[id]{scroll-margin-top:96px}

/* "On this page" (article-toc.js) */
.toc-otp{max-width:46rem;margin:1.6rem 0 .4rem;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:.2rem 1.1rem}
.toc-otp summary{cursor:pointer;font-weight:600;padding:.7rem 0;color:var(--ink);list-style-position:inside}
.toc-otp ol{margin:0 0 .9rem;padding-inline-start:1.3rem;columns:2;column-gap:2rem}
.toc-otp li{margin:.25rem 0;break-inside:avoid;line-height:1.45;font-size:.95rem}
.toc-otp li::marker{color:var(--grey)}
.toc-otp a{color:var(--ink-soft);text-decoration:none;padding:.15rem 0}
.toc-otp a:hover{color:var(--teal);text-decoration:underline}
@media (max-width:760px){.toc-otp ol{columns:1}}
@media print{.toc-otp{display:none}}
/* Phones: brand on its own line, header links in one swipeable row (keeps 32px targets) */
@media (max-width:760px){
  .nav .in:has(> .lnks){flex-wrap:wrap;row-gap:.5rem}
  .nav .in > .brand{white-space:nowrap}
  .nav .in > .lnks{flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:.4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav .in > .lnks::-webkit-scrollbar{display:none}
  .nav .lnks a{flex:0 0 auto;font-size:.82rem!important;padding:.4rem .7rem!important}
}
html:is([lang="he"],[lang="ar"]) :is(.eyebrow,.nav-links a,.focus-card h2){letter-spacing:0!important}