/* NWTG guide pages — design ported from the approved Essential Oils prototype.
   Light-only (the rest of the site has no dark mode); .wrap namespaced to .g-wrap;
   Oswald/Inter swapped for the site's Familjen Grotesk / Karla. */
/* ---- Design tokens ----
   Palette & type lifted from NWTG's existing bilingual guide PDFs
   (warm cream paper, condensed display headers, rust-brown accent)
   so this page reads as the same family as their printed catalogues.
   Display: Familjen Grotesk (site display face, uppercase + tracked)
   Body: Karla / Be Vietnam Pro (site body faces, VI diacritics)
*/
:root{
  --bg:#F4EEE2;
  --surface:#FFFFFF;
  --surface-2:#FBF6EB;
  --fg:#221D17;
  --fg-muted:#746652;
  --accent:#9C5F32;
  --accent-strong:#7A4723;
  --accent-contrast:#FBF3E7;
  --border:#E3D9C5;
  --table-head-bg:#9C5F32;
  --table-head-fg:#FBF3E7;
  --table-stripe:#FBF7EE;
  --callout-bg:#F7EFDF;
  --callout-border:#9C5F32;
  --danger:#AD3A2B;
  --caution:#B9791F;
  --chip-bg:#EFE4D0;
  --chip-fg:#5B4A33;
  --focus-ring:#9C5F32;
}

.guide *{box-sizing:border-box}
.guide{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Karla,'Be Vietnam Pro',system-ui,sans-serif;
  font-size:15px;
  line-height:1.55;
}
.guide h1,.guide h2,.guide h3{
  font-family:'Familjen Grotesk',system-ui,sans-serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-wrap:balance;
  margin:0;
}
.guide p{margin:0}
.muted{color:var(--fg-muted)}
.g-wrap{max-width:880px; margin-inline:auto; padding-inline:max(16px, env(safe-area-inset-left,0px))}
.guide a{color:var(--accent-strong)}

/* ---- Hero ---- */
.hero{padding-block:40px 28px; border-bottom:1px solid var(--border)}
.hero .eyebrow{font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; display:block}
.hero h1{font-size:clamp(28px,6vw,42px); line-height:1.05}
.hero p.dek{margin-top:16px; max-width:62ch; color:var(--fg-muted); font-size:14px}

/* ---- Sticky section nav ---- */
.sectionnav{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--bg); border-bottom:1px solid var(--border)}
.sectionnav .scroller{display:flex; gap:6px; overflow-x:auto; padding-block:10px; scrollbar-width:none}
.sectionnav .scroller::-webkit-scrollbar{display:none}
.sectionnav a{flex:none; font-size:12.5px; font-weight:600; text-decoration:none; color:var(--fg-muted); background:var(--surface); border:1px solid var(--border); padding:7px 13px; border-radius:999px; white-space:nowrap}
.sectionnav a:hover, .sectionnav a:focus-visible{color:var(--accent-contrast); background:var(--accent); border-color:var(--accent)}

/* ---- Section shell ---- */
.guide section.block{padding-block:34px; border-bottom:1px solid var(--border); scroll-margin-top:52px}
.guide section.block:last-of-type{border-bottom:none}
.block-head{margin-bottom:16px}
.block-head h2{font-size:22px}
.block-head .intro{margin-top:10px; color:var(--fg-muted); font-size:13.5px; max-width:68ch}

/* ---- Find by need ---- */
.need-search{width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--fg); font-size:14px; margin-bottom:14px}
.need-search:focus-visible{outline:2px solid var(--focus-ring); outline-offset:1px}
.need-grid{display:flex; flex-direction:column; gap:10px}
.need-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px}
.need-card .need-title{font-weight:700; font-size:14.5px}
.need-row{margin-top:8px; font-size:13px}
.need-row .label{font-weight:600; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:2px}
.need-row.watch{color:var(--caution)}
.need-empty{color:var(--fg-muted); font-size:13.5px; padding:16px 0}

/* ---- Generic tables ---- */
.tbl-wrap{overflow-x:auto; border-radius:10px; border:1px solid var(--border)}
.guide table{border-collapse:collapse; width:100%; font-size:13px; min-width:460px}
.guide thead th{background:var(--table-head-bg); color:var(--table-head-fg); text-align:left; padding:10px 12px; font-weight:600; white-space:nowrap}
.guide tbody td{padding:10px 12px; border-top:1px solid var(--border); vertical-align:top}
.guide tbody tr:nth-child(even){background:var(--table-stripe)}

/* ---- Oil family / accordion ---- */
.family{margin-bottom:26px}
.family:last-child{margin-bottom:0}
.family-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.family-head h3{font-size:17px}
.family-count{font-size:11.5px; color:var(--fg-muted)}
.family-callout{background:var(--callout-bg); border-left:3px solid var(--callout-border); border-radius:0 8px 8px 0; padding:12px 14px; margin-bottom:12px; font-size:12.5px; display:flex; flex-direction:column; gap:6px}
.family-callout .label{font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-strong)}
.family-callout .label.caution-label{color:var(--caution)}
.family-callout .fact{font-style:italic; color:var(--fg-muted)}
.family-callout .fact .label{font-style:normal}

.oil-list{display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:10px; overflow:hidden}
.guide details.oil{background:var(--surface)}
.guide details.oil summary{list-style:none; cursor:pointer; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.guide details.oil summary::-webkit-details-marker{display:none}
.guide details.oil summary:focus-visible{outline:2px solid var(--focus-ring); outline-offset:-2px}
.oil-name{min-width:0; font-weight:600; font-size:14px}
.oil-right{display:flex; align-items:center; gap:10px; flex:none}
.oil-price{font-weight:700; font-size:14.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
.oil-price .unit{font-weight:400; font-size:11px; color:var(--fg-muted)}
.chev{width:9px; height:9px; border-right:2px solid var(--fg-muted); border-bottom:2px solid var(--fg-muted); transform:rotate(-45deg); transition:transform .15s ease; flex:none}
.guide details.oil[open] summary .chev{transform:rotate(45deg)}
.oil-body{padding:0 14px 14px; font-size:13px; color:var(--fg-muted)}

/* ---- Simple product cards ---- */
.prod-group{margin-bottom:20px}
.prod-group:last-child{margin-bottom:0}
.prod-group h3{font-size:15.5px; margin-bottom:2px}
.prod-group .group-note{font-size:12px; color:var(--fg-muted); margin-bottom:10px}
.prod-card{border-top:1px solid var(--border); padding-block:11px; display:flex; justify-content:space-between; gap:14px}
.prod-card:first-of-type{border-top:none}
.prod-main{min-width:0}
.prod-main .name{font-weight:600; font-size:13.5px}
.prod-main .desc{font-size:12.5px; color:var(--fg-muted); margin-top:2px}
.prod-price{flex:none; font-weight:700; font-size:13.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
.prod-price .unit{font-weight:400; font-size:11px; color:var(--fg-muted)}

/* ---- Info card ---- */
.info-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-top:14px}
.info-card .label{font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:4px}
.info-card p{font-size:12.5px}

/* ---- Safety ---- */
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--fg-muted); margin-bottom:12px}
.sym-x{color:var(--danger); font-weight:700}
.sym-bang{color:var(--caution); font-weight:700}
.dos-donts{display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:22px}
@media (min-width:620px){.dos-donts{grid-template-columns:1fr 1fr}}
.dd-card{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px}
.dd-card h4{font-family:'Familjen Grotesk',sans-serif; text-transform:uppercase; font-size:13px; letter-spacing:.03em; margin-bottom:10px}
.dd-card h4.do{color:var(--accent-strong)}
.dd-card h4.dont{color:var(--danger)}
.dd-item{margin-bottom:10px}
.dd-item:last-child{margin-bottom:0}
.dd-item .label{font-weight:700; font-size:11.5px; display:block; margin-bottom:2px}
.dd-item p{font-size:12px}

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

@media (max-width:480px){
  .hero{padding-block:30px 22px}
  section.block{padding-block:26px}
}

/* Guide pages set the warm paper background on the document itself.
   Safe as a bare selector: guide.css is only linked from /guides/. */
body{background:var(--bg)}