/* ============================================================================
   base.css -- THE canonical stylesheet source for every new MRKT Domains site.
   Established 2026-07-29. Copy this file to <newsite>/style.css at build time,
   then change ONLY the :root colour variables to give the site its own palette.

   Why this file exists: before today the "base template" was a folder
   (portablesaunablanket-site) whose style.css carried two inherited bugs into
   every site built from it: 15px header nav tap targets, and charts authored at
   800-880px squashed to 0.44 scale (4.9px labels) at a 375px viewport. Crowning
   a different site would just move the problem. The stylesheet is now its own
   object with its own source of truth.

   Structural exemplars are a SEPARATE question and are named in OPERATIONS.md
   section 3: coldplungeprotocol-site for INFO variants, portablesaunablanket-site
   for REVIEW variants (it has the reviews/ and compare/ page shapes).

   *** SOURCE ORDER TRAP -- READ BEFORE EDITING ***
   CSS source order beats intent. An @media(max-width:600px) block sitting
   MID-FILE is silently overridden by any equal-specificity rule appended below
   it. Nothing errors. Devtools shows the media query present and matching. This
   cost two deploys on fragrancemaxxing.com when a later imagery pass appended
   `figure img{max-width:720px}` under the mobile block. THE MOBILE OVERRIDE
   BLOCK STAYS LAST IN THIS FILE. Append new rules ABOVE it, never below.
   Verify with getComputedStyle in a 375px iframe, never by reading the source.
   ============================================================================ */

:root{--ink:#20261f;--muted:#5c6659;--bg:#fbfaf4;--card:#ffffff;--accent:#5e7a3a;--accent-dark:#445a28;--line:#e4e2d5;--good:#2e7d4f;--warn:#a33;}
*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;height:auto}
.shot{display:block;max-width:320px;width:100%;height:auto;margin:0 0 16px;border-radius:8px;background:#fff}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:26px 0}
.gallery img{width:100%;height:auto;display:block;border-radius:8px;background:#fff}
.versus{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.versus figure{margin:0}
.versus img{width:100%;height:auto;display:block;border-radius:8px;background:#fff}
.hero-shot{max-width:420px;margin:18px 0 22px}


body{font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:18px}
header{background:var(--ink);padding:14px 20px}
header .wrap{max-width:920px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:16px}
header a{color:#fff;text-decoration:none}
header .logo{font-weight:bold;font-size:1.15rem;letter-spacing:.5px}
header nav a{color:#cfd4dd;font-size:.85rem;margin-right:14px;font-family:Helvetica,Arial,sans-serif}
header nav a:hover{color:#fff}
header nav a[aria-current]{color:#fff;font-weight:bold}
main{max-width:920px;margin:0 auto;padding:28px 20px 60px}
h1{font-size:1.9rem;line-height:1.25;margin:10px 0 6px}
h2{font-size:1.4rem;margin:34px 0 10px}
h3{font-size:1.12rem;margin:24px 0 8px}
p{margin:12px 0}
ul,ol{margin:12px 0 12px 26px}
li{margin:6px 0}
a{color:var(--accent-dark)}
.meta{font-family:Helvetica,Arial,sans-serif;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.disclosure{font-family:Helvetica,Arial,sans-serif;font-size:.78rem;color:var(--muted);background:#f4f0e7;border:1px solid var(--line);border-radius:6px;padding:8px 12px;margin:14px 0}
.btn{display:inline-block;font-family:Helvetica,Arial,sans-serif;background:var(--accent);color:#fff !important;text-decoration:none;font-weight:bold;font-size:.95rem;padding:12px 22px;border-radius:6px;margin:8px 0}
.btn:hover{background:var(--accent-dark)}
.btn.secondary{background:#fff;color:var(--accent-dark) !important;border:2px solid var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:18px 0}
.card h3{margin-top:0}
.verdict{border-left:5px solid var(--accent);background:#fff7ef;padding:14px 18px;margin:20px 0;border-radius:0 8px 8px 0}
.pros-cons{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0}
.pros-cons>div{flex:1;min-width:240px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.pros-cons h4{font-family:Helvetica,Arial,sans-serif;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.pros-cons .pros h4{color:var(--good)}.pros-cons .cons h4{color:var(--warn)}
.pros-cons ul{margin-left:18px;font-size:.95rem}
table{border-collapse:collapse;width:100%;margin:18px 0;font-family:Helvetica,Arial,sans-serif;font-size:.85rem}
th,td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
th{background:#f4f0e7}
tr:nth-child(even){background:#faf8f3}
.table-scroll{overflow-x:auto}
.badge{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:.7rem;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;background:var(--accent);color:#fff;border-radius:4px;padding:3px 8px;margin-bottom:8px}
.specbox{font-family:Helvetica,Arial,sans-serif;font-size:.88rem;background:#f4f0e7;border-radius:8px;padding:14px 18px;margin:14px 0}
.specbox strong{display:inline-block;min-width:150px}
footer{border-top:1px solid var(--line);background:#f4f0e7;margin-top:40px}
footer .wrap{max-width:920px;margin:0 auto;padding:24px 20px;font-family:Helvetica,Arial,sans-serif;font-size:.8rem;color:var(--muted)}
footer a{color:var(--muted);margin-right:14px}
.faq dt{font-weight:bold;margin-top:16px}
.faq dd{margin:6px 0 0 0}
@media(max-width:600px){body{font-size:16.5px}h1{font-size:1.55rem}}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* --- Imagery (added 2026-07-20) --- */
.hero{margin:18px 0 22px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#eceff3;line-height:0}
.hero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
figure.fig{margin:26px 0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px 14px}
figure.fig img,figure.fig svg{width:100%;height:auto;display:block}
figure.fig figcaption{font-family:Helvetica,Arial,sans-serif;font-size:.8rem;color:var(--muted);margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
figure.fig.plain{background:transparent;border:0;padding:0}
figure.fig.plain figcaption{border-top:0;padding-top:6px}
@media(max-width:600px){figure.fig{padding:12px 12px 10px}.hero{margin:14px 0 18px}}

/* mobile overrides last: equal-specificity rules are resolved by source order */
@media(max-width:600px){header nav{display:flex;flex-wrap:wrap;gap:0 18px}header nav a{display:flex;align-items:center;min-height:44px;margin-right:0}figure.fig{overflow-x:auto;-webkit-overflow-scrolling:touch}figure.fig img,figure.fig svg{max-width:none;width:880px;height:auto}}

/* --- Header nav dropdowns (added 2026-08-18) ------------------------------
   The 2026-08-18 nav sweep put every money page in the header, which is the
   rule (OPERATIONS.md s22) and is not up for debate. It produced 10 to 17
   top-level links. Tyson, same day: "10 to 17 links is too many."
   THE FIX IS NESTING, NOT DELETION. apply_nav.py emits
   <details class="navgroup"><summary>Reviews</summary><ul>...</ul></details>
   and every nested href still counts for check_nav's header coverage.

   NO JAVASCRIPT. Desktop opens on :hover AND :focus-within, and the
   :focus-within half is what makes it keyboard-reachable, so it is not
   optional. `::details-content{content-visibility:visible}` is what lets a
   CLOSED <details> show its panel on hover; without it the UA keeps the panel
   unrendered and the dropdown never appears. Verified in Chromium at 1280px:
   hover shows it, and two Tabs from the top of the page open it with no mouse.
   Mobile keeps the native <details> accordion, which needs no script at all.

   This block sits LAST in the file ON PURPOSE. It ends with the mobile
   overrides, which is the invariant at the top of base.css (source order beats
   intent), and its mobile half must beat the older `header nav{flex-wrap}`
   rule in the block above it. Append new NON-mobile rules above this block.
   -------------------------------------------------------------------------- */
header nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 14px}
header nav a{margin-right:0}
.navgroup{position:relative}
.navgroup>summary{list-style:none;cursor:pointer;color:#cfd4dd;font-size:.85rem;font-family:Helvetica,Arial,sans-serif}
.navgroup>summary::-webkit-details-marker{display:none}
.navgroup>summary::after{content:" \25BE";font-size:.72em;padding-left:3px}
.navgroup>summary:hover{color:#fff}
.navgroup>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.navgroup>ul{list-style:none;margin:0;padding:6px 0}
.navgroup>ul>li{margin:0}
.navgroup>ul>li>a{display:block;padding:9px 16px;white-space:nowrap}
.navgroup>ul>li>a:hover{color:#fff}
@media(min-width:601px){
.navgroup::details-content{content-visibility:visible;block-size:auto;overflow:visible}
.navgroup>ul{display:none;position:absolute;top:100%;left:-12px;z-index:60;background:var(--ink);border:1px solid rgba(255,255,255,.18);border-radius:8px;min-width:210px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.navgroup:hover>ul,.navgroup:focus-within>ul{display:block}
}
/* PAGE HERO, the Lane 2 banner every content page opens with. Added 2026-08-20.
   WHY IT IS A FIXED-RATIO BANNER AND NOT JUST AN <img>: the first version of
   adaptogenbeverages opened each page on a square product photograph, which read
   as being handed a product rather than being told something, and a portrait
   product shot (Kin Spritz, 582x1100) towered over the square ones on the same
   site. A banner ratio makes every page open the same height whatever the source
   image was, and object-fit:cover means the source can be any dimensions.
   Product photography belongs BELOW the fold, inside the argument. */
.pagehero{display:block;width:100%;aspect-ratio:3/1;object-fit:cover;border-radius:8px;margin:0 0 26px}
.pagehero-credit{font-size:13px;color:var(--muted);margin:-18px 0 26px}

@media(max-width:600px){
header .wrap{flex-direction:column;align-items:stretch;gap:6px}
header nav{flex-direction:column;align-items:stretch;gap:0;width:100%}
header nav>a{display:flex;align-items:center;min-height:44px;margin-right:0}
.navgroup>summary{display:flex;align-items:center;min-height:44px}
.navgroup>ul{padding:0 0 6px 16px}
.navgroup>ul>li>a{display:flex;align-items:center;min-height:44px;padding:0}
}