/* =========================================================
   HEADER — fa háttér + overlay + középre tett logó
   - A header fix magasságú (nem nő meg)
   - A logó tetszőlegesen nagyítható (lefelé lóg túl)
   - A logó a headerbe felfelé 56px-et belóg (negatív Y)
   ========================================================= */

:root {
    /* Header + háttér */
    --header-h: 88px;
    --hdr-overlay: .22;
    --hdr-img: url("/assets/img/header/header-1440x360.webp");

    /* === LOGÓ KÖNNYŰ ÁLLÍTÁSA ===
       Ezt a kettőt variáld: */
    --logo-h-desktop: 320px;
    /* ← LOGÓ MAGASSÁGA DESKTOPON */
    --logo-h-mobile: 180px;
    /* ← LOGÓ MAGASSÁGA MOBILON  */

    /* A logó függőleges eltolása (negatív = felfelé a headerbe) */
    --logo-shift-y: -56px;
    /* kért érték: maradjon így */

    /* Biztonság: ne mehessen ki extrém szélesre a viewporthoz képest */
    --logo-max-w: 90vw;

    /* Egyéb finomítások */
    --logo-radius: 0px;
    --logo-shadow: none;
    --header-pad-l: 16px;
    --header-pad-r: 18px;
}

html,
body {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ───────── ÜVEGES HEADER (ha NEM .is-wood) ───────── */
.site-header:not(.is-wood) {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.site-header .inner.header {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--header-pad-r) 0 var(--header-pad-l);
}

/* ───────── FÁS, FIXÁLT HEADER ───────── */
#siteHeader.site-header.is-wood {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999 !important;
    height: var(--header-h);
    background-image: var(--hdr-img) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    border-bottom: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        rgba(6, 24, 44, .40) 0 0 0 2px,
        rgba(6, 24, 44, .65) 0 4px 6px -1px,
        rgba(255, 255, 255, .08) 0 1px 0 inset;
    isolation: isolate;
    overflow: visible;
    /* FONTOS: a logó lelóghasson a header alá */
}

/* Háttérréteg + overlay */
#siteHeader.site-header.is-wood .header-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--hdr-img) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
}

#siteHeader.site-header.is-wood .header-bg::after,
#siteHeader.site-header.is-wood::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, var(--hdr-overlay));
    pointer-events: none;
}

/* Belső sor */
.site-header.is-wood .inner.header {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--header-pad-r) 0 var(--header-pad-l);
    overflow: visible;
}

/* ───────── BRAND + LOGÓ — KÖZÉPEN ─────────
     A brand abszolút pozicionált; NEM növeli a header magasságát. */
.site-header .brand {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    /* vízszintes közép */
    z-index: 2;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

.site-header.is-wood .brand {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}

/* A logó tényleges méretezése — CSAK A VÁLTOZÓT ÁLLÍTSD FENT! */
.brand-logo {
    display: block;
    height: var(--logo-h-desktop);
    /* ← EZ határozza meg a méretet desktopon */
    width: auto;
    max-width: var(--logo-max-w);
    transform: translateY(var(--logo-shift-y));
    /* −56px: fel a headerbe, alul lelóg */
    box-shadow: var(--logo-shadow);
    border-radius: var(--logo-radius);
    image-rendering: auto;
}

/* ───────── Nyelvváltó ───────── */
.header-right {
    margin-left: auto;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-header.is-wood .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .25);
}

.site-header.is-wood .lang-switch .lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 10px;
    transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}

.site-header.is-wood .lang-switch .lang:hover {
    transform: translateY(-1px);
    background-color: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .45);
}

.site-header.is-wood .lang-switch .lang.is-active {
    background-color: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .65);
}

/* ───────── Overlay intenzitás presetek ───────── */
.site-header.is-wood.ov-0 {
    --hdr-overlay: 0
}

.site-header.is-wood.ov-10 {
    --hdr-overlay: .10
}

.site-header.is-wood.ov-20 {
    --hdr-overlay: .20
}

.site-header.is-wood.ov-22 {
    --hdr-overlay: .22
}

.site-header.is-wood.ov-30 {
    --hdr-overlay: .30
}

.site-header.is-wood.ov-35 {
    --hdr-overlay: .35
}

.site-header.is-wood.ov-40 {
    --hdr-overlay: .40
}

.site-header.is-wood.ov-50 {
    --hdr-overlay: .50
}

.site-header.is-wood.ov-60 {
    --hdr-overlay: .60
}

.site-header.is-wood.ov-70 {
    --hdr-overlay: .70
}

.site-header.is-wood.ov-80 {
    --hdr-overlay: .80
}

.site-header.is-wood.ov-90 {
    --hdr-overlay: .90
}

.site-header.is-wood.ov-100 {
    --hdr-overlay: 1
}


/* ───────── Mobil finomítások ───────── */
@media (max-width:640px) {

    /* Mobilon a brand (logo) menjen bal oldalra */
    .site-header .brand {
        left: var(--header-pad-l);
        /* ugyanaz a belső padding, mint a headerben */
        transform: none;
        /* ne tolja középre */
    }

    .brand-logo {
        height: var(--logo-h-mobile);
        /* mobilon külön változóval állítható */
        transform: translateY(calc(var(--logo-shift-y) * .6));
        /* arányos feljebb tolás */
        max-width: 96vw;
        /* kis képernyő biztosíték */
    }
}


@media (max-width:575.98px) {
    :root {
        --header-h: 60px;
    }
}