/* keep images inside the screen on phones */
:where(img){max-width:100%;height:auto}

/* Shared site menu, footer, blog topics and related links.
   Selectors are deliberately specific so older per-page styles can't override them. */

header.site-header{background:#005837;color:#fff;margin:0;padding:0;text-align:left;box-shadow:none;position:static}
header.site-header.site-header-pinned{position:sticky;top:0;z-index:100;background:#004d30;border-top:1px solid rgba(255,255,255,.14);box-shadow:0 2px 8px rgba(0,0,0,.18)}
header.site-header.site-header-pinned nav.site-nav{justify-content:center;padding-top:.6rem;padding-bottom:.6rem}
header.site-header.site-header-pinned a.site-brand{display:none}
nav.site-nav{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1.5rem;max-width:1200px;margin:0 auto;padding:.85rem 1.5rem;background:none;box-shadow:none;position:static;text-align:left;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.4}
nav.site-nav a{color:#fff;text-decoration:none;border:0;margin:0;opacity:1}
nav.site-nav a.site-brand{font-size:1.3rem;font-weight:700;white-space:nowrap}
nav.site-nav .site-links{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0;padding:0}
nav.site-nav .site-links a{font-size:.95rem;font-weight:500;color:#dcefe3;padding:.2rem 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.site-nav .site-links a:hover,nav.site-nav .site-links a[aria-current="page"]{color:#fff;border-bottom-color:#90ee90}
@media (max-width:700px){
  nav.site-nav{flex-direction:column;justify-content:center;padding:.65rem .75rem .55rem;gap:.3rem}
  nav.site-nav a.site-brand{font-size:1.15rem}
  nav.site-nav .site-links{justify-content:center;gap:.15rem 1rem}
  nav.site-nav .site-links a{font-size:.9rem}
}

@media (max-width:430px){nav.site-nav .site-links{gap:.15rem .7rem}nav.site-nav .site-links a{font-size:.84rem}}
footer.site-footer{background:#1b4332;color:#cfd8d3;text-align:center;padding:1.8rem 1rem 1.5rem;margin:2.5rem 0 0;font-size:.9rem;line-height:1.6;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;border:0}
footer.site-footer p{margin:0 0 .7rem;padding:0}
footer.site-footer a{color:#a8ecb0;margin:0;text-decoration:none}
footer.site-footer a:hover{text-decoration:underline}
footer.site-footer .footer-guides strong{color:#fff;font-weight:600}
footer.site-footer .footer-links a{color:#fff}
footer.site-footer small{font-size:.8rem;color:#b5c2bb}
footer.site-footer .footer-copy{margin:0;font-size:.8rem;color:#9fb0a7}

/* blog index: topic jump bar + section titles */
.topic-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin:0 0 1.5rem;padding:0}
.topic-bar a{background:#fff;border:1px solid #cfe3d6;color:#1d6b42;border-radius:999px;padding:.35rem .85rem;font-size:.88rem;font-weight:600;text-decoration:none;white-space:nowrap}
.topic-bar a:hover{background:#e6f4ec}
h2.topic-title{font-size:1.45rem;color:#005837;margin:2.2rem 0 .9rem;padding:0 0 .3rem;border-bottom:2px solid #d7e8dc;scroll-margin-top:1rem}
h2.topic-title .count{font-size:.85rem;color:#777;font-weight:500}
p.topic-top{text-align:right;margin:.2rem 0 0;font-size:.85rem}
p.topic-top a{color:#247a4d;text-decoration:none}

/* end-of-post related links */
aside.related-reads{background:#fff;border:1px solid #d7e8dc;border-radius:14px;padding:1.1rem 1.3rem;margin:2rem 0 1rem;box-shadow:0 2px 8px rgba(0,0,0,.04);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
aside.related-reads h2{font-size:1.2rem;color:#005837;margin:0 0 .6rem;padding:0}
aside.related-reads ul{margin:0 0 .8rem 1.2rem;padding:0;list-style:disc}
aside.related-reads li{margin:0 0 .4rem;padding:0;line-height:1.5}
aside.related-reads a{color:#247a4d;font-weight:600}
aside.related-reads p{margin:0;font-size:.95rem}

/* kitchen-gear callouts */
p.gear-tip{background:#fff7e6;border-left:4px solid #e0a43a;border-radius:0 10px 10px 0;padding:.7rem 1rem;margin:1.2rem 0;font-size:.95rem;line-height:1.6}
p.gear-tip a{color:#1d6b42;font-weight:600}
section.gear-up{text-align:center}
section.gear-up h2{color:#005837;margin:0 0 .6rem}
p.gear-btns{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:1rem 0 0}
a.gear-btn{display:inline-block;background:#247a4d;color:#fff;padding:.65rem 1.2rem;border-radius:8px;text-decoration:none;font-weight:600;border:2px solid #247a4d}
a.gear-btn:hover{background:#005837;border-color:#005837}
a.gear-btn-alt{background:#fff;color:#247a4d}
a.gear-btn-alt:hover{background:#e6f4ec;color:#005837}

/* ===== site-wide skin: comic-hero look (homepage has its own stylesheet) ===== */
header.site-header{background-color:#004d30;background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.4px);background-size:13px 13px}
nav.site-nav a.site-brand{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
footer.site-footer{background-color:#0f2e22;background-image:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.4px);background-size:13px 13px;border-top:4px solid #f5c542}
footer.site-footer p.footer-signoff{font-family:'Oswald',sans-serif;font-size:1.15rem;letter-spacing:.03em;color:#f5c542;margin-bottom:1rem}

body:not(.home):not(.vp){background:#fbf7ee;color:#1d2a24}
body:not(.home):not(.vp) h1{font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.005em;line-height:1.12;color:#005837}
body:not(.home):not(.vp) h2{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.005em;line-height:1.2;color:#1f6b45}
body:not(.home):not(.vp) h3{font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.005em;line-height:1.25}
body:not(.home):not(.vp) article h2 a,body:not(.home):not(.vp) .pick h3,body:not(.home):not(.vp) .pick h3 a{color:#005837}

/* comic panels */
body:not(.home):not(.vp) .pick,body:not(.home):not(.vp) .hub,body:not(.home):not(.vp) aside.related-reads,body:not(.home):not(.vp) main > section.card,body:not(.home):not(.vp) main > article,body:not(.home):not(.vp) .formula{background:#fff;border:2px solid #0f2e22;border-radius:16px;box-shadow:5px 5px 0 #0f2e22}
body:not(.home):not(.vp) main > article:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #0f2e22}
body:not(.home):not(.vp) .formula{background:#fff8e1}
body:not(.home):not(.vp) blockquote{border:2px solid #0f2e22;border-left:8px solid #f5c542;background:#fffbea;border-radius:12px;box-shadow:4px 4px 0 #0f2e22}
body:not(.home):not(.vp) table.qp{border:2px solid #0f2e22;box-shadow:5px 5px 0 #0f2e22}
body:not(.home):not(.vp) .badge{border:1.5px solid #9fd0b2;font-weight:800}

/* buttons */
body:not(.home):not(.vp) a.cta,body:not(.home):not(.vp) a.cta:visited{display:inline-block;background:#f5c542;color:#0f2e22 !important;border:2px solid #0f2e22;border-radius:10px;box-shadow:3px 3px 0 #0f2e22;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s}
body:not(.home):not(.vp) a.cta:hover{background:#f5c542;color:#0f2e22 !important;transform:translate(-2px,-2px);box-shadow:5px 5px 0 #0f2e22}

/* pictures get a comic frame */
body:not(.home):not(.vp) main picture img,body:not(.home):not(.vp) main > img,body:not(.home):not(.vp) article picture img{border:2px solid #0f2e22;border-radius:14px;box-shadow:5px 5px 0 #1f8a4c;box-sizing:border-box;max-width:100%}

/* blog index hero + topic chips */
body:not(.home):not(.vp) .hero{position:relative;background-color:#004d30;background-image:radial-gradient(rgba(255,255,255,.08) 1.3px,transparent 1.5px),linear-gradient(160deg,#00603b,#003322);background-size:14px 14px,auto}
body:not(.home):not(.vp) .hero h1{color:#fff;text-transform:uppercase;letter-spacing:.02em}
.topic-bar a,.jump a{border:2px solid #0f2e22;box-shadow:2px 2px 0 #0f2e22;color:#0f2e22}
.topic-bar a:hover,.jump a:hover{background:#f5c542}
h2.topic-title{font-family:'Oswald',sans-serif;text-transform:uppercase;border-bottom:3px solid #f5c542}
p.gear-tip{border:2px solid #0f2e22;border-left:8px solid #f5c542;border-radius:12px;box-shadow:3px 3px 0 #0f2e22}

/* Amazon photos and prices next to each button (filled in by .github/scripts/amazon_refresh.py) */
img.amz-img:not([src]),a.buybox-img:has(img:not([src])){display:none}
.amz-price:empty,.amz-asof:empty,.amz-price:empty+.amz-asof{display:none}
span.buybox{display:flex;align-items:center;gap:1rem;margin:.9rem 0 .5rem}
a.buybox-img{flex:none;display:block;width:5.6rem;height:5.6rem;background:#fff;border:2px solid #0f2e22;border-radius:12px;padding:.3rem;box-sizing:border-box;box-shadow:3px 3px 0 #0f2e22;transition:transform .12s,box-shadow .12s}
a.buybox-img:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 #0f2e22}
a.buybox-img img.amz-img{display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0;box-shadow:none;margin:0}
span.buybox-info{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
span.buybox-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem}
span.buybox .amz-price{font-family:'Oswald',sans-serif;font-size:1.4rem;font-weight:700;color:#0f2e22;line-height:1}
.amz-asof{font-size:.75rem;color:#6b756f}
body:not(.home):not(.vp) span.buybox a.cta{margin:0}
p.amz-note{font-size:.8rem;color:#6b756f;font-style:italic;margin:.3rem 0 1.1rem}
td.tier .amz-price{font-weight:700;color:#0f2e22}
.amz-price:not(:empty)+.tier-fb{display:none}
