/*============================================================================
   03-header.css — header bar, logo, grid layout, ikony, sticky + body offset
============================================================================*/

/* === Header (Divi default + Theme Builder global header) === */

/* Common: bílé pozadí, soft border-bottom, žádný stín */
#main-header,
.site-header {
    background: var(--white) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Sticky offset pro WordPress admin bar (jen přihlášený uživatel).
   Header zůstává pod admin barem na všech viewport šířkách, kde je admin bar.
   Na <=600px WP přepne admin bar na position:absolute (scrolluje s contentem),
   ale my zachováme header na top:46 — vznikne tím 46px prázdný prostor nad headerem
   po odscrollování. To je menší zlo než header schovaný pod admin barem. */
body.admin-bar #main-header,
body.admin-bar .site-header {
    top: var(--adminbar-offset, 32px) !important;
}
@media screen and (max-width: 782px) {
    body.admin-bar #main-header,
    body.admin-bar .site-header {
        top: var(--adminbar-offset, 46px) !important;
    }
}
/* --adminbar-offset počítá assets/js/header-adminbar.js: na <=600px je WP
   lišta position:absolute (odscrolluje), offset se tedy snižuje se scrollY
   až na 0 → header se po odscrollování přilepí k hornímu okraji. */

/* === TB wrap sekce pro shortcode header ===
   V Theme Builderu: Section s CSS Class "site-header-wrap" > Row > Text modul
   s [ok_site_header]. Header uvnitř je position:fixed (vypadne z flow),
   wrap musí mít nulovou výšku, jinak vznikne prázdný pruh nahoře. */
.site-header-wrap.et_pb_section {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
}
.site-header-wrap .et_pb_row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
}
.site-header-wrap .et_pb_module,
.site-header-wrap .et_pb_text {
    margin: 0 !important;
    padding: 0 !important;
}

/* === Header inner — grid layout shortcode headeru [ok_site_header] ===
   Markup: header.site-header > .container.header-inner > logo | nav | header-right
   Hodnoty 1:1 z homepage-mockup-v5.html */
.site-header .header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 48px;
    padding: 20px 0; /* horizontál řeší .container (80 % jako Divi row) — obsah lícuje s footerem */
}

/* === Desktop navigace (.nav-main > ul.nav-list z [ok_main_menu]) === */
.nav-main .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
}
.nav-main .nav-list li { margin: 0; }
.nav-main .nav-list a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base);
    white-space: nowrap;
}
.nav-main .nav-list a:hover {
    background: var(--berry-soft);
    color: var(--ink);
}
.nav-main .nav-list > .current-menu-item > a,
.nav-main .nav-list > .current-menu-ancestor > a,
.nav-main .nav-list > .current_page_item > a {
    background: var(--berry);
    color: #fff;
}

/* === Burger (otevírá drawer) — viditelný jen na mobilu === */
.burger {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ink);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    place-items: center;
    transition: background var(--t-fast);
}
.burger:hover { background: var(--berry-soft); }

/* Mobile: schovat desktop nav, ukázat burger (mockup breakpoint 780) */
@media (max-width: 780px) {
    .nav-main { display: none; }
    .burger { display: grid; }
    .site-header .header-inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
        gap: 20px;
        padding: 12px 0;
    }
}

/* === Logo (brand) === */

/* Wrapper class na Code modul, který obsahuje logo — Divi Code inner musí být flex,
   jinak .logo (inline-flex) má neočekávané chování v některých sloupcových layoutech */
.logo-wrap .et_pb_code_inner {
    display: flex;
}

.logo,
a.logo {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.3rem !important;
    letter-spacing: -.04em !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: var(--ink) !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.logo:hover {
    color: var(--ink) !important;
}
.logo-dot {
    width: 34px;
    height: 34px;
    background: var(--berry);
    border-radius: 50%;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.logo-dot::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--yellow);
    border-radius: 50%;
    bottom: -2px;
    right: -2px;
}

/* === LEGACY (header z Divi modulů — smazat po přechodu na [ok_site_header]) ===
   Site-header Row — CSS grid layout ===
   Sloupce uvnitř row řešíme přes grid (auto | 1fr | auto):
   logo zabere co potřebuje, menu vyplní zbytek, icons+CTA taky auto.
   Šířku row neměníme — dědíme Divi default width:80% + naše global max-width:1320px.
   Padding jen vertikální (14px) pro vzduch nad/pod, horizontální NE (řeší Divi 80%). */
.site-header .et_pb_row,
.site-header > .et_pb_row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 24px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Sloupce v headeru: width auto (grid je sizuje), bez bottom marginu, bez paddingu */
.site-header .et_pb_column {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
}

/* Zarovnání sloupců v gridu */
.site-header .et_pb_column:nth-of-type(1) { justify-self: start; }   /* logo vlevo */
.site-header .et_pb_column:nth-of-type(2) { justify-self: center; }  /* menu uprostřed */
.site-header .et_pb_column:nth-of-type(3) { justify-self: end; }     /* icons+CTA vpravo */

/* Module wrappery uvnitř sloupců — fit content */
.site-header .et_pb_column .et_pb_module {
    margin-bottom: 0 !important;
}

/* Menu modul horizontální centrování položek */
.site-header .et_pb_menu .et-menu {
    justify-content: center;
}

/* Mobile: menší vertikální padding (horizontální nech Divi 80% width).
   Menu modul Divi automaticky přepne na hamburger.
   Premium pill „Premium →" zůstává viditelný — column auto width si poradí. */
@media (max-width: 780px) {
    .site-header .et_pb_row,
    .site-header > .et_pb_row {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        gap: 14px !important;
    }
}

/* === Pill button text/icon slots ===
   Default desktop: text visible, icon hidden.
   Compact mode (<=600px) níže přehodí.  */
.pill-btn__text { display: inline; }
.pill-btn__icon { display: none; }
.pill-btn__icon svg { display: block; }

@media (max-width: 600px) {
    /* Logo dot only — text "omalovánky" schovat */
    .site-header .logo,
    .site-header a.logo {
        font-size: 0 !important;
        gap: 0 !important;
    }

    /* Premium pill jako ikonová verze: kruh 40×40 s hvězdou */
    .site-header .header-right .pill-btn,
    .site-header .header-right a.pill-btn {
        padding: 0 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        flex-shrink: 0;
    }
    .site-header .header-right .pill-btn__text {
        display: none !important;
    }
    .site-header .header-right .pill-btn__icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        color: #fff;
    }
    .site-header .header-right .pill-btn__icon svg {
        width: 18px;
        height: 18px;
    }

    /* Menší gap mezi ikonami na malých viewportech */
    .site-header .header-right {
        gap: 4px;
    }
    .site-header .et_pb_row,
    .site-header > .et_pb_row {
        gap: 12px !important;
    }
}

/* Velmi malé telefony — schovat srdíčko (oblíbené) ať se vše vejde */
@media (max-width: 380px) {
    .site-header .header-icon-btn[title="Oblíbené"] {
        display: none !important;
    }
}

/* Header inner — pokud používáš Code modul s .header-right strukturou */
.header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.header-icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ink);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    transition: background var(--t-fast);
    position: relative;
    text-decoration: none;
}
.header-icon-btn:hover {
    background: var(--berry-soft);
    color: var(--ink);
}
.header-icon-btn .badge {
    position: absolute;
    top: 6px; right: 6px;
    background: var(--berry);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 8px;
    line-height: 1;
    letter-spacing: 0;
}

/* Site-header (Theme Builder section s naší classou) sticky + body offset */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--z-header);
}

/* Divi TB layout wrapper .et-l--header je static a uvězní z-index fixed
   headeru uvnitř — obsah stránky se pak maluje PŘES header (skill quirk).
   Fix: zvednout celý wrapper. */
.et-l--header {
    position: relative;
    z-index: var(--z-header);
}
/* Body offset aby content nezačínal pod fixed headerem */
body {
    padding-top: 74px; /* desktop header height */
}
@media (max-width: 780px) {
    body {
        padding-top: 64px; /* mobile header height */
    }
}
/* Když je admin bar viditelný, body už je posunutý WP-CSS o jeho výšku — nepotřebujeme přidávat */