/* Food Health Lab — shared site chrome, typography and global frame. */
@font-face{
  font-family:"Inter";
  src:url("/fonts/Inter.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:block;
}
:root{
  --ink:#10231a;
  --muted:#5d7468;
  --leaf:#2f9e6b;
  --leaf-d:#247a52;
  --leaf-l:#7ed3a6;
  --leaf-bg:#eef8f2;
  --line:#e2ece6;
  --card:#fff;
  --fhl-font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--fhl-font-sans);color:var(--ink);background:#fff;line-height:1.55}
a{color:inherit}
img{max-width:100%}
.gh-util{background:#0f231a;color:#bcd7c9;font-size:12.5px}
.gh-util .gh-w{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;
  align-items:center;height:34px}
.gh-util a{color:#bcd7c9;margin-left:18px;text-decoration:none}
.gh-util a:hover{color:#fff}
.gh-util .gh-promise{color:#9fe0bd;font-weight:600}
@media(max-width:820px){.gh-util .gh-w{height:auto;min-height:34px;flex-direction:column;
  align-items:center;gap:2px;padding:6px 18px;text-align:center}
  .gh-util a{margin:0 9px}}

.gh-head{background:#fff;border-bottom:1px solid #e2ece6;position:sticky;top:0;z-index:200}
.gh-head .gh-w{max-width:1180px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px;height:68px}
.gh-brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration:none}
.gh-mark{width:34px;height:34px;display:grid;place-items:center;border:1.5px solid #10231a;color:#10231a;background:#fff;letter-spacing:.05em}
.gh-mark span{font-size:9px;font-weight:800;line-height:1}
.gh-brand b{font-family:var(--fhl-font-sans);font-weight:600;text-transform:uppercase;
  letter-spacing:.15em;font-size:14.5px;color:#10231a}
.gh-nav{display:flex;gap:2px;margin-left:auto}
.gh-item{position:relative}
.gh-item>a{display:flex;align-items:center;gap:5px;padding:23px 14px;font-size:14.5px;font-weight:600;
  color:#10231a;text-decoration:none;border-bottom:3px solid transparent;transition:color .12s,border-color .12s}
.gh-item>a .gh-car{font-size:10px;color:#5d7468;transition:transform .15s}
.gh-item:hover>a{color:#247a52;border-bottom-color:#2f9e6b}
.gh-item:hover>a .gh-car{transform:rotate(180deg)}
.gh-item.gh-here>a{border-bottom-color:#2f9e6b;color:#247a52}
.gh-drop{position:absolute;left:0;top:100%;min-width:280px;background:#fff;border:1px solid #e2ece6;
  border-radius:14px;box-shadow:0 18px 40px rgba(16,35,26,.13);padding:14px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .15s,transform .15s,visibility .15s;z-index:210}
.gh-item:hover .gh-drop{opacity:1;visibility:visible;transform:translateY(0)}
.gh-drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.gh-drop h4{grid-column:1/-1;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#247a52;
  padding:6px 10px 4px;margin:0;font-family:var(--fhl-font-sans);font-weight:700}
.gh-drop a{display:block;padding:5.5px 10px;border-radius:8px;font-size:13.5px;color:#10231a;text-decoration:none}
.gh-drop a:hover{background:#eef8f2;color:#247a52}
.gh-drop a .gh-h{color:#5d7468;font-size:12px}
.gh-cta{margin-left:8px;font-size:13.5px;font-weight:600;color:#596B3B;text-decoration:none;
  border:1.5px solid #596B3B;padding:8px 15px;border-radius:999px;flex:0 0 auto}
.gh-cta:hover{color:#43542C;border-color:#43542C;background:#f4f7ef}
@media(max-width:1060px){.gh-nav,.gh-cta{display:none}}

/* ---- Article left sidebar (Stage 2) ---- */
.artgrid{display:grid;grid-template-columns:236px 1fr;gap:42px;align-items:start;margin-top:8px}
.artside{position:sticky;top:88px}
.artside .toc{position:static !important;float:none !important;width:auto !important;max-width:none !important;
  margin:0 0 22px !important}
.asgrp{margin-bottom:22px}
.asgrp h4,.asgrp-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#247a52;margin:0 0 10px}
.assib a{display:block;font-size:13.5px;padding:6px 10px;border-radius:8px;color:#10231a;text-decoration:none}
.assib a:hover{background:#eef8f2;color:#247a52}
.assib a.cur{background:#2f9e6b;color:#fff;font-weight:600}
.assib a.all{color:#247a52;font-weight:600;margin-top:2px}
@media(max-width:900px){.artgrid{grid-template-columns:1fr;gap:0}.artside{position:static;margin-bottom:20px}}

/* ---- Flatten article components for scannability (Stage 2b) ---- */
/* Sidebar TOC -> clean vertical contents list */
.artside .toc{background:none !important;border:0 !important;padding:0 !important;margin:0 0 22px !important}
.artside .toc b{display:block;font-size:11px;letter-spacing:.7px;color:#247a52;margin-bottom:8px}
.artside .toc ul{flex-direction:column !important;gap:0 !important;margin:0 !important}
.artside .toc a{background:none !important;border:0 !important;border-left:2px solid #e2ece6 !important;
  border-radius:0 !important;padding:5px 0 5px 12px !important;display:block !important;
  font-size:13.5px;color:#5d7468}
.artside .toc a:hover{border-left-color:#2f9e6b !important;color:#247a52}

/* Main content: remove nested boxes, keep a clean spec-sheet rhythm */
.artmain .card{background:none !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;margin:4px 0 6px !important}
.artmain .card h3{color:#10231a}
.artmain .clin{background:none !important;border:0 !important;border-left:0 !important;
  border-radius:0 !important;padding:0 !important;margin-top:10px !important;display:block !important}
.artmain .clin .row{display:flex;gap:16px;align-items:baseline;padding:10px 0;
  border-bottom:1px solid #eef2ef;line-height:1.55}
.artmain .clin .row:last-child{border-bottom:0}
.artmain .clin .k{flex:0 0 130px;color:#247a52;font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.4px}
.artmain .clin .tox{background:none !important;padding:10px 0 !important;border-radius:0 !important}
.artmain .clin .tox .k{color:#a83f35}
.artmain .clin .ther .k{color:#33518c}
@media(max-width:640px){.artmain .clin .row{flex-direction:column;gap:2px}.artmain .clin .k{flex-basis:auto}}

/* ---- Calmer article page: fewer boxes, more air (Stage 2c) ---- */
/* remove breadcrumb — global nav + sidebar already show location */
.crumb{display:none !important}
/* "Read first" — calm shaded note in the same nuance as the Bottom-line box */
.wrap .safety{background:#fdf3f3 !important;border:1px solid #f1d8d5 !important;border-left:0 !important;
  border-radius:10px !important;box-shadow:0 4px 14px rgba(16,35,26,.06) !important;
  padding:13px 16px !important;margin:16px 0 !important}
.wrap .safety b{color:#a15048 !important}
.wrap .safety p{font-size:13px !important;line-height:1.55 !important;color:#5a4a49 !important;margin:0 !important}
/* flatten the reviewed-by card into a quiet credit line */
.artmain .author{background:none !important;border:0 !important;border-top:1px solid #e2ece6 !important;
  border-radius:0 !important;box-shadow:none !important;padding:18px 0 0 !important;margin:34px 0 0 !important}
/* drop the redundant bottom pill nav (sidebar siblings + read-next replace it) */
.artmain .pillnav{display:none !important}
/* more breathing room + lighter section rule */
.artmain .group-head{margin-top:44px !important}
.artmain .group-head h2, .artmain > h2{border-bottom:0 !important;padding-bottom:0 !important;
  font-size:23px !important;margin-bottom:6px !important}

/* remove the tag pills under the byline (redundant with nav + sidebar) */
.tag-pill{display:none !important}
.wrap p:has(.tag-pill){display:none !important}

/* first section aligns with the top of the sidebar (no leading gap) */
.artmain > *:first-child, .artmain .group-head:first-child{margin-top:0 !important;padding-top:0 !important}

/* Unified type: article section headings use the shared Inter stack. */
.artmain .group-head h2, .artmain h2, .artmain h3{
  font-family:var(--fhl-font-sans) !important;
  font-weight:700 !important;letter-spacing:-.01em !important;color:#10231a !important}
.artmain h3{font-size:16.5px !important}
/* Uniform modern sans section headings SITE-WIDE — covers hubs + any page that
   missed the sidebar stage (no .artmain). Bodil 2026-07-04 */
.group-head h2, article h2{
  font-family:var(--fhl-font-sans) !important;
  font-weight:700 !important;letter-spacing:-.01em !important;color:#10231a !important}

/* ===== Design pass (Bodil 1–4) ===== */
/* (4) tighter palette: green is the default accent, red only for caution/toxicity */
.artmain .clin .ther .k{color:#247a52 !important}
/* (3) uniform typographic rhythm */
.artmain p, .artmain li{font-size:16px !important;line-height:1.65 !important}
.artmain p{margin:0 0 13px !important}
.artmain li{margin:6px 0 !important}
/* (2) scroll-spy active state in the sticky contents list */
.artside .toc a.on{color:#247a52 !important;border-left-color:#2f9e6b !important;font-weight:600}
/* (1) Key takeaways box */
.keytakeaways{background:#f3f8f5;border:1px solid #e2ece6;border-radius:12px;padding:15px 20px;margin:0 0 26px}
.keytakeaways h4{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#247a52;margin:0 0 9px}
.keytakeaways ul{margin:0;padding:0;list-style:none}
.keytakeaways li{position:relative;padding-left:24px !important;margin:7px 0 !important;font-size:14.5px !important;line-height:1.5 !important}
.keytakeaways li::before{content:"✓";position:absolute;left:0;top:0;color:#2f9e6b;font-weight:700}

/* anchor jumps land below the sticky header so headings and inline targets stay visible. */
.group-head, article [id], .artmain [id], .artmain h2[id]{scroll-margin-top:150px !important}

/* ===== Go-live components ===== */
/* Unified footer */
.gf{background:#0f231a;color:#cfe3d8;margin-top:56px}
.gf-w{max-width:1180px;margin:0 auto;padding:0 24px}
.gf-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;padding:40px 0}
.gf .gf-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9fe0bd;margin:0 0 12px}
.gf a{color:#cfe3d8;display:block;font-size:13.5px;padding:4px 0;text-decoration:none}
.gf a:hover{color:#fff}
.gf-brand b{font-family:var(--fhl-font-sans);text-transform:uppercase;letter-spacing:.14em;font-size:15px;color:#fff}
.gf-brand p{color:#9fb8ab;font-size:12.5px;line-height:1.6;margin-top:10px;max-width:340px}
.gf-bottom{border-top:1px solid rgba(255,255,255,.1)}
.gf-bottom .gf-w{display:flex;justify-content:space-between;gap:16px;padding:15px 0;font-size:12px;color:#9fb8ab;flex-wrap:wrap}
@media(max-width:760px){.gf-top{grid-template-columns:1fr 1fr}}

/* Read next */
.rnext{margin:46px 0 0}
.rnext h4{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#247a52;margin:0 0 14px}
.rnext-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rncard{display:block;background:#fff;border:1px solid #e2ece6;border-radius:12px;overflow:hidden;text-decoration:none;color:#10231a;transition:transform .16s,box-shadow .16s}
.rncard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(16,35,26,.12)}
.rnpic{display:block;height:118px;background-size:cover;background-position:center;background-color:#eef3f0}
.rnb{display:block;padding:12px 14px 14px}
.rnk{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#247a52;font-weight:700}
.rncard h5{font-size:15px;margin:4px 0 0;line-height:1.3;color:#10231a}
@media(max-width:760px){.rnext-grid{grid-template-columns:1fr}}

/* Mobile menu */
.gh-burger{display:none;margin-left:auto;background:none;border:0;font-size:26px;line-height:1;color:#10231a;cursor:pointer;padding:4px 6px}
.gh-mobile{display:none;border-top:1px solid #e2ece6;background:#fff}
.gh-mobile a{display:block;padding:13px 24px;font-size:15px;font-weight:600;color:#10231a;text-decoration:none;border-bottom:1px solid #f0f4f2}
.gh-mobile a:hover{background:#eef8f2;color:#247a52}
@media(max-width:1060px){.gh-burger{display:block} body.navopen .gh-mobile{display:block;max-height:calc(100vh - 64px);overflow:auto}}

/* Contact page */
.contact-main{background:#fbfdfb}
.contact-wrap{max-width:1040px;margin:0 auto;padding:58px 24px 72px}
.contact-head{max-width:720px;margin-bottom:28px}
.contact-k{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#247a52;margin-bottom:10px}
.contact-head h1{font-family:var(--fhl-font-sans);font-size:clamp(34px,5vw,56px);line-height:1.02;letter-spacing:0;margin:0 0 14px;color:#10231a}
.contact-head p{font-size:18px;line-height:1.6;color:#5d7468;margin:0;max-width:650px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:32px;align-items:start}
.contact-form{background:#fff;border:1px solid #e2ece6;border-radius:8px;padding:24px;box-shadow:0 14px 36px rgba(16,35,26,.08)}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.contact-field label{font-size:13px;font-weight:700;color:#10231a}
.contact-field input,.contact-field textarea{width:100%;border:1px solid #cfded6;border-radius:6px;background:#fff;color:#10231a;font:inherit;font-size:15px;padding:11px 12px;outline:none}
.contact-field textarea{min-height:170px;resize:vertical}
.contact-field input:focus,.contact-field textarea:focus{border-color:#2f9e6b;box-shadow:0 0 0 3px rgba(47,158,107,.13)}
.contact-field span{font-size:12.5px;color:#9b332e}
.contact-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact-submit{border:0;border-radius:6px;background:#247a52;color:#fff;font:inherit;font-weight:700;padding:12px 18px;cursor:pointer}
.contact-submit:hover{background:#1d6845}
.contact-note{font-size:13px;color:#5d7468;margin:0}
.contact-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact-alert{border-radius:6px;padding:11px 13px;margin:0 0 16px;font-size:14px;line-height:1.45}
.contact-ok{background:#eef8f2;border:1px solid #c8e9d8;color:#155a38}
.contact-error{background:#fdf3f3;border:1px solid #efcbc7;color:#8a2d28}
.contact-error ul{margin:0;padding-left:18px}
.contact-card{border-left:3px solid #2f9e6b;padding:4px 0 4px 18px}
.contact-card h2{font-family:var(--fhl-font-sans);font-size:18px;line-height:1.25;margin:0 0 10px;color:#10231a}
.contact-card p{font-size:15px;color:#5d7468;line-height:1.6;margin:0 0 14px}
.contact-card a{color:#247a52;font-weight:700;text-decoration:none}
.contact-card a:hover{text-decoration:underline}
@media(max-width:780px){.contact-wrap{padding:42px 20px 58px}.contact-grid,.contact-row{grid-template-columns:1fr}.contact-form{padding:20px}}

/* ---- Supplements mega-flyout (hover Vitamins/Minerals -> all monographs) ---- */
.gh-fly{position:relative}
.gh-fly>a{padding-right:26px}
.gh-fly>a::after{content:"›";position:absolute;right:10px;color:#5d7468;font-weight:700;font-size:16px;line-height:1}
.gh-flout{position:absolute;left:100%;top:-14px;margin-left:4px;background:#fff;border:1px solid #e2ece6;
  border-radius:14px;box-shadow:0 18px 44px rgba(16,35,26,.15);padding:14px 16px;display:flex;gap:22px;
  opacity:0;visibility:hidden;transform:translateX(6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:240}
.gh-fly:hover>.gh-flout{opacity:1;visibility:visible;transform:translateX(0)}
.gh-flout::before{content:"";position:absolute;left:-18px;top:0;bottom:0;width:18px}
.gh-flcol{min-width:138px}
.gh-fh{display:block;font-family:var(--fhl-font-sans);font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:#247a52;font-weight:700;margin:2px 4px 7px}
.gh-flout a{padding:5px 8px;font-size:13.5px;white-space:nowrap}

/* ---- Supplements MEGA menu (everything visible on first hover) ---- */
.gh-mega{min-width:0;width:auto;padding:12px 15px}
.gh-mega h4{margin-bottom:7px}
.gh-mcols{display:flex;flex-wrap:wrap;gap:16px 20px;max-width:calc(100vw - 60px)}
.gh-mh{display:inline-block;font-size:12.5px!important;font-weight:700!important;color:#247a52!important;padding:1px 6px!important;margin-bottom:2px}
.gh-mh:hover{text-decoration:underline}
.gh-msub{display:flex;gap:12px}
.gh-mcol{min-width:110px}
.gh-mega .gh-mcol a{padding:2.5px 6px!important;font-size:12.5px}

/* ---- two-level Supplements menu (categories -> submenu) ---- */
.gh-subs{min-width:232px}
.gh-flout{flex-wrap:wrap;max-width:min(560px,calc(100vw - 60px))}
.gh-flall{flex-basis:100%;order:9;border-top:1px solid #eef2f0;margin-top:5px;padding-top:7px!important;color:#247a52!important;font-weight:600}
/* Foods mega-menu: kept in the shared stylesheet so the navigation partial emits no body-level style element. */
.gh-foods-mega{min-width:680px!important}.gh-fmcols{display:flex;gap:0}.gh-fmcol{flex:1;display:flex;flex-direction:column;padding:0 12px;border-left:1px solid #eef2f0}.gh-fmcol:first-child{padding-left:0;border-left:none}@media(max-width:900px){.gh-foods-mega{min-width:unset!important}.gh-fmcols{flex-direction:column}.gh-fmcol{border-left:none;padding:0}}