/* ==========================================================================
   PIZZALOVERS · base
   Reset, typography, layout primitives, top bar, drawer, buttons, reusable
   card components (guides / recipes / experiments / symptoms), ad slots,
   newsletter, footer, reveal. Loaded on every page. Tokens only.
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--f-body); font-size:var(--t-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  color-scheme:dark;
}
body.is-paper{ color-scheme:light; }
img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; letter-spacing:-.025em; line-height:var(--lh-snug); text-wrap:balance; margin:0; }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:var(--r-1); }
.sr-only,.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:var(--s-4); top:-4rem; z-index:100; background:var(--c-fire-solid); color:#fff; padding:.6rem 1rem; font-family:var(--f-display); font-weight:600; }
.skip:focus{ top:var(--s-4); }

.wrap{ width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto; }
.wrap-text{ width:min(100% - 2*var(--gutter), var(--max-text)); margin-inline:auto; }

/* Mono labels — "lab notes" */
.lab{
  font-family:var(--f-mono); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3);
}
.lab b{ color:var(--accent-hot); font-weight:500; }
.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* Section header — hairline + mono label + big heading */
.sec{ padding-block:clamp(var(--s-8),9vw,var(--s-10)); }
.sec-hd{ display:grid; grid-template-columns:1fr; gap:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--line-strong); margin-bottom:clamp(var(--s-6),5vw,var(--s-8)); }
.sec-hd h2,.sec-hd h1{ font-size:var(--t-2xl); font-weight:500; letter-spacing:-.035em; line-height:var(--lh-tight); max-width:18ch; }
.sec-hd p{ color:var(--fg-2); max-width:52ch; font-size:var(--t-md); }
.sec-hd .lab{ display:flex; flex-direction:column; gap:.15rem; }
@media (min-width:700px){ .sec-hd .lab{ flex-direction:row; justify-content:space-between; gap:var(--s-4); } }
@media (min-width:900px){
  .sec-hd{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; }
  .sec-hd .lab{ grid-column:1 / -1; }
}

/* Buttons — no shadows, no pills, clear physics */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; min-height:48px;
  padding:.8rem 1.25rem; border-radius:var(--r-2);
  font-family:var(--f-display); font-weight:600; font-size:var(--t-sm); letter-spacing:.01em;
  border:1px solid transparent; transition:background var(--d-fast), border-color var(--d-fast), transform var(--d-fast);
}
.btn:active{ transform:translateY(1px); }
.btn-fire{ background:var(--c-fire-solid); color:#fff; }
.btn-fire:hover{ background:var(--c-fire-deep); }
.btn-line{ border-color:var(--line-strong); color:var(--fg); }
.btn-line:hover{ border-color:var(--fg); }
.btn svg{ width:16px; height:16px; }
.link{ font-family:var(--f-display); font-weight:600; font-size:var(--t-sm); color:var(--fg); border-bottom:1px solid var(--line-strong); padding-bottom:1px; }
.link:hover{ border-color:var(--accent-hot); color:var(--accent-hot); }

/* sv/en switcher, top bar (docs/pizzalovers-bilingual-arkitektur.md step 4) */
.lang-switch{ display:flex; align-items:center; gap:2px; font-family:var(--f-display); font-weight:700; font-size:var(--t-xs); }
.lang-switch__link{ padding:.3rem .5rem; border-radius:var(--r-1); color:var(--fg-2); }
.lang-switch__link:hover{ color:var(--fg); }
.lang-switch__link.is-active{ color:var(--fg); background:var(--bg-2); }

/* ---- Top bar ------------------------------------------------------------ */
.top{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--c-char-0) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  color:var(--c-flour);
}
.is-paper .top{ --line:rgba(243,237,228,.10); --line-strong:rgba(243,237,228,.22); --fg:var(--c-flour); --fg-2:var(--c-bone); --fg-3:var(--c-ash); --accent-hot:var(--c-fire-hot); color-scheme:dark; }
.top-in{ display:flex; align-items:center; gap:var(--s-5); height:64px; }
.brand{ display:flex; align-items:center; gap:.55rem; margin-right:auto; }
.brand-mark{ width:28px; height:28px; }
.brand-logo img{ height:28px; width:auto; }
.brand-word{ font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:-.03em; }
.brand-word span{ color:var(--c-fire-hot); }
.nav{ display:none; gap:var(--s-5); }
.nav ul{ display:contents; list-style:none; margin:0; padding:0; }
.nav a{ font-family:var(--f-display); font-weight:500; font-size:var(--t-sm); color:var(--fg-2); padding:.4rem 0; position:relative; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent-hot); transition:right var(--d-base) var(--ease-out); }
.nav a:hover{ color:var(--fg); }
.nav a:hover::after{ right:0; }
.nav .current-menu-item > a,.nav .current-menu-ancestor > a{ color:var(--fg); }
.top .btn{ min-height:40px; padding:.55rem 1rem; }
.menu-btn{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:var(--r-2); }
.menu-btn svg{ width:20px; height:20px; }
@media (min-width:980px){ .nav{ display:flex; } .menu-btn{ display:none; } }

/* Mobile drawer */
.drawer{ position:fixed; inset:0; z-index:60; background:var(--c-char-0); color:var(--c-flour); padding:var(--s-6) var(--gutter); display:none; flex-direction:column; gap:var(--s-5); overflow-y:auto; }
.drawer[data-open="true"]{ display:flex; }
.drawer ul{ display:contents; list-style:none; margin:0; padding:0; }
.drawer a{ font-family:var(--f-display); font-size:var(--t-xl); font-weight:500; letter-spacing:-.03em; padding:.5rem 0; border-bottom:1px solid rgba(243,237,228,.10); display:block; }
.drawer .close{ align-self:flex-end; width:44px; height:44px; display:grid; place-items:center; }
.drawer form{ margin-top:auto; }

/* ---- Guide cards — curated, asymmetric ------------------------------------ */
.g-grid{ display:grid; gap:var(--s-6); }
.g-lead{ display:grid; gap:var(--s-4); align-content:start; }
.g-lead .img{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--r-1); background:var(--bg-3); }
.g-lead img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-slow) var(--ease-out); }
.g-lead:hover img{ transform:scale(1.025); }
.g-lead h3,.g-lead h2{ font-size:var(--t-xl); font-weight:500; letter-spacing:-.03em; max-width:22ch; }
.g-lead:hover h3,.g-lead:hover h2{ color:var(--accent-hot); }
.g-lead p{ color:var(--fg-2); max-width:56ch; }
.g-list{ display:grid; align-content:start; }
.g-item{ display:grid; grid-template-columns:72px 1fr; gap:var(--s-4); padding:var(--s-4) 0; border-top:1px solid var(--line); align-items:start; }
.g-item .img{ aspect-ratio:1; overflow:hidden; border-radius:var(--r-1); background:var(--bg-3); }
.g-item img{ width:100%; height:100%; object-fit:cover; }
.g-item h3{ font-size:var(--t-md); font-weight:500; line-height:1.3; }
.g-item:hover h3{ color:var(--accent-hot); }
.g-item .lab{ margin-top:.35rem; }
@media (min-width:900px){ .g-grid{ grid-template-columns:7fr 5fr; gap:var(--s-8); } }

/* ---- Recipe cards — food-first ------------------------------------------- */
.r-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4); }
.r{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--r-1); isolation:isolate; background:var(--bg-3); }
.r img{ width:100%; height:100%; object-fit:cover; transition:transform var(--d-slow) var(--ease-out); }
.r:hover img{ transform:scale(1.04); }
.r-txt{ position:absolute; inset:auto 0 0 0; padding:var(--s-4); background:linear-gradient(to top, rgba(11,10,9,.92), rgba(11,10,9,0)); display:grid; gap:.2rem; }
.r-txt h3,.r-txt h2{ font-size:var(--t-lg); font-weight:500; color:#fff; }
.r-txt .lab{ color:var(--c-fire-hot); }
@media (min-width:900px){ .r-strip{ grid-template-columns:repeat(4,1fr); } .r-strip.is-lead .r:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; } .r-strip.is-lead .r:first-child h3,.r-strip.is-lead .r:first-child h2{ font-size:var(--t-xl); } }

/* ---- Experiment cards ------------------------------------------------------ */
.tested-grid{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.exp{ background:var(--bg); padding:var(--s-5); display:grid; gap:var(--s-4); align-content:start; transition:background var(--d-base); }
.exp:hover{ background:var(--bg-2); }
.exp-hd{ display:flex; justify-content:space-between; gap:var(--s-3); align-items:baseline; }
.exp-status{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; padding:.25rem .5rem; border:1px solid var(--line-strong); border-radius:var(--r-1); color:var(--fg-2); white-space:nowrap; }
.exp-status.live,.exp-status.is-running{ border-color:var(--c-amber); color:var(--c-amber); }
.exp-status.is-published{ border-color:var(--c-basil); color:var(--c-basil); }
.exp h3,.exp h2{ font-size:var(--t-lg); font-weight:500; letter-spacing:-.025em; }
.exp p{ color:var(--fg-2); font-size:var(--t-sm); }
.exp-viz{ aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--r-1); background:var(--bg-2); display:grid; overflow:hidden; }
.exp-viz svg,.exp-viz img{ width:100%; height:100%; object-fit:cover; }
.exp-proto{ display:grid; grid-template-columns:auto 1fr; gap:.25rem var(--s-3); font-size:var(--t-xs); color:var(--fg-3); font-family:var(--f-mono); margin:0; }
.exp-proto dt{ color:var(--fg-3); }
.exp-proto dd{ margin:0; color:var(--fg-2); }
@media (min-width:760px){ .tested-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .exp.wide{ grid-column:span 2; grid-template-columns:1fr 1fr; align-items:start; } .exp.wide .exp-viz{ grid-row:span 4; aspect-ratio:auto; height:100%; } }

/* ---- Symptom cards (felsökning) ------------------------------------------- */
.fix-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.sym{ background:var(--bg-2); padding:var(--s-4); min-height:112px; display:grid; align-content:space-between; gap:var(--s-3); transition:background var(--d-base); }
.sym:hover{ background:var(--bg-3); }
.sym h3,.sym h2{ font-size:var(--t-md); font-weight:500; line-height:1.25; }
.sym .lab{ color:var(--fg-3); }
.sym:hover .lab{ color:var(--accent-hot); }
@media (min-width:760px){ .fix-grid{ grid-template-columns:repeat(4,1fr); } }

/* ---- Ad slots -------------------------------------------------------------- */
.ad{ border:1px dashed var(--line-strong); border-radius:var(--r-1); display:grid; place-items:center; background:var(--bg-2); overflow:hidden; }
.ad span{ font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.08em; color:var(--fg-3); }
.ad.is-live{ border-style:solid; border-color:var(--line); background:transparent; }
.ad-lb,.ad-header,.ad-footer{ min-height:100px; }
.ad-in-content{ min-height:250px; margin-block:var(--s-6); }
.ad-sidebar{ min-height:250px; }
.ad-wrap{ padding-block:var(--s-6); }
@media (min-width:980px){ .ad-lb,.ad-header,.ad-footer{ min-height:120px; } .ad-in-content{ min-height:280px; } .ad-sidebar{ min-height:600px; } }

/* ---- Newsletter ------------------------------------------------------------ */
.news{ background:var(--c-fire-solid); color:#fff; }
.news-in{ display:grid; gap:var(--s-6); padding-block:clamp(var(--s-8),8vw,var(--s-9)); }
.news h2{ font-size:var(--t-2xl); font-weight:500; letter-spacing:-.035em; line-height:var(--lh-tight); max-width:16ch; }
.news p{ margin-top:var(--s-4); max-width:44ch; color:#FFF6F2; font-size:var(--t-md); }
.news form{ display:grid; gap:var(--s-3); align-content:start; }
.news input{ min-height:52px; padding:0 var(--s-4); border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.08); color:#fff; border-radius:var(--r-2); font-family:var(--f-display); }
.news input::placeholder{ color:#FFF6F2; }
.news .btn{ background:var(--c-char-0); color:#fff; justify-content:center; }
.news .btn:hover{ background:#000; }
.news small{ font-family:var(--f-mono); font-size:var(--t-xs); color:#FFF6F2; }
@media (min-width:900px){ .news-in{ grid-template-columns:1fr 1fr; align-items:end; } }

/* ---- Search form ------------------------------------------------------------ */
.search-form{ display:grid; grid-template-columns:1fr auto; gap:var(--s-2); }
.search-form input[type=search]{ min-height:48px; padding:0 var(--s-4); background:transparent; border:1px solid var(--line-strong); border-radius:var(--r-2); color:var(--fg); }
.search-form input[type=search]:focus{ outline:none; border-color:var(--accent-hot); }

/* ---- Footer ---------------------------------------------------------------- */
.site-foot{ background:var(--c-char-0); color:var(--c-flour); padding-block:var(--s-8) var(--s-6); border-top:1px solid rgba(243,237,228,.10); }
.site-foot{ --line:rgba(243,237,228,.10); --fg-2:var(--c-bone); --fg-3:var(--c-ash); --accent-hot:var(--c-fire-hot); }
.foot{ display:grid; gap:var(--s-6); }
.foot h4{ font-family:var(--f-mono); font-size:var(--t-xs); text-transform:uppercase; letter-spacing:.08em; color:var(--fg-3); font-weight:500; margin-bottom:var(--s-3); }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.foot a{ font-family:var(--f-display); font-size:var(--t-sm); color:var(--fg-2); }
.foot a:hover{ color:var(--accent-hot); }
.foot-brand p{ margin-top:var(--s-3); color:var(--fg-2); font-size:var(--t-sm); max-width:34ch; }
.foot-bar{ margin-top:var(--s-7); padding-top:var(--s-4); border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-3); font-family:var(--f-mono); font-size:var(--t-xs); color:var(--fg-3); }
@media (min-width:760px){ .foot{ grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; } }

/* ---- Reveal (progressive enhancement) --------------------------------------- */
.rv{ opacity:1; transform:none; }
.js .rv{ opacity:0; transform:translateY(14px); transition:opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .rv{ opacity:1; transform:none; transition:none; } }

/* ---- WordPress core hooks ----------------------------------------------------- */
.alignwide{ width:min(100% - 2*var(--gutter), var(--max)); margin-inline:auto; }
.alignfull{ width:100%; }
.wp-caption,figure{ margin:0; }
.wp-caption-text,figcaption{ font-family:var(--f-mono); font-size:var(--t-xs); color:var(--fg-3); margin-top:var(--s-2); letter-spacing:.02em; }