/* =========================================================
   Kalkulator Kalorii — arkusz stylów główny
   ========================================================= */

:root {
  --c-primary: #16a34a;
  --c-primary-dark: #15803d;
  --c-primary-light: #4ade80;
  --c-accent: #f97316;
  --c-accent-2: #eab308;
  --c-bg: #f7faf7;
  --c-bg-alt: #f0f4ef;
  --c-surface: #ffffff;
  --c-text: #17241a;
  --c-text-muted: #56695a;
  --c-border: #e2e8e0;
  --c-success: #16a34a;
  --c-warning: #d97706;
  --c-danger: #dc2626;
  --c-info: #2563eb;

  --gradient-brand: linear-gradient(135deg, #16a34a 0%, #f97316 100%);
  --gradient-warm: linear-gradient(135deg, #f97316 0%, #eab308 100%);

  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --shadow-sm: 0 2px 8px rgba(23, 36, 26, 0.06);
  --shadow-md: 0 12px 30px rgba(23, 36, 26, 0.10);
  --shadow-lg: 0 25px 60px rgba(22, 163, 74, 0.20);

  --header-h: 76px;
  --container-w: 1180px;
}

:root[data-theme="dark"] {
  --c-bg: #0c1410;
  --c-bg-alt: #101c14;
  --c-surface: #131f16;
  --c-text: #eaf2ea;
  --c-text-muted: #9db8a2;
  --c-border: #22352a;
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 25px 60px rgba(22, 163, 74, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg: #0c1410;
    --c-bg-alt: #101c14;
    --c-surface: #131f16;
    --c-text: #eaf2ea;
    --c-text-muted: #9db8a2;
    --c-border: #22352a;
    --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 25px 60px rgba(22, 163, 74, 0.3);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.65;
  font-size: clamp(15px, 1.5vw, 16.5px);
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}

img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }

p { margin: 0 0 1em; color: var(--c-text-muted); }

ul, ol { padding-left: 1.3em; color: var(--c-text-muted); }

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--c-primary);
  color: #fff;
  padding: 12px 20px;
  z-index: 10000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  font-family: var(--font-body);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.98); }
.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.btn-outline {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text);
}
.btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); transform: translateY(-2px); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 18px; font-size: 0.86rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--c-border);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(0.82rem, 4.2vw, 1.15rem);
  color: var(--c-text);
  min-width: 0;
  flex-shrink: 1;
}
/* Na szerokim ekranie nazwa serwisu ma zostać w jednej linii — łamanie
   w środku wyrazu („KalkulatorKalo / rii”) wygląda na usterkę. Łamanie
   awaryjne włącza się dopiero na wąskich ekranach, niżej w tym pliku. */
.brand > span { white-space: nowrap; min-width: 0; }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--gradient-brand);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
.site-header:hover .brand-mark { transform: rotateY(20deg) rotateX(8deg); }
.brand-mark svg { width: 22px; height: 22px; }
.brand span em { color: var(--c-primary); font-style: normal; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  display: block;
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.94rem;
  white-space: nowrap;
  color: var(--c-text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"] {
  background: var(--c-bg-alt);
  color: var(--c-primary-dark);
}

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.theme-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--c-text);
  font-size: 1.1rem;
}

.lang-toggle {
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  cursor: pointer;
  color: var(--c-text);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lang-toggle:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  background: var(--c-bg-alt);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  width: 20px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Próg podniesiony z 1040px: pasek ma teraz dłuższe etykiety (m.in. „Tabele
   kaloryczności”) i poniżej ~1200px linki łamały się na dwa rzędy, rozpychając
   nagłówek. Menu pod przyciskiem przejmuje nawigację, zanim to nastąpi. */
@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  /* Na wąskich ekranach nazwa może się złamać — lepiej to niż wypchnięcie
     przycisków menu poza krawędź ekranu. */
  .brand > span { white-space: normal; overflow-wrap: anywhere; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-mark svg { width: 18px; height: 18px; }
  .nav-actions { gap: 8px; }
  .main-nav {
    position: fixed;
    top: var(--header-h);
    /* Panel parkuje się przez transform, a nie przez right: -100%. Odsunięty
       offsetem element stał poza prawą krawędzią okna i rozciągał dokument,
       przez co całą stronę dało się przewijać w poziomie. */
    right: 0;
    transform: translateX(100%);
    width: min(320px, 86vw);
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    z-index: 999;
    background: var(--c-surface);
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 6px;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
    visibility: hidden;
    transition: transform 0.32s ease, visibility 0s linear 0.32s;
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s ease, visibility 0s linear 0s;
  }
  .main-nav a { padding: 15px 18px; font-size: 1.05rem; border-bottom: 1px solid var(--c-border); border-radius: 12px; }

  .nav-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(10, 16, 12, 0.45);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.32s ease, visibility 0s linear 0.32s;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.32s ease, visibility 0s linear 0s;
  }
}

/* ---------- Hero / 3D ---------- */
.hero {
  position: relative;
  padding: 64px 0 90px;
  overflow: hidden;
  perspective: 1400px;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  z-index: 0;
  animation: float-blob 14s ease-in-out infinite;
}
.hero-blob.b1 { width: 420px; height: 420px; background: var(--c-primary-light); top: -120px; left: -100px; }
.hero-blob.b2 { width: 380px; height: 380px; background: var(--c-accent); bottom: -140px; right: -80px; animation-delay: -6s; }
.hero-blob.b3 { width: 260px; height: 260px; background: var(--c-accent-2); top: 40%; left: 46%; opacity: 0.3; animation-delay: -3s; }

@keyframes float-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -25px) scale(1.08); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--c-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.hero-stats { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats div strong { display: block; font-size: 1.7rem; font-family: var(--font-heading); color: var(--c-primary-dark); }
.hero-stats div span { font-size: 0.85rem; color: var(--c-text-muted); }

.hero-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}
.hero-3d-card {
  position: relative;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 34px;
  border: 1px solid var(--c-border);
  transform-style: preserve-3d;
}
.hero-3d-card .layer-2 { transform: translateZ(30px); }
.hero-3d-card .layer-1 { transform: translateZ(10px); }
.hero-3d-card .layer-3 { transform: translateZ(46px); }

.gauge-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.gauge-wrap svg { transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--c-bg-alt); stroke-width: 14; }
.gauge-value { fill: none; stroke: url(#gaugeGradient); stroke-width: 14; stroke-linecap: round; transition: stroke-dasharray 0.8s cubic-bezier(.2,.9,.25,1); }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-center strong { font-size: 2.1rem; font-family: var(--font-heading); }
.gauge-center span { color: var(--c-text-muted); font-size: 0.8rem; text-align: center; padding: 0 20px; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-3d { max-width: 380px; margin: 18px auto 0; }
}

/* ---------- Sections ---------- */
.section { padding: 70px 0; }
.section-alt { background: var(--c-bg-alt); }
.section-head { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.section-head p { font-size: 1.05rem; }

.grid {
  display: grid;
  gap: 26px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Cards (tilt) ---------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, transform 0.1s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--gradient-brand);
  color: #fff;
  margin-bottom: 18px;
  transform: translateZ(18px);
}
.card-icon svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 8px; }
.card h2 { margin-bottom: 8px; font-size: 1.2rem; }
.card p { margin-bottom: 14px; }
a.card { color: inherit; text-decoration: none; display: block; }
.card-link { font-weight: 700; color: var(--c-primary-dark); display: inline-flex; align-items: center; gap: 6px; }
.card-link svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.card:hover .card-link svg { transform: translateX(4px); }

.card-flat { box-shadow: none; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  color: var(--c-primary-dark);
  margin-bottom: 10px;
}

/* ---------- Article ---------- */
.article-hero { padding: 50px 0 20px; }
.article-meta { display: flex; gap: 16px; flex-wrap: wrap; color: var(--c-text-muted); font-size: 0.88rem; margin-bottom: 22px; }
.article-body { max-width: 760px; margin: 0 auto; padding: 10px 0 60px; }
.article-body h2 { margin-top: 1.6em; }
.article-body h3 { margin-top: 1.3em; }
.article-body p, .article-body li { font-size: 1.02rem; }
.article-body blockquote {
  margin: 28px 0;
  padding: 18px 24px;
  border-left: 4px solid var(--c-primary);
  background: var(--c-bg-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}
.callout {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 5px solid var(--c-accent);
  padding: 20px 24px;
  border-radius: var(--radius-sm);
  margin: 26px 0;
}
.callout strong { color: var(--c-text); }
.source-note { font-size: 0.82rem; color: var(--c-text-muted); border-top: 1px solid var(--c-border); padding-top: 14px; margin-top: 40px; }

.toc {
  background: var(--c-bg-alt);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin: 20px 0 30px;
}
.toc strong { display: block; margin-bottom: 10px; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc a { color: var(--c-primary-dark); font-weight: 600; }

/* ---------- Tabs (calculators) ---------- */
.tabs-shell {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.tabs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 14px;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-border);
}
.tab-btn {
  padding: 11px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--c-text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  font-family: var(--font-body);
}
.tab-btn:hover { background: var(--c-surface); }
.tab-btn.is-active { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-sm); }
.tab-panels { padding: 36px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fade-in 0.35s ease; }

@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Forms / Calculators ---------- */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 800px) {
  .calc-grid { grid-template-columns: 1fr; }
  .result-box { position: static; top: auto; }
}

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.92rem; }
.field .hint { color: var(--c-text-muted); font-size: 0.8rem; margin-top: 5px; }
.field input[type="number"],
.field input[type="text"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}
.field textarea { resize: vertical; min-height: 130px; }

.radio-row, .unit-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.unit-toggle button {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: 1.5px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-text-muted);
  font-weight: 700;
  cursor: pointer;
}
.unit-toggle button.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

.result-box {
  background: linear-gradient(160deg, var(--c-surface), var(--c-bg-alt));
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 30px;
  text-align: center;
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
.result-value { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; color: var(--c-primary-dark); }
.result-label { font-weight: 700; margin-top: 4px; }
.result-desc { font-size: 0.9rem; margin-top: 10px; }

.badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  margin-top: 12px;
}
.badge-under { background: #dbeafe; color: #1d4ed8; }
.badge-normal { background: #dcfce7; color: #15803d; }
.badge-over { background: #fef3c7; color: #b45309; }
.badge-obese { background: #fee2e2; color: #b91c1c; }

.bmi-scale { display: flex; height: 14px; border-radius: 999px; overflow: hidden; margin: 22px 0 8px; }
.bmi-scale span { flex: 1; }
.bmi-scale .s1 { background: #60a5fa; }
.bmi-scale .s2 { background: #22c55e; }
.bmi-scale .s3 { background: #f59e0b; }
.bmi-scale .s4 { background: #ef4444; }
.bmi-scale-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--c-text-muted); }

.table-wrap { overflow-x: auto; margin: 24px 0; border-radius: var(--radius-sm); border: 1px solid var(--c-border); }
table { width: 100%; border-collapse: collapse; min-width: 480px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--c-border); font-size: 0.92rem; }
th { background: var(--c-bg-alt); font-family: var(--font-heading); }
tr:last-child td { border-bottom: none; }

.disclaimer {
  font-size: 0.82rem;
  color: var(--c-text-muted);
  background: var(--c-bg-alt);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  margin-top: 20px;
}

/* ---------- Stats / charts ---------- */
.chart-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-sm); }
.bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.bar-row .label { width: 150px; font-size: 0.85rem; font-weight: 600; flex-shrink: 0; }
.bar-track { flex: 1; height: 16px; background: var(--c-bg-alt); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--gradient-brand); width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.bar-row .val { width: 55px; text-align: right; font-weight: 700; font-size: 0.85rem; }

.donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
.donut-legend { display: flex; flex-direction: column; gap: 10px; }
.donut-legend li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 0.88rem; }
.dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }

/* ---------- Publications ---------- */
.pub-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}
.pub-year {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--c-primary-dark);
  background: var(--c-bg-alt);
  border-radius: 14px;
  padding: 10px 16px;
  text-align: center;
  min-width: 70px;
}
.pub-item h3 { margin-bottom: 4px; }
.pub-authors { font-size: 0.86rem; color: var(--c-text-muted); margin-bottom: 8px; }
@media (max-width: 560px) { .pub-item { grid-template-columns: 1fr; } .pub-year { width: fit-content; } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-item { display: flex; gap: 16px; margin-bottom: 24px; align-items: flex-start; }
.contact-info-item .ico {
  width: 46px; height: 46px; border-radius: 14px; background: var(--gradient-brand);
  color: #fff; display: grid; place-items: center; flex-shrink: 0;
}
.form-status { display: none; padding: 14px 18px; border-radius: 12px; margin-top: 16px; font-weight: 600; font-size: 0.9rem; }
.form-status.is-visible { display: block; }
.form-status.ok { background: #dcfce7; color: #15803d; }
.form-status.err { background: #fee2e2; color: #b91c1c; }

/* ---------- Accordion (FAQ) ---------- */
.faq-item { border: 1px solid var(--c-border); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; background: var(--c-surface); }
.faq-q {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  background: none;
  border: none;
  font-weight: 700;
  font-family: var(--font-body);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--c-text);
}
.faq-q .plus { transition: transform 0.25s ease; font-size: 1.3rem; color: var(--c-primary); }
.faq-item.is-open .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 22px; }
.faq-item.is-open .faq-a { max-height: 400px; padding-bottom: 20px; }

/* ---------- Footer ---------- */
.site-footer { background: #0f1f13; color: #cddcd0; padding: 60px 0 26px; margin-top: 60px; }
:root[data-theme="dark"] .site-footer, body:not([data-force-light]) .site-footer { background: #081109; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.site-footer a { color: #a6c2ac; font-size: 0.92rem; }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: #7d9a85;
}
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #fff; font-weight: 800; font-family: var(--font-heading); }
.footer-brand .brand-mark { width: 36px; height: 36px; }
.contact-link-btn { background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: #a6c2ac; text-decoration: underline; }
.contact-link-btn:hover { color: #fff; }

/* ---------- Misc / utility ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.breadcrumbs { font-size: 0.82rem; color: var(--c-text-muted); margin-bottom: 18px; }
.breadcrumbs a { color: var(--c-text-muted); }
.breadcrumbs a:hover { color: var(--c-primary); }

.page-hero {
  padding: 46px 0 10px;
  text-align: center;
}
.page-hero p { max-width: 640px; margin: 0 auto; }

.pill-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.pill-list a {
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  font-size: 0.85rem;
  font-weight: 600;
}
.pill-list a:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }

.legal h2 { margin-top: 1.8em; }
.legal { max-width: 800px; margin: 0 auto; }

/* ---------- Macro donut segments (calorie calculator) ---------- */
.macro-donut-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.macro-donut-wrap svg { transform: rotate(-90deg); }
.macro-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.macro-donut-center strong { font-size: 1.5rem; font-family: var(--font-heading); }
.macro-donut-center span { color: var(--c-text-muted); font-size: 0.75rem; }
.macro-legend { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.macro-legend li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; }
.macro-legend .val { margin-left: auto; color: var(--c-text-muted); font-weight: 700; }

/* ---------- Flip cards (3D) ---------- */
.flip-card { perspective: 1200px; height: 200px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(.4,.2,.2,1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner, .flip-card:focus-within .flip-card-inner { transform: rotateY(180deg); }
.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--c-border);
}
.flip-card-front { background: var(--c-surface); }
.flip-card-back { background: var(--gradient-brand); color: #fff; transform: rotateY(180deg); }
.flip-card-back p { color: rgba(255,255,255,0.92); margin: 0; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- GEO: blok "W skrócie" (dodane 2026-08-01) ---------------------
   Odpowiedź podana wprost, na samej górze strony — to ten fragment cytują
   wyszukiwarki generatywne. Styl korzysta ze zmiennych motywu tej witryny,
   więc działa w wersji jasnej i ciemnej bez osobnych reguł.                */
.geo-tldr {
  margin: 26px 0 30px;
  padding: 20px 24px;
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-left: 5px solid var(--c-primary, #2563eb);
  border-radius: 12px;
}
.geo-tldr-head {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary, #2563eb);
}
.geo-tldr-answer {
  margin: 0 0 12px;
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--c-text, #111827);
}
.geo-tldr-list { margin: 0; padding-left: 20px; }
.geo-tldr-list li {
  margin: 5px 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--c-text-muted, #4b5563);
}
@media (max-width: 640px) {
  .geo-tldr { padding: 16px 18px; }
  .geo-tldr-answer { font-size: 1rem; }
}
/* Zwinięta lista na telefonie (element <details> tworzy main.js na ≤700 px).
   Bez tego blok spychał kalkulator poniżej pierwszego ekranu. */
.geo-tldr-wiecej > summary {
  cursor: pointer;
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--c-primary, #2563eb);
  list-style: none;
}
.geo-tldr-wiecej > summary::-webkit-details-marker { display: none; }
.geo-tldr-wiecej > summary::after { content: " ▾"; }
.geo-tldr-wiecej[open] > summary::after { content: " ▴"; }
.geo-tldr-wiecej[open] > summary { margin-bottom: 8px; }

/* ---------- Komponenty autopilota tresci (ac-*) --------------------------
   Uzywane przez podstrony dokladane automatycznie co dwa dni. Kolory,
   typografia i zaokraglenia biora sie ze zmiennych motywu tej witryny,
   wiec komponent wyglada u siebie w kazdym z pieciu serwisow.            */
/* Szerokosc i wysrodkowanie ustawiamy tutaj, a nie liczymy na klase kontenera
   witryny: czesc serwisow uzywa `.container`, czesc `.wrap`, a cwiczwdomu.pl
   nie ma zadnej z nich. Komponent musi wygladac poprawnie wszedzie. */
.ac-page { max-width: 860px; margin-left: auto; margin-right: auto;
           padding: 26px 20px 56px; }
.ac-crumbs { font-size: .86rem; color: var(--c-text-muted, #64748b); margin: 0 0 18px; }
.ac-crumbs a { color: inherit; }
.ac-kicker {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--c-primary, #2563eb); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.ac-page h1 { margin: 14px 0 10px; line-height: 1.18; }
.ac-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .86rem;
           color: var(--c-text-muted, #64748b); margin-bottom: 6px; }
.ac-toc { margin: 26px 0; padding: 18px 22px; border: 1px solid var(--c-border, #e5e7eb);
          border-radius: 12px; background: var(--c-surface, #fff); }
.ac-toc strong { display: block; margin-bottom: 8px; font-size: .82rem;
                 letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted, #64748b); }
.ac-toc ol { margin: 0; padding-left: 20px; }
.ac-toc li { margin: 4px 0; }
.ac-page h2 { margin: 34px 0 12px; line-height: 1.28; }
.ac-page p, .ac-page li { line-height: 1.72; }
.ac-note { margin: 22px 0; padding: 16px 20px; border-radius: 12px;
           background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e5e7eb);
           border-left: 5px solid var(--c-primary, #2563eb); }
.ac-faq { margin: 10px 0; border: 1px solid var(--c-border, #e5e7eb); border-radius: 12px;
          background: var(--c-surface, #fff); overflow: hidden; }
.ac-faq > summary { cursor: pointer; padding: 15px 20px; font-weight: 600;
                    list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ac-faq > summary::-webkit-details-marker { display: none; }
.ac-faq > summary::after { content: "+"; font-weight: 700; color: var(--c-primary, #2563eb); }
.ac-faq[open] > summary::after { content: "\2013"; }
.ac-faq > div { padding: 0 20px 16px; color: var(--c-text-muted, #4b5563); }
.ac-src { margin-top: 30px; font-size: .84rem; color: var(--c-text-muted, #64748b); }

/* rycina, powiazane strony i blok "O tej tresci" */
.ac-fig { margin: 26px 0; }
.ac-fig img { display: block; width: 100%; height: auto; border-radius: 14px;
              border: 1px solid var(--c-border, #e5e7eb); }
.ac-fig figcaption { margin-top: 8px; font-size: .84rem; color: var(--c-text-muted, #64748b); }
.ac-related { margin: 30px 0; padding: 18px 22px; border-radius: 12px;
              background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e5e7eb); }
.ac-related strong { display: block; margin-bottom: 8px; font-size: .82rem;
                     letter-spacing: .08em; text-transform: uppercase;
                     color: var(--c-text-muted, #64748b); }
.ac-related ul { margin: 0; padding-left: 20px; }
.ac-related li { margin: 5px 0; }
.ac-about { margin: 34px 0 0; padding: 20px 22px; border-radius: 12px;
            background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e5e7eb);
            font-size: .92rem; }
.ac-about h2 { margin: 0 0 10px; font-size: 1.05rem; }
.ac-about p { margin: 0 0 10px; }
.ac-about .ac-about-h { font-weight: 600; margin-top: 14px; }
.ac-about ul { margin: 6px 0 0; padding-left: 20px; }
.ac-about li { margin: 4px 0; }

/* kalkulator */
.ac-calc { margin: 26px 0; padding: 22px; border-radius: 14px;
           border: 1px solid var(--c-border, #e5e7eb); background: var(--c-surface, #fff); }
.ac-field { margin-bottom: 14px; }
.ac-field label { display: block; margin-bottom: 5px; font-size: .88rem; font-weight: 600; }
.ac-field input, .ac-field select {
  width: 100%; padding: 11px 13px; font-size: 1rem; font: inherit;
  border: 1px solid var(--c-border, #cbd5e1); border-radius: 10px;
  background: var(--c-surface, #fff); color: var(--c-text, #111827);
}
.ac-btn { width: 100%; padding: 13px 18px; border: 0; border-radius: 10px; cursor: pointer;
          background: var(--c-primary, #2563eb); color: #fff; font-size: 1rem; font-weight: 700; }
.ac-out { margin-top: 18px; padding: 18px; border-radius: 12px;
          background: var(--c-surface, #fff); border: 1px dashed var(--c-border, #cbd5e1); }
.ac-out-main { font-size: 1.9rem; font-weight: 800; color: var(--c-primary, #2563eb); line-height: 1.2; }
.ac-out-label { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase;
                color: var(--c-text-muted, #64748b); }
.ac-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0;
          border-top: 1px solid var(--c-border, #e5e7eb); font-size: .95rem; }
.ac-row b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ac-calc { padding: 16px; } .ac-out-main { font-size: 1.5rem; } }
/* ---------- koniec bloku ac-* ---------- */


/* ---------- Miejsce na reklame ----------
   Slot rezerwuje wysokosc, zanim reklama sie zaladuje. Bez tego kazda
   wstawiona jednostka przesuwa tresc w dol w trakcie czytania (CLS).
   Marginesy trzymaja reklame z dala od przyciskow i pola wyniku, zeby
   nie dalo sie kliknac jej przez pomylke. Slotu uzywamy TYLKO miedzy
   sekcjami tresci - nigdy nad kalkulatorem i nigdy wewnatrz formularza. */
.ad-slot {
  display: block;
  margin: 36px auto;
  min-height: 280px;
  max-width: 100%;
  text-align: center;
}
.ad-slot::before {
  content: "Reklama";
  display: block;
  margin-bottom: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.ad-slot > * { margin: 0 auto; }
/* Pusty slot nie moze rezerwowac 280 px z podpisem "Reklama" nad niczym.
   Do czasu, az w srodku stanie jednostka reklamowa, slot jest niewidoczny -
   tak samo jak na prawidlowamasaciala.pl. */
.ad-slot:empty { display: none; }
@media (max-width: 640px) {
  .ad-slot { min-height: 250px; margin: 28px auto; }
}

/* Zdjecie w karcie hero na stronie glownej. Wymiary sa w atrybutach width/height
   obrazka, wiec przegladarka rezerwuje miejsce zanim plik sie sciagnie (CLS). */
.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ---------- Zageszczenie pionowe na telefonie (2026-08-16) ----------------
   Odstępy z wersji desktopowej (70 px na sekcję, 46 px nad nagłówkiem) na
   ekranie 390 px sumowały się do ok. 230 px pustego miejsca nad formularzem.
   Razem ze zwinięciem listy "W skrócie" przesuwa to kalkulator na pierwszy
   ekran telefonu. Powyżej 700 px nic się nie zmienia.                      */
@media (max-width: 700px) {
  .section { padding: 44px 0; }
  .page-hero { padding-top: 28px; }
  .breadcrumbs { margin-top: 12px !important; margin-bottom: 10px; }
  .geo-tldr { margin: 18px 0 20px; }
  /* To samo dla stron ze składu autopilota (ac-*), które nie używają .section */
  .ac-page { padding-top: 14px; }
  .ac-crumbs { margin-bottom: 10px; }
  .ac-page h1 { margin-top: 10px; }
  .ac-calc { margin: 18px 0; }
}

/* ---------- Stały link do grupy Facebook (zawsze na ekranie) ---------- */
.fb-group-float {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 11000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #1877f2;
  color: #fff !important;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 10px 28px rgba(24, 119, 242, 0.42);
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.fb-group-float:hover {
  background: #166fe5;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(24, 119, 242, 0.5);
}
.fb-group-float:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}
.fb-group-float__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.fb-group-float__text {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .fb-group-float {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    padding: 11px 14px;
    font-size: 0.84rem;
    gap: 8px;
  }
  .fb-group-float__icon {
    width: 20px;
    height: 20px;
  }
}

/* --- AdSense-era UX: always-visible steps, FAQ details, compare table --- */
.step-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
}
.step-card .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.step-card h3 { margin: 0 0 8px; font-size: 1.12rem; }
.step-card p { margin: 0; color: var(--c-text-muted); }

.hero-preview {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 28px 26px 22px;
  box-shadow: var(--shadow-md);
}
.hero-preview .hp-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.hero-preview .hp-kcal {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--c-primary-dark);
}
.hero-preview .hp-kcal span { font-size: 1.05rem; font-weight: 600; color: var(--c-text-muted); }
.hero-preview .hp-rows { margin-top: 18px; display: grid; gap: 10px; }
.hero-preview .hp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--c-bg-alt);
  border-radius: 10px;
  font-size: 0.92rem;
}
.hero-preview .hp-row strong { color: var(--c-text); }

.compare-table th:first-child, .compare-table td:first-child { white-space: nowrap; }
@media (max-width: 700px) {
  .compare-table th:first-child, .compare-table td:first-child { white-space: normal; }
}

details.faq-item > summary {
  cursor: pointer;
  padding: 18px 22px;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
details.faq-item > summary::-webkit-details-marker { display: none; }
details.faq-item > summary::after {
  content: "+";
  color: var(--c-primary);
  font-size: 1.2rem;
  font-weight: 700;
}
details.faq-item[open] > summary::after { content: "\2013"; }
details.faq-item > div { padding: 0 22px 18px; color: var(--c-text-muted); line-height: 1.65; }

.topic-clusters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.topic-clusters a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--c-bg-alt);
  border: 1px solid var(--c-border);
  font-size: 0.88rem;
  color: var(--c-text);
}
.topic-clusters a:hover { border-color: var(--c-primary); color: var(--c-primary-dark); }