/* =============================================================================
 * SLIAČ NÁS SPÁJA — HOTFIX 4
 * =============================================================================
 *
 * 🟦 = SEKCIA, KTORÚ BEŽNE UPRAVUJEŠ
 * 🔵 = PC / NOTEBOOK / DESKTOP
 * 🟢 = MOBIL
 * 🟨 = TECHNICKÁ ČASŤ — BEŽNE NEMENIŤ
 * 🟪 = KOMPATIBILITA — BEŽNE NEMENIŤ
 *
 * ============================================================================= */



/* =============================================================================
 * 🟦 OVLÁDACÍ PANEL TYPOGRAFIE
 *
 * VEĽKOSTI PÍSMA MENÍŠ PRIMÁRNE TU.
 * Pri každej položke sú hodnoty pre PC aj mobil vedľa seba.
 * ============================================================================= */

:root {

    /* -------------------------------------------------------------------------
     * 🟦 BEŽNÝ REDAKČNÝ TEXT
     *
     * Používa napr.:
     * .entry-content
     * .sns-content
     * .sns-article-content
     * ------------------------------------------------------------------------- */

    --sns-content-font-size-pc: 15px;             /* 🔵 PC */
    --sns-content-font-size-mobile: 14px;         /* 🟢 MOBIL */



    /* -------------------------------------------------------------------------
     * 🟦 H2 — VŠETKY H2 NA WEBE
     * ------------------------------------------------------------------------- */

    --sns-h2-font-size-pc: 30px;                  /* 🔵 PC */
    --sns-h2-font-size-mobile: 24px;              /* 🟢 MOBIL */



    /* -------------------------------------------------------------------------
     * 🟦 SNS LEAD
     *
     * Trieda:
     * .sns-lead
     * ------------------------------------------------------------------------- */

    --sns-lead-font-size-pc: 16px;                /* 🔵 PC */
    --sns-lead-font-size-mobile: 15px;            /* 🟢 MOBIL */



    /* -------------------------------------------------------------------------
     * 🟦 HOME HERO — PODNADPIS
     *
     * Trieda:
     * .sns-hero__sub
     * ------------------------------------------------------------------------- */

    --sns-hero-sub-font-size-pc: 16px;            /* 🔵 PC */
    --sns-hero-sub-font-size-mobile: 15px;        /* 🟢 MOBIL */



    /* -------------------------------------------------------------------------
     * 🟦 HOME — KANDIDÁT NA PRIMÁTORA / TAGLINE
     *
     * Trieda:
     * .sns-mayor-feature__tagline
     * ------------------------------------------------------------------------- */

    --sns-mayor-feature-tagline-font-size-pc: 20px;       /* 🔵 PC */
    --sns-mayor-feature-tagline-font-size-mobile: 17px;   /* 🟢 MOBIL */



    /* -------------------------------------------------------------------------
     * 🟦 PROFIL KANDIDÁTA — OSOBNÝ CITÁT
     *
     * Trieda:
     * .sns-candidate-tagline
     * ------------------------------------------------------------------------- */

    --sns-candidate-tagline-font-size-pc: 18px;           /* 🔵 PC */
    --sns-candidate-tagline-font-size-mobile: 16px;       /* 🟢 MOBIL */



    /* =========================================================================
     * 🟨 TECHNICKÁ ČASŤ — AKTÍVNE HODNOTY PRE PC
     *
     * Tieto premenné ručne NEMEŇ.
     * Na mobile sa automaticky prepnú v media query nižšie.
     * ========================================================================= */

    --sns-content-font-size-active:
        var(--sns-content-font-size-pc);

    --sns-h2-font-size-active:
        var(--sns-h2-font-size-pc);

    --sns-lead-font-size-active:
        var(--sns-lead-font-size-pc);

    --sns-hero-sub-font-size-active:
        var(--sns-hero-sub-font-size-pc);

    --sns-mayor-feature-tagline-font-size-active:
        var(--sns-mayor-feature-tagline-font-size-pc);

    --sns-candidate-tagline-font-size-active:
        var(--sns-candidate-tagline-font-size-pc);



    /* =========================================================================
     * 🟪 KOMPATIBILITA
     *
     * Staršie názvy premenných ponechávame ako aliasy,
     * aby sa nerozbili pravidlá v iných CSS súboroch témy.
     * ========================================================================= */

    --sns-content-font-size:
        var(--sns-content-font-size-pc);

    --sns-lead-font-size:
        var(--sns-lead-font-size-pc);

    --sns-hero-sub-font-size:
        var(--sns-hero-sub-font-size-pc);

    --sns-candidate-tagline-font-size:
        var(--sns-candidate-tagline-font-size-pc);

    --sns-mayor-feature-tagline-font-size:
        var(--sns-mayor-feature-tagline-font-size-pc);
}



/* =============================================================================
 * 🟨 TECHNICKÁ ČASŤ — AUTOMATICKÉ PREPNUTIE NA MOBIL
 *
 * Do šírky 600 px sa aktívne hodnoty prepnú na 🟢 mobilné hodnoty.
 * ============================================================================= */

@media (max-width: 600px) {

    :root {

        --sns-content-font-size-active:
            var(--sns-content-font-size-mobile);

        --sns-h2-font-size-active:
            var(--sns-h2-font-size-mobile);

        --sns-lead-font-size-active:
            var(--sns-lead-font-size-mobile);

        --sns-hero-sub-font-size-active:
            var(--sns-hero-sub-font-size-mobile);

        --sns-mayor-feature-tagline-font-size-active:
            var(--sns-mayor-feature-tagline-font-size-mobile);

        --sns-candidate-tagline-font-size-active:
            var(--sns-candidate-tagline-font-size-mobile);
    }
}



/* =============================================================================
 * 🟨 TECHNICKÁ ČASŤ — H2
 *
 * Ovláda sa hore v 🟦 OVLÁDACOM PANELI:
 *
 * --sns-h2-font-size-pc
 * --sns-h2-font-size-mobile
 * ============================================================================= */

html body.sns-theme h2 {

    font-size:
        var(--sns-h2-font-size-active) !important;

    line-height: 1.25 !important;
}



/* =============================================================================
 * 🟨 TECHNICKÁ ČASŤ — HOME / KANDIDÁT NA PRIMÁTORA / TAGLINE
 *
 * Ovláda sa hore v 🟦 OVLÁDACOM PANELI:
 *
 * --sns-mayor-feature-tagline-font-size-pc
 * --sns-mayor-feature-tagline-font-size-mobile
 * ============================================================================= */

html body.sns-theme .sns-mayor-feature__tagline {

    font-size:
        var(--sns-mayor-feature-tagline-font-size-active) !important;
}



/* =============================================================================
 * 🟨 1. HOME HERO — TECHNICKÉ PRAVIDLÁ
 * ============================================================================= */

@media (min-width: 992px) {

    .sns-hero {
        min-height: 780px;
    }

    .sns-hero__content {
        padding-top: 210px !important;
        padding-bottom: 80px !important;
    }
}



@media (min-width: 1400px) {

    .sns-hero {
        min-height: 840px;
    }

    .sns-hero__content {
        padding-top: 240px !important;
    }
}



/* Fotka je tímová — dolná časť gradientu môže byť silnejšia,
   aby bol text čitateľný aj cez svetlé oblečenie. */

.sns-hero__overlay {

    background: linear-gradient(
        180deg,
        rgba(31, 78, 132, 0.30) 0%,
        rgba(31, 78, 132, 0.55) 38%,
        rgba(5, 26, 55, 0.88) 100%
    );
}



/*
 * POZOR:
 *
 * Veľkosť .sns-hero__sub už nie je definovaná tu druhýkrát.
 *
 * Samotný komponent je v:
 *
 * assets/css/sns-hotfix-1.css
 *
 * a používa:
 *
 * var(--sns-hero-sub-font-size-active)
 *
 * Hodnotu meníš iba hore v tomto súbore:
 *
 * --sns-hero-sub-font-size-pc
 * --sns-hero-sub-font-size-mobile
 */



/* =============================================================================
 * 🟨 2. PRVÝCH 100 DNÍ — TECHNICKÉ PRAVIDLÁ
 * ============================================================================= */

.sns-100-days-content ol,
.sns-content.entry-content.sns-100-days-content ol {

    counter-reset: sns-step;

    list-style: none !important;

    margin: 0 0 1.6rem !important;

    padding: 0 !important;
}



.sns-100-days-content ol li,
.sns-content.entry-content.sns-100-days-content ol li {

    counter-increment: sns-step;

    position: relative;

    padding: 22px 26px 22px 78px !important;

    margin: 14px 0 !important;

    background: #fff;

    border-radius: var(--sns-radius);

    box-shadow: var(--sns-shadow);

    /*
     * Prvých 100 dní má vlastnú typografiu.
     * Neviažeme ho na bežný redakčný text.
     */
    font-size: 1.1rem !important;

    line-height: 1.6 !important;

    list-style: none !important;
}



.sns-100-days-content ol li::before {

    content: counter(sns-step);

    position: absolute;

    left: 22px;

    top: 20px;

    width: 40px;

    height: 40px;

    line-height: 40px;

    border-radius: 50%;

    background: var(--sns-navy);

    color: #fff;

    text-align: center;

    font-weight: 700;

    font-size: 1rem;
}



@media (max-width: 600px) {

    .sns-100-days-content ol li,
    .sns-content.entry-content.sns-100-days-content ol li {

        padding: 18px 18px 18px 20px !important;
    }



    .sns-100-days-content ol li::before {

        position: static;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        width: 32px;

        height: 32px;

        line-height: 32px;

        margin: 0 0 10px;
    }
}



/* =============================================================================
 * 🟨 3. PROFIL KANDIDÁTA — TECHNICKÉ PRAVIDLÁ
 * ============================================================================= */



/* ---------------------------------------------------------------
 * OSOBNÝ CITÁT KANDIDÁTA
 *
 * .sns-candidate-tagline
 *
 * Veľkosť meníš hore cez:
 *
 * --sns-candidate-tagline-font-size-pc
 * --sns-candidate-tagline-font-size-mobile
 * --------------------------------------------------------------- */

.sns-candidate-tagline {

    font-size:
        var(--sns-candidate-tagline-font-size-active) !important;

    line-height: 1.55 !important;
}



/* ---------------------------------------------------------------
 * HLAVNÝ REDAKČNÝ TEXT KANDIDÁTA
 *
 * Veľkosť sa preberá z centrálnej premennej:
 * --sns-content-font-size-active
 * --------------------------------------------------------------- */

.sns-candidate-content__main .sns-content.entry-content,
.sns-candidate-content__main .sns-content.entry-content p,
.sns-candidate-content__main .sns-content.entry-content li {

    font-size:
        var(--sns-content-font-size-active) !important;

    line-height: 1.7 !important;
}



/* ---------------------------------------------------------------
 * ZVÝRAZNENÝ TEXT VNÚTRI REDAKČNÉHO OBSAHU
 *
 * POZOR:
 * Toto NIE JE .sns-candidate-tagline.
 *
 * Ide o:
 * .sns-tagline
 *
 * Tento text má zatiaľ samostatnú veľkosť.
 * --------------------------------------------------------------- */

.sns-candidate-content__main
.sns-content.entry-content
.sns-tagline,

.sns-candidate-content__main
.sns-content.entry-content
.sns-tagline em {

    font-size: 21px !important;

    line-height: 1.65 !important;
}



/* ---------------------------------------------------------------
 * PRAVÝ PANEL
 * --------------------------------------------------------------- */

.sns-candidate-content__side .sns-side-card p {

    font-size: 12px !important;

    line-height: 1.6 !important;
}



/* ---------------------------------------------------------------
 * MENO KANDIDÁTA
 * --------------------------------------------------------------- */

.sns-candidate-name {

    font-weight: 700 !important;

    color: #fff !important;
}



/* ---------------------------------------------------------------
 * VEK / POVOLANIE / MESTSKÁ ČASŤ
 * --------------------------------------------------------------- */

.sns-candidate-quickfacts {

    display: flex !important;

    flex-direction: column !important;

    gap: 6px !important;
}



.sns-candidate-quickfacts li,
.sns-candidate-quickfacts li strong {

    color: #fff !important;
}



.sns-candidate-quickfacts li {

    font-size: 13px !important;
}



/* ---------------------------------------------------------------
 * ROLA KANDIDÁTA
 * --------------------------------------------------------------- */

.sns-candidate-role,
.sns-candidate-role--mayor {

    background: var(--sns-gold) !important;

    color: var(--sns-navy-print) !important;
}



/* ---------------------------------------------------------------
 * ĎALŠÍ ČLENOVIA TÍMU
 * --------------------------------------------------------------- */

.sns-team-strip__grid .sns-member-card__photo {

    aspect-ratio: 4 / 5;
}



/* ===============================================================
 * 4. ZLATÁ V AKCENTOCH
 * =============================================================== */

.sns-pledge-card::before {

    background: linear-gradient(
        90deg,
        var(--sns-navy),
        var(--sns-gold)
    );
}



.sns-pledge-card:hover::before {

    background: linear-gradient(
        90deg,
        var(--sns-gold),
        var(--sns-navy)
    );
}



.sns-hero__verbs em::after,
.sns-hero__title em::after {

    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--sns-gold) 18%,
        var(--sns-gold) 82%,
        transparent 100%
    );
}



/* ===============================================================
 * 5. BEŽNÝ REDAKČNÝ TEXT Z ADMINISTRÁCIE
 *
 * Veľkosť:
 *
 * --sns-content-font-size
 * --sns-content-font-size-mobile
 *
 * Menu, tlačidlá, footer, karty ani pomocné texty
 * sa tým nemajú meniť.
 * =============================================================== */



/* ---------------------------------------------------------------
 * GUTENBERG / KLASICKÝ OBSAH
 *
 * .sns-lead je zámerne vylúčený.
 * Jeho veľkosť rieši sns-hotfix-1.css cez vlastnú premennú.
 * --------------------------------------------------------------- */

html body.sns-theme
.sns-content.entry-content:not(.sns-100-days-content)
p:not(.sns-tagline):not(.sns-lead),

html body.sns-theme
.entry-content:not(.sns-100-days-content)
p:not(.sns-tagline):not(.sns-lead),

html body.sns-theme
.sns-article-content
p:not(.sns-lead) {

    font-size:
        var(--sns-content-font-size-active) !important;

    line-height: 1.7 !important;
}



/* ---------------------------------------------------------------
 * ZOZNAMY
 * --------------------------------------------------------------- */

html body.sns-theme
.sns-content.entry-content:not(.sns-100-days-content)
li,

html body.sns-theme
.entry-content:not(.sns-100-days-content)
li,

html body.sns-theme
.sns-article-content
li {

    font-size:
        var(--sns-content-font-size-active) !important;

    line-height: 1.7 !important;
}



/* ---------------------------------------------------------------
 * WPBAKERY TEXTOVÉ BLOKY
 *
 * .sns-lead je aj tu zámerne vylúčený.
 * --------------------------------------------------------------- */

html body.sns-theme
.wpb_text_column
.wpb_wrapper > p:not(.sns-lead),

html body.sns-theme
.wpb_text_column
.wpb_wrapper > ul > li,

html body.sns-theme
.wpb_text_column
.wpb_wrapper > ol > li {

    font-size:
        var(--sns-content-font-size-active) !important;

    line-height: 1.7 !important;
}



/* ===============================================================
 * 6. SNS LEAD
 *
 * POZOR:
 *
 * Samotný komponent .sns-lead je definovaný v:
 *
 * assets/css/sns-hotfix-1.css
 *
 * kde používa:
 *
 * var(--sns-lead-font-size-active)
 *
 * Jeho veľkosť preto MENÍŠ IBA hore v tomto súbore:
 *
 * --sns-lead-font-size
 * --sns-lead-font-size-mobile
 *
 * Tu už font-size druhýkrát nedefinujeme.
 * =============================================================== */



/* ===============================================================
 * 7. HERO SUB
 *
 * POZOR:
 *
 * Samotný komponent .sns-hero__sub je definovaný v:
 *
 * assets/css/sns-hotfix-1.css
 *
 * kde používa:
 *
 * var(--sns-hero-sub-font-size-active)
 *
 * Jeho veľkosť preto MENÍŠ IBA hore v tomto súbore:
 *
 * --sns-hero-sub-font-size-pc
 * --sns-hero-sub-font-size-mobile
 *
 * Tu už font-size druhýkrát nedefinujeme.
 * =============================================================== */



/* ===============================================================
 * TECHNICKÉ OPRAVY
 * =============================================================== */



/* Skip-link nesmie presahovať nad hlavičku modrým pásikom. */

.sns-skip-link:not(:focus) {

    top: -120px;
}



/* Preloader zo šablóny len zdržuje prvé zobrazenie. */

#preloader,
.preloader {

    display: none !important;
}



/* ===============================================================
 * DOČASNÉ ROZLOŽENIE FOOTERU BEZ STĹPCA „PROGRAM V DETAILE“
 *
 * Triedu pridáva footer.php iba vtedy, keď je volebný program
 * dočasne skrytý. Po zverejnení sa footer automaticky vráti
 * na pôvodné 4 stĺpce zo sns-utilities.css.
 * =============================================================== */

.sns-site-footer .sns-container.sns-site-footer__grid--program-hidden {

    grid-template-columns: 1.4fr 1fr 1fr;
}



@media (max-width: 768px) {

    .sns-site-footer .sns-container.sns-site-footer__grid--program-hidden {

        grid-template-columns: 1fr 1fr;
    }
}



@media (max-width: 480px) {

    .sns-site-footer .sns-container.sns-site-footer__grid--program-hidden {

        grid-template-columns: 1fr;
    }
}



/* ===============================================================
 * CONTACT FORM 7 — STAVOVÉ SPRÁVY
 *
 * 🟢 ÚSPEŠNÉ ODOSLANIE = ZELENÁ
 * 🔴 CHYBA / NEPLATNÉ ÚDAJE = ČERVENÁ
 *
 * Potvrdzovacia správa zostáva bez rámčeka.
 * =============================================================== */

html body.sns-theme
.wpcf7 form .wpcf7-response-output {

    border: 0 !important;

    padding: 0 !important;

    margin: 16px 0 0 !important;

    text-align: center !important;

    font-weight: 600 !important;
}



/* 🟢 SPRÁVA BOLA ÚSPEŠNE ODOSLANÁ */

html body.sns-theme
.wpcf7 form.sent .wpcf7-response-output {

    color: #5BA748 !important;
}



/* 🔴 CHYBA / NEÚSPEŠNÉ ODOSLANIE */

html body.sns-theme
.wpcf7 form.invalid .wpcf7-response-output,

html body.sns-theme
.wpcf7 form.unaccepted .wpcf7-response-output,

html body.sns-theme
.wpcf7 form.spam .wpcf7-response-output,

html body.sns-theme
.wpcf7 form.failed .wpcf7-response-output,

html body.sns-theme
.wpcf7 form.aborted .wpcf7-response-output,

html body.sns-theme
.wpcf7 form.payment-required .wpcf7-response-output {

    color: #d63638 !important;
}