/* =====================================================================
   site.css — shared by every page.
   1. Colors and fonts (change the look of the whole site here)
   2. Base page styles
   3. Header, navigation and footer
   4. Shared pieces: cards, buttons, notes
   5. Gear and ingredient pages: sections, tips and product cards

   Look: a retro New York pizza shop. By day it's the corner slice joint
   (mozzarella cream, tomato red, charcoal, basil and mustard, with a thin
   red-and-white awning across the top). By night it's after-hours neon
   (dark storefront, neon pink sign, cyan highlights). Red stays the oven/heat
   color and blue the fridge color in the schedule.
   ===================================================================== */

/* ---------- 1. Colors and fonts ----------
   Two color themes: Corner slice (light) and After hours (dark). The site
   follows the device's light/dark setting until the visitor taps the sun/moon
   button (js/site.js), which sets data-theme on <html> to "flour" (light) or
   "charcoal" (dark). Those two names are kept so visitors' saved choice
   still works. Both blocks use the same color names; change a color in
   every place it appears. */

/* Corner slice (light, the default) */
:root {
  --bg: #FFF6E5; --surface: #FFFCF5; --sunk: #F6EAD3; --ink: #1E1E1E; --muted: #6B5C48; --line: #E8DCC6;
  --accent: #D62828; --accent-ink: #FFFFFF; --select: #1E1E1E; --select-ink: #FFF6E5;
  --heat: #C8231F; --cold: #2F6690; --basil: #2D6A4F; --warn-bg: #FBEBC2; --warn-ink: #5E4300; --danger: #B3261E;
  /* Awning, checkered footer strip, logo, buttons and the cook-mode "Now serving" board */
  --awn-a: #D62828; --awn-b: #FFFFFF; --awn-h: 8px; --awn-bw: 2px; --awn-line: #1E1E1E;
  --check-a: #D62828; --check-b: #FFFFFF;
  --wm: #D62828; --wm-glow: none;
  --btn-edge: #1E1E1E; --ghost-edge: #1E1E1E;
  --board: #1E1E1E; --board-ink: #FFF6E5; --board-hi: #F2B134;
  /* Fonts: Shrikhand for the DoughSlinger logo only, Oswald for headings,
     labels and buttons, Libre Franklin for reading, a typewriter mono for numbers */
  --brand: "Shrikhand", "Cooper Black", Georgia, serif;
  --display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Libre Franklin", "Franklin Gothic Book", "Segoe UI", system-ui, sans-serif;
  --mono: "Courier Prime", "Courier New", ui-monospace, monospace;
  --r: 10px;
  color-scheme: light;
}
/* After hours (dark) */
:root[data-theme="charcoal"] {
  --bg: #171214; --surface: #211A1D; --sunk: #2B2226; --ink: #F4ECE6; --muted: #B9A9AE; --line: #3A2D32;
  --accent: #FF4D6D; --accent-ink: #171214; --select: #3EE6F0; --select-ink: #0F1416;
  --heat: #FF7A59; --cold: #6CC4FF; --basil: #5BD69B; --warn-bg: #3A2C14; --warn-ink: #F7D58A; --danger: #FF8A80;
  --awn-a: #FF4D6D; --awn-b: #FF4D6D; --awn-h: 3px; --awn-bw: 0px; --awn-line: transparent;
  --check-a: #2B2226; --check-b: #171214;
  --wm: #FF4D6D; --wm-glow: 0 0 22px rgb(255 77 109 / .35);
  --btn-edge: #9B2140; --ghost-edge: #5A4850;
  --board: #0B0809; --board-ink: #F4ECE6; --board-hi: #3EE6F0;
  --mono: "Space Mono", "Courier New", ui-monospace, monospace; color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { /* keep in sync with After hours above */
    --bg: #171214; --surface: #211A1D; --sunk: #2B2226; --ink: #F4ECE6; --muted: #B9A9AE; --line: #3A2D32;
    --accent: #FF4D6D; --accent-ink: #171214; --select: #3EE6F0; --select-ink: #0F1416;
    --heat: #FF7A59; --cold: #6CC4FF; --basil: #5BD69B; --warn-bg: #3A2C14; --warn-ink: #F7D58A; --danger: #FF8A80;
    --awn-a: #FF4D6D; --awn-b: #FF4D6D; --awn-h: 3px; --awn-bw: 0px; --awn-line: transparent;
    --check-a: #2B2226; --check-b: #171214;
    --wm: #FF4D6D; --wm-glow: 0 0 22px rgb(255 77 109 / .35);
    --btn-edge: #9B2140; --ghost-edge: #5A4850;
    --board: #0B0809; --board-ink: #F4ECE6; --board-hi: #3EE6F0;
    --mono: "Space Mono", "Courier New", ui-monospace, monospace; color-scheme: dark;
  }
}

/* ---------- 2. Base page styles ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: 16px; }
.page { padding-block: 28px 56px; }
h1 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 6.5vw, 52px); line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
h1 em { font-style: normal; font-weight: inherit; color: var(--accent); }
h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); text-wrap: balance; }
.lede { margin: 10px 0 0; max-width: 62ch; font-size: 17px; color: var(--muted); }
.page-head { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }

/* ---------- 3. Header, navigation and footer ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--surface); padding-top: env(safe-area-inset-top, 0px); }
.awning { height: calc(var(--awn-h) + var(--awn-bw)); background: repeating-linear-gradient(90deg, var(--awn-a) 0 14px, var(--awn-b) 14px 28px); border-bottom: var(--awn-bw) solid var(--awn-line); }
.site-header-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding-block: 10px; }
.brand { font: 400 30px/1.1 var(--brand); color: var(--wm); text-shadow: var(--wm-glow); text-decoration: none; white-space: nowrap; }
.brand em { font-style: normal; }
.site-nav { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 4px; overflow-x: auto; margin-inline: -8px; }
.site-nav a { padding: 8px; min-height: 40px; display: inline-flex; align-items: center; color: var(--muted); font: 500 14px var(--display); letter-spacing: .09em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 420px) { .site-nav a { font-size: 13.5px; letter-spacing: .05em; padding-inline: 7px; } }
@media (min-width: 700px) {
  .site-header-in { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-nav { grid-column: auto; grid-row: auto; margin: 0; justify-content: flex-end; }
}
.theme-btn { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-btn .i-sun { display: none; }
.theme-btn.is-dark .i-sun { display: block; }
.theme-btn.is-dark .i-moon { display: none; }

.site-footer { background: var(--surface); color: var(--muted); font-size: 14px; }
.checker { height: calc(14px + 2 * var(--awn-bw)); background: conic-gradient(var(--check-a) 25%, var(--check-b) 0 50%, var(--check-a) 0 75%, var(--check-b) 0) 0 0 / 14px 14px; border-block: var(--awn-bw) solid var(--awn-line); }
.site-footer .wrap { display: grid; gap: 10px; padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px)); }
.site-footer p { margin: 0; max-width: 72ch; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-nav a { color: var(--ink); font: 500 14px var(--display); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- 4. Shared pieces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 12px; min-width: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card-head .sub { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.btn { border: 2px solid var(--btn-edge); border-right-width: 4px; border-bottom-width: 4px; background: var(--accent); color: var(--accent-ink); border-radius: 6px; min-height: 44px; padding: 8px 16px; font: 600 15px var(--display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover:not(:disabled) { filter: brightness(1.06); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--ghost-edge); }
.btn.ghost:hover:not(:disabled) { background: var(--sunk); filter: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.linkbtn { border: 0; background: none; padding: 8px 2px; min-height: 36px; color: var(--accent); font: 500 13px var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.status { font-size: 13px; color: var(--muted); }
.disclosure { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--sunk); color: var(--muted); font-size: 14px; }

/* ---------- 5. Gear and ingredient pages ---------- */
.guide-page { display: grid; gap: 28px; }
.guide-page .page-head { margin-bottom: 0; }
.guide-page .lede + .disclosure { margin-top: 16px; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 14px var(--display); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.toc a:hover { border-color: var(--accent); }
.gear-section { display: grid; gap: 14px; scroll-margin-top: 16px; }
.gear-section > h2 { font-size: clamp(22px, 4vw, 28px); }
.gear-section > p { margin: 0; max-width: 70ch; }
.look-for { margin: 0; padding: 14px 16px 14px 34px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: grid; gap: 6px; max-width: 78ch; }
.look-for b { font-weight: 600; }
.look-for-title { list-style: none; margin: 0 0 -4px -18px; font: 600 13px var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.tag-styles { font: 500 12px var(--mono); color: var(--muted); }

/* Product cards: copy one <article class="product"> block to add a product (see README.md) */
.products { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 8px; align-content: start; }
.product img { border-radius: 6px; background: var(--sunk); aspect-ratio: 4 / 3; object-fit: contain; width: 100%; }
.product h3 { margin: 0; font: 600 18px var(--display); letter-spacing: .02em; }
.product .best-for { margin: 0; font: 500 12px var(--mono); color: var(--accent); }
.product p { margin: 0; font-size: 14px; color: var(--muted); }
.product .buy { margin-top: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.product .paid { font-size: 12px; color: var(--muted); }

.next-step { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.card > p { margin: 0; }
/* A section with no product cards yet shows only its guide text */
.products:not(:has(.product)) { display: none; }
.linkbtn.danger { color: var(--danger); }

/* "What I use" card and the Popular alternatives under it */
.picks { grid-template-columns: minmax(0, 640px); }
.pick { border: 2px solid var(--accent); gap: 10px; }
.product .pick-tag { margin: 0; justify-self: start; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 12.5px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.pick h3 { font-size: 22px; }
.pick > p:not(.best-for):not(.pick-tag) { font-size: 15px; color: var(--ink); }
.specs { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.specs li { padding: 4px 10px; border-radius: 999px; background: var(--sunk); font-size: 13px; color: var(--ink); }
.specs b { font-weight: 600; color: var(--muted); margin-right: 4px; }
.alts-title { margin: 6px 0 -4px; font: 600 14px var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.alts .product h3 { font-size: 16px; }

/* ---------- 6. Recipe pages and homepage extras ---------- */
/* Recipe at a glance */
.facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }
.facts li { padding: 4px 12px; border-radius: 999px; background: var(--sunk); font-size: 14px; color: var(--ink); }
.facts b { font-weight: 600; color: var(--muted); margin-right: 6px; }
.head-cta { margin-top: 18px; }
.hint-line { margin: 10px 0 0; max-width: 62ch; font-size: 14px; color: var(--muted); }
.fine { font-size: 14px; color: var(--muted); }
/* Ingredient and timing tables */
.tbl-scroll { overflow-x: auto; max-width: 680px; }
.recipe-tbl { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); font-size: 15px; }
.recipe-tbl th, .recipe-tbl td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.recipe-tbl thead th { border-top: 0; font: 600 13px var(--display); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.recipe-tbl td.g { font-family: var(--mono); white-space: nowrap; color: var(--ink); }
.recipe-tbl tr.total td { font-weight: 600; }
/* Numbered steps */
.recipe-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 10px; max-width: 78ch; }
.recipe-steps li { counter-increment: step; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px 14px 58px; }
.recipe-steps li::before { content: counter(step); position: absolute; left: 16px; top: 13px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 600 15px/28px var(--display); text-align: center; }
.recipe-steps h3, .qa h3 { margin: 0 0 4px; font: 600 17px/1.3 var(--display); letter-spacing: .03em; color: var(--ink); }
.recipe-steps .at { margin-left: 8px; font: 500 13px var(--mono); letter-spacing: 0; color: var(--muted); }
.recipe-steps p, .qa p { margin: 0; }
/* Questions and answers */
.qa { display: grid; gap: 16px; max-width: 78ch; }
/* Recipes by style (homepage) */
.style-links { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.style-links a { display: grid; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; }
.style-links a:hover { border-color: var(--accent); }
.style-links b { font: 600 16px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.style-links span { font-size: 14px; color: var(--muted); }