/* Modern style for pizzacalculator.nl.
   Everything here only applies when the visitor picks "Modern"
   (html[data-style="modern"], set by theme-init.js); otherwise style.css gives
   the retro look. Same layout, different skin: a clean sans-serif, soft
   shadows instead of hard offset ones, rounded cards and one tomato-red accent. */

/* ===== Tokens ===== */
:root[data-style="modern"] {
  --red: #e4572e;
  --orange: #e4572e;
  --yellow: #f2a516;
  --teal: #0f9d8a;
  --accent: #e4572e;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --on-accent: #fff;

  /* Dark */
  --bg: #141312;
  --bg-alt: #1b1a19;
  --panel: #1f1d1c;
  --text: #f4f2ef;
  --muted: #a8a29c;
  --border: #33302d;
  --shadow: rgba(0, 0, 0, .35);
  --accent-text: #ff8a66;
  --soft-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-style="modern"][data-theme="light"] {
  --bg: #f7f6f4;
  --bg-alt: #efedea;
  --panel: #ffffff;
  --text: #1d1b19;
  --muted: #6b655f;
  --border: #e4e0db;
  --shadow: rgba(29, 27, 25, .08);
  --accent-text: #c9431c;
  --soft-shadow: 0 1px 2px rgba(29, 27, 25, .05), 0 8px 24px rgba(29, 27, 25, .07);
}

/* ===== Type ===== */
:root[data-style="modern"] body,
:root[data-style="modern"] body * {
  font-family: var(--font);
  letter-spacing: normal;
}
:root[data-style="modern"] body { line-height: 1.55; }
:root[data-style="modern"] h1,
:root[data-style="modern"] h2,
:root[data-style="modern"] h3 { font-weight: 700; letter-spacing: -.015em; }
:root[data-style="modern"] a { color: var(--accent-text); }

:root[data-style="modern"] .page-title { font-weight: 800; letter-spacing: -.03em; }
:root[data-style="modern"] .page-title span { color: var(--accent); }
:root[data-style="modern"] .section-title { border-left: none; padding-left: 0; font-size: 1.6rem; }
:root[data-style="modern"] .eyebrow { font-weight: 600; letter-spacing: .06em; }

:root[data-style="modern"] .footer-columns a { color: var(--muted); }
:root[data-style="modern"] .footer-columns a:hover { color: var(--accent-text); }

/* ===== Recipe and guide pages ===== */
:root[data-style="modern"] .breadcrumbs a,
:root[data-style="modern"] .breadcrumbs a:hover { color: var(--muted); border-bottom: none; font-size: inherit; font-weight: 400; }
:root[data-style="modern"] .guide-table th,
:root[data-style="modern"] .guide-table td { border-width: 1px; }
:root[data-style="modern"] .recipe-facts li { border-width: 1px; border-radius: 14px; }
:root[data-style="modern"] .recipe-card-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
:root[data-style="modern"] .guide-link:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

/* ===== Calculator intro (hero) ===== */
:root[data-style="modern"] .hero {
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--soft-shadow);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--yellow) 12%, transparent), transparent 50%),
    var(--panel);
  padding: 2.5rem 2.75rem;
}
:root[data-style="modern"] .hero-badge {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .02em;
  padding: .3rem .8rem;
}
:root[data-style="modern"] .hero-title { letter-spacing: -.035em; line-height: 1.02; }
:root[data-style="modern"] .hero-lead { font-size: 1.05rem; }
:root[data-style="modern"] .hero-points li {
  border: 1px solid var(--border);
  background: var(--panel);
  font-weight: 500;
}
:root[data-style="modern"] .hero-points li::before { color: var(--accent); }
:root[data-style="modern"] .hero-steps li {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:root[data-style="modern"] .hero-steps li::before {
  font-family: var(--font);
  background: var(--accent-soft);
  color: var(--accent-text);
  box-shadow: none;
  font-weight: 700;
}
:root[data-style="modern"] .hero-steps strong { font-weight: 700; }
@media (max-width: 700px) {
  :root[data-style="modern"] .hero { padding: 1.6rem 1.3rem; border-radius: 20px; }
}

/* ===== Header ===== */
:root[data-style="modern"] .stripes { display: none; }
:root[data-style="modern"] .topbar {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
:root[data-style="modern"] .topbar.scrolled { box-shadow: 0 6px 20px var(--shadow); }
:root[data-style="modern"] .logo:hover .logo-mark { transform: none; }
:root[data-style="modern"] .logo-word,
:root[data-style="modern"][data-theme="light"] .logo-word {
  color: var(--text);
  text-shadow: none;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.3rem;
}
:root[data-style="modern"] .logo-word span { color: var(--accent); }
:root[data-style="modern"] .logo-word .logo-tld { color: var(--muted); font-weight: 600; }
:root[data-style="modern"] .logo-tag { font-weight: 500; letter-spacing: .04em; text-transform: none; font-size: .72rem; margin-top: .2rem; }

:root[data-style="modern"] nav a,
:root[data-style="modern"] .nav-button {
  font-weight: 500;
  font-size: .92rem;
  color: var(--muted);
  border-bottom-width: 2px;
}
:root[data-style="modern"] nav a:hover,
:root[data-style="modern"] nav a.active,
:root[data-style="modern"] .nav-button:hover { color: var(--text); border-bottom-color: var(--accent); }

:root[data-style="modern"] .topbar nav.compact a,
:root[data-style="modern"] .topbar nav.compact .nav-button { border-width: 1px; font-size: .82rem; }
:root[data-style="modern"] .topbar nav.compact a.active { border-color: var(--accent); color: var(--text); }

:root[data-style="modern"] .display-button,
:root[data-style="modern"][data-theme="light"] .display-button {
  border: 1px solid var(--border);
  box-shadow: none;
  color: var(--text);
  font-weight: 600;
  font-size: .82rem;
}
:root[data-style="modern"] .display-button:hover,
:root[data-style="modern"] .display-button[aria-expanded="true"] { background: var(--bg-alt); }
:root[data-style="modern"] .display-button:active { transform: none; box-shadow: none; }
:root[data-style="modern"] .display-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px var(--shadow), 0 2px 6px var(--shadow);
}
:root[data-style="modern"] .display-panel legend { font-weight: 600; letter-spacing: .04em; }
:root[data-style="modern"] .display-option { font-weight: 500; }
:root[data-style="modern"] .display-option:hover,
:root[data-style="modern"] .display-option:has(input:checked) { background: var(--bg-alt); }
:root[data-style="modern"] .display-option:has(input:checked) { color: var(--accent-text); }
:root[data-style="modern"] .display-option input { accent-color: var(--accent); }

/* ===== Surfaces ===== */
:root[data-style="modern"] .panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
}
:root[data-style="modern"] .panel-label,
:root[data-style="modern"] .save-label,
:root[data-style="modern"] legend {
  color: var(--text);
  font-weight: 700;
  font-size: .95rem;
}
:root[data-style="modern"] .faq details { box-shadow: var(--soft-shadow); }
:root[data-style="modern"] .faq summary::marker,
:root[data-style="modern"] .pref-info summary::marker { color: var(--accent); }
:root[data-style="modern"] .explain-grid .panel h3,
:root[data-style="modern"] .pref-compare h3 { color: var(--text); }
:root[data-style="modern"] .legal h2 { color: var(--text); }
:root[data-style="modern"] .site-footer { background: transparent; border-top: 1px solid var(--border); }

/* ===== Buttons and fields ===== */
:root[data-style="modern"] .btn {
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  font-weight: 600;
  font-size: .95rem;
  transition: background .15s, filter .15s;
}
:root[data-style="modern"] .btn:hover,
:root[data-style="modern"] .btn:active { transform: none; box-shadow: none; filter: brightness(1.06); }
:root[data-style="modern"] .btn-red { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
:root[data-style="modern"] .btn-outline,
:root[data-style="modern"][data-theme="light"] .btn-outline { background: transparent; color: var(--text); border-color: var(--border); }
:root[data-style="modern"] .btn-outline:hover { background: var(--bg-alt); filter: none; }
:root[data-style="modern"] .btn-small { box-shadow: none; }

:root[data-style="modern"] input[type="text"],
:root[data-style="modern"] input[type="email"],
:root[data-style="modern"] input[type="datetime-local"],
:root[data-style="modern"] select,
:root[data-style="modern"] textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
:root[data-style="modern"] input:focus,
:root[data-style="modern"] select:focus,
:root[data-style="modern"] textarea:focus,
:root[data-style="modern"] button:focus-visible,
:root[data-style="modern"] a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:root[data-style="modern"] .alert { border-width: 1px; border-radius: 12px; }
:root[data-style="modern"] .check input { accent-color: var(--accent); }

/* ===== Calculator: steps and options ===== */
:root[data-style="modern"] .calc-step { font-weight: 700; }
:root[data-style="modern"] .calc-step span {
  background: var(--accent-soft);
  color: var(--accent-text);
  box-shadow: none;
  font-size: .9rem;
  font-weight: 700;
  width: 1.9rem;
  height: 1.9rem;
}

:root[data-style="modern"] .method-tile {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: none;
  transition: border-color .15s, background .15s;
}
:root[data-style="modern"] .method-tile:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
:root[data-style="modern"] .method-number {
  color: var(--muted);
  -webkit-text-stroke: 0;
  font-size: .95rem;
  font-weight: 600;
}
:root[data-style="modern"] .method-name { font-weight: 700; font-size: 1rem; }
:root[data-style="modern"] .method-time {
  background: var(--bg-alt);
  color: var(--text);
  font-weight: 600;
}
:root[data-style="modern"] .method-tile:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--accent);
}
:root[data-style="modern"] .method-tile:has(input:checked) .method-number { color: var(--accent-text); }
:root[data-style="modern"] .method-tile:has(input:checked) .method-desc { color: var(--muted); }
:root[data-style="modern"] .method-tile:has(input:checked) .method-time { background: var(--accent); color: var(--on-accent); }
:root[data-style="modern"] .method-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-style="modern"] .pic-retro { display: none; }
:root[data-style="modern"] .pic-modern { display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .18)); }
:root[data-style="modern"] .method-tile.has-pic:hover .style-pic { transform: scale(1.06) rotate(-4deg); }

/* ===== Calculator: dough controls ===== */
:root[data-style="modern"] .setting-label,
:root[data-style="modern"] .slider,
:root[data-style="modern"] .switch { font-weight: 600; }
:root[data-style="modern"] .slider output,
:root[data-style="modern"] .extra output,
:root[data-style="modern"] .setting-label output {
  border: none;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 700;
}
:root[data-style="modern"] .pizza-counter output { font-weight: 800; color: var(--text); }
:root[data-style="modern"] .pizza-counter button {
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: 1.25rem;
}
:root[data-style="modern"] .pizza-counter button:hover { background: var(--bg-alt); }
:root[data-style="modern"] .pizza-counter button:active { transform: none; box-shadow: none; }

:root[data-style="modern"] .segmented {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 3px;
  gap: 3px;
}
:root[data-style="modern"] .segmented label + label span { border-left: none; }
:root[data-style="modern"] .segmented span { border-radius: 9px; font-weight: 600; }
:root[data-style="modern"] .segmented input:checked + span { background: var(--accent); color: var(--on-accent); }

:root[data-style="modern"] input[type="range"] {
  height: 6px;
  border: none;
  background: var(--border);
}
:root[data-style="modern"] input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  background: var(--accent);
  border: 3px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
:root[data-style="modern"] input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 3px solid var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
:root[data-style="modern"] .switch input:checked { background: var(--accent); }
:root[data-style="modern"] .pref-info { border-top-style: solid; border-top-width: 1px; }
:root[data-style="modern"] .starter-block { border-top: 1px solid var(--border); }
:root[data-style="modern"] .level-badge { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
:root[data-style="modern"] .pref-compare > div { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }

/* ===== Recipe card ===== */
:root[data-style="modern"] .recipe-card {
  --card-paper: var(--panel);
  --card-ink: var(--text);
  --card-muted: var(--muted);
  --card-body: var(--muted);
  --card-number: var(--accent-text);
  --card-tile: var(--bg);
  --card-tile-border: var(--border);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  outline: none;
  padding: 1.25rem 1.5rem;
}
:root[data-style="modern"] .recipe-head { border-bottom: 1px solid var(--border); }
:root[data-style="modern"] .recipe-kicker,
:root[data-style="modern"] .recipe-total span,
:root[data-style="modern"] .recipe-meta dt { font-weight: 600; }
:root[data-style="modern"] .recipe-title { font-weight: 800; letter-spacing: -.02em; }
:root[data-style="modern"] .recipe-total strong { font-weight: 800; }
:root[data-style="modern"] .ing-tile { border: 1px solid var(--border); border-radius: 12px; }
:root[data-style="modern"] .ing-tile strong { font-weight: 700; }
:root[data-style="modern"] .recipe-meta { border-top: 1px solid var(--border); }
:root[data-style="modern"] .recipe-meta .recipe-oven dd { font-weight: 800; }
:root[data-style="modern"] .recipe-note { font-style: normal; }
@media (max-width: 520px) {
  :root[data-style="modern"] .recipe-card { padding: 1.1rem; }
}

/* ===== Task list (follows light/dark, unlike the always-dark retro board) ===== */
:root[data-style="modern"] .board {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
}
:root[data-style="modern"] .board-top div { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
:root[data-style="modern"] .board-label,
:root[data-style="modern"] .board-when span,
:root[data-style="modern"] .board-duration,
:root[data-style="modern"] .board-details { color: var(--muted); }
:root[data-style="modern"] .board-top strong,
:root[data-style="modern"] .board-when strong { font-weight: 700; color: var(--text); }
:root[data-style="modern"] .board-note,
:root[data-style="modern"] .board-title strong { color: var(--text); }
:root[data-style="modern"] .board-note.late { color: #e5484d; }
:root[data-style="modern"] .board-row { border-top: 1px solid var(--border); }
:root[data-style="modern"] .board-tag { border-radius: 999px; padding: .1rem .55rem; font-weight: 600; letter-spacing: .04em; }
:root[data-style="modern"] .board-tag.hands { background: var(--accent); }
:root[data-style="modern"] .board-tag.room { background: var(--yellow); color: #1d1b19; }
:root[data-style="modern"] .board-tag.oven { background: var(--text); color: var(--bg); }
:root[data-style="modern"] .board-stamp {
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  padding: .3rem .75rem;
}
:root[data-style="modern"] .board-stamp:hover { border-color: var(--accent); color: var(--accent-text); }
:root[data-style="modern"] .board-stamp[aria-pressed="true"] {
  transform: none;
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  color: var(--teal);
}
:root[data-style="modern"] .board-row.bake .board-title strong { color: var(--accent-text); }
:root[data-style="modern"] .board-button { color: var(--muted); }
:root[data-style="modern"] .board-button:hover { color: var(--text); }

/* ===== Save step and saved recipes ===== */
:root[data-style="modern"] .save-panel { border-left: 1px solid var(--border); }
:root[data-style="modern"] .recipe-item-name { font-weight: 700; color: var(--text); }
:root[data-style="modern"] .recipe-item-name:hover { color: var(--accent-text); }