/* =================================================================
   ŠTÝLY PRE DYNAMICKÚ PÄTIČKU (FOOTER BUILDER)
   ================================================================= */

/* 1. Definícia riadku (Flex kontajner)
----------------------------------------------------------------- */
.footer-row {
    display: flex;            /* Kľúčová vlastnosť: zapne Flexbox */
    flex-wrap: wrap;          /* Umožní zalamovanie blokov na menších obrazovkách */
    justify-content: space-between; /* Rozloží bloky rovnomerne od seba */
    gap: 20px;                /* Vytvorí medzeru medzi blokmi */
    padding: 20px 0;          /* Pridá horné a dolné odsadenie pre každý riadok */
    border-bottom: 1px solid #444; /* Jemná čiara medzi riadkami pre vizuálne oddelenie */
}

.footer-row:last-child {
    border-bottom: none;      /* Posledný riadok nebude mať čiaru pod sebou */
}

footer {
    background-color: var(--footer-background-color, #1a1a1a); /* Použije premennú z DB, alebo tmavosivú ako záložnú */
    color: #ccc; /* Základná farba textu v pätičke */
    padding: 20px 0;
}

/* 2. Definícia bloku (Flex položka)
----------------------------------------------------------------- */
.footer-block {
    flex-grow: 1;             /* Umožní bloku roztiahnuť sa a vyplniť voľné miesto */
    flex-basis: 200px;        /* Určuje základnú šírku bloku pred roztiahnutím (môžeš zmeniť) */
}


/* 3. Špecifické štýly pre blok "Stĺpec s odkazmi"
----------------------------------------------------------------- */
.footer-menu-links {
    display: flex;            /* Aj samotný blok s odkazmi bude flex kontajner */
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;              /* Zaberá celú šírku, aby sa jeho vnútorné stĺpce mohli rozložiť */
}

.footer-column {
    flex-grow: 1;
    flex-basis: 150px;        /* Základná šírka pre jeden stĺpček s odkazmi */
}

.footer-column h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #fff; /* Príklad farby nadpisu, uprav podľa seba */
    font-size: 1.1em;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li {
    margin-bottom: 8px;
}

.footer-column ul li a {
    color: #ccc; /* Príklad farby odkazov, uprav podľa seba */
    text-decoration: none;
}

.footer-column ul li a:hover {
    color: #fff;
    text-decoration: underline;
}


/* 4. Responzivita pre mobilné zariadenia
----------------------------------------------------------------- */
@media (max-width: 768px) {
    .footer-row {
        flex-direction: column; /* Zmení smer na stĺpec - bloky pôjdu pod seba */
        align-items: flex-start;/* Zarovná bloky na začiatok */
    }
}