/* ==========================================================================
   Kravitz Global, VRSTVA 2, pokrytie vystupu WordPressu
   --------------------------------------------------------------------------
   Naco tento subor je. Reset v kravitz.css nuluje marginy na h1, h2, h3, p,
   dl, dd, dt, figure, ol a ul a vypina odrazky. Dizajnovy system pritom nema
   ani jedno pravidlo pre hole prvky okrem img, a a button. Vsetko, co vypise
   sam WordPress, teda clanky, archivy, komentare, strankovanie a bloky
   Gutenbergu, by preto prislo bez odsadenia, bez odrazok a bez velkosti
   nadpisov. TOTO je dolozena pricina rozbitej blogovej sekcie a tento subor
   je jej riesenie.

   Co tento subor NIE JE. Nie je to dizajn. Nevymysla nove vizualne komponenty.
   Karty, mriezky a sekcie navrhu pridu v Ulohe 2 az 4, az s Idanovymi
   screenshotmi.

   ZAVAZNE PRAVIDLA TOHTO SUBORU
     1. Ziadna farba natvrdo. Vsetko cez var(--kg-*) z config/tokens.php,
        alebo cez odvodene premenne nizsie.
     2. Ziadne !important. Vrstva 2 sa nacitava az za kravitz.css a prebija ho
        vyssou specificitou, nie silou.
     3. Len logicke vlastnosti. inline-size, block-size, margin-block,
        padding-inline, inset-inline-start, border-block-start, text-align
        start a end, float inline-start a inline-end. Jedina vynimka je
        overflow-x, lebo overflow-inline zatial nema spolahlivu podporu
        a rovnaku vynimku uz pouziva aj kravitz.css.
     4. Mobile first. Vyhradne min-width, breakpointy 768 a 1100.
     5. Zaoblenie vzdy nula. Je to sucast znacky.
     6. Ziadny selektor nezacina .kg- inak nez .kg-wp-. Jedina vynimka je
        .screen-reader-text, co je nastroj jadra WordPressu bez naprotivku
        v dizajne, a preto musi byt globalny.
     7. Zlata NIKDY nenesie text na svetlom podklade. Merane, gold-dark na
        page je 2,52 ku jednej a na bone 2,78 ku jednej. Zlata tu nesie linky,
        podciarknutia, ramceky a odrazky, nikdy pismena.
     8. Hit target 44 na 44 na kazdom interaktivnom prvku.
   ========================================================================== */

/* ==========================================================================
   B1a. ODVODENE PREMENNE
   Vlasove linky a jemne plochy potrebuju priesvitne odtiene navy. Zapisat ich
   ako rgba by znamenalo zopakovat nalez 20, teda osemnast farieb natvrdo
   v CSS. Odvodzuju sa preto z tokenov cez color-mix.

   Zaloha je zamerna. Vlastne vlastnosti sa pri parsovani neoveruju, takze
   dve deklaracie za sebou by v starom prehliadaci nechali neplatnu hodnotu
   a pravidlo by vypadlo cele. Preto @supports, ktory v starom prehliadaci
   necha plnu farbu z tokenu, teda viditelnu linku namiesto ziadnej.
   ========================================================================== */

:root {
  --kg-wp-hair: var(--kg-ink-soft);
  --kg-wp-hair-soft: var(--kg-ink-soft);
  --kg-wp-surface: var(--kg-bone);
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
  :root {
    --kg-wp-hair: color-mix(in srgb, var(--kg-navy) 14%, transparent);
    --kg-wp-hair-soft: color-mix(in srgb, var(--kg-navy) 7%, transparent);
    --kg-wp-surface: color-mix(in srgb, var(--kg-navy) 4%, transparent);
  }
}

/* ==========================================================================
   B1b. OBAL A RYTMUS
   Hodnoty su prevzate z kravitz.css, nie vymyslene. Sekcie navrhu maju
   padding 30px 18px 34px na mobile, od 768 sa bocny padding meni na 34px
   a od 1100 je cely padding 96px 56px 100px.
   ========================================================================== */

.kg-wp-band {
  padding-block: 30px 34px;
  padding-inline: 18px;
}

.kg-wp-band__inner {
  max-inline-size: 1440px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .kg-wp-band {
    padding-inline: 34px;
  }
}

@media (min-width: 1100px) {
  .kg-wp-band {
    padding-block: 96px 100px;
    padding-inline: 56px;
  }
}

/* Hlavicka archivu, vysledkov vyhladavania, stranky prispevkov a stranky 404. */
.kg-wp-head {
  margin-block-end: 26px;
  padding-block-end: 22px;
  border-block-end: 1px solid var(--kg-wp-hair);
}

.kg-wp-head__title {
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 800;
  color: var(--kg-navy);
  text-wrap: balance;
}

.kg-wp-head__text {
  margin-block-start: 14px;
  max-inline-size: 60ch;
  font-size: 16px;
  line-height: 1.62;
  color: var(--kg-ink-soft);
}

/* Hladany vyraz v nadpise vysledkov. Nesie ho navy, nikdy zlata. */
.kg-wp-head__term {
  color: var(--kg-navy);
}

.kg-wp-list {
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   B2. PRISTUPNOST
   Bez tohto bloku by bol text urceny len pre citacky obrazovky VIDITELNY.
   WordPress ho vypisuje pod strankovanim a pri vyhladavani, takze by sa na
   stranke objavili vety Posts navigation a Search results navigation.
   Trieda .screen-reader-text mala v kravitz.css nula vyskytov.
   ========================================================================== */

.screen-reader-text,
.kg-wp-entry__more-title {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Ked je taky odkaz zaostreny klavesnicou, musi byt vidiet. */
.screen-reader-text:focus {
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

/* ==========================================================================
   B3. TYPOGRAFIA OBSAHU
   Jadro celeho kroku. Zacieluje sa cez :is(.kg-wp-prose, .comment-content),
   teda specificitou 0 na 1 na 1, co prebije reset so silou 0 na 0 na 1 bez
   jedineho !important.

   POZOR NA :is(). Ked :is() nesie triedy, sluzi na zuzenie rozsahu. Ked nesie
   prvky, sluzi na zoskupenie. NIKDY sa v nom triedy a prvky nemiesaju, lebo
   :is() prebera silu najsilnejsieho argumentu a zoskupenie by tym nabralo
   silu triedy.

   Mierka JE NOVA a v dizajnovom systeme neexistuje. Navrh definuje len
   marketingove velkosti, teda H1 na osemdesiatich pixeloch, co je na nadpise
   clanku nepouzitelne. Hodnoty nizsie su z tej mierky odvodene pomerom
   a drzia podpis znacky, teda zaporny spacing na velkom a mono na datach.
   ========================================================================== */

:is(.kg-wp-prose, .comment-content) {
  color: var(--kg-ink);
  font-size: 16px;
  line-height: 1.62;
}

@media (min-width: 1100px) {
  :is(.kg-wp-prose, .comment-content) {
    font-size: 17px;
  }
}

/* Zvisly rytmus. Odstup dostava az druhy a kazdy dalsi surodenec, takze prvy
   prvok nikdy netlaci obsah od hlavicky. */
:is(.kg-wp-prose, .comment-content) > * + * {
  margin-block-start: 18px;
}

/* Citatelny stlpec. Sirku drzia jednotlive prvky, nie obal, aby sa z nej
   alignwide a alignfull mohli vymanit. */
.kg-wp-prose > * {
  max-inline-size: 68ch;
}

/* ---------- nadpisy ---------- */

:is(.kg-wp-prose, .comment-content) :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 38px;
  margin-block-end: 12px;
  color: var(--kg-navy);
  text-wrap: balance;
}

:is(.kg-wp-prose, .comment-content) h1 {
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 800;
}

:is(.kg-wp-prose, .comment-content) h2 {
  font-size: clamp(22px, 4.6vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 800;
}

:is(.kg-wp-prose, .comment-content) h3 {
  font-size: clamp(19px, 3.6vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-weight: 800;
}

:is(.kg-wp-prose, .comment-content) h4 {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
}

/* h5 a h6 nesu typograficky podpis znacky, teda mono, verzalky a spacing.
   V hebrejskej vetve to prepise krok 1G, nalezy 17 a 18. */
:is(.kg-wp-prose, .comment-content) :is(h5, h6) {
  font-family: var(--kg-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

/* ---------- odkazy ---------- */

/* Riadok 15 v kravitz.css farbi VSETKY odkazy na gold-dark, co je na svetlom
   podklade 2,52 az 2,78 ku jednej, teda pod hranicou citatelnosti, a reset
   k tomu vypina podciarknutie. Tu sa to opravuje LEN v obsahu. Celoplosna
   oprava je nalez 16 a patri do ulohy 6.1, lebo si vyzaduje vizualnu
   kontrolu vsetkych stranok, ktore este nestoja. */
:is(.kg-wp-prose, .comment-content) a {
  color: var(--kg-navy);
  text-decoration: underline;
  text-decoration-color: var(--kg-gold-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 0.25s;
}

:is(.kg-wp-prose, .comment-content) a:hover {
  color: var(--kg-navy);
  text-decoration-thickness: 2px;
}

/* ---------- doraz v texte ---------- */

:is(.kg-wp-prose, .comment-content) :is(strong, b) {
  font-weight: 700;
  color: var(--kg-navy);
}

:is(.kg-wp-prose, .comment-content) :is(em, i) {
  font-style: italic;
}

:is(.kg-wp-prose, .comment-content) mark {
  background: var(--kg-wp-surface);
  color: var(--kg-navy);
  padding: 1px 4px;
}

:is(.kg-wp-prose, .comment-content) :is(sub, sup) {
  font-size: 0.72em;
  line-height: 0;
}

/* ---------- zoznamy ---------- */

/* Reset vypina odrazky globalne cez ul, ol { list-style: none }. Tu sa
   vracaju spat, ale len v obsahu, aby navigacia a komponenty navrhu ostali
   bez odraziek. */
:is(.kg-wp-prose, .comment-content) :is(ul, ol) {
  padding-inline-start: 22px;
}

:is(.kg-wp-prose, .comment-content) ul {
  list-style: disc;
}

:is(.kg-wp-prose, .comment-content) ol {
  list-style: decimal;
}

:is(.kg-wp-prose, .comment-content) li {
  margin-block-start: 8px;
}

/* Odrazka je tvar, nie text, takze zlatu uniesie. Cislo v ocislovanom
   zozname je citatelny obsah, preto navy. */
:is(.kg-wp-prose, .comment-content) ul li::marker {
  color: var(--kg-gold-dark);
}

:is(.kg-wp-prose, .comment-content) ol li::marker {
  color: var(--kg-navy);
  font-family: var(--kg-mono);
  font-size: 0.86em;
}

:is(.kg-wp-prose, .comment-content) li > :is(ul, ol) {
  margin-block-start: 8px;
}

/* ---------- definicny zoznam ---------- */

:is(.kg-wp-prose, .comment-content) dt {
  font-weight: 700;
  color: var(--kg-navy);
  margin-block-start: 14px;
}

:is(.kg-wp-prose, .comment-content) dd {
  margin-inline-start: 0;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--kg-wp-hair-soft);
  color: var(--kg-ink-soft);
}

/* ---------- citacia ---------- */

:is(.kg-wp-prose, .comment-content) blockquote {
  margin-inline: 0;
  margin-block: 30px;
  padding-inline-start: 20px;
  border-inline-start: 2px solid var(--kg-gold-dark);
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.5;
  color: var(--kg-navy);
}

:is(.kg-wp-prose, .comment-content) blockquote cite {
  display: block;
  margin-block-start: 12px;
  font-family: var(--kg-mono);
  font-size: 10.5px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

/* ---------- kod ---------- */

:is(.kg-wp-prose, .comment-content) :is(code, kbd, samp) {
  font-family: var(--kg-mono);
  font-size: 0.9em;
  background: var(--kg-wp-surface);
  padding: 2px 6px;
}

:is(.kg-wp-prose, .comment-content) pre {
  margin-block: 26px;
  padding: 18px;
  background: var(--kg-navy);
  color: var(--kg-white);
  font-family: var(--kg-mono);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
}

:is(.kg-wp-prose, .comment-content) pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ---------- oddelovac ---------- */

:is(.kg-wp-prose, .comment-content) hr {
  margin-block: 34px;
  border: 0;
  block-size: 1px;
  background: var(--kg-wp-hair);
}

/* ---------- tabulka ----------
   Ledger v navrhu riesi mobil atributom data-label na kazdej bunke.
   WordPress take atributy negeneruje, takze obsahova tabulka dostava
   vodorovne rolovanie. Je to jedina cesta, ktora sirok tabulku na 390
   pixeloch nerozbije. */

:is(.kg-wp-prose, .comment-content) table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

:is(.kg-wp-prose, .comment-content) :is(th, td) {
  padding: 12px 14px;
  text-align: start;
  vertical-align: top;
  border-block-start: 1px solid var(--kg-wp-hair-soft);
}

:is(.kg-wp-prose, .comment-content) thead th {
  background: var(--kg-wp-surface);
  font-family: var(--kg-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kg-navy);
  border-block-start: 0;
}

:is(.kg-wp-prose, .comment-content) caption {
  margin-block-end: 10px;
  font-family: var(--kg-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: start;
  color: var(--kg-ink-soft);
}

/* ==========================================================================
   B4. MEDIA A POPISKY
   ========================================================================== */

:is(.kg-wp-prose, .comment-content) figure,
:is(.kg-wp-prose, .comment-content) .wp-block-image {
  margin-inline: 0;
}

:is(.kg-wp-prose, .comment-content) img {
  block-size: auto;
}

:is(.kg-wp-prose, .comment-content) figcaption,
:is(.kg-wp-prose, .comment-content) .wp-caption-text,
:is(.kg-wp-prose, .comment-content) .wp-element-caption {
  margin-block-start: 10px;
  font-family: var(--kg-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: start;
  color: var(--kg-ink-soft);
}

.kg-wp-entry__media {
  margin-block-start: 18px;
}

.kg-wp-entry__media img {
  block-size: auto;
}

/* ==========================================================================
   B5. ZAROVNANIA
   Na mobile sa nic neobteka, 390 pixelov je na obtekanie prilis uzkych.
   Obtekanie sa zapina az od 768 a vyhradne logickym float, teda inline-start
   a inline-end, aby sa v hebrejskej verzii zrkadlilo samo.
   ========================================================================== */

.kg-wp-prose :is(.alignleft, .alignright, .aligncenter) {
  display: block;
  margin-inline: 0;
  margin-block: 24px;
}

.kg-wp-prose .aligncenter {
  margin-inline: auto;
}

@media (min-width: 768px) {
  .kg-wp-prose .alignleft {
    float: inline-start;
    max-inline-size: 50%;
    margin-inline-end: 26px;
    margin-block: 8px 20px;
  }

  .kg-wp-prose .alignright {
    float: inline-end;
    max-inline-size: 50%;
    margin-inline-start: 26px;
    margin-block: 8px 20px;
  }
}

/* Sirsie a plne zarovnanie sa vymania z citatelneho stlpca. Zaporne odsadenie
   plneho zarovnania kopiruje presne padding obalu, takze siaha po okraj
   obrazovky a nikdy nevyrobi vodorovne rolovanie stranky. */
.kg-wp-prose > .alignwide {
  max-inline-size: min(1100px, 100%);
}

.kg-wp-prose > .alignfull {
  max-inline-size: none;
  margin-inline: -18px;
}

@media (min-width: 768px) {
  .kg-wp-prose > .alignfull {
    margin-inline: -34px;
  }
}

@media (min-width: 1100px) {
  .kg-wp-prose > .alignfull {
    margin-inline: -56px;
  }
}

/* ==========================================================================
   B6. BLOKY GUTENBERGU
   Rozlozenie stlpcov, galerie a vlozenych medii dodava sam WordPress cez
   stylesheet wp-block-library, ktory sa na verejnej strane nacitava vzdy.
   Nezakladame ho preto znova, dopisujeme len farbu, typografiu, odstupy
   a nulove zaoblenie.
   ========================================================================== */

/* Zaoblenie je sucast znacky a je vzdy nulove. WordPress a prehliadac ho
   dodavaju na tlacidlach, obrazkoch a poliach, preto sa vypina menovite. */
.kg-wp-band .wp-block-button__link,
.kg-wp-band .wp-block-image img,
.kg-wp-band .wp-block-cover,
.kg-wp-band input,
.kg-wp-band textarea,
.kg-wp-band select,
.kg-wp-band button {
  border-radius: 0;
}

.kg-wp-prose .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 15px 26px;
  background: var(--kg-gold);
  color: var(--kg-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s;
}

.kg-wp-prose .wp-block-button__link:hover {
  background: var(--kg-gold-hover);
  color: var(--kg-navy);
}

.kg-wp-prose .wp-block-button.is-style-outline .wp-block-button__link {
  background: none;
  color: var(--kg-navy);
  border: 1px solid var(--kg-navy);
}

.kg-wp-prose .wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--kg-gold-dark);
  background: var(--kg-wp-surface);
}

/* Siroka tabulka roluje vnutri svojho bloku, nikdy nie celou strankou. */
.kg-wp-prose .wp-block-table {
  overflow-x: auto;
}

.kg-wp-prose .wp-block-separator {
  margin-block: 34px;
  border: 0;
  block-size: 1px;
  background: var(--kg-wp-hair);
}

.kg-wp-prose .wp-block-pullquote {
  margin-block: 34px;
  padding-block: 26px;
  border-block: 1px solid var(--kg-gold-dark);
  text-align: start;
}

.kg-wp-prose .wp-block-pullquote blockquote {
  margin: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
}

.kg-wp-prose .wp-block-preformatted {
  background: var(--kg-navy);
  color: var(--kg-white);
  font-family: var(--kg-mono);
  font-size: 13px;
  padding: 18px;
  overflow-x: auto;
}

.kg-wp-prose .wp-block-embed iframe {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

.kg-wp-prose .wp-block-gallery figcaption {
  margin-block-start: 8px;
}

/* ==========================================================================
   B7. ZAZNAMY V ZOZNAME
   Zamerne striedmy deleny zoznam, ziadna mriezka kariet. Karty typu field
   notes su vizualne rozhodnutie a patria do Ulohy 2 az 4, az s Idanovymi
   screenshotmi. Triedy su uz na mieste, takze povysenie bude lacne.
   ========================================================================== */

.kg-wp-entry--summary {
  padding-block: 26px;
  border-block-start: 1px solid var(--kg-wp-hair-soft);
}

.kg-wp-list > .kg-wp-entry--summary:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.kg-wp-entry--summary .kg-wp-entry__title {
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.016em;
  font-weight: 800;
  color: var(--kg-navy);
  text-wrap: balance;
}

.kg-wp-entry--full .kg-wp-entry__title {
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 800;
  color: var(--kg-navy);
  text-wrap: balance;
}

.kg-wp-entry__link {
  color: var(--kg-navy);
  text-decoration: none;
}

.kg-wp-entry__link:hover {
  color: var(--kg-navy);
  text-decoration: underline;
  text-decoration-color: var(--kg-gold-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.kg-wp-entry__meta {
  margin-block-start: 10px;
}

.kg-wp-entry__date {
  font-family: var(--kg-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

.kg-wp-entry__body {
  margin-block-start: 16px;
}

.kg-wp-entry__foot {
  margin-block-start: 16px;
}

.kg-wp-entry__more {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-family: var(--kg-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kg-navy);
  text-decoration: none;
  border-block-end: 2px solid var(--kg-gold-dark);
  transition: color 0.25s, border-color 0.25s;
}

.kg-wp-entry__more:hover {
  color: var(--kg-navy);
  border-block-end-color: var(--kg-navy);
}

.kg-wp-entry__pages {
  margin-block-start: 20px;
  font-family: var(--kg-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--kg-ink-soft);
}

.kg-wp-none {
  padding-block: 26px;
}

.kg-wp-none__text {
  font-size: 16px;
  color: var(--kg-ink-soft);
}

/* ==========================================================================
   B8. STRANKOVANIE A NAVIGACIA MEDZI CLANKAMI
   Kazdy odkaz ma najmenej 44 na 44 pixelov.
   ========================================================================== */

.kg-wp-pager {
  margin-block-start: 40px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--kg-wp-hair);
}

.kg-wp-pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.kg-wp-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 44px;
  min-block-size: 44px;
  padding-inline: 10px;
  border: 1px solid var(--kg-wp-hair);
  font-family: var(--kg-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kg-navy);
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
}

.kg-wp-pager a.page-numbers:hover {
  color: var(--kg-navy);
  border-color: var(--kg-gold-dark);
  background: var(--kg-wp-surface);
}

.kg-wp-pager .page-numbers.current {
  background: var(--kg-navy);
  border-color: var(--kg-navy);
  color: var(--kg-white);
}

.kg-wp-pager .page-numbers.dots {
  border-color: transparent;
  color: var(--kg-ink-soft);
}

.kg-wp-postnav {
  display: grid;
  gap: 12px;
  margin-block-start: 40px;
  padding-block-start: 24px;
  border-block-start: 1px solid var(--kg-wp-hair);
}

@media (min-width: 768px) {
  .kg-wp-postnav {
    grid-template-columns: 1fr 1fr;
  }
}

.kg-wp-postnav__link {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-block-size: 44px;
  padding: 15px 16px;
  border: 1px solid var(--kg-wp-hair);
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
}

.kg-wp-postnav__link:hover {
  border-color: var(--kg-gold-dark);
  background: var(--kg-wp-surface);
}

.kg-wp-postnav__link--next {
  align-items: flex-end;
  text-align: end;
}

.kg-wp-postnav__label {
  font-family: var(--kg-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

.kg-wp-postnav__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kg-navy);
}

/* ==========================================================================
   B9. KOMENTARE, FORMULARE, VYHLADAVANIE A STRANKA 404
   Polia formularov su zamerne zacielene cez obal .kg-wp-band, aby vrstva 2
   neprebila formulare v sekciach navrhu, ktore pribudnu v Ulohe 2 az 4.
   ========================================================================== */

/* ---------- polia ---------- */

.kg-wp-band :is(
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select
) {
  inline-size: 100%;
  min-block-size: 44px;
  padding: 12px 14px;
  border: 1px solid var(--kg-wp-hair);
  background: var(--kg-white);
  color: var(--kg-ink);
  font-family: var(--kg-sans);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.25s;
}

/* Sestnast pixelov je zamerne. Nizsia hodnota nuti mobilny Safari priblizit
   stranku pri kliknuti do pola. */

.kg-wp-band :is(input, textarea, select):hover {
  border-color: var(--kg-wp-hair);
}

.kg-wp-band :is(input, textarea, select):focus {
  border-color: var(--kg-gold-dark);
}

.kg-wp-band textarea {
  min-block-size: 140px;
  resize: vertical;
}

.kg-wp-band label {
  display: block;
  margin-block-end: 6px;
  font-family: var(--kg-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

.kg-wp-band ::placeholder {
  color: var(--kg-muted);
  opacity: 1;
}

/* ---------- vyhladavaci formular ---------- */

.kg-wp-searchform {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block-start: 18px;
  max-inline-size: 520px;
}

.kg-wp-searchform__label {
  flex: 1 0 100%;
  margin-block-end: 0;
}

.kg-wp-searchform__field {
  flex: 1 1 200px;
  inline-size: auto;
}

.kg-wp-searchform__submit {
  flex: 0 0 auto;
  min-block-size: 44px;
}

/* ---------- stranka 404 ---------- */

.kg-wp-404 {
  margin-block-start: 26px;
}

.kg-wp-404__home {
  margin-block-start: 26px;
}

/* ---------- komentare ---------- */

.kg-wp-comments {
  margin-block-start: 48px;
  padding-block-start: 30px;
  border-block-start: 1px solid var(--kg-wp-hair);
}

.kg-wp-comments__title {
  font-family: var(--kg-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

.kg-wp-comments__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 8px;
}

.kg-wp-comments__list .children {
  list-style: none;
  margin-block-start: 16px;
  padding-inline-start: 18px;
  border-inline-start: 1px solid var(--kg-wp-hair-soft);
}

.kg-wp-comments .comment-body {
  padding-block: 20px;
  border-block-start: 1px solid var(--kg-wp-hair-soft);
}

.kg-wp-comments .comment-author {
  font-size: 15px;
  font-weight: 700;
  color: var(--kg-navy);
}

.kg-wp-comments .comment-author .fn {
  font-style: normal;
}

.kg-wp-comments .comment-metadata {
  margin-block-start: 5px;
  font-family: var(--kg-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

.kg-wp-comments .comment-metadata a {
  color: var(--kg-ink-soft);
  text-decoration: none;
}

.kg-wp-comments .comment-metadata a:hover {
  color: var(--kg-navy);
  text-decoration: underline;
  text-decoration-color: var(--kg-gold-dark);
}

.kg-wp-comments .comment-content {
  margin-block-start: 12px;
}

.kg-wp-comments .comment-awaiting-moderation {
  display: block;
  margin-block-start: 8px;
  font-family: var(--kg-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

.kg-wp-comments .reply {
  margin-block-start: 12px;
}

.kg-wp-comments .reply a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-family: var(--kg-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kg-navy);
  text-decoration: none;
  border-block-end: 1px solid var(--kg-gold-dark);
  transition: border-color 0.25s;
}

.kg-wp-comments .reply a:hover {
  color: var(--kg-navy);
  border-block-end-color: var(--kg-navy);
}

.kg-wp-comments__closed {
  margin-block-start: 18px;
  font-family: var(--kg-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kg-ink-soft);
}

/* ---------- formular komentara ---------- */

.kg-wp-comments .comment-respond {
  margin-block-start: 38px;
}

.kg-wp-comments .comment-reply-title {
  font-size: clamp(19px, 3.6vw, 23px);
  font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--kg-navy);
}

.kg-wp-commentform {
  display: grid;
  gap: 16px;
  margin-block-start: 20px;
}

.kg-wp-commentform :is(.comment-notes, .comment-form-cookies-consent label) {
  font-family: var(--kg-sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kg-ink-soft);
}

.kg-wp-commentform .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kg-wp-commentform .comment-form-cookies-consent input {
  inline-size: auto;
  min-block-size: auto;
}

.kg-wp-commentform .comment-form-cookies-consent label {
  margin-block-end: 0;
}

.kg-wp-commentform .form-submit {
  margin-block-start: 4px;
}

.kg-wp-commentform__submit {
  min-block-size: 44px;
}

/* ==========================================================================
   B10. NAVIGACNA CESTA
   Vypisuje ju kg_breadcrumbs() z inc/breadcrumbs.php, krok 1F. Na domovskej
   stranke sa nevypise vobec, o to sa stara PHP, nie CSS.

   ODDELOVAC ZIJE V PREMENNEJ --kg-crumb-sep. Lomka je znak, ktory v pisme
   sprava dolava zostava citatelny. Keby sa raz zmenila na sipku, krok 1G ju
   otoci zmenou jedineho riadku a nie prepisovanim celeho pravidla.

   PRE KROK 1G. Verzalky a spacing 0,14em su tu rovnako ako v bloku B8. Do
   hebrejciny sa neprenesu, hebrejcina verzalky nepozna a spacing nad 0,16em
   jej rozbija vazbu slova. Prepis pre [dir=rtl] patri do kroku 1G, nalezy 17
   a 18 zo satelitu s opravami PHP.

   HIT TARGET. Kazda polozka ma 44 pixelov vysky, takze cely pas je vysoky 44
   pixelov. Je to dosledok zavazneho parametra pristupnosti, nie nahoda.

   ZLATA NENESIE TEXT. Podla pravidla 7 z hlavicky tohto suboru nesie zlata
   oddelovac a podciarknutie pri prejdeni mysou. Pismena nesie navy a ink-soft.

   OCHRANA PROTI VODOROVNEMU ROLOVANIU. Dlhy nazov stranky bez medzier by na
   sirke 390 pixelov roztiahol dokument a zrusil by dolozeny vysledok kroku 1E.
   Preto overflow-wrap a min-inline-size nula na polozke.
   ========================================================================== */

.kg-wp-crumbs {
  --kg-crumb-sep: "/";
  margin-block-end: 20px;
}

.kg-wp-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.kg-wp-crumbs__item {
  display: inline-flex;
  align-items: center;
  min-inline-size: 0;
  margin: 0;
}

/* Oddelovac pred kazdou polozkou okrem prvej. Cista dekoracia. */
.kg-wp-crumbs__item + .kg-wp-crumbs__item::before {
  content: var(--kg-crumb-sep);
  margin-inline-end: 4px;
  color: var(--kg-gold-dark);
  font-family: var(--kg-mono);
  font-size: 12px;
  line-height: 1;
}

.kg-wp-crumbs__link,
.kg-wp-crumbs__current,
.kg-wp-crumbs__plain {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-family: var(--kg-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.kg-wp-crumbs__link {
  color: var(--kg-navy);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}

.kg-wp-crumbs__link:hover {
  color: var(--kg-navy);
  border-block-end-color: var(--kg-gold-dark);
}

.kg-wp-crumbs__current,
.kg-wp-crumbs__plain {
  color: var(--kg-ink-soft);
}

/* ==========================================================================
   B11. PREPISY PRE HEBREJCINU, SMER SPRAVA DOLAVA
   Krok 1G, 6. septembra 2026. Protajsok bloku, ktory v tom istom kroku
   pribudol na koniec kravitz.css. Kazda vrstva si nesie vlastne prepisy,
   takze menne priestory zostavaju oddelene.

   CO SA TU NEROBI. Datova vrstva sa NEPREPISUJE. Mono je token a krok 1G ho
   prepisal raz, na urovni kravitz.css, cim sa zmenili aj vsetky pouzitia
   v tomto subore. Duplikovat to sem by znamenalo dva zdroje pravdy.

   ODDELOVAC NAVIGACNEJ CESTY zostava lomka. V obojsmernom texte je to neutralny
   znak, ktory sa prisposobi okoliu. Ak by sa v hebrejcine ukazal ako problem,
   meni sa jedinym riadkom premennej --kg-crumb-sep v bloku B10.

   VSETKY SELEKTORY NIZSIE VYGENEROVAL SKRIPT priamo z tohto suboru, takze sa
   s nim nemaju ako rozist. Kazdy zacina [dir=rtl], anglicka verzia sa preto
   nema ako zmenit. Je to strojovo kontrolovane.

   HODNOTA 0,02em je ta ista ako vo vrstve 3. Satelit s opravami PHP dava pre
   hebrejcinu strop 0,04em, berieme konzervativnu polovicu.
   ========================================================================== */

[dir=rtl] :is(
  .kg-wp-comments__closed, .kg-wp-comments__title, .kg-wp-crumbs__current, .kg-wp-crumbs__link,
  .kg-wp-crumbs__plain, .kg-wp-entry__date, .kg-wp-entry__more, .kg-wp-entry__pages,
  .kg-wp-postnav__label
) {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Zlozene selektory zvlast. Pravidlo suboru, :is() nikdy nemiesa triedy
   a prvky, lebo prebera silu najsilnejsieho argumentu. */
[dir=rtl] .kg-wp-band label, [dir=rtl] .kg-wp-comments .comment-awaiting-moderation,
[dir=rtl] .kg-wp-comments .comment-metadata, [dir=rtl] .kg-wp-comments .reply a,
[dir=rtl] .kg-wp-pager .page-numbers, [dir=rtl] .kg-wp-prose .wp-block-button__link,
[dir=rtl] :is(.kg-wp-prose, .comment-content) .wp-caption-text,
[dir=rtl] :is(.kg-wp-prose, .comment-content) .wp-element-caption,
[dir=rtl] :is(.kg-wp-prose, .comment-content) :is(h5, h6),
[dir=rtl] :is(.kg-wp-prose, .comment-content) blockquote cite,
[dir=rtl] :is(.kg-wp-prose, .comment-content) caption,
[dir=rtl] :is(.kg-wp-prose, .comment-content) figcaption,
[dir=rtl] :is(.kg-wp-prose, .comment-content) thead th {
  text-transform: none;
  letter-spacing: 0.02em;
}