/* =========================================================
   NAGLOWEK WITRYNY: arkusz wspolny dla WSZYSTKICH sekcji.

   Do 14.09.2026 te regulki stały w css/wlasny-agencja.css (linie 1132-1486),
   a ten arkusz index.php wpinał TYLKO na stronach agencji. Skorka `header-main`
   przestala byc wlasnoscia jednej sekcji (o skorce decyduje panel, klucz
   settings.skin), wiec regulki musza byc na kazdej stronie. Nie dalo sie tego
   zalatwic wpieciem wlasny-agencja.css wszedzie: ten plik niesie takze @font-face
   rodziny Inter, wlasne `body` i `.container-xl { max-width: 1560px }`, ktore
   przestawilyby cala witryne.

   Arkusz laduje sie w index.php ZAWSZE, tuz po css/wlasny.css. Zmienne kolorow
   pochodza z css/tokens.css (ladowanego jeszcze wczesniej), rodzina Inter jest
   deklarowana w wlasny-agencja.css i tam, gdzie jej nie ma, dziala zapas
   z listy krojow.
   ========================================================= */
/* =========================================================
   HEADER : galeryjna nawigacja (Pentagram / MoMA / Cooper Hewitt style)
   wersaliki, tracking 0.12em, font-size 12px, brak ramek/teł
   logo po lewej, menu po prawej, jeden cienki pas
   fiolet Fengo #40405a jako jedyny akcent koloru
   ========================================================= */

/* === Main header (logo + nav) === */
.header-main {
    background: #fff;
    padding: 0;
}
.header-main-container {
    position: relative;
}
.header-main-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 100px;
}
.header-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}
.header-logo img {
    display: block;
    width: 150px;
    height: auto;
}

/* === Desktop nav (>= 992px) === */
@media (min-width: 992px) {
    .header-toggler { display: none; }

    .header-nav {
        flex: 1 1 auto;
        display: flex;
        justify-content: flex-end;
    }
    .header-nav-list {
        display: flex;
        align-items: center;
        gap: 30px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .header-nav-lang { margin-left: 6px; }
    .header-dropdown-lang { min-width: 160px; }

    .header-nav-item {
        position: relative;
    }
    .header-mobile-lang-row { display: none; }

    .header-nav-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: 'Inter', 'Geist', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #1a1a1a;
        text-decoration: none;
        padding: 8px 0 6px;
        cursor: pointer;
        background: transparent;
        border: 0;
        border-bottom: 1px solid transparent;
        position: relative;
        transition: color 200ms ease, border-color 200ms ease;
    }
    .header-nav-link:hover,
    .header-nav-link:focus-visible {
        color: var(--surface-700, #40405a);
        outline: 0;
    }
    /* Active state : cienkie podkreślenie 1px w fiolecie Fengo */
    .header-nav-link.is-active {
        border-bottom-color: var(--surface-700, #40405a);
    }
    /* Chevron dla dropdown : minimalny SVG */
    .header-nav-link.has-dropdown::after {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-left: -2px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%231a1a1a' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        transition: opacity 200ms ease;
    }
    .header-nav-link.has-dropdown:hover::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%2340405a' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    }

    /* Dropdown panel : biała ramka z cienkim cieniem, fade-in */
    .header-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%) translateY(-4px);
        background: #ffffff;
        border: 1px solid #eee;
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        padding: 16px 0;
        min-width: 220px;
        list-style: none;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
        z-index: 1040;
    }
    .header-nav-item:hover .header-dropdown,
    .header-nav-item:focus-within .header-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
    /* Pozycje wewnątrz dropdownu : normalna typografia, NIE wersaliki */
    .header-dropdown a {
        display: block;
        padding: 7px 24px;
        font-family: 'Inter', 'Geist', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        transition: color 200ms ease;
    }
    .header-dropdown a:hover {
        color: var(--surface-700, #40405a);
    }
    .header-dropdown a.is-accent {
        color: var(--surface-700, #40405a);
    }
    .header-dropdown a.is-hub {
        font-weight: 700;
    }
    /* Aktywny język w dropdownie języków : cienkie podkreślenie fioletem */
    .header-dropdown-lang a.is-active-lang {
        color: var(--surface-700, #40405a);
        text-decoration: underline;
        text-decoration-color: var(--surface-700, #40405a);
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
    }
}

/* === Mobile (< 992px): hamburger + fullscreen overlay === */
@media (max-width: 991.98px) {
    .header-main {
        padding: 0;
    }
    .header-main-inner {
        gap: 16px;
        min-height: 72px;
    }
    .header-logo img {
        width: 92px;
    }

    .header-toggler {
        background: transparent;
        border: 0;
        padding: 8px;
        cursor: pointer;
        color: #1a1a1a;
        z-index: 1100;
        position: relative;
    }
    .header-toggler-icon {
        display: block;
        width: 22px;
        height: 18px;
        position: relative;
    }
    .header-toggler-icon::before,
    .header-toggler-icon::after,
    .header-toggler-icon span {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 1.5px;
        background: #1a1a1a;
        transition: transform 250ms ease, opacity 200ms ease, top 250ms ease;
    }
    .header-toggler-icon::before { top: 0; }
    .header-toggler-icon span    { top: 50%; transform: translateY(-50%); display: block; }
    .header-toggler-icon::after  { top: calc(100% - 1.5px); }

    .header-toggler.is-open .header-toggler-icon::before { top: 50%; transform: translateY(-50%) rotate(45deg); }
    .header-toggler.is-open .header-toggler-icon::after  { top: 50%; transform: translateY(-50%) rotate(-45deg); }
    .header-toggler.is-open .header-toggler-icon span    { opacity: 0; }

    .header-nav {
        position: fixed;
        inset: 0;
        background: #ffffff;
        z-index: 1099;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        padding: 88px 24px 48px;
        transition: opacity 200ms ease, visibility 200ms;
    }
    .header-nav.is-open {
        opacity: 1;
        visibility: visible;
    }
    .header-nav-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 26px;
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
        width: 100%;
        max-width: 480px;
    }
    .header-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .header-nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-family: 'Inter', 'Geist', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #1a1a1a;
        text-decoration: none;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 0;
    }
    .header-nav-link.is-active {
        color: var(--surface-700, #40405a);
    }
    .header-nav-link.has-dropdown::after {
        content: '';
        display: inline-block;
        width: 11px;
        height: 11px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%231a1a1a' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 200ms ease;
    }
    .header-nav-item.is-open .header-nav-link.has-dropdown::after {
        transform: rotate(180deg);
    }
    .header-dropdown {
        list-style: none;
        padding: 14px 0 6px;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 280ms ease;
        text-align: center;
    }
    .header-nav-item.is-open .header-dropdown {
        max-height: 600px;
    }
    .header-dropdown a {
        display: block;
        padding: 7px 0;
        font-family: 'Inter', 'Geist', 'Inter Fallback', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #666;
        text-decoration: none;
        text-transform: none;
        letter-spacing: 0;
    }
    .header-dropdown a.is-accent {
        color: var(--surface-700, #40405a);
    }
    .header-dropdown a.is-hub {
        font-weight: 700;
    }
    .header-dropdown-lang a.is-active-lang {
        color: var(--surface-700, #40405a);
        font-weight: 500;
    }

    /* Ukryj desktop language item (chevron PL) na mobile : używamy poziomego paska na dole */
    .header-nav-lang { display: none; }

    /* Poziomy pasek języków na dole overlay */
    .header-mobile-lang-row {
        margin-top: 18px;
        padding-top: 24px;
        border-top: 1px solid #eee;
        width: 100%;
        max-width: 320px;
        display: flex;
        justify-content: center;
    }
    .header-mobile-lang {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-family: 'Inter', 'Geist', 'Inter Fallback', sans-serif;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }
    .header-mobile-lang a {
        color: #1a1a1a;
        text-decoration: none;
        transition: color 200ms ease;
    }
    .header-mobile-lang a.is-active {
        color: var(--surface-700, #40405a);
    }
    .header-mobile-lang a:hover {
        color: var(--surface-700, #40405a);
    }
    .header-mobile-lang .sep {
        color: #ccc;
    }

    /* Body scroll lock when overlay open */
    body.has-nav-open {
        overflow: hidden;
    }
}

/* =========================================================
   Regulki, ktorych w przeniesionym bloku nie bylo, bo `.header-main`
   nie istnialo jeszcze, gdy pisano css/wlasny.css.
   ========================================================= */

/* wlasny.css:7707 chowa przy druku `.navbar` i `.footer`. Naglowek agencji nie jest
   `.navbar`, wiec dotad drukowal sie razem z trescia strony. */
@media print {
    .header-main {
        display: none !important;
    }
}

/* wlasny.css:7779 daje `.navbar` i `.footer` wciecie na wyswietlacz z wycieciem.
   Minimum 0px zamiast 15px, bo `.header-main` ma dzis `padding: 0` i kazda inna
   wartosc przesunelaby naglowek agencji na pulpicie.
   Nakladka menu na telefonie jest `position: fixed`, wiec omija wciecie ustawione
   na `body` i potrzebuje wlasnego, z dzisiejszym marginesem 24px jako minimum. */
@supports (padding: max(0px)) {
    .header-main {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }

    @media (max-width: 991.98px) {
        .header-nav {
            padding-left: max(24px, env(safe-area-inset-left));
            padding-right: max(24px, env(safe-area-inset-right));
        }
    }
}

/* Szerszy kontener naglowka. Na stronach agencji ta sama wartosc przychodzi z
   `.container-xl` w wlasny-agencja.css; tutaj jest po to, zeby skorka `header-main`
   wygladala tak samo, gdy panel wlaczy ja w sekcji bez tamtego arkusza. */
.header-main-container {
    max-width: 1560px;
}

/* =========================================================
   B12 (audyt 15.09.2026): styl pozycji GLOWNEJ, wspolny dla obu skorek.

   Do 15.09.2026 style `button`, `accent` i `hub` dzialaly tylko w dzieciach list
   rozwijanych. Skorka `navbar` znala na poziomie glownym wylacznie `button`,
   a skorka `header-main` nie znala zadnego: galaz `else` wypisywala goly tekst.
   Teraz obie skorki wypisuja te same klasy, wiec i regulki sa jedne.
   `button` nie potrzebuje wpisu: plakietka `.tag-rekrutacja` stoi w wlasny.css.
   ========================================================= */
.header-nav-list > .header-nav-item > .header-nav-link.is-accent,
.navbar-nav > .nav-item > .nav-link.is-accent {
    color: var(--surface-700, #40405a);
}

.header-nav-list > .header-nav-item > .header-nav-link.is-hub,
.navbar-nav > .nav-item > .nav-link.is-hub {
    font-weight: 700;
}