/*
 * Doplňkové úpravy nad rámec původního Webflow CSS.
 *
 * Načítá se AŽ ZA brainbreakfast.css, takže původní styly zůstávají nedotčené
 * a lze je kdykoli znovu stáhnout z Webflow, aniž by se tyto úpravy ztratily.
 *
 * ZDROJOVÝ SOUBOR. Do web/assets/css/ ho kopíruje nastroje/stahnout.py.
 */

/* ==========================================================================
   Hlavička na mobilu
   --------------------------------------------------------------------------
   Původní stav (stejný i na Webflow): .navbar-wrapper je nezalamovací flex
   řádek, ve kterém logo pod 480 px zabírá 74 % šířky. Na zbylých 26 % se měly
   vejít čtyři odkazy, takže se zmáčkly na jednu nečitelnou řádku a přetekly
   z obrazovky. Odkazy navíc nemají v HTML žádnou třídu, takže se vykreslovaly
   jako výchozí červené podtržené odkazy.

   Řešení: logo dostane vlastní řádek v rozumné velikosti a odkazy se pod ním
   zalomí do vycentrované řádky. Vzhled odkazů vychází z tlačítek
   .f-button-secondary (černý text, prostrkání 1 px, bez podtržení).
   ========================================================================== */

@media screen and (max-width: 767px) {
    .navbar-logo-left-container.shadow-three {
        padding: 16px;
    }

    .navbar-wrapper,
    .navbar-wrapper-home {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding-left: 0;
        padding-right: 0;
        grid-column-gap: 20px;
        grid-row-gap: 14px;
        column-gap: 20px;
        row-gap: 14px;
    }

    /* Logo dostane vlastní řádek, aby se odkazy zalomily pod něj.
       Rámeček je přes celou šířku (flex-basis: 100 %), ale samotný obrázek
       drží object-fit v původním poměru stran a vycentrovaný - proto se
       nesmí použít width/max-width, ty by flex-basis stejně přebil. */
    .navbar-wrapper .image-2,
    .navbar-wrapper-home .image-2 {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        height: 56px;
        object-fit: contain;
        object-position: center;
    }

    /* navigační odkazy na podstránkách (Firmy / Knihovny / Školy / Archiv) */
    .navbar-wrapper > a {
        color: var(--black);
        letter-spacing: 1px;
        border-bottom: 2px solid transparent;
        padding: 4px 0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        text-decoration: none;
    }

    .navbar-wrapper > a:hover {
        color: var(--redbutton--900);
    }

    /* .w--current má ve Webflow výchozí modrou, přebijeme ji značkovou červenou */
    .navbar-wrapper > a.w--current {
        color: var(--redbutton--900);
        border-bottom-color: var(--redbutton--900);
    }

    /* tlačítka v hlavičce úvodní stránky */
    .navbar-wrapper-home .flex {
        grid-column-gap: 12px;
        column-gap: 12px;
        justify-content: center;
        margin-left: 0;
    }

    .navbar-wrapper-home .f-button-secondary {
        min-height: 42px;
        padding: 10px 24px;
        font-size: 15px;
    }
}