/* Nutrivero – sdílené styly webu.
   Základ: design systém „Organic“ (tokeny + komponenty) a přepisy z prototypu (barvy, písmo DM Sans).
   Písmo se načítá z /assets/css/fonts.css (lokálně, bez Google Fonts). */

/* ───────── Tokeny ───────── */
:root {
  --color-bg: #F7F4EE;
  --color-surface: #EEE8DE;
  --color-text: #254F44;
  --color-accent: #254F44;
  --color-accent-2: #C3CE94;
  --color-divider: color-mix(in srgb, #254F44 16%, transparent);

  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #E6EEEA;
  --color-accent-200: #CCDDD6;
  --color-accent-300: #A9C4BA;
  --color-accent-400: #6F9688;
  --color-accent-500: #254F44;
  --color-accent-600: #1E453B;
  --color-accent-700: #183A31;
  --color-accent-800: #122E27;
  --color-accent-900: #0C211C;

  --color-accent-2-100: #F3F5E9;
  --color-accent-2-200: #E6EBD0;
  --color-accent-2-300: #D5DDB3;
  --color-accent-2-400: #CBD5A2;
  --color-accent-2-500: #C3CE94;
  --color-accent-2-600: #A4B171;
  --color-accent-2-700: #7E8B50;
  --color-accent-2-800: #59633A;
  --color-accent-2-900: #3A4126;

  /* Doplňkové barvy značky */
  --color-card: #FDFBF7;
  --color-highlight: #E1C243;
  --color-leaf: #A5BA8F;

  --font-heading: 'DM Sans', system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

/* ───────── Základ ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
[hidden] { display: none !important; }

/* Cíle in-page navigace dostávají programový fokus (kvůli klávesnici) – bez rámečku. */
[data-nv-target]:focus, main:focus { outline: none; }

/* Odsazení cílů kotev pod lepivou hlavičkou (stejná matematika jako v site.js) */
#jak-pracuji { scroll-margin-top: calc(104px - clamp(28px, 3.5vw, 44px)); }
#cena, #o-mne, #kontakt { scroll-margin-top: 104px; }
#otazky { scroll-margin-top: calc(104px - clamp(32px, 4vw, 48px)); }
#rezervace { scroll-margin-top: 72px; }

/* WCAG 2.4.11: fokus nesmí zmizet pod lepivou hlavičkou (72 px + rezerva).
   :where() má nulovou specificitu, takže odsazení kotev výše má přednost. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) { scroll-margin-top: 88px; }

/* Prvky, které bez JavaScriptu nic nedělají (souhlas s kalendářem, nastavení cookies).
   Třídu .js na <html> nastavuje site.js. */
html:not(.js) .js-only { display: none !important; }

/* ───────── Animace ───────── */
@keyframes nv-sway { 0%, 100% { transform: rotate(-3deg) } 50% { transform: rotate(3deg) } }
@media (prefers-reduced-motion: reduce) {
  [data-nv-anim] { animation: none !important; }
  [data-ref-track] { scroll-behavior: auto !important; }
}

/* ───────── Tlačítka ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 999px;
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn:hover, .btn:active, .btn:focus-visible { color: #E1C243 !important; }
/* Žlutý text jen na tmavých tlačítkách; na světlém sekundárním by byl nečitelný (1,4 : 1). */
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus-visible { color: var(--color-text) !important; }

/* Tlačítko, které vypadá jako odkaz v patičce */
.link-button {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--color-accent); text-align: inherit;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: var(--color-accent-700); }

/* ───────── Přístupnost ───────── */
.skip-link {
  position: absolute; left: 16px; top: -200px; z-index: 1000;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--color-accent); color: var(--color-bg);
  font-size: 15px; font-weight: 600; text-decoration: none;
  box-shadow: var(--shadow-lg);
}
.skip-link:focus, .skip-link:focus-visible {
  top: 14px; color: var(--color-bg); outline: 2px solid #E1C243; outline-offset: 2px;
}
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ───────── Hlavička a menu ───────── */
/* navWide ↔ navNarrow z prototypu: hranice 1100 px */
@media (max-width: 1099.98px) { .only-wide { display: none !important; } }
@media (min-width: 1100px) { .only-narrow { display: none !important; } }

.nav-link:hover, .nav-link:focus-visible { background-color: var(--color-accent-2-200) !important; }
.nav-link:active { background-color: var(--color-accent-2-300) !important; }
.menu-toggle:hover, .menu-toggle:focus-visible { background-color: var(--color-accent-2-300) !important; }
.menu-toggle[aria-expanded="true"] .ico-open,
.menu-toggle[aria-expanded="false"] .ico-close { display: none; }
/* Otevřené mobilní menu musí být nad cookie lištou (z-index 9000), jinak na menších telefonech
   lišta zakryje spodní položky. Na nízkých displejích (telefon na šířku) menu roluje. */
html.nv-menu-open header { z-index: 9200 !important; }
html.nv-menu-open .menu-backdrop { z-index: 9150 !important; }
#mobilni-menu { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }

/* ───────── Domovská stránka – dekorace úvodu (v návrhu heroDeco: jen od 1360 px) ───────── */
.hero-deco { display: none; }
@media (min-width: 1360px) { .hero-deco { display: block; } }

/* ───────── Domovská stránka – hover stavy z prototypu ───────── */
.ref-prev:hover, .ref-prev:focus-visible { background-color: var(--color-bg) !important; }
.ref-next:hover, .ref-next:focus-visible { opacity: 0.88 !important; }
.btn-sage:hover, .btn-sage:active, .btn-sage:focus-visible {
  background-color: var(--color-accent-2-300) !important;
  color: var(--color-accent) !important;
}
/* Fokus na tmavé kartě (FULL): zelený rámeček by splynul s pozadím, proto žlutý (5,3 : 1). */
.card-dark :focus-visible { outline: 2px solid var(--color-highlight); outline-offset: 3px; }
[data-ref-track]::-webkit-scrollbar { display: none; }

/* FAQ: ikona plus/minus podle stavu */
.faq-q { margin: 0; font: inherit; letter-spacing: normal; }
.faq-btn[aria-expanded="true"] .ico-plus,
.faq-btn[aria-expanded="false"] .ico-minus { display: none; }

/* ───────── Kontaktní formulář (hlavní stránka) ───────── */
.kontakt-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-wide { grid-column: 1 / -1; }
.form-label { font-size: 14px; line-height: 1.55; font-weight: 600; }
/* Jako v návrhu (pole uvnitř popisku s font:inherit): text v polích má váhu 600. */
.form-control {
  width: 100%; min-height: 50px; margin: 0; padding: 0 18px;
  border: 1.5px solid var(--color-accent-2-300); border-radius: 16px;
  background-color: var(--color-card); color: var(--color-text);
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.55;
}
select.form-control { padding-right: 12px; cursor: pointer; }
textarea.form-control { min-height: 120px; padding: 14px 18px; resize: vertical; line-height: 1.5; }
/* V návrhu style-focus: tmavý rámeček bez outline; stín o 1 px rámeček zvýrazní (lépe viditelný fokus). */
.form-control:focus-visible {
  border-color: var(--color-accent); outline: none;
  box-shadow: 0 0 0 1px var(--color-accent);
}
.form-control:user-invalid { border-color: #9A3B2E; }
.btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
#kontakt-odeslano { scroll-margin-top: 104px; }

/* ───────── Podstránky ───────── */
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "›"; color: var(--color-accent-2-800); }
.breadcrumb a { color: var(--color-accent); font-weight: 600; }

/* ───────── Právní texty ───────── */
.legal {
  max-width: 760px;
  font-size: 16px; line-height: 1.65;
  overflow-wrap: break-word;
}
.legal > :first-child { margin-top: 0; }
.legal > :last-child { margin-bottom: 0; }
.legal h2 {
  margin: clamp(40px, 5vw, 56px) 0 14px;
  font-size: clamp(22px, 2.2vw, 26px); line-height: 1.25; font-weight: 400; letter-spacing: -0.02em;
  text-wrap: balance;
  scroll-margin-top: 96px;
}
.legal h3 {
  margin: 28px 0 10px;
  font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em;
  scroll-margin-top: 96px;
}
.legal h4 { margin: 22px 0 8px; font-size: 16px; line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.legal h2 + h3 { margin-top: 18px; }
.legal p, .legal li, .legal dd, .legal dt { font-size: 16px; line-height: 1.65; }
.legal p { margin: 0 0 14px; text-wrap: pretty; }
.legal strong, .legal b { font-weight: 600; }
.legal a { font-weight: 500; overflow-wrap: anywhere; }
.legal .btn {
  min-height: 52px; padding: 0 28px; font-size: 16px; font-weight: 600;
  text-decoration: none; overflow-wrap: normal; text-align: center;
}
.legal address { font-style: normal; margin: 0 0 14px; }
.legal hr { height: 1px; border: 0; margin: 32px 0; background: var(--color-divider); }
.legal ul, .legal ol { margin: 0 0 16px; padding: 0; list-style: none; }
.legal li { margin: 0 0 8px; }
.legal li > ul, .legal li > ol { margin: 8px 0 0; }
.legal ul > li { position: relative; padding-left: 26px; }
.legal ul > li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 10px; height: 10px; border-radius: 0 100% 0 100%;
  background-color: #A5BA8F;
}
.legal ol { counter-reset: nv-legal; }
.legal ol > li { position: relative; padding-left: 32px; counter-increment: nv-legal; }
.legal ol > li::before {
  content: counter(nv-legal) "."; position: absolute; left: 0; top: 0;
  min-width: 24px; font-weight: 600; color: var(--color-accent-2-800);
}
.legal ol[type="a"] > li::before { content: counter(nv-legal, lower-alpha) ")"; }
.legal dl { margin: 0 0 16px; }
.legal dt { font-weight: 600; }
.legal dd { margin: 0 0 10px; }
.legal .table-wrap {
  margin: 0 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-divider); border-radius: 16px; background: var(--color-card);
}
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; margin: 0 0 20px; }
.legal .table-wrap table { margin: 0; min-width: 0; }
/* Minimální šířku (a tedy vodorovné posouvání na mobilu) mají jen tabulky se 3 a více sloupci. */
.legal .table-wrap table:has(> thead th:nth-child(3)) { min-width: 560px; }
.legal caption { caption-side: top; text-align: left; padding: 12px 14px 0; font-size: 14px; font-weight: 600; }
.legal th, .legal td {
  padding: 11px 14px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-divider);
  font-size: 15px; line-height: 1.5;
}
.legal thead th { background: var(--color-surface); font-weight: 600; }
.legal tbody tr:last-child > * { border-bottom: 0; }
.legal th[scope="row"] { font-weight: 600; }
.legal .note {
  margin: 0 0 20px; padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius-lg); background-color: var(--color-accent-2-200);
}
.legal .note > :last-child { margin-bottom: 0; }
.legal .note h2, .legal .note h3 { margin-top: 0; }
.legal blockquote {
  margin: 0 0 16px; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--color-accent-2);
}
.legal nav ul > li::before, .legal .toc li::before { background-color: var(--color-accent-2); }

/* ───────── Tisk ───────── */
@media print {
  @page { margin: 1.6cm 1.8cm; }
  body, body > div { background: #fff !important; }
  body { font-size: 11pt; }
  header { position: static !important; background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  header nav, header .btn, .menu-toggle, #mobilni-menu, .menu-backdrop, .skip-link,
  .footer-links, [data-consent-open], .nvc-banner, .nvc-dialog,
  [data-kvetiny-track], .no-print { display: none !important; }
  .page-hero { background: none !important; border-radius: 0 !important; }
  .page-hero img { display: none !important; }
  .page-hero > div { padding: 0 0 12pt !important; }
  .legal { max-width: none; font-size: 11pt; }
  .legal p, .legal li, .legal td, .legal th, .legal dd, .legal dt { font-size: 11pt; }
  .legal h2 { font-size: 15pt; break-after: avoid; page-break-after: avoid; }
  .legal h3 { font-size: 12pt; break-after: avoid; page-break-after: avoid; }
  .legal table, .legal .note, .legal li { break-inside: avoid; page-break-inside: avoid; }
  .legal .table-wrap { overflow: visible; border: 0; }
  .legal .table-wrap table, .legal .table-wrap table:has(> thead th:nth-child(3)) { min-width: 0; }
  .legal a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; overflow-wrap: anywhere; }
  .legal .note { border: 1px solid #999; background: none; }
  * { box-shadow: none !important; animation: none !important; transition: none !important; }
}