/* 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);

  --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;
}

.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);
}

.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);
}

/* 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. */
.hc-lem-mint {
  --bs-border-color: var(--hc-mint-dark);
}

.hc-lem-jantar {
  --bs-border-color: var(--hc-amber);
}

/* 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í. */
.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é. */
.hc-krok-cislo {
  color: var(--hc-pink-strong);
  line-height: 1;
}

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

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

/* 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. */
.hc-ctecka-strana {
  max-width: 48rem;
  margin-right: auto;
  margin-left: auto;
}

/* 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. */
.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žek nad kartou živiny — táž trojice barev jako v ukázce
   poměru na prodejní stránce, ať zákazník pozná, že jde o totéž.
   Odstíny se jinde jako lem nepoužívají, takže si proužek kreslí vlastní
   třída; cestou přes --bs-border-color (vzor .hc-lem-*) by musely
   vzniknout tři tokenové třídy navíc, každá pro jediné místo. */
.hc-zivina {
  border-top: .25rem solid var(--bs-card-border-color);
}

.hc-zivina-bilkoviny {
  border-top-color: var(--hc-pink-strong);
}

.hc-zivina-tuky {
  border-top-color: var(--hc-amber);
}

.hc-zivina-sacharidy {
  border-top-color: var(--hc-mint);
}

/* 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. */
.hc-obalka-logo {
  max-width: 15rem;
  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
   (.hc-zivina-*) 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 ──────────────────────────────────────────
 *
 * „PDF navždy" z prodejní stránky je ve skutečnosti tahle stránka
 * uložená prohlížečem do PDF. Rozhraní se netiskne přes utilitu
 * d-print-none; sem patří jen list a zalomení, na které utilita není.
 */
.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;
    margin: 12mm;
  }

  .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. Až strany
     dostanou skutečný obsah, bude to chtít ověřit na těch nejdelších —
     co se na list nevejde, prohlížeč stejně rozdělí. */
  .hc-tisk-strana {
    break-inside: avoid;
    margin-bottom: 0;
    border-bottom: 0;
  }

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

/* ── Č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. Řeší to
   odsazení přes tokeny, ne pevná výška. */
.pagination {
  --bs-pagination-padding-y: .625rem;
  --bs-pagination-padding-x: 1rem;
}

@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;
}