/* ==========================================================================
   Stopy v srdci — napoveda-v2.css
   Nápověda: rozcestník /napoveda a články /napoveda/<adresa>
   (docs/napoveda-plan.md, šablony secure/templates/napoveda/).

   Staví na tokenech z v2-base.css a na rámované stránce (.page-frame)
   z pages-v3.css. Text článku drží jeden čtecí sloupec uprostřed karty,
   snímky z telefonu jsou užší než snímky z počítače, ať odpovídají
   skutečné velikosti obrazovky.
   ========================================================================== */

/* atribut hidden (skript stránky) musí vyhrát i nad display:flex níže */
body.v2 #main-content .nap-stranka [hidden]{display:none}

/* ── hlavička a drobečky ─────────────────────────────────────────────── */
body.v2 #main-content .nap-drobecky{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin-bottom:var(--sp-2);font-size:.9rem;color:var(--ink-3);
}
body.v2 #main-content .nap-drobecky a{color:var(--accent);font-weight:600;text-decoration:none}
body.v2 #main-content .nap-drobecky a:hover{text-decoration:underline;text-underline-offset:.2em}
body.v2 #main-content .page-frame__header .nap-odpoved{font-size:1.1rem;color:var(--ink-2)}

/* ── čtecí sloupec článku ───────────────────────────────────────────── */
body.v2 #main-content .nap-clanek > *{max-width:720px;margin-inline:auto}
body.v2 #main-content .nap-stranka .nap-nadpis{font-size:1.25rem;font-weight:700;color:var(--ink);margin-top:var(--sp-5)}
body.v2 #main-content .nap-stranka .frame-section > .nap-nadpis{margin-top:0}
body.v2 #main-content .nap-clanek > .nap-nadpis:first-child{margin-top:0}
body.v2 #main-content .nap-text{margin-top:var(--sp-2);color:var(--ink-2)}
body.v2 #main-content .nap-clanek a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
body.v2 #main-content .nap-clanek a:hover{color:var(--accent-hi)}
body.v2 #main-content .nap-clanek b{color:var(--ink);font-weight:700}

/* ── očíslované kroky ───────────────────────────────────────────────── */
body.v2 #main-content .nap-kroky{list-style:none;margin:var(--sp-3) auto 0;padding:0;counter-reset:none}
body.v2 #main-content .nap-krok{display:flex;gap:var(--sp-2);align-items:flex-start}
body.v2 #main-content .nap-krok + .nap-krok{margin-top:var(--sp-3)}
body.v2 #main-content .nap-krok__cislo{
  flex:0 0 30px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;line-height:1;
}
body.v2 #main-content .nap-krok__obsah{flex:1 1 auto;min-width:0;padding-top:3px}
body.v2 #main-content .nap-krok__obsah > p{color:var(--ink-2)}

/* ── odrážky ────────────────────────────────────────────────────────── */
body.v2 #main-content .nap-seznam{list-style:disc;margin-top:var(--sp-2);padding-left:1.35em;color:var(--ink-2)}
body.v2 #main-content .nap-seznam li + li{margin-top:6px}

/* ── snímky ─────────────────────────────────────────────────────────── */
/* jen horní okraj – vodorovně snímek drží čtecí sloupec (.nap-clanek > *) */
body.v2 #main-content .nap-snimek{margin-top:var(--sp-2);margin-bottom:0}
body.v2 #main-content .nap-snimek img{
  display:block;max-width:100%;height:auto;
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);background:var(--paper);
}
/* telefon a aplikace: zhruba skutečná šířka obrazovky, ne roztažené přes celý sloupec */
body.v2 #main-content .nap-snimek--telefon img,
body.v2 #main-content .nap-snimek--aplikace img{max-width:min(340px,100%)}
body.v2 #main-content .nap-snimek--telefon,
body.v2 #main-content .nap-snimek--aplikace{display:flex;justify-content:center}
body.v2 #main-content .nap-krok .nap-snimek--telefon,
body.v2 #main-content .nap-krok .nap-snimek--aplikace{justify-content:flex-start}
/* výřez uprostřed obrazovky – dole se rozplyne, ať nevypadá jako useknutý */
body.v2 #main-content .nap-snimek--pokracuje img{
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);
          mask-image:linear-gradient(to bottom,#000 78%,transparent);
  border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;
}
body.v2 #main-content .nap-snimek figcaption{margin-top:6px;font-size:.88rem;color:var(--ink-3)}
/* jen lokálně a na stagingu (_bloky.php) */
body.v2 #main-content .nap-snimek-chybi{
  margin-top:var(--sp-2);padding:var(--sp-2);border:1px dashed var(--accent-2);border-radius:var(--r-md);
  font-size:.9rem;color:var(--ink-3);text-align:center;
}

/* ── tabulka (na telefonu karty s popisky z data-popis) ─────────────── */
body.v2 #main-content .nap-tabulka{margin-top:var(--sp-2);overflow-x:auto}
body.v2 #main-content .nap-tabulka table{width:100%;border-collapse:collapse;font-size:.95rem}
body.v2 #main-content .nap-tabulka__popis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.v2 #main-content .nap-tabulka th,
body.v2 #main-content .nap-tabulka td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;color:var(--ink-2)}
body.v2 #main-content .nap-tabulka thead th{background:var(--paper-2);color:var(--ink);font-weight:700;font-size:.9rem}
body.v2 #main-content .nap-tabulka tbody th{color:var(--ink);font-weight:600}
body.v2 #main-content .nap-tabulka tbody tr:last-child th,
body.v2 #main-content .nap-tabulka tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  body.v2 #main-content .nap-tabulka thead{display:none}
  body.v2 #main-content .nap-tabulka tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  body.v2 #main-content .nap-tabulka th,
  body.v2 #main-content .nap-tabulka td{display:block;padding:2px 0;border:0}
  body.v2 #main-content .nap-tabulka td::before{content:attr(data-popis) ": ";font-weight:600;color:var(--ink)}
}

/* ── schéma QR kód → memoriály (jak-to-funguje) ─────────────────────── */
body.v2 #main-content .nap-schema{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--sp-2);
  margin-top:var(--sp-3);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper-2);
}
body.v2 #main-content .nap-schema__qr,
body.v2 #main-content .nap-schema__memorial{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:110px;padding:12px 14px;border-radius:var(--r-md);text-align:center;font-weight:700;
}
body.v2 #main-content .nap-schema__qr{background:var(--accent);color:#fff}
body.v2 #main-content .nap-schema__qr small{font-weight:400;opacity:.9}
body.v2 #main-content .nap-schema__sipka{font-size:1.6rem;color:var(--accent-2);line-height:1}
body.v2 #main-content .nap-schema__memorialy{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
body.v2 #main-content .nap-schema__memorial{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
body.v2 #main-content .nap-schema__memorial--dalsi{border-style:dashed;color:var(--ink-3);font-weight:600}

/* ── přepínač Na webu / V aplikaci ──────────────────────────────────── */
body.v2 #main-content .nap-platforma{margin-top:var(--sp-3)}
body.v2 #main-content .nap-prepinac{
  display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);
}
body.v2 #main-content .nap-prepinac[hidden]{display:none}
body.v2 #main-content .nap-prepinac button{
  min-height:44px;padding:0 18px;border:0;border-radius:999px;background:transparent;
  font:600 .95rem/1 var(--sans);color:var(--ink-2);cursor:pointer;
}
body.v2 #main-content .nap-prepinac button[aria-selected="true"]{background:var(--paper);color:var(--accent);box-shadow:var(--shadow-md)}
body.v2 #main-content .nap-prepinac button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.v2 #main-content .nap-platforma__nadpis{font-size:1rem;font-weight:700;color:var(--ink);margin-top:var(--sp-3)}
/* s JavaScriptem přepínač místo nadpisů a jen zvolená část */
body.v2 #main-content .nap-platforma.is-js .nap-platforma__nadpis{display:none}
body.v2 #main-content .nap-platforma.is-js section[hidden]{display:none}

/* ── Dobré vědět ────────────────────────────────────────────────────── */
body.v2 #main-content .nap-dobre{
  margin-top:var(--sp-5);padding:var(--sp-3);
  background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:var(--r-md);
}
body.v2 #main-content .nap-clanek .nap-dobre__nadpis{
  margin:0 0 var(--sp-1);font-size:.82rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);
}
body.v2 #main-content .nap-dobre ul{list-style:disc;padding-left:1.25em;color:var(--ink-2)}
body.v2 #main-content .nap-dobre li + li{margin-top:6px}

/* ── související, hodnocení, další pomoc ────────────────────────────── */
body.v2 #main-content .nap-souvisejici ul{list-style:none;padding:0;margin-top:var(--sp-2)}
body.v2 #main-content .nap-souvisejici li + li{margin-top:var(--sp-1)}
body.v2 #main-content .nap-souvisejici a::before{content:"→ ";color:var(--accent-2)}
body.v2 #main-content .nap-hodnoceni{
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);text-align:center;
}
body.v2 #main-content .nap-hodnoceni__otazka{font-weight:700;color:var(--ink)}
body.v2 #main-content .nap-hodnoceni__tlacitka{display:flex;justify-content:center;gap:var(--sp-2);margin-top:var(--sp-2)}
body.v2 #main-content .nap-hodnoceni__tlacitka .v2-btn{min-width:110px;min-height:44px}
body.v2 #main-content .nap-hodnoceni__dik{margin-top:var(--sp-2);color:var(--ink-2)}
body.v2 #main-content .nap-dalsi-pomoc{margin-top:var(--sp-4);text-align:center;color:var(--ink-2);font-size:.95rem}
body.v2 #main-content .nap-dalsi-pomoc a{color:var(--accent);font-weight:600}
body.v2 #main-content .nap-ilustracni{margin-top:var(--sp-2);text-align:center;color:var(--ink-3);font-size:.85rem}

/* ── rozcestník: hledání ────────────────────────────────────────────── */
body.v2 #main-content .nap-hledat{max-width:560px;margin:var(--sp-3) auto 0;text-align:left}
body.v2 #main-content .nap-hledat label{display:block;margin-bottom:6px;font-weight:700;color:var(--ink)}
body.v2 #main-content .nap-hledat input{
  width:100%;min-height:52px;padding:0 20px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);font:400 1.05rem/1.2 var(--sans);color:var(--ink);
}
body.v2 #main-content .nap-hledat input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}

/* ── rozcestník: Nejčastější (sloupce podle počtu: 1→1 … 4→4, 5+→3) ─ */
body.v2 #main-content .nap-dlazdice{
  --nap-sloupce:3;
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);
  list-style:none;padding:0;margin-top:var(--sp-2);
}
body.v2 #main-content .nap-dlazdice--1{--nap-sloupce:1}
body.v2 #main-content .nap-dlazdice--2{--nap-sloupce:2}
body.v2 #main-content .nap-dlazdice--4{--nap-sloupce:4}
body.v2 #main-content .nap-dlazdice > li{
  flex:0 1 calc((100% - (var(--nap-sloupce) - 1) * var(--sp-2)) / var(--nap-sloupce));
  display:flex;
}
body.v2 #main-content .nap-dlazdice a{
  display:flex;flex-direction:column;gap:6px;width:100%;padding:var(--sp-3);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  text-decoration:none;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease;
}
body.v2 #main-content .nap-dlazdice a:hover{border-color:var(--accent-2);box-shadow:var(--shadow-md)}
body.v2 #main-content .nap-dlazdice__nazev{font-weight:700;color:var(--ink)}
body.v2 #main-content .nap-dlazdice__odpoved{
  font-size:.92rem;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:1024px){
  body.v2 #main-content .nap-dlazdice:not(.nap-dlazdice--1) > li{flex-basis:calc((100% - var(--sp-2)) / 2)}
}
@media (max-width:640px){
  body.v2 #main-content .nap-dlazdice > li{flex-basis:100%}
}

/* ── rozcestník: sekce a výsledky hledání ───────────────────────────── */
body.v2 #main-content .nap-seznam-navodu{list-style:none;padding:0;margin-top:var(--sp-2)}
body.v2 #main-content .nap-seznam-navodu li{border-top:1px solid var(--line)}
body.v2 #main-content .nap-seznam-navodu li:last-child{border-bottom:1px solid var(--line)}
body.v2 #main-content .nap-seznam-navodu a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
  min-height:48px;padding:10px 0;color:var(--ink);font-weight:600;text-decoration:none;
}
body.v2 #main-content .nap-seznam-navodu a::after{content:"›";color:var(--accent-2);font-size:1.3rem;line-height:1}
body.v2 #main-content .nap-seznam-navodu a:hover{color:var(--accent)}
body.v2 #main-content .nap-seznam-navodu .nap-vysledek__odpoved{display:block;font-weight:400;font-size:.92rem;color:var(--ink-2)}
body.v2 #main-content .nap-vysledky__nic{margin-top:var(--sp-2);color:var(--ink-2)}
body.v2 #main-content .nap-vysledky__nic a{color:var(--accent);font-weight:600}

/* ── otevřeno z aplikace (?app=1, Profil → Podpora → Nápověda) ─────────
   Vestavěný prohlížeč aplikace má vlastní lištu se zavřením – hlavička,
   hlavní menu a patička webu by jen zabíraly místo na telefonu. */
body.nap-v-aplikaci .site-header,
body.nap-v-aplikaci [data-component="main-menu"],
body.nap-v-aplikaci .site-footer{display:none}