/* ============================================================
   Naše Veselí — zanaseveseli.cz
   Vizuální řeč letáků: navy + zelená, zelená šipka ▶, „tiskový" klid.
   ============================================================ */

:root {
    --navy: #122D55;
    --navy-tmava: #0B1D3A;
    --zelena: #78A40E;
    --zelena-tmava: #5A7C0A;      /* zelená pro text na bílé (kontrast AA) */
    --zelena-znacka: #6E9A0C;     /* zelená wordmarku „Veselí" na bílé (kontrast ≥ 3:1) */
    --zelena-svetla: #F3F6EA;     /* tónovaný papír boxů z letáků */
    --inkoust: #1A1A1A;
    --seda-text: #4A5464;
    --papir: #FFFFFF;
    --cara: #D9DEE6;
    --pismo: Arial, "Liberation Sans", "Helvetica Neue", Helvetica, sans-serif;
    --obal-sirka: 68rem;
}

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

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

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

a:hover {
    color: var(--zelena-tmava);
}

:focus-visible {
    outline: 3px solid var(--zelena);
    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(--navy);
    color: #fff;
    padding: 0.5rem 1rem;
    z-index: 100;
}

.preskocit:focus {
    left: 0;
}

h1, h2, h3 {
    line-height: 1.2;
    color: var(--navy);
    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(--zelena);
    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;
}

.znacka-nazev {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.znacka-nase { color: var(--navy); }
.znacka-veseli { color: var(--zelena-znacka); }

.znacka-slogan {
    display: block;
    font-size: 0.82rem;
    font-style: italic;
    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(--navy);
    padding-block: 0.4rem;
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding-block: 0;
}

.menu a:hover {
    color: var(--zelena-tmava);
}

.menu a.aktivni::before {
    content: "▶ ";
    color: var(--zelena);
    font-size: 0.75em;
}

.menu-tlacitko {
    display: none;
    font: inherit;
    font-weight: 700;
    color: var(--navy);
    background: none;
    border: 2px solid var(--navy);
    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 ---------- */

.hero {
    padding-block: 3rem 2.5rem;
}

.hero-nazev {
    font-size: clamp(2.6rem, 8vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
}

.hero-nazev .znacka-nase { color: var(--navy); }
.hero-nazev .znacka-veseli { color: var(--zelena-znacka); }

.hero-slogan {
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    font-style: italic;
    color: var(--navy);
    margin: 0.4rem 0 1.2rem;
}

.hero-mesto {
    color: var(--seda-text);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 1.2rem;
}

.hero-text {
    max-width: 44rem;
    font-size: 1.05rem;
}

.hero-foto {
    margin: 2rem 0 0;
    aspect-ratio: 21 / 8;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.hero-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-foto::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 6px;
    background: var(--zelena);
}

/* ---------- 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(--zelena);
    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(--navy);
}

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

.stitek-garant {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--zelena-tmava);
    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: " ▶";
    color: var(--zelena);
    font-size: 0.8em;
}

.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(--navy);
    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 .zelene {
    color: #A8D437;   /* zelená zesvětlená pro kontrast na navy */
}

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

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

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

.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(--navy);
    min-height: 44px;
}

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

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

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

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

.sekce-nadpis::before {
    content: "▶";
    color: var(--zelena);
    font-size: 0.9rem;
}

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

.clanek {
    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(--zelena-tmava);
}

.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: "▶";
    color: var(--zelena);
    font-size: 0.75em;
    position: absolute;
    left: -1.4rem;
    top: 0.35em;
}

.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(--zelena-svetla);
    color: var(--navy);
}

.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(--zelena-svetla);
    border-left: 5px solid var(--zelena);
    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(--navy);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garant-box p {
    margin: 0;
}

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

.tlacitko {
    display: inline-block;
    background: var(--zelena);
    color: var(--navy-tmava);
    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(--zelena-tmava);
    color: #fff;
}

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

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

/* ---------- karty kandidátů ---------- */

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

.kandidat {
    border: 1px solid var(--cara);
    border-radius: 6px;
    padding: 1.5rem;
    text-align: center;
}

.kandidat .foto {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    margin: 0 auto 1rem;
    background: var(--navy);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.kandidat .role {
    color: var(--zelena-tmava);
    font-weight: 700;
    font-size: 0.9rem;
    margin: 0 0 0.7rem;
    text-align: center;
}

.kandidat p {
    font-size: 0.95rem;
    text-align: left;
}

/* 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: " ▶";
    color: var(--zelena);
    font-size: 0.75em;
}

.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(--navy); color: var(--navy); }
.stav-schvaleno { border-color: var(--zelena-tmava); color: var(--zelena-tmava); }
.stav-zamitnuto { border-color: #9b2c2c; color: #9b2c2c; }

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

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

.interni-pruh {
    background: var(--zelena-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(--navy);
    border: 1px solid var(--cara);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

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

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

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

.zalozka-aktivni .zalozka-pocet {
    background: var(--zelena);
    color: var(--navy);
}

.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(--navy);
    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(--zelena-tmava);
}

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

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

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

.dotaznik-predvyplneno {
    border: 2px solid var(--navy);
    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(--navy);
    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(--navy);
    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(--navy);
    color: #DDE4EE;
    margin-top: 3rem;
    border-top: 5px solid var(--zelena);
}

.paticka a {
    color: #fff;
}

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

.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-size: 1.4rem;
    margin: 0;
    letter-spacing: -0.02em;
}

.paticka-znacka strong { color: #fff; }
.paticka-znacka span { color: #A8D437; font-weight: 700; }

.paticka-slogan {
    font-style: italic;
    margin: 0.2rem 0 0;
    color: #B6C1D2;
}

.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: #B6C1D2;
}

.paticka-spodek p { margin: 0; }

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

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

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