/* =========================================================
   PITA CHLÉB – úpravy titulní stránky
   Nahrává se do: /user/documents/upload/homepage.css
   Připojit přes <link> AŽ ZA stávající inline <style> bloky.
   ========================================================= */


/* =========================================================
   1) JEDNOTNÉ NADPISY BLOKŮ (stejný font jako NAŠE PRODUKTY)
   Týká se: NAŠE PRODUKTY, "Naše výrobky najdete u našich
   obchodních partnerů", "Co o nás říkají zákazníci".
   Třídu .pita-section-title přidává homepage.js.
   ========================================================= */
.pita-section-title {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: #3b2a1a !important;
    text-align: center !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
}

/* Inline prvky uvnitř nadpisu (např. <strong>, <span>, <a>)
   převezmou stejný vzhled, ať se nadpis nikde nerozbije. */
.pita-section-title strong,
.pita-section-title span,
.pita-section-title a {
    font-size: inherit !important;
    font-weight: inherit !important;
    text-transform: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    margin: 0 !important;
}

/* NAŠE PRODUKTY jako proklik na kategorii Pita chléb */
.pita-section-title a.pita-section-title-link {
    text-decoration: none !important;
    cursor: pointer;
    transition: color 0.15s ease;
}
.pita-section-title a.pita-section-title-link:hover {
    color: #4b2500 !important;
    text-decoration: underline !important;
}

/* Podnadpisy skupin produktů (Pita chléb / Pomazánky) –
   zachování dosavadního vzhledu, ať lze smazat původní skript. */
.homepage-products-heading-4,
.homepage-products-heading-7 {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
}

@media screen and (max-width: 768px) {
    .pita-section-title { font-size: 22px !important; }
}


/* =========================================================
   2) JEDNOTNÁ HORNÍ NAVIGAČNÍ LIŠTA – jen desktop
   Stejná lišta na titulce i na ostatních stránkách.
   Obsah lišty vytváří homepage.js (klonuje hlavní menu).
   Na titulce je lišta přes hero (fixed), na ostatních
   stránkách je „sticky" a nativní hlavička se skryje.
   Mobil (<=768px) zůstává na nativní hlavičce s hamburgerem.
   ========================================================= */
.pita-topbar { display: none; }

/* Hamburger (tlačítko) – ve výchozím stavu skrytý, ukáže se jen na mobilu. */
.pita-topbar__toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.pita-topbar__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: #f6f2ec;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.pita-topbar.is-open .pita-topbar__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pita-topbar.is-open .pita-topbar__toggle span:nth-child(2) { opacity: 0; }
.pita-topbar.is-open .pita-topbar__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media screen and (min-width: 769px) {

    .pita-topbar {
        display: flex;
        align-items: center;
        gap: 32px;
        z-index: 10000;
        height: 92px;
        padding: 0 34px;
        background: #3b2a1a;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    }

    /* Titulka: lišta leží přes úvodní fotografii. */
    body.type-index .pita-topbar {
        position: fixed;
        top: 0; left: 0; right: 0;
        background: rgba(59, 42, 26, 0.92);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    /* Ostatní stránky: lišta v toku (odsune obsah). */
    body:not(.type-index) .pita-topbar {
        position: sticky;
        top: 0;
    }
    /* Nativní hlavičku necháme (kvůli vyhledávání a košíku),
       ale skryjeme její SPODNÍ řádek s menu – menu je teď v liště. */
    html body:not(.type-index) #header .header-bottom { display: none !important; }
    /* Košík zůstává v nativní hlavičce, takže z lišty ho na
       podstránkách odebereme (na titulce zůstává, tam nativní hlavička není). */
    body:not(.type-index) .pita-topbar__cart { display: none !important; }

    .pita-topbar__logo img {
        height: 70px;
        width: auto;
        display: block;
    }

    .pita-topbar__menu {
        display: flex;
        align-items: center;
        gap: 26px;
        margin: 0 auto 0 8px;   /* odkazy doleva, košík odsune doprava */
        padding: 0;
        list-style: none;
    }

    .pita-topbar__menu a {
        color: #f6f2ec;
        text-decoration: none;
        /* Stejný patkový font jako nadpis NAŠE PRODUKTY (Noto Serif). */
        font-family: var(--template-headings-font, "Noto Serif"), Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: 19px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        white-space: nowrap;
        transition: color 0.15s ease;
    }
    .pita-topbar__menu a:hover,
    .pita-topbar__menu a.is-active { color: #e6c79c; }

    .pita-topbar__cart {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #f6f2ec;
        text-decoration: none;
        font-family: var(--template-headings-font, "Noto Serif"), Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: 18px;
        white-space: nowrap;
        transition: color 0.15s ease;
    }
    .pita-topbar__cart:hover { color: #e6c79c; }

    /* Počet kusů v košíku – malý odznak. */
    .pita-topbar__cart-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 999px;
        background: #e6c79c;
        color: #3b2a1a;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    /* Logo v rohu nahrazuje logo v liště – ať se nepřekrývají. */
    body.type-index .custom-logo-corner { display: none !important; }
}

/* ---------------------------------------------------------
   MOBIL – lišta s vlastním hamburgerem na VŠECH stránkách.
   Na titulce leží přes hero (fixed), na ostatních stránkách
   je „sticky" a nativní hlavička se skryje (ať to není dvojité).
   --------------------------------------------------------- */
@media screen and (max-width: 768px) {

    .pita-topbar {
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 10000;
        height: 60px;
        padding: 0 14px;
        background: rgba(59, 42, 26, 0.95);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    }

    /* Titulka: lišta přes úvodní fotografii. */
    body.type-index .pita-topbar {
        position: fixed;
        top: 0; left: 0; right: 0;
    }
    /* Ostatní stránky: lišta v toku, nativní hlavička pryč. */
    body:not(.type-index) .pita-topbar {
        position: sticky;
        top: 0;
    }
    html body:not(.type-index) #header { display: none !important; }
    /* Motiv má nad obsahem velké odsazení (počítal s fixní mobilní
       hlavičkou) – po jejím skrytí vzniká velká mezera. Vynulujeme ji
       na celém řetězci kontejnerů nad bannerem a necháme jen 12 px. */
    html body:not(.type-index) #content-wrapper,
    html body:not(.type-index) .content-wrapper,
    html body:not(.type-index) .content-wrapper-in,
    html body:not(.type-index) #content,
    html body:not(.type-index) .content-inner {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    html body:not(.type-index) .pita-page-hero { margin-top: 12px !important; }

    .pita-topbar__logo img {
        height: 44px;
        width: auto;
        display: block;
    }

    /* Hamburger viditelný, košík hned vedle něj vpravo. */
    .pita-topbar__toggle { display: inline-flex; order: 3; }
    .pita-topbar__cart {
        order: 2;
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #f6f2ec;
        text-decoration: none;
        font-family: var(--template-headings-font, "Noto Serif"), Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: 15px;
        white-space: nowrap;
    }

    /* Menu jako rozbalovací panel pod lištou. */
    .pita-topbar__menu {
        display: none;
        position: absolute;
        top: 60px; left: 0; right: 0;
        flex-direction: column;
        gap: 0;
        margin: 0;
        padding: 6px 0;
        list-style: none;
        background: #3b2a1a;
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
    }
    .pita-topbar.is-open .pita-topbar__menu { display: flex; }

    .pita-topbar__menu li { width: 100%; }
    .pita-topbar__menu a {
        display: block;
        padding: 13px 20px;
        color: #f6f2ec;
        text-decoration: none;
        font-family: var(--template-headings-font, "Noto Serif"), Georgia, "Times New Roman", serif;
        font-weight: 700;
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    .pita-topbar__menu a:hover,
    .pita-topbar__menu a.is-active { color: #e6c79c; }

    /* Počet kusů v košíku – odznak i na mobilu. */
    .pita-topbar__cart-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 999px;
        background: #e6c79c;
        color: #3b2a1a;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }
}


/* =========================================================
   3) OŘÍZNUTÍ ÚVODNÍ FOTOGRAFIE
   Nižší header + background cover/center = fotka se OŘÍZNE
   nahoře i dole (nezmenší se), takže jsou hned vidět produkty.
   html...#header zvyšuje specificitu nad původní pravidla.
   ========================================================= */
html body.type-index #header {
    min-height: 440px !important;
}

@media screen and (max-width: 768px) {
    html body.type-index #header {
        min-height: 300px !important;
        padding: 70px 16px 24px !important;
    }
}

/* Mobil na šířku (landscape) – fotka byla příliš vysoká a text
   zůstával v úzkém pruhu. Header se zkrátí na výšku obsahu. */
@media screen and (max-width: 900px) and (orientation: landscape) {
    html body.type-index #header {
        min-height: 0 !important;
        height: auto !important;
        padding: 60px 16px 22px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    html body.type-index .custom-text-center {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
    }
    html body.type-index .center-title {
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }
    html body.type-index .center-subtitle {
        font-size: 13px !important;
    }
}