/* Hubnu Chytře — vzhled webu.
 *
 * Pravidla, která tenhle soubor drží (a hlídá je tools/kontrola
 * s rozpočtem nula):
 *   · mobile first — základ patří telefonu, rozšíření jen přes min-width
 *   · žádné vynucování priority deklarace a žádné utilitní vlastnosti
 *     ve vlastní třídě; na to má Bootstrap hotové utility
 *   · barvy jen přes proměnné, komponenty se přebarvují přes --bs-*
 *     tokeny, nikdy selektorem na .text-bg-* nebo .btn-*
 *   · ikony jsou Bootstrap Icons, vlastní ikonový font tu není
 *
 * Paleta je převzatá z WordPressové šablony beze změny odstínů, včetně
 * --hc-mint-text: tmavší mátová vznikla proto, že --hc-mint-dark dává na
 * světle zeleném podkladu jen 2,6:1 a norma žádá 4,5:1.
 */

:root {
  --hc-pink-soft: #fdebf3;
  --hc-pink: #f9c6da;
  --hc-pink-strong: #f272a7;
  --hc-pink-deep: #c22568;
  --hc-dark: #14142b;
  --hc-gray: #5a5a6e;
  --hc-mint: #5fc99f;
  --hc-mint-dark: #3fae84;
  --hc-mint-text: #1e6b4e;
  --hc-white: #fff;

  /* Odstíny, které si vyžádala prodejní stránka — všechny z WordPressu
     beze změny. Zlatá a jantarová nesou význam samy o sobě (hvězdička
     recenze, „tuky" v poměru živin), zbytek jsou konce přechodů a
     podklad zelené karty, který tu dosud žil jako holý hex. */
  --hc-gold: #f5b301;
  --hc-amber: #f5b461;
  --hc-mint-soft: #edf9f3;
  --hc-mint-border: #c8eddc;

  /* Podklad jantarového upozornění — v e-booku jediná barva, která
     neříká „hotovo" ani „značka", ale „všimněte si". Odstín je z WP
     šablony (.highlight-box.warning), ať se upozornění po přepisu
     nezačne tvářit jinak než v knize, kterou zákazníci už mají. */
  --hc-amber-soft: #fef3c7;

  /* Nejtmavší růžová je začátek přechodu na obálce e-booku. Odstín je
     z WordPressové obálky, kde stál na témž místě; světlejší konec
     původního přechodu se nepřenesl, protože bílý text na něm dává
     2,7:1 (viz .hc-obalka). */
  --hc-pink-deepest: #8e1246;

  /* Bootstrap přebarvený na značku. Modrá se drží na dvou úrovních —
     v obecných tokenech a zvlášť v každé komponentě — takže nestačí
     přepsat --bs-primary; komponenty mají vlastní blok níž. */
  --bs-primary: var(--hc-pink-deep);
  --bs-primary-rgb: 194, 37, 104;
  --bs-primary-text-emphasis: var(--hc-pink-deep);
  --bs-primary-bg-subtle: var(--hc-pink-soft);
  --bs-primary-border-subtle: var(--hc-pink);

  /* Bootstrapí „semafor" přemapovaný na značku. Bez tohohle prosakoval
     do e-booku cizí vzorník: 38× `text-success` (#198754) vedle 62×
     značkového `text-mint` (#1e6b4e) — dvě zelené vedle sebe na téže
     stránce —, k tomu `warning`, `danger` a `info`, které v paletě
     nejsou vůbec. Nejhůř to dopadalo na straně 23, kterou si zákazník
     tiskne a bere do obchodu: čtyři panely ve čtyřech cizích barvách.

     Přemapovává se TOKEN, ne komponenta — pravidla projektu zakazují
     přebarvovat `.text-bg-*` selektorem a bootstrapí `!important` by
     stejně vyhrálo. Význam zůstává: „success" je pořád „co je
     zahrnuto", jen mátové; „warning" je „všimněte si", jantarové;
     „danger" a „info" nemají v téhle knize vlastní práci, takže
     splývají s tmavou (fakt) a šedou (doplněk). */
  --bs-success: var(--hc-mint-text);
  --bs-success-rgb: 30, 107, 78;
  --bs-success-text-emphasis: var(--hc-mint-text);
  --bs-success-bg-subtle: var(--hc-mint-soft);
  --bs-success-border-subtle: var(--hc-mint-border);

  --bs-warning: var(--hc-amber);
  --bs-warning-rgb: 245, 180, 97;
  --bs-warning-text-emphasis: var(--hc-dark);
  --bs-warning-bg-subtle: var(--hc-amber-soft);
  --bs-warning-border-subtle: var(--hc-amber);

  --bs-danger: var(--hc-dark);
  --bs-danger-rgb: 20, 20, 43;
  --bs-danger-text-emphasis: var(--hc-dark);
  --bs-danger-bg-subtle: var(--hc-amber-soft);
  --bs-danger-border-subtle: var(--hc-amber);

  --bs-info: var(--hc-gray);
  --bs-info-rgb: 90, 90, 110;
  --bs-info-text-emphasis: var(--hc-gray);
  --bs-info-bg-subtle: var(--bs-secondary-bg);
  --bs-info-border-subtle: var(--hc-gray);

  --bs-body-color: var(--hc-dark);
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-heading-font-family: "Poppins", var(--bs-body-font-family);
  --bs-secondary-color: var(--hc-gray);
  --bs-secondary-rgb: 90, 90, 110;

  --bs-link-color: var(--hc-pink-deep);
  --bs-link-color-rgb: 194, 37, 104;
  --bs-link-hover-color: var(--hc-dark);
  --bs-link-hover-color-rgb: 20, 20, 43;
  --bs-focus-ring-color: rgba(194, 37, 104, .3);

  --bs-border-radius: .75rem;
  --bs-border-radius-lg: 1.125rem;
  --bs-border-radius-xl: 1.5rem;
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  font-family: var(--bs-heading-font-family);
  font-weight: 800;
  line-height: 1.2;
  text-wrap: balance;
}

/* Tlačítka jsou u téhle značky oblá až do pilulky a mají velký terč —
   hlavní akce je na telefonu palcem na první pokus. */
.btn {
  --bs-btn-border-radius: 50rem;
  --bs-btn-font-family: var(--bs-heading-font-family);
  --bs-btn-font-weight: 700;
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.75rem;
}

/* Stav `disabled` musí být přebarvený TAKY, i když se dneska nikde
   nepoužívá. Bootstrap si pro něj drží vlastní tokeny se svou modrou,
   takže první `disabled` tlačítko, které někdo přidá, by bylo modré —
   a hledalo by se to blbě, protože zdrojem by nebyla naše šablona.
   Našlo to pravidlo `modra-v-komponente`. */
.btn-primary {
  --bs-btn-bg: var(--hc-pink-deep);
  --bs-btn-border-color: var(--hc-pink-deep);
  --bs-btn-hover-bg: var(--hc-dark);
  --bs-btn-hover-border-color: var(--hc-dark);
  --bs-btn-active-bg: var(--hc-dark);
  --bs-btn-active-border-color: var(--hc-dark);
  --bs-btn-disabled-bg: var(--hc-pink-deep);
  --bs-btn-disabled-border-color: var(--hc-pink-deep);
}

.btn-outline-primary {
  --bs-btn-color: var(--hc-pink-deep);
  --bs-btn-border-color: var(--hc-pink-deep);
  --bs-btn-hover-bg: var(--hc-pink-deep);
  --bs-btn-hover-border-color: var(--hc-pink-deep);
  --bs-btn-disabled-color: var(--hc-pink-deep);
  --bs-btn-disabled-border-color: var(--hc-pink-deep);
}

/* Mátová je barva „dobré zprávy" — hotovo, zdarma, splněno. Na text jde
   jen tmavá varianta, na pozadí světlá. */
.text-mint {
  color: var(--hc-mint-text);
}

.bg-pink-soft {
  background-color: var(--hc-pink-soft);
}

.bg-mint-soft {
  background-color: var(--hc-mint-soft);
}

.bg-amber-soft {
  background-color: var(--hc-amber-soft);
}

/* Barva lemu pro .border-start / .border-4. Bootstrap čte z obou utilit
   --bs-border-color, takže se lem přebarvuje tokenem a ne vlastním
   border-left — jinak by se šířka lemu psala na dvou místech a jedno
   z nich by se u další změny zapomnělo. Značková růžová lem má
   v Bootstrapu vlastní (.border-primary), mátová a jantarová ne. */
/* Přepínač menu kreslí Bootstrap 54 × 38 px. Na telefonu je to první
   věc, na kterou se sahá, a čtyřiačtyřicetipixelovou laťku WCAG podlézá
   o šest pixelů. Dorovnává se odsazením, ne pevnou výškou, aby ikona
   zůstala uprostřed. (Našlo měření vzhledu, ne oko.) */
.navbar-toggler {
  --bs-navbar-toggler-padding-y: .5rem;
  --bs-navbar-toggler-padding-x: .875rem;
}

/* Značka v hlavičce je odkaz na úvodní stranu a na telefonu se na něj
   míří palcem. Logo je 965 × 187, takže při šířce 140 px je vysoké 27 a
   s výchozím odsazením 5 px je z odkazu cíl 37 px — laťka projektu je
   44. Dorovnává se odsazením, ne výškou obrázku: roztažené logo je
   v hlavičce vidět, o pár pixelů odsazení navíc nezavadí nikdo. */
.navbar-brand {
  --bs-navbar-brand-padding-y: .625rem;
}

/* Formulářová pole: vyšší než výchozí, protože se vyplňují na telefonu. */
.form-control,
.form-select {
  --bs-border-radius: .75rem;
  min-height: 3rem;
}

/* Zaškrtávátko není tlačítko: Bootstrap ho kreslí jako čtverec o
   velikosti písma a nad ~24 px vypadá jako kachlík. Laťku 44 px plní
   klikací plocha popisku, ne samotný čtvereček — proto tu platí nižší,
   ale pořád splněná hranice, se kterou počítá i sonda vzhledu
   (MIN_ZASKRTAVATKO v hc_nastroje/nastroje_vzhledu.py). */
/* kontrola: vyjimka maly-dotykovy-cil — WCAG 2.2 AA má pro zaškrtávátka 24 px, cíl plní popisek */
.form-check-input {
  width: 1.5rem;
  height: 1.5rem;
}

/* Popisek se lepil na zvětšené zaškrtávátko. Bootstrap odsazuje popisek
   podle VELIKOSTI PÍSMA (`padding-left: 1.5em`), ne podle té krabičky —
   u 16px písma je to přesně 24 px, takže text začínal tam, kde box
   skončil, a mezera vyšla na nulu. Přepisuje se proto Bootstrapí
   vlastní pravidlo: šířka boxu plus 8 px mezery.

   Utilitou to nejde: `p-*` má hodnoty ze škály Bootstrapu, 2.125rem mezi
   ně nepatří, a třída by se musela opakovat u každého `.form-check`
   v každé šabloně. Hlídá to sonda vzhledu pravidlem o nalepeném popisku. */
/* kontrola: vyjimka utilitni-vlastnost — přepisuje pravidlo Bootstrapu, ne vlastní komponentu */
.form-check {
  padding-left: 2.125rem;
}

/* kontrola: vyjimka utilitni-vlastnost — musí sedět s odsazením výš, jinak box vyjede z řádku */
.form-check .form-check-input {
  margin-left: -2.125rem;
}

.form-check-input:checked {
  background-color: var(--hc-pink-deep);
  border-color: var(--hc-pink-deep);
}

/* Karta s jemným stínem místo rámečku — stejný pocit jako na původním
   webu, ale bez vlastního box-shadow u každé komponenty zvlášť. */
.card {
  --bs-card-border-color: transparent;
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-box-shadow: 0 .625rem 2.5rem rgba(20, 20, 43, .1);
  box-shadow: var(--bs-card-box-shadow);
}

/* Maskot doprovází text a na telefonu se schovává — zabral by celou
   první obrazovku dřív, než by šlo něco přečíst.

   height: auto tu není kosmetika: obrázky mají kvůli poskakování obsahu
   atributy width/height a ty se chovají jako CSS. Samotné max-width
   zúží šířku, výška ale zůstane na 800 px z atributu a maskotka se
   natáhne do nudle. */
.hc-maskot {
  max-width: 8rem;
  height: auto;
}

@media (min-width: 768px) {
  .hc-maskot {
    max-width: 12rem;
  }
}

/* ── Prodejní stránka ───────────────────────────────────────────────
 *
 * Rytmus stránky nesou podklady sekcí, ne rámečky: růžová → bílá →
 * světlá → bílá → tmavá. Odsazení, mřížky a rozestupy dělá Bootstrap
 * utilitami v šabloně; sem patří jen to, co utilita neumí — přechody,
 * značkové barvy a tokeny komponent.
 */

.hc-prechod-ruzovy {
  background-image: linear-gradient(160deg, var(--hc-pink-soft) 0%, var(--hc-pink) 100%);
}

.hc-prechod-svetly {
  background-image: linear-gradient(180deg, var(--hc-white) 0%, var(--hc-pink-soft) 100%);
}

/* Cenová karta. Odliší se výškou, ne barvou: silnější stín než mají
   ostatní karty a růžový proužek nahoře. Tmavá plocha se na tenhle web
   nehodí — rozhodnutí majitele, a je to obhajitelné: značka je světlá
   a přátelská, tmavý blok do ní vnášel vážnost, kterou jinde nemá.

   Že karta zůstane nejsilnějším prvkem stránky, drží tři věci najednou:
   je jediná čistě bílá na růžovém pruhu, má nejsilnější stín na webu
   a nese jediné růžové tlačítko v okolí. */
.hc-karta-cena {
  --bs-card-box-shadow: 0 1.25rem 3.5rem rgba(20, 20, 43, .18);
  border-top: 0.25rem solid var(--hc-pink-deep);
}


/* Zvýrazněné slovo v hlavním nadpisu. WordPress tu má --hc-pink-strong,
   jenže ta dává na růžovém přechodu 2,4:1 — nadpis by se v ostrém světle
   ztratil. Tmavší růžová drží 4,8:1 a působí stejně. */
.hc-akcent {
  color: var(--hc-pink-deep);
}

/* Štítek nad nadpisem sekce. Na tmavém pruhu potřebuje vlastní pár barev
   — růžová na tmavém podkladu kontrast nesplní. */
/* Hlavička karty jídla. Byla to bootstrapí `text-bg-primary`, tedy bílé
   písmo na sytě růžové — a v tisku bez pozadí z ní zbyla bílá na bílé.
   Zmizelo tak u všech pěti jídel krát sedm dní, čím jídlo je: snídaně,
   nebo večeře. Vlastní třída místo utility schválně: přebarvit
   `.text-bg-*` selektorem pravidla zakazují a bootstrapí `!important`
   by stejně vyhrálo. Přes proměnnou karty se to nepere s ničím.

   Tmavé písmo na světle růžové drží význam i bez pozadí: barva zmizí,
   text zůstane čitelný. */
/* Tmavá karta = FAKT nebo VÝSLEDEK (pravidlo z CLAUDE.md). V celém
   e-booku byla dosud jediná — obálka — takže nejsilnější prvek palety
   ležel ladem, zatímco akční růžová se roztekla na dvě stě míst.

   Karta, ne pruh přes celou šířku: velký tmavý blok stránku zatíží,
   ale tmavá karta na světlém pozadí bere pozornost sama. Světlý box
   uvnitř si musí vzít barvu písma zpátky (`text-body`), jinak zdědí
   bílou a text zmizí — proto ten druhý selektor.

   V tisku bez pozadí by z bílého písma zbyla bílá na bílé, takže má
   `@media print` vlastní náhradu. */
.hc-karta-fakt {
  background-color: var(--hc-dark);
  color: var(--hc-white);
  --bs-card-bg: var(--hc-dark);
  --bs-card-color: var(--hc-white);
}

.hc-karta-fakt .hc-vysledek {
  color: var(--hc-mint);
}

/* Fotka jídla. Poměr 16:9 s `object-fit: cover`, aby se karty
   nerozjely, když fotky přijdou z různých zdrojů a v různých poměrech
   — a aby se výška karty nezměnila, až fotka doopravdy dorazí. */
.hc-fotka-jidla {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hc-jidlo-hlavicka {
  --bs-card-cap-bg: var(--hc-pink-soft);
  --bs-card-cap-color: var(--hc-dark);
  border-bottom-color: var(--hc-pink);
}

.hc-stitek {
  background-color: var(--hc-pink-soft);
  color: var(--hc-pink-deep);
  font-size: .8125rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hc-stitek-mint {
  background-color: var(--hc-mint);
  color: var(--hc-dark);
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.hc-prostrkani {
  letter-spacing: .09em;
}

/* Řádek delší než ~75 znaků se špatně čte a oko ztrácí začátek dalšího.
   Týká se jen textu na střed — ten se nemá o co opřít. */
.hc-uzky-text {
  max-width: 40rem;
}

/* Maskotky: strop v rem, ne v procentech sloupce. Na širokém displeji by
   se jinak nafoukly přes celou půlku stránky a přebily text. */
.hc-maskot-hero {
  max-width: min(26rem, 100%);
  height: auto;
}

.hc-maskot-blok {
  max-width: min(20rem, 80%);
  height: auto;
}

.hc-avatar {
  width: 2.75rem;
  height: 2.75rem;
  background-color: var(--hc-pink);
  border-radius: 50%;
}

.hc-hvezdy {
  color: var(--hc-gold);
  letter-spacing: .15rem;
}

/* Pořadové číslo kroku. Je aria-hidden — pořadí drží samotné pořadí
   karet — takže smí být světlé a velké.

   Šedá, ne růžová. Růžová je barva akce a tři velká růžová čísla vedle
   jednoho růžového tlačítka mu berou přesně to, čím se má lišit; číslo
   kroku přitom není akce ani fakt, je to dekorace pořadí. */
.hc-krok-cislo {
  color: var(--hc-pink);
  line-height: 1;
}

.hc-karta-ano {
  background-color: var(--hc-mint-soft);
  border-color: var(--hc-mint-border);
}

/* Šedá = negativní sdělení (pravidlo z CLAUDE.md). Karta byla světle
   růžová, tedy v barvě AKCE — a od 1. 9. 2026 stojí na růžovém podkladu
   sekce, kde by beztak splynula. Mátová vedle ní zůstává „co je
   zahrnuto", takže obě karty říkají barvou totéž co textem. */
.hc-karta-ne {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

/* Ukázkový poměr živin. Šířky jsou napevno, protože jde o ilustraci
   jednoho konkrétního výpočtu — ne o hodnoty, které by šly zvenčí. */
.hc-podil-bilkoviny {
  width: 32%;
  --bs-progress-bar-bg: var(--hc-pink-strong);
}

.hc-podil-tuky {
  width: 30%;
  --bs-progress-bar-bg: var(--hc-amber);
}

.hc-podil-sacharidy {
  width: 38%;
  --bs-progress-bar-bg: var(--hc-mint);
}

.hc-tecka-bilkoviny {
  color: var(--hc-pink-strong);
}

.hc-tecka-tuky {
  color: var(--hc-amber);
}

.hc-tecka-sacharidy {
  color: var(--hc-mint);
}

/* Rozbalovačka otázek. Aktivní barvy si Bootstrap bere z --bs-primary-*,
   takže sedí samy; modrá ale zůstává zadrátovaná ve dvou hodnotách,
   které se přes obecné tokeny přebarvit nedají — šipka otevřené položky
   a prstenec při zaměření klávesnicí. */
.hc-faq {
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
  max-width: 47rem;
}

/* ── Čtečka e-booku ─────────────────────────────────────────────────
 *
 * Čtečka má vlastní rozvržení (templates/hc/ebook/), ne rozvržení webu.
 * Panel s obsahem je pod lg offcanvas Bootstrapu a od lg stálý sloupec —
 * všechno kolem toho dělají utility. Sem patří jen to, co utilita neumí,
 * a tokeny komponent; barvit .list-group-item selektorem by rozvázalo
 * stav aktivní položky od stavu po najetí myší a při zaměření.
 */

/* Panel zůstává stát, zatímco se čte, a roluje se sám. Na 35 stranách je
   skákání zpět nahoru jediný způsob, jak se v knize ztratit. Pod lg je
   z panelu offcanvas s pevnou pozicí a tahle pravidla se ho netýkají. */
@media (min-width: 992px) {
  .hc-ctecka-panel {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* Lišta čtečky nese na 375 px tři ovládací prvky vedle sebe. Značkové
   tlačítko má vodorovné odsazení 1.75rem kvůli hlavní akci na prodejní
   stránce; tady by z lišty udělalo dvouřádkový blok přes čtvrtinu
   displeje — a to na stránce, která se má číst. Mění se JEN odsazení do
   stran: výška zůstává na svislém odsazení, takže dotykový cíl 44 px
   platí dál. */
.hc-ctecka-lista .btn {
  --bs-btn-padding-x: 1rem;
}

.hc-ctecka-obsah {
  /* Položka obsahu je odkaz, na který se na telefonu míří palcem —
     výchozích 0.5rem svisle dá 41 px a laťka projektu je 44 px. */
  --bs-list-group-item-padding-y: .75rem;
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: transparent;
  --bs-list-group-action-color: var(--hc-dark);
  --bs-list-group-action-hover-bg: var(--hc-pink-soft);
  --bs-list-group-active-bg: var(--hc-pink-deep);
  --bs-list-group-active-border-color: var(--hc-pink-deep);
}

/* Postup je linka pod lištou, ne pruh přes stránku: v e-booku má
   informovat, ne poutat. Šířku výplně dopisuje static/hc/js/ebook.js —
   mění se stranu od strany a inline style je zakázaný. */
.hc-postup {
  --bs-progress-height: .375rem;
  --bs-progress-bar-bg: var(--hc-mint);
}

/* Řádek delší než ~75 znaků se čte hůř a oko ztrácí začátek dalšího.
   U e-booku, který se čte na jeden zátah, to platí dvojnásob. */
/* Sazba čtečky. Komentář u `.hc-clanek` v témž souboru říká, že řádek
   nad ~75 znaků se čte špatně — a placený e-book byl jediné místo, kde
   se to porušovalo: 48 rem dávalo ~78 znaků, zrovna tam, kde se čte
   pětatřicet stran za sebou. Blog zdarma měl 44 rem a řádkování 1,7,
   kniha za 590 Kč horší sazbu než on.

   `hyphens: auto` je tu kvůli češtině: dlouhá slova („personalizovaný",
   „makroživiny") dělají v úzkém sloupci díry mezi slovy. */
.hc-ctecka-strana {
  max-width: 44rem;
  margin-right: auto;
  margin-left: auto;
}

.hc-ctecka-strana p,
.hc-ctecka-strana li {
  line-height: 1.7;
  hyphens: auto;
}

/* Čísla ve sloupcích pod sebou musí mít stejnou šířku, jinak se řádky
   rozjedou. Laik to nepojmenuje, ale pozná jako „výpis z webu" místo
   „kniha". Týká se dlaždic na straně 1, řádku maker, tabulky výdeje
   a denního souhrnu. */
.hc-ctecka-strana table,
.hc-ctecka-strana .hc-dlazdice,
.hc-ctecka-strana .hc-karta-fakt,
.hc-tisk-strana table {
  font-variant-numeric: tabular-nums;
}

/* Pruh plnění energetického cíle v denním souhrnu. Vlastní od .hc-postup
   (postup ve čtení) schválně: jsou to dvě různá čísla vedle sebe na
   téže stránce a čtenář je nesmí splést. Šířku výplně dopisuje
   static/hc/js/ebook.js z data-hc-postup — mění se den ode dne
   a inline style je zakázaný. */
.hc-pruh-cile {
  --bs-progress-height: .5rem;
  --bs-progress-bar-bg: var(--hc-pink-strong);
}

/* ── Strany e-booku ─────────────────────────────────────────────────
 *
 * Obsah stran skládají bootstrapí karty, mřížky a utility. Sem patří
 * jen to, co utilita neumí — pevné rozměry a značkové odstíny, které by
 * jinak musely jít přes style="" (a to CSP zahodí).
 */

/* Dlaždice s ikonou v rohu karty. Barvu i zaoblení dají utility, pevný
   čtverec ne — bez něj se dlaždice smrskne na velikost písma. */
/* Loga platebních metod v patičce a v pokladně. Obrázek je jeden pruh
   se čtyřmi kartami (Visa, Mastercard, Google Pay, Apple Pay) v poměru
   zhruba 8 : 1, takže mu stačí říct šířku — výšku dopočítá poměr sám
   a stránka se při načtení nepřeskládá. Vlastní třída, ne utilita:
   Bootstrap na maximální šířku v remech nic nemá. */
.hc-platby {
  width: 100%;
  max-width: 15rem;
  height: auto;
}

/* Lišta souhlasu drží u spodní hrany okna. Nahoře by na telefonu
   zakryla nabídku i cenu, uprostřed by byla modál — a modální dialog,
   který nejde zavřít bez rozhodnutí, je nátlak, ne dotaz. */
.hc-souhlas {
  position: sticky;
  bottom: 0;
  z-index: 1030;
}

/* Kolečko s ikonou v liště pod hlavičkou. Pevná velikost, aby čtyři
   položky vedle sebe začínaly na stejné lince i při různě dlouhém
   popisku. */
.hc-odznak {
  width: 2.5rem;
  height: 2.5rem;
}

/* Sazba právních stránek. Obsah se ukládá vyčištěný (`web/models.py`),
   takže z HTML nezbude jediná třída — tabulka bez pravidel se vykreslí
   jako slitý text bez linek a přesně tak vypadala stránka Cookies.
   Styl proto patří k obalu, ne do obsahu, a utilitami se nahradit nedá:
   do vyčištěného HTML se class nedostane.

   Tabulka se pod md NEPŘESTAVUJE na bloky, i když to pravidlo projektu
   u širokých tabulek žádá: `display: block` na tabulce ji vyřadí
   z přístupnostního stromu a čtečka obrazovky přijde o vazbu buňky na
   záhlaví. Tři úzké sloupce se na telefonu zalomí a vejdou se; hlídá
   to měření vzhledu nad stránkou Cookies. */
.hc-pravni-text table {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: collapse;
}

.hc-pravni-text th,
.hc-pravni-text td {
  padding: .5rem .75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.hc-pravni-text thead th {
  border-bottom-width: .125rem;
}

/* kontrola: vyjimka utilitni-vlastnost — do vyčištěného HTML z administrace se třída nedostane */
.hc-pravni-text h2 {
  margin-top: 2rem;
}

/* kontrola: vyjimka utilitni-vlastnost — do vyčištěného HTML z administrace se třída nedostane */
.hc-pravni-text li {
  margin-bottom: .35rem;
}

.hc-ikona-karty {
  width: 3.25rem;
  height: 3.25rem;
}

/* Řádek „VY" v kalorické tabulce. Barví se přes tokeny komponent,
   protože pod md je z tabulky seznam: .table maluje pozadí buňkám
   vnitřním stínem (bg-* utilita se pod ním ztratí) a .list-group-item
   si bere vlastní proměnnou. Jedna třída tak obslouží obě podoby. */
.hc-radek-vy {
  --bs-table-bg-type: var(--hc-pink-soft);
  --bs-list-group-bg: var(--hc-pink-soft);
}

/* Zvýrazněný řádek „dobrá volba" — čistá voda v tabulce nápojů na
   straně 11. Barví se přes tokeny komponent ze stejného důvodu jako
   .hc-radek-vy: pod md je z tabulky seznam, .table maluje pozadí buňkám
   vnitřním stínem (bg-* utilita se pod ním ztratí) a .list-group-item
   si bere vlastní proměnnou. */
.hc-radek-ano {
  --bs-table-bg-type: var(--hc-mint-soft);
  --bs-list-group-bg: var(--hc-mint-soft);
}

/* Barevné proužky nad kartami (živiny, cenová karta) a barevné lemy
   u vysvětlivek byly zrušené 2. 9. 2026 — rozhodnutí majitele. Čtyři
   pixely barvy nahoře ani po straně nic nesdělují: každý blok má svůj
   podklad a svůj nadpis, a tři různě obarvené linky vedle sebe působí
   jako ozdoba, ne jako systém. Zůstává plochý vzhled: bílá karta se
   stínem, barevné bloky jen podkladem. */

/* QR kód nesmí zabrat celou kartu. Telefon ho přečte i z osmi
   centimetrů a větší jen ukrajuje místo textu vedle. */
.hc-qr {
  max-width: 10rem;
}

/* Obálka. Přechod z WordPressu končil světlou růžovou a bílý text na ní
   dává 2,7:1, tedy pod normou. Tmavší konec drží 5,6:1 a vypadá stejně —
   první strana, kterou zákazník za 590 Kč uvidí, se nemá luštit. */
.hc-obalka {
  background-image: linear-gradient(148deg, var(--hc-pink-deepest) 0%, var(--hc-pink-deep) 100%);
  color: var(--hc-white);
}

/* Logo na obálce zastupuje nadpis strany (h1 s popisným alt). Strop
   v rem, ne v procentech: na širokém displeji by se jinak roztáhlo přes
   celou obálku a z loga by byl banner. */
/* Logo na obálce už není nadpis strany — tím je titul „Váš osobní
   plán". Je proto menší: obálka osobního výtisku má být o zákazníkovi,
   ne o značce. Bílý box kolem něj zmizel, na růžovém přechodu působil
   jako nalepený štítek. */
.hc-obalka-logo {
  max-width: 11rem;
  height: auto;
}

/* Cvičení je místo k vyplnění, ne sdělení — čárkovaný rámeček to řekne
   dřív, než čtenář dojde k nadpisu. Styl i barvu bere utilita .border
   z tokenů, takže se přepíšou bez vynucování priority. */
.hc-ram-cviceni {
  --bs-border-style: dashed;
  --bs-border-color: var(--hc-amber);
}

/* Výplň pruhu s poměrem živin. Barvy jsou tytéž jako u karet živin
   a u ukázky poměru na prodejní stránce, ať čtenář pozná,
   že jde pořád o touž trojici. Šířku dopisuje static/hc/js/ebook.js
   z data-hc-postup: procenta vycházejí z gramů konkrétního klienta,
   takže třídou se zapsat nedají a style="" CSP zahodí. */
.hc-vypln-bilkoviny {
  --bs-progress-bar-bg: var(--hc-pink-strong);
}

.hc-vypln-tuky {
  --bs-progress-bar-bg: var(--hc-amber);
}

.hc-vypln-sacharidy {
  --bs-progress-bar-bg: var(--hc-mint);
}

/* ── Tisková verze e-booku ──────────────────────────────────────────
 *
 * Skutečné PDF se NEGENERUJE. Tohle je stránka, kterou si čtenář uloží
 * tiskem prohlížeče — a prodejní stránka od 1. 9. 2026 nic jiného
 * neslibuje. Komentář tu dřív mluvil o „PDF navždy" z prodejní stránky
 * a zval tím slib zpátky; CLAUDE.md říká opak.
 *
 * Rozhraní se netiskne přes utilitu d-print-none; sem patří list,
 * zalomení a jedna věc navíc, na kterou utilita není: BARVY. Prohlížeče
 * ve výchozím nastavení netisknou pozadí, takže bílý text na barevné
 * ploše zmizí. Každá plocha, která nese bílé písmo, proto musí mít
 * v @media print náhradu.
 */
.hc-tisk-list {
  max-width: 46rem;
  margin: 1.5rem auto;
  padding: 1.5rem;
}

/* Tečkovaná čára odděluje strany na obrazovce — v tisku je oddělí papír. */
.hc-tisk-strana {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px dotted var(--bs-border-color);
}

@media print {
  @page {
    size: A4;
    /* Vnější okraj širší než vnitřní: na papíře se drží palcem a text
       pod ním se nečte. 12 mm dokola dávalo řádek přes celou šířku A4,
       tedy ~88 znaků — o třetinu víc, než se pohodlně čte. */
    margin: 18mm 22mm;
  }

  /* Papír unese menší písmo než displej a hustější řádkování; 11 pt
     je sazba knihy, ne výpisu z prohlížeče. */
  .hc-tisk-list {
    font-size: 11pt;
    line-height: 1.55;
  }

  /* Osamělý první nebo poslední řádek odstavce na konci listu je
     klasická tisková vada — „sirotek" a „vdova". */
  .hc-tisk-strana p,
  .hc-tisk-strana li {
    orphans: 2;
    widows: 2;
  }

  .hc-tisk-list {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* Strana rozseknutá mezi dva listy je horší než prázdné místo dole:
     nadpis zůstane na jednom listu a jeho text na druhém. */
  .hc-tisk-strana {
    break-inside: avoid;
    margin-bottom: 0;
    border-bottom: 0;
  }

  /* Strany jídelníčku jsou od doplnění receptů delší než A4, takže je
     prohlížeč rozdělí tak jako tak — `break-inside` nad blokem vyšším
     než list nemá jak platit. Jde o to, KUDY se rozdělí: mezi jídly,
     ne uprostřed postupu. Suroviny na jednom listu a postup na druhém
     se v kuchyni vaří špatně. */
  .hc-tisk-strana .card {
    break-inside: avoid;
  }

  /* Bloky označené `hc-tisk-celek` se nelámou uprostřed. Bez toho
     skončil denní souhrn tak, že jeho poslední věta zůstala sama na
     jinak prázdném listu — celý papír kvůli jednomu řádku.

     Schválně JEN označené bloky, ne všechny potomky strany: plošné
     pravidlo posunulo na další list i velké oddíly, po kterých pak
     zbyla čtyři pětiny papíru prázdné. Bílé místo dole je levnější než
     bílá strana. */
  .hc-tisk-celek {
    break-inside: avoid;
  }

  /* Osamělý nadpis na konci listu je klasická tisková vada. */
  .hc-tisk-strana h1,
  .hc-tisk-strana h2,
  .hc-tisk-strana h3 {
    break-after: avoid;
  }

  .hc-tisk-kapitola {
    break-before: page;
  }

  /* ── Barvy, které bez pozadí zmizí ───────────────────────────────
   *
   * Prohlížeč tiskne pozadí, jen když si to člověk v dialogu zapne
   * („Grafika na pozadí"), a výchozí stav je vypnuto. Bílé písmo na
   * barevné ploše se tím mění na bílé písmo na bílém papíře. Týká se
   * to obálky s jménem zákazníka — tedy první strany toho, co si
   * ukládá jako svůj výtisk.
   *
   * `print-color-adjust: exact` by pozadí vynutil, jenže spolehnout se
   * na něj nejde: Safari ho respektuje, Chrome jen v novějších verzích
   * a uživatel ho může přebít. Náhrada, která vypadá dobře i úplně bez
   * barev, je jistější než barva vynucená napůl. */
  .hc-obalka {
    background-image: none;
    color: var(--hc-dark);
    border: 2px solid var(--hc-pink);
  }

  /* Karta jídla si vystačí s lemem: hlavička má tmavé písmo na světlém,
     takže po zmizení pozadí zůstane čitelná, jen splyne s tělem karty.
     Linka pod ní je to jediné, co ji od obsahu odděluje. */
  .hc-jidlo-hlavicka {
    border-bottom: 1px solid var(--hc-pink-deep);
  }

  .hc-karta-fakt {
    background-color: transparent;
    color: var(--hc-dark);
    border: 2px solid var(--hc-dark);
  }

  .hc-karta-fakt .hc-vysledek {
    color: var(--hc-mint-text);
  }
}

/* ── Články („Radíme") ──────────────────────────────────────────────
 *
 * Rozdíl proti zbytku webu: obsah článku není šablona, ale HTML
 * z WordPressu uložené v databázi. Bootstrapí utilitu do něj nikdo
 * nedopíše, takže se k němu stylopis musí dostat selektorem. Co tenhle
 * blok neobsluhuje, to sanitizace z obsahu vyhodí — seznam povolených
 * tříd v `clanky/sanitizace.py` a pravidla tady jsou dvě strany téhož.
 */

/* Řádek delší než ~75 znaků se čte hůř a oko ztrácí začátek dalšího.
   Střed drží utilita .mx-auto v šabloně. */
.hc-clanek {
  max-width: 44rem;
}

.hc-clanek p,
.hc-clanek li {
  line-height: 1.7;
}

/* Nadpisy uvnitř článku nejsou nadpisy stránky: h1 je titulek nahoře
   a h2 v textu je oddíl. Ve výchozí velikosti Bootstrapu by h2 přebilo
   nadpis celé stránky. */
.hc-clanek h2 {
  margin-top: 2.5rem;
  font-size: 1.625rem;
}

.hc-clanek h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
}

.hc-clanek h4 {
  margin-top: 1.5rem;
  font-size: 1.0625rem;
}

/* Tabulky v článcích mají až pět sloupců a na 375 px se musí vejít bez
   posuvníku — ten je zakázaný. Drží to menší písmo a `overflow-wrap`,
   který zlomí i slovo delší než sloupec. */
.hc-clanek table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
}

.hc-clanek th,
.hc-clanek td {
  padding: .5rem .5rem .5rem 0;
  border-bottom: 1px solid var(--hc-pink);
  vertical-align: top;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* Hlavička se smí zúžit, ale ne na dva znaky: `overflow-wrap: anywhere`
   dovolí zlomit i „Kol" a z krátkého nadpisu je pak svislý sloupec
   písmen. Čtyři znaky krátká slova udrží pohromadě a pět sloupců krát
   4ch je pořád zlomek šířky telefonu. */
.hc-clanek th {
  min-width: 4ch;
}

/* Sloupcový graf. Podklad je mátový, protože graf ukazuje čísla, ne
   varování; jantarová patří upozornění (.hc-tip). */
.hc-graf {
  padding: 1.25rem;
  background-color: var(--hc-mint-soft);
  border-radius: var(--bs-border-radius-lg);
}

.hc-graf-radek {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: .25rem;
  margin-bottom: 1rem;
}

.hc-graf-radek > p {
  margin-bottom: 0;
  font-size: .9375rem;
}

.hc-graf-pruh {
  height: .75rem;
  background-color: var(--hc-white);
  border-radius: 50rem;
}

/* Výplň pruhu. Šířku dopisuje static/hc/js/clanky.js z data-hc-podil:
   procenta přišla z WordPressu v inline stylu, ten politika obsahu
   zahodí, a hodnota se mění řádek od řádku, takže třídou se zapsat
   nedá. Bez skriptu zůstane pruh prázdný — číslo vedle něj ale zůstane
   čitelné, takže se sdělení neztratí. */
.hc-graf-pruh > span {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--hc-pink-strong);
  border-radius: inherit;
}

/* Tip v rámečku. Jantarová je v projektu barva „všimněte si" — táž jako
   u upozornění v e-booku. */
.hc-tip {
  display: flex;
  gap: .75rem;
  padding: 1.25rem;
  background-color: var(--hc-amber-soft);
  border-radius: var(--bs-border-radius-lg);
}

.hc-tip > i {
  color: var(--hc-pink-deep);
  font-size: 1.5rem;
  line-height: 1.4;
}

/* Trojice čísel k zapamatování. */
.hc-cisla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

.hc-cisla > div {
  padding: 1rem;
  background-color: var(--hc-pink-soft);
  border-radius: var(--bs-border-radius-lg);
}

.hc-cisla b {
  display: block;
  font-size: 1.5rem;
  color: var(--hc-pink-deep);
}

.hc-cisla span {
  display: block;
  font-size: .875rem;
  color: var(--hc-gray);
}

/* Dva sloupce „co pomáhá / co je ztráta času". Třídy `ano` a `ne` mají
   obecné jméno z WordPressu — platí proto jen zanořené pod .hc-srovnani
   a nikde jinde na webu neznamenají nic. */
.hc-srovnani {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

.hc-srovnani > div {
  padding: 1.25rem;
  border-radius: var(--bs-border-radius-lg);
}

.hc-srovnani .ano {
  background-color: var(--hc-mint-soft);
}

.hc-srovnani .ne {
  background-color: var(--hc-pink-soft);
}

.hc-srovnani h4 {
  margin-top: 0;
  font-size: 1.0625rem;
}

.hc-srovnani .ano h4 i {
  color: var(--hc-mint-text);
}

.hc-srovnani .ne h4 i {
  color: var(--hc-pink-deep);
}

/* Číslovaný postup. Číslo kreslí ::marker, ne vlastní kolečko —
   seznam si tím udrží význam pro čtečku obrazovky. */
.hc-kroky > li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.hc-kroky > li::marker {
  color: var(--hc-pink-deep);
  font-weight: 700;
}

.hc-kroky > li > strong {
  display: block;
  font-size: 1.0625rem;
}

/* Stránkování výpisu. Bootstrap kreslí odkaz 38 px vysoký; laťka
   projektu je 44 a na telefonu se do stránkování míří palcem. Výšku řeší
   odsazení přes tokeny, ne pevná výška.

   BARVY MUSÍ BÝT TAKY. Do 1. 9. 2026 tu stálo jen odsazení a aktivní
   stránka svítila BOOTSTRAPÍ MODROU (#0d6efd) uprostřed růžového webu.
   Je to přesně ta past, kterou popisuje CLAUDE.md: `--bs-primary`
   komponenty nepřebarví, každá si drží vlastní sadu tokenů a ta se
   vyhodnotila při sestavení Bootstrapu, tedy dávno před naší paletou.

   Bílá na --hc-pink-deep je týž pár jako na hlavním tlačítku, takže
   kontrast je ověřený. Hlídá to pravidlo `modra-v-komponente`. */
.pagination {
  --bs-pagination-padding-y: .625rem;
  --bs-pagination-padding-x: 1rem;
  --bs-pagination-color: var(--hc-pink-deep);
  --bs-pagination-hover-color: var(--hc-pink-deep);
  --bs-pagination-hover-bg: var(--hc-pink-soft);
  --bs-pagination-hover-border-color: var(--hc-pink);
  --bs-pagination-focus-color: var(--hc-pink-deep);
  --bs-pagination-focus-bg: var(--hc-pink-soft);
  --bs-pagination-active-bg: var(--hc-pink-deep);
  --bs-pagination-active-border-color: var(--hc-pink-deep);
  --bs-pagination-active-color: var(--hc-white);
}

/* Šířku odsazením vyřešit nejde: záleží na tom, jak široká je číslice.
   Stránka „1" vycházela na 41 px, zatímco „2" na 44 — laťku tedy plnila
   nebo neplnila podle toho, na kterou stránku se člověk díval. Token pro
   minimální šířku Bootstrap nemá, proto tyhle dva řádky. */
.pagination .page-link {
  min-width: 2.75rem;
  text-align: center;
}

@media (min-width: 768px) {
  .hc-clanek table {
    font-size: .9375rem;
  }

  .hc-graf-radek {
    grid-template-columns: minmax(0, 14rem) 1fr auto;
    column-gap: 1rem;
    align-items: center;
  }

  .hc-cisla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hc-srovnani {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Patička drží jemný růžový podklad jako na původním webu — odděluje ji
   od obsahu líp než rámeček a nese značku i na stránce, kde jinak žádná
   barva není (právní texty). */
.hc-paticka {
  background-color: var(--hc-pink-soft);
}

/* Odkazy v patičce jsou na telefonu pod sebou a řádek textu má 24 px —
   dvacet pod dotykovou laťkou WCAG. Dorovnává se odsazením, ne výškou,
   aby si řádek nesl velikost písma ze systému. Našlo to měření vzhledu,
   ne oko: v patičce se palcem trefuje hůř než kdekoli jinde, protože je
   úplně dole a prsty tam zasahuje okraj displeje. */
.hc-paticka nav a {
  display: inline-block;
  padding-block: 0.625rem;
}

/* Nákupní seznam v e-booku: dvousloupcově, jakmile je místo. Šedesát
   položek pod sebou je na papíře i na širokém displeji zbytečně dlouhý
   sloupec, a seznam se schválně tiskne. Bootstrap má pro víc sloupců
   jen mřížku, která by položky rozházela do řádků — tady je potřeba,
   aby čtení šlo shora dolů.

   Mezery mezi položkami dělá `margin`, ne utilita `d-grid gap-2`.
   Ta totiž nastaví `display: grid` a vícesloupcová sazba na mřížce
   nefunguje vůbec: seznam zůstal v jednom sloupci a vypadalo to, jako
   by pravidlo níž chybělo. */
.hc-sloupce-nakupu > li {
  margin-bottom: .5rem;
  break-inside: avoid;
}

@media (min-width: 576px) {
  .hc-sloupce-nakupu {
    columns: 2;
    column-gap: 1.5rem;
  }
}

/* Sloupcový graf příchodů na partnerské stránce. Třicet čísel nestojí
   za knihovnu s grafy — jsou to obarvené `li` s výškou v procentech,
   kterou dopisuje JavaScript z `data-hc-vyska` (politika obsahu
   nepustí `style=""` a hodnota se mění den ode dne). */
.hc-graf-dnu {
  height: 6rem;
}

.hc-graf-sloupec {
  flex: 1 1 0;
  min-height: 2px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--hc-pink-strong);
}


/* Dělítko mezi dvěma lidmi v ukázce personalizace. Na telefonu jsou pod
   sebou a dělí je linka shora, od `md` vedle sebe a linka zleva.

   Vlastní třída je tu proto, že Bootstrap responzivní border utilitu
   nemá (`border-top` ano, `border-md-start` ne) — ne proto, že by se
   psala utilita znovu. Alternativa je druhá karta uvnitř karty, a to
   pravidla zakazují: rámeček v rámečku soupeří o pozornost. */
.hc-delitko {
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}

@media (min-width: 768px) {
  .hc-delitko {
    border-top: 0;
    border-left: var(--bs-border-width) solid var(--bs-border-color);
  }
}