/* Úpravy hlavičky – kusdobreho. Patří k tomu vlastni-javascript.js. */

/* @import musí zůstat na prvním řádku, jinak ho prohlížeč ignoruje. */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700&display=swap');

.header-contact {
    display: none;
}


/* 1. Informační proužek (černá lišta)
      Text se zadává v administraci → Další nastavení → Informační proužek. */

.site-msg.information {
    background-color: #111111;
    opacity: 1;
    box-shadow: none;
    font-family: "Red Hat Display", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.site-msg.information,
.site-msg.information a {
    color: #ffffff;
}

.site-msg.information a {
    text-decoration: none;
}

.site-msg.information a:hover,
.site-msg.information a:focus-visible {
    color: #ffffff;
    text-decoration: underline;
}

/* Mobil – proužek zůstává dole, jen přes celou šířku. */
@media (max-width: 767px) {
    .site-msg.information {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        border-radius: 0;
        padding: 10px 40px 10px 16px;
    }

    .site-msg.information .close:before {
        color: #ffffff;
    }
}

/* Desktop – z plovoucí bubliny děláme statický pruh nahoře. */
@media (min-width: 768px) {
    .site-msg.information {
        position: static;
        width: 100%;
        max-width: none;
        padding: 9px 16px;
    }

    .site-msg.information .container {
        width: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .site-msg.information .text {
        padding-right: 0;
    }

    .site-msg.information .close {
        display: none;
    }
}


/* 2. Horní lišta – skrývá se z ní jen telefon, ten je v hlavičce (bod 3). */

@media (min-width: 768px) {
    .top-navigation-bar .top-navigation-contacts {
        display: none;
    }
}


/* 3. Hlavička a menu – jen desktop. */

@media (min-width: 768px) {

    /* Větší logo (60 → 80 px). */
    #header .site-name a img {
        max-height: 80px;
    }

    /* Menu lišta bez béžové. */
    .navigation-in {
        background-color: transparent;
        border-bottom: 1px solid #ececec;
    }

    .navigation-in > ul > li {
        border-left-style: none;
        border-right-style: none;
    }

    .navigation-in > ul > li > a {
        color: #1f1f1f;
        font-family: "Red Hat Display", sans-serif;
        font-size: 17px;
        font-weight: 500;
    }

    .navigation-in > ul > li.exp > a,
    .navigation-in > ul > li > a:hover,
    .navigation-in > ul > li > a:focus-visible {
        background-color: transparent;
        color: #a94743;
    }

    /* Kontakt v hlavičce. Šířky sloupců .header-top se musí přepočítat,
       protože přidáváme čtvrtý. */
    .header-top > .site-name-wrapper  { flex-basis: 22%; }
    .header-top > .search             { flex-basis: 34%; }
    .header-top > .header-contact     { flex-basis: 20%; }
    .header-top > .navigation-buttons { flex-basis: 24%; }

    .header-contact {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        text-align: right;
        padding-right: 25px;
    }

    /* "Zákaznická podpora:" */
    .header-contact > strong {
        display: none;
    }

    .header-contact a.project-phone {
        font-family: "Red Hat Display", sans-serif;
        font-size: 17px;
        line-height: 1.3;
        color: #1f1f1f;
        text-decoration: none;
        white-space: nowrap;
    }

    .header-contact a.project-phone > span {
        display: inline;
    }

    .header-contact__hours {
        font-family: "Red Hat Display", sans-serif;
        font-size: 13px;
        color: #767676;
        white-space: nowrap;
    }
}