/* ============================================================
   Náš Moravský Písek - naspisek.tutka.cz

   Vizuální řeč je odvozená z jejich vlastního představovacího videa:
   sytá oranžová plocha, wordmark patkovou kurzívou s prostrkáním
   a oranžová jmenovka pod obličejem. Ta jmenovka je tady povýšená
   na nosný prvek webu - viz .stitek níže.

   POZOR na kontrasty (ověřeno výpočtem, ne odhadem):
     #E68105 na bílé   = 2,80:1  → NIKDY text, jen plochy a linky
     #C26A00 na bílé   = 3,92:1  → jen velký text (wordmark)
     #A85C00 na bílé   = 5,00:1  → běžný text a odkazy, projde AA
     #241E18 na #E68105 = 5,89:1 → text na oranžové ploše
   Ve videu mají bílý text na syté oranžové (2,80:1), což neprojde.
   Proto je tu na oranžové vždy tmavá, ne bílá.
   ============================================================ */

:root {
    --uhel: #241E18;               /* teplá skoro-černá; nosná barva místo navy */
    --uhel-tmavy: #16120E;
    --oranzova: #E68105;           /* značková, vzorkovaná z videa - jen dekorace */
    --oranzova-text: #A85C00;      /* oranžová pro text na bílé (AA 5,00:1) */
    --oranzova-znacka: #C26A00;    /* wordmark na bílé (3,92:1, jen velký text) */
    --oranzova-svetla: #FDF4E8;    /* tónovaný papír boxů */
    --inkoust: #241E18;
    --seda-text: #5A5048;          /* teplá šedá, ne modrá - aby nebila s oranžovou */
    --papir: #FFFFFF;
    --cara: #E5DCD1;
    --pismo: Arial, "Liberation Sans", "Helvetica Neue", Helvetica, sans-serif;
    /* Wordmark: patková kurzíva s prostrkáním, jako ve videu. Systémová písma,
       externí fonty jsou zakázané - Georgia je na Windows i macOS, Liberation
       Serif dodá Linux (server i část Androidů). */
    --pismo-znacka: Georgia, "Liberation Serif", "Times New Roman", serif;
    --obal-sirka: 68rem;
    /* Šipka „pokračuje to tudy". Kreslená, ne znak z písma - textová šipka
       se na každé platformě vykresluje jinak silně a sedí na jiném účaří
       (výtka uživatele 24. 8. 2026). Barvu určuje background-color přes
       masku, takže jedna ikona slouží všem barvám. */
    --ikona-sipka: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2012h16%22%2F%3E%3Cpath%20d%3D%22M13%205.5%2019.5%2012%2013%2018.5%22%2F%3E%3C%2Fsvg%3E");
}

/* ---------- základ ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 18px;
}

body {
    margin: 0;
    font-family: var(--pismo);
    line-height: 1.6;
    color: var(--inkoust);
    background: var(--papir);
    /* Krátké stránky (Kandidáti, Program bez obsahu) by jinak nechaly pod
       patičkou pruh bílé. Patička musí dosednout ke spodku okna. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > main {
    flex: 1 0 auto;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--uhel);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--oranzova-text);
}

:focus-visible {
    outline: 3px solid var(--oranzova);
    outline-offset: 2px;
}

.obal {
    max-width: var(--obal-sirka);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.preskocit {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--uhel);
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 100;
}

.preskocit:focus {
    left: 0;
}

h1, h2, h3 {
    line-height: 1.2;
    color: var(--uhel);
    letter-spacing: -0.01em;
}

h1 { font-size: 2.2rem; margin: 0 0 1rem; }
h2 { font-size: 1.6rem; margin: 2.2rem 0 0.8rem; }
h3 { font-size: 1.2rem; margin: 1.6rem 0 0.5rem; }

.todo {
    color: var(--seda-text);
    font-style: italic;
    border-bottom: 1px dashed var(--seda-text);
}

/* ---------- hlavička ---------- */

.hlavicka {
    border-bottom: 4px solid var(--oranzova);
    background: var(--papir);
}

.hlavicka-vnitrek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-block: 0.9rem;
}

.znacka {
    text-decoration: none;
    display: inline-block;
    line-height: 1.15;
}

/* Wordmark. Ve videu je to patková kurzíva s výrazným prostrkáním - proto
   serif + italic + kladný letter-spacing. Prostrkání přidává mezeru i za
   poslední písmeno, takže ji stejným dílem ubíráme zprava, jinak wordmark
   opticky uteče od okraje. */
.znacka-nazev {
    display: block;
    font-family: var(--pismo-znacka);
    font-style: italic;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin-right: -0.07em;
    color: var(--uhel);
}

.znacka-slogan {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--seda-text);
}

.menu ul {
    list-style: none;
    display: flex;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
}

.menu a {
    text-decoration: none;
    font-weight: 700;
    color: var(--uhel);
    padding-block: 0.4rem;
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding-block: 0;
}

.menu a:hover {
    color: var(--oranzova-text);
}

.menu a.aktivni {
    box-shadow: inset 0 -4px 0 var(--oranzova);
}

.menu-tlacitko {
    display: none;
    font: inherit;
    font-weight: 700;
    color: var(--uhel);
    background: none;
    border: 2px solid var(--uhel);
    border-radius: 4px;
    padding: 0.4rem 1rem;
    min-height: 44px;
    cursor: pointer;
}

@media (max-width: 720px) {
    .menu-tlacitko {
        display: inline-block;
    }

    .menu {
        display: none;
        width: 100%;
    }

    .menu.otevrene {
        display: block;
    }

    .menu ul {
        flex-direction: column;
        gap: 0;
        padding-block: 0.5rem;
    }

    .menu a {
        display: block;
        width: 100%;
        border-top: 1px solid var(--cara);
    }
}

/* ---------- hero ----------
   Jejich video začíná i končí plnou oranžovou plochou s wordmarkem.
   Fotku obce zatím nemáme, takže tohle není náhradní řešení, ale to
   správné: hero je ta oranžová plocha. */

.hero {
    background: var(--oranzova);
    color: var(--uhel);
    padding-block: clamp(3rem, 9vw, 5.5rem);
    border-bottom: 5px solid var(--uhel);
}

.hero-nazev {
    font-family: var(--pismo-znacka);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(2.1rem, 7.5vw, 4rem);
    letter-spacing: 0.06em;
    margin-right: -0.06em;
    line-height: 1.12;
    margin-block: 0;
    color: var(--uhel);
}

.hero-podtitul {
    font-size: clamp(1.05rem, 3.2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0.9rem 0 0;
    max-width: 24em;
}

.hero-volby {
    display: inline-block;
    margin: 1.6rem 0 0;
    padding: 0.35rem 0.85rem;
    background: var(--uhel);
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Dvojice tlačítek na úvodu interní sekce. Na úzkém displeji pod sebe,
   ne vedle sebe zmáčknutá. */
.interni-akce {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
}

/* Lišta u neschváleného textu. Vidí ji jen přihlášený člen - nepřihlášenému
   se stránka vůbec nezobrazí (404). */
.navrh-lista {
    background: var(--oranzova-svetla);
    border-left: 5px solid var(--oranzova);
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

/* ---------- výpis výsledků ----------
   Karta na šířku: vlevo náhled, vpravo text. Na úzkém displeji pod sebe.
   Obrázek je záměrně velký - u výsledků je vizuál ta věc, která zaujme. */

.vysledky {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    gap: 2rem;
}

.vysledky > li > article {
    display: grid;
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    border: 1px solid var(--cara);
    border-top: 4px solid var(--oranzova);
    padding: 1.25rem;
}

.vysledek-obrazek {
    display: block;
    text-decoration: none;
}

.vysledek-obrazek img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vysledek-text h2 {
    margin-top: 0;
}

@media (max-width: 700px) {
    .vysledky > li > article {
        grid-template-columns: 1fr;
    }
}

/* Obrázky uvnitř článku (výsledky, témata) - přes celou šířku textu,
   s dýchacím prostorem nad i pod. */
.clanek-telo img {
    display: block;
    width: 100%;
    margin-block: 1.6rem;
}

/* ---------- fotka obce na úvodu ----------
   Dokud fotka nedorazí, drží její místo rámeček. Bez něj působil úvod prázdně:
   oranžová plocha a hned pod ní text. Zároveň je to pro uskupení viditelná
   připomínka, že fotku má dodat. */

.uvod-fotka {
    margin: 2.5rem 0 0;
}

.uvod-fotka img {
    display: block;
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.misto-fotka {
    margin: 2.5rem 0 0;
    aspect-ratio: 21 / 9;
    background: var(--oranzova-svetla);
    border: 2px dashed var(--cara);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    text-align: center;
    padding: 1rem;
}

.misto-fotka p {
    margin: 0;
    color: var(--seda-text);
}

@media (max-width: 640px) {
    /* 21:9 je na mobilu jen proužek, ve kterém se text nemá kam vejít */
    .misto-fotka { aspect-ratio: 3 / 2; }
    .uvod-fotka img { aspect-ratio: 3 / 2; }
}

/* Stav dlaždice, která zatím nemá kam odkazovat. Vypadá jako odkaz „dál",
   ale je to jen text - proto ne modrá a bez podtržení. */
.dlazdice-stav {
    margin-top: 1rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--seda-text);
}

/* ---------- štítek ----------
   Podpisový prvek. Ve videu má každý kandidát pod obličejem oranžovou
   jmenovku a pod ní bílý štítek s povoláním. Stejný tvar tady označuje
   sekce - a až dorazí fotky, karty kandidátů ho převezmou beze změny. */

.stitek {
    display: inline-block;
    background: var(--oranzova);
    color: var(--uhel);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.7rem;
}

.stitek-tichy {
    background: transparent;
    color: var(--oranzova-text);
    border: 2px solid var(--oranzova);
    padding: 0.2rem 0.65rem;
}

/* ---------- programové dlaždice ---------- */

.dlazdice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
    padding: 0;
    margin: 1.5rem 0 0;
    list-style: none;
}

.dlazdice li {
    display: flex;
}

.dlazdice article {
    flex: 1;
    border: 1px solid var(--cara);
    border-top: 5px solid var(--oranzova);
    border-radius: 6px;
    padding: 1.4rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--papir);
}

.dlazdice :is(h2, h3) {
    margin: 0;
    font-size: 1.25rem;
}

.dlazdice :is(h2, h3) a {
    text-decoration: none;
    color: var(--uhel);
}

.dlazdice :is(h2, h3) a:hover {
    text-decoration: underline;
}

.stitek-garant {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--oranzova-text);
    text-transform: none;
}

.dlazdice p {
    margin: 0;
    color: var(--inkoust);
}

.odkaz-dal {
    margin-top: auto;
    padding-top: 0.6rem;
    font-weight: 700;
    text-decoration: none;
}

.odkaz-dal::after {
    content: "";
    display: inline-block;
    width: 0.78em;
    height: 0.78em;
    margin-left: 0.42em;
    vertical-align: -0.04em;
    background-color: var(--oranzova-text);
    -webkit-mask: var(--ikona-sipka) no-repeat center / contain;
    mask: var(--ikona-sipka) no-repeat center / contain;
}

.odkaz-dal:hover {
    text-decoration: underline;
}

/* ---------- CTA box (navy s zeleným zvýrazněním - poznávací prvek letáků) ---------- */

.cta-box {
    background: var(--uhel);
    color: #fff;
    border-radius: 6px;
    padding: 1.6rem 1.8rem;
    margin-block: 2.5rem;
    text-align: center;
}

.cta-box p {
    margin: 0.3rem 0;
    font-size: 1.15rem;
    font-weight: 700;
}

.cta-box .oranzove {
    color: #FFC066;   /* zesvětlená oranžová pro kontrast na tmavé (10,2:1) */
}

.cta-box a {
    color: #fff;
}

.cta-box a:hover {
    color: #FFC066;
}

.cta-box .cta-pozn {
    font-size: 0.95rem;
    font-weight: 400;
    color: #DCD2C6;
}

.uvod-fb {
    text-align: center;
    margin: -1rem 0 1rem;
}

.uvod-fb a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    color: var(--uhel);
    min-height: 44px;
}

.uvod-fb a:hover {
    text-decoration: underline;
    color: var(--oranzova-text);
}

/* ---------- sekce ---------- */

.sekce {
    padding-block: 1rem 2rem;
}

.sekce-nadpis {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.sekce-nadpis::before {
    content: "";
    flex: 0 0 auto;
    width: 0.85rem;
    height: 0.85rem;
    background: var(--oranzova);
}

/* ---------- článek (téma, aktualita, návrh) ---------- */

.clanek {
    max-width: 46rem;
    padding-block: 2.5rem 1rem;
}

/* Text nad mřížkou nebo pod ní. Drží čtecí šířku jako .clanek, ale zarovnává se
   k levému okraji obalu, takže lícuje s mřížkou pod sebou. Samotné .clanek by se
   vycentrovalo (dědí margin-inline: auto z .obal) a odskočilo by. */
.clanek-uzky {
    max-width: 46rem;
    padding-block: 2.5rem 1rem;
}

.clanek-meta {
    color: var(--seda-text);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.clanek-telo ol {
    padding-left: 1.4rem;
}

.clanek-telo ol li {
    margin-block: 0.8rem;
}

.clanek-telo ol li::marker {
    font-weight: 700;
    color: var(--oranzova-text);
}

.clanek-telo ul {
    list-style: none;
    padding-left: 1.4rem;
}

.clanek-telo ul li {
    margin-block: 0.6rem;
}

.clanek-telo ul > li {
    position: relative;
}

.clanek-telo ul > li::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--oranzova);
    position: absolute;
    left: -1.25rem;
    top: 0.55em;
}

.clanek-telo table {
    border-collapse: collapse;
    font-size: 0.88rem;
    margin-block: 1.2rem;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.clanek-telo th,
.clanek-telo td {
    border: 1px solid var(--cara);
    padding: 0.5rem 0.7rem;
    text-align: left;
    vertical-align: top;
    min-width: 8rem;
}

.clanek-telo th {
    background: var(--oranzova-svetla);
    color: var(--uhel);
}

.clanek-telo .ikona {
    vertical-align: -0.15em;
}

.clanek-telo figure {
    margin: 1.5rem 0;
}

.clanek-telo figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--cara);
}

.clanek-telo figcaption {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--seda-text);
    margin-top: 0.5rem;
}

.clanek-telo blockquote {
    margin: 1.4rem 0;
    padding: 1rem 1.4rem;
    background: var(--oranzova-svetla);
    border-left: 5px solid var(--oranzova);
    border-radius: 0 6px 6px 0;
}

.clanek-telo blockquote p {
    margin: 0.4rem 0;
}

.garant-box {
    display: flex;
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--cara);
    border-radius: 6px;
    padding: 1rem 1.2rem;
    margin-block: 2rem;
}

.garant-box .avatar {
    flex: none;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(--uhel);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fotka garanta místo iniciál: <picture> je flex-položka, display: contents
   ji zprůhlední, aby se šířka a kulatý ořez aplikovaly přímo na <img>. */
.garant-box picture {
    display: contents;
}

.garant-box img.avatar {
    object-fit: cover;
}

.garant-box p {
    margin: 0;
}

.garant-box .role {
    color: var(--seda-text);
    font-size: 0.9rem;
}

.tlacitko {
    display: inline-block;
    background: var(--oranzova);
    color: var(--uhel-tmavy);
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    padding: 0.7rem 1.5rem;
    min-height: 44px;
    font-size: 1rem;
    cursor: pointer;
    font-family: inherit;
}

.tlacitko:hover {
    background: var(--oranzova-text);
    color: #fff;
}

.tlacitko-obrys {
    background: none;
    border: 2px solid var(--uhel);
    color: var(--uhel);
}

.tlacitko-obrys:hover {
    background: var(--uhel);
    color: #fff;
}

/* ---------- karty kandidátů ----------
   Jmenovka z videa: oranžový pruh se jménem a pod ním bílý štítek s povoláním,
   odsazený doleva. Fotky zatím nemáme, ale karta bez nich nevypadá nedodělaně -
   ve videu je jmenovka stejně to hlavní, obličej je jen pozadí.

   Je to <ol>, protože pořadí odpovídá volebnímu lístku a nese informaci.
   Číslo řadu vypisujeme ručně (.kandidat-cislo), aby ho přečetla i čtečka
   obrazovky - CSS counter by se do přístupnostního stromu nedostal. */

.kandidati {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem 1.5rem;
    margin-block: 2rem;
    padding: 0;
    list-style: none;
}

/* Karta drží pohromadě vlastním rámečkem. Fotka i jmenovka jdou od kraje
   ke kraji - dřív byla fotka úzká a jmenovka přes celou šířku, což vypadalo
   rozbitě (výtka uživatele 24. 8. 2026). */
.kandidati > li {
    align-self: start;
    border: 1px solid var(--cara);
    background: var(--papir);
    overflow: hidden;
}

/* Fotka kandidáta, nebo čtvereček s iniciálami, když fotka chybí. Obojí drží
   šířku karty a poměr 1:1, takže se karta přidáním fotky nepohne. */
.kandidat-fotka {
    display: block;
    width: 100%;
    /* Ateliérové fotky jsou čtvercové, takže je čtvercová i karta. Nic se
       tím neořezává. Musí souhlasit s POMER v Nastroje\zapracuj-upravene-fotky.py. */
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0;
    background: var(--oranzova-svetla);
}

/* Náhrada bez fotky: patková kurzíva jako wordmark, ať je vidět, že je to
   značkový prvek, a ne nenačtený obrázek. */
.kandidat-fotka-inicialy {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oranzova-text);
    font-family: var(--pismo-znacka);
    font-style: italic;
    font-weight: 700;
    font-size: 3rem;
    /* Prostrkání tu záměrně není: u vycentrovaného textu přidá mezeru jen za
       poslední písmeno a dvojice iniciál se opticky posune doleva. */
}

.kandidat-jmeno {
    margin: 0;
    background: var(--oranzova);
    color: var(--uhel);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.35;
    padding: 0.4rem 0.8rem;
}

.kandidat-cislo {
    /* číslo drží pohromadě s příjmením i při zalomení řádku */
    white-space: nowrap;
}

/* Bílý štítek s povoláním, odsazený doleva - přesně jako ve videu. */
.kandidat-povolani {
    margin: 0 0.8rem 0 1.6rem;
    border: 2px solid var(--uhel);
    border-top: none;
    color: var(--uhel);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1.35;
    padding: 0.3rem 0.65rem;
}

/* Medailonek. Zatím jen ukázkový text - viz klíč Web:UkazkovyText. */
.kandidat-text {
    margin: 0.9rem 0 0;
    padding: 0 0.8rem 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--seda-text);
}

.kandidat-text-ukazka {
    font-style: italic;
}

/* náhled karty kandidáta vložený do textu článku (interní návrhy) */
.clanek-telo .kandidati {
    max-width: 26rem;
    padding-left: 0;
}

.clanek-telo .kandidati > li::before {
    content: none;
}

/* ---------- seznamy aktualit a návrhů ---------- */

.seznam-clanku {
    list-style: none;
    padding: 0;
    margin-block: 1.5rem;
}

.seznam-clanku li {
    border-bottom: 1px solid var(--cara);
    padding-block: 1.1rem;
}

.seznam-clanku :is(h2, h3) {
    margin: 0 0 0.2rem;
    font-size: 1.2rem;
}

.seznam-clanku :is(h2, h3) a {
    text-decoration: none;
}

.seznam-clanku :is(h2, h3) a::after {
    content: "";
    display: inline-block;
    width: 0.78em;
    height: 0.78em;
    margin-left: 0.42em;
    vertical-align: -0.04em;
    background-color: var(--oranzova-text);
    -webkit-mask: var(--ikona-sipka) no-repeat center / contain;
    mask: var(--ikona-sipka) no-repeat center / contain;
}

.seznam-clanku :is(h2, h3) a:hover {
    text-decoration: underline;
}

.seznam-clanku .datum {
    color: var(--seda-text);
    font-size: 0.88rem;
}

.seznam-perex {
    margin: 0.15rem 0 0.35rem;
    color: var(--inkoust);
}

.stav {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--cara);
    color: var(--seda-text);
    vertical-align: middle;
    margin-left: 0.5rem;
}

.stav-navrh { border-color: var(--seda-text); }
.stav-ke-schvaleni { border-color: var(--uhel); color: var(--uhel); }
.stav-schvaleno { border-color: var(--oranzova-text); color: var(--oranzova-text); }
.stav-zamitnuto { border-color: #9b2c2c; color: #9b2c2c; }
/* text s `pristup: vedeni` - vidí ho jen přihlášení heslem vedení, štítek jim to připomene */
.stav-vedeni { border-color: var(--uhel); color: var(--uhel); background: var(--oranzova-svetla); }

.stav .stav-ikona {
    vertical-align: -0.08em;
    margin-right: 0.25rem;
}

/* ---------- interní sekce ---------- */

.interni-pruh {
    background: var(--oranzova-svetla);
    border-bottom: 1px solid var(--cara);
}

.interni-pruh .obal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 0.5rem;
    font-size: 0.9rem;
}

.interni-pruh form {
    margin: 0;
}

/* záložky výpisu návrhů - obyčejné odkazy, filtrují se na serveru */
.zalozky {
    display: flex;
    flex-wrap: nowrap;          /* vždy jeden řádek */
    overflow-x: auto;           /* na úzkém displeji se lišta posouvá, nezalamuje */
    overflow-y: hidden;         /* jinak se uvnitř lišty objeví svislý posuvník */
    gap: 0.25rem;
    margin: 1.5rem 0 0.5rem;
    border-bottom: 2px solid var(--cara);
    scrollbar-width: thin;
}

.zalozka {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;                 /* záložky se nesmršťují ani nelámou */
    white-space: nowrap;
    min-height: 44px;
    padding: 0.4rem 0.7rem;
    font-size: 0.95rem;
    text-decoration: none;
    font-weight: 700;
    color: var(--uhel);
    border: 1px solid var(--cara);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

.zalozka:hover {
    background: var(--oranzova-svetla);
    text-decoration: underline;
}

.zalozka-aktivni,
.zalozka-aktivni:hover {
    background: var(--uhel);
    color: #FFFFFF;
    border-color: var(--uhel);
    text-decoration: none;
}

.zalozka-pocet {
    font-size: 0.78rem;
    font-weight: 400;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--oranzova-svetla);
    color: var(--inkoust);
}

.zalozka-aktivni .zalozka-pocet {
    background: var(--oranzova);
    color: var(--uhel);
}

.formular {
    max-width: 24rem;
}

.formular label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.formular input[type="password"],
.formular input[type="text"],
.formular textarea {
    width: 100%;
    font: inherit;
    padding: 0.6rem 0.8rem;
    border: 2px solid var(--uhel);
    border-radius: 4px;
    margin-bottom: 1rem;
}

.chyba {
    color: #A4262C;
    font-weight: 700;
}

/* ---------- anketa pro kandidáty ---------- */

.dotaznik {
    max-width: 38rem;
}

.dotaznik-otazka {
    margin-block: 2rem;
    border: none;
    padding: 0;
}

.dotaznik-otazka legend {
    font-weight: 700;
    margin-bottom: 0.4rem;
    padding: 0;
}

.dotaznik .napoveda {
    font-weight: 400;
    color: var(--seda-text);
    margin-block: 0 0.6rem;
}

.dotaznik .povinne {
    font-weight: 400;
    color: var(--seda-text);
}

.volba {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
}

.volba input {
    width: 1.3rem;
    height: 1.3rem;
    flex-shrink: 0;
    accent-color: var(--oranzova-text);
}

.volba label {
    font-weight: 400;
    margin: 0;
}

.volba-upresneni {
    font-weight: 400;
    margin-top: 0.5rem;
}

.dotaznik-dekujeme {
    border: 2px solid var(--oranzova-text);
    border-radius: 6px;
    padding: 0.25rem 1.25rem;
    margin-block: 1.5rem;
}

.dotaznik-predvyplneno {
    border: 2px solid var(--uhel);
    border-radius: 6px;
    padding: 0.25rem 1.25rem;
    margin-block: 1.5rem;
}

.odkaz-tlacitko {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--uhel);
    text-decoration: underline;
    cursor: pointer;
    min-height: 44px;
}

.skryte {
    display: none;
}

/* pole, které zablokovalo odeslání, musí zčervenat - zelený focus by vypadal,
   že je všechno v pořádku */
/* ---------- hlasování k analýzám ---------- */

.hlasovani {
    border: 1px solid var(--cara);
    border-radius: 6px;
    padding: 0.5rem 1.25rem 1.25rem;
    margin-block: 2rem;
}

.hlasovani .napoveda {
    color: var(--seda-text);
    margin-top: 0;
}

.hlasovani-tlacitka {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hlasovani-stav {
    margin: 0.75rem 0 0;
    color: var(--seda-text);
}

.seznam-hlasy {
    display: block;
    color: var(--seda-text);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

.formular.overeno input:invalid {
    border-color: #A4262C;
}

.formular.overeno input:invalid:focus-visible {
    outline-color: #A4262C;
}

/* ---------- právní stránka (politická reklama) ---------- */

.pravni-uvod {
    font-size: 1.15rem;
}

.pravni-dl {
    margin-block: 1.5rem;
}

.pravni-dl dt {
    font-weight: 700;
    color: var(--uhel);
    margin-top: 1.1rem;
}

.pravni-role {
    font-weight: 400;
    color: var(--seda-text);
    font-size: 0.85rem;
}

.pravni-dl dd {
    margin: 0.15rem 0 0;
}

.doplnit {
    display: inline-block;
    background: #FDF3D0;
    color: #7A5B00;
    font-weight: 700;
    padding: 0 0.45rem;
    border-radius: 3px;
}

.pravni-pozn {
    margin-top: 2rem;
    color: var(--seda-text);
    font-size: 0.92rem;
}

/* ---------- kontakt ---------- */

.kontakt-velky {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2.2;
}

/* ---------- patička ---------- */

.paticka {
    background: var(--uhel);
    color: #DDE4EE;
    margin-top: 3rem;
    border-top: 5px solid var(--oranzova);
}

.paticka a {
    color: #fff;
}

.paticka a:hover {
    color: #FFC066;
}

.paticka-sloupce {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.5rem;
    padding-block: 2rem 1rem;
    font-size: 0.95rem;
}

.paticka-znacka {
    font-family: var(--pismo-znacka);
    font-style: italic;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.06em;
    margin: 0;
    color: #FFFFFF;
}

.paticka-slogan {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: #D9CEC2;
}

.paticka-fb {
    margin: 0.9rem 0 0;
}

.paticka-fb a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-weight: 700;
    min-height: 44px;
}

.paticka-fb a:hover {
    text-decoration: underline;
}

.paticka-spodek {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    padding-block: 0.8rem;
    font-size: 0.85rem;
    color: #D9CEC2;
}

.paticka-spodek p { margin: 0; }

/* ---------- pohyb a tisk ---------- */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ---- Návštěvnost (interní sekce, převzato z Veselí) ---- */
.statistika {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.statistika li {
    flex: 1 1 8rem;
    background: var(--oranzova-svetla);
    border-left: 4px solid var(--oranzova);
    padding: 0.8rem 1rem;
}
.statistika .cislo {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--uhel);
    line-height: 1.1;
}
.statistika .popis {
    display: block;
    font-size: 0.9rem;
    color: var(--seda-text);
}
/* členové uskupení - oddělená čísla, šedě, ať se nepletou s veřejnou návštěvností */
.statistika-clenove li {
    background: #F4F1EE;
    border-left-color: var(--uhel);
}
.statistika-clenove .cislo {
    font-size: 1.5rem;
}
.graf {
    list-style: none;
    margin: 1rem 0 2rem;
    padding: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    overflow-x: auto;
}
.graf li {
    flex: 1 0 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
/* výška sloupce třídou v0-v10, ne inline stylem (CSP) */
.graf .sloupec {
    width: 100%;
    height: 3px;
    background: var(--oranzova);
    border-radius: 2px 2px 0 0;
}
.graf .v1 { height: 1.1rem; }
.graf .v2 { height: 2.2rem; }
.graf .v3 { height: 3.3rem; }
.graf .v4 { height: 4.4rem; }
.graf .v5 { height: 5.5rem; }
.graf .v6 { height: 6.6rem; }
.graf .v7 { height: 7.7rem; }
.graf .v8 { height: 8.8rem; }
.graf .v9 { height: 9.9rem; }
.graf .v10 { height: 11rem; }
.graf .hodnota {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--uhel);
}
.graf .den {
    font-size: 0.72rem;
    color: var(--seda-text);
    white-space: nowrap;
}
.cesta {
    color: var(--seda-text);
    font-size: 0.85rem;
}

@media print {
    .hlavicka, .paticka, .cta-box, .menu-tlacitko, .interni-pruh {
        display: none;
    }

    body {
        color: #000;
    }

    .clanek {
        max-width: none;
        padding-block: 0;
    }

    a {
        color: #000;
        text-decoration: none;
    }
}