/* Főoldal (index.html) próba-fejléce: a logó a fekete sávba (header-top)
   kerül, megnagyítva, a "GRILLANDIA PRÉMIUM KÜLTÉRI KONYHA" felirat
   helyére. Az email, nyelvválasztó és social media külön "chip"
   blokkokba kerül a fekete sávban. A fehér sávban (header-upper) csak
   a menü + Konfigurátor gomb marad, középre igazítva. Csak erre az
   oldalra vonatkozik (.home-header-alt osztály a body-n, és ez a fájl
   is csak ide van belinkelve). A sticky (görgetéskor lecsúszó)
   fejlécet szándékosan nem bántjuk - ott marad a kis logó is, hogy
   görgetéskor se tűnjön el a márka. */

.home-header-alt .header-top{
    padding:18px 0;
}
/* A téma alapból egy átlós, elforgatott szürke (#343434) díszítőelemet
   tesz a header-top jobb oldalára (.header-top.style-two:before) - ez
   ezen az oldalon (ahol a jobb oldalon most chip-blokkok vannak, nem az
   eredeti egyszerű ikonsor) zavaróan üt el a fekete/lila háttértől,
   ezért itt levesszük. */
.home-header-alt .header-top.style-two:before{
    content:none;
}
.home-header-alt .header-top .top-left{
    display:flex;
    align-items:center;
}
/* A téma saját reszponzív CSS-e (responsive.css, ≤1139px) egy magasabb
   specificitású szabállyal (".main-header .header-top .inner .top-left"
   + !important) mindig elrejti a top-left-et ezen a szélességen -
   eredetileg azért, mert azokon az oldalakon a top-left semmi fontosat
   nem tartalmazott hamburger módban. Ezen az oldalon viszont a logó
   (és mostantól a hamburger+telefon ikon is) itt van, ezért mindig
   látszania kell - legalább ugyanolyan specifikus szelektorral és
   !important-tal kell felülírni. */
.home-header-alt .main-header .header-top .inner .top-left{
    display:flex !important;
}
.home-header-alt .header-top .logo-box .logo img{
    width:210px;
    height:auto;
    display:block;
}

/* Chip blokkok: email, nyelvválasztó, social media - mindegyik saját
   finom kerettel/háttérrel elkülönítve, modern, letisztult hatásért. */
.home-header-alt .header-top .top-right{
    display:flex;
    align-items:center;
    gap:12px;
}
.home-header-alt .header-chip{
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:8px;
    height:38px;
    padding:0 12px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
}
.home-header-alt .header-chip ul{
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
    height:100%;
}
.home-header-alt .header-chip .contact-info-two li{
    margin:0;
    padding:0;
    border-right:0;
    display:flex;
    align-items:center;
}
.home-header-alt .header-chip--email .flaticon-mail{
    margin-right:8px;
}
/* A social ikonok a témában alapból 42x42px-es kör gombok - ez a
   chipen belül jóval magasabb lenne, mint a szöveges chipek (email,
   telefon, nyelv), ezért itt a chip magasságához (38px) igazítva
   lekicsinyítjük őket. Mindegyik ikon kap egy saját, finom hátterű
   kis négyzetet (mint a mobil ikonoknál) - így nemcsak térköz, hanem
   vizuálisan is jól elkülönülnek egymástól, nem folynak egybe.
   A "gap" a flex konténeren egyenletes térközt ad AZ ELSŐ és UTOLSÓ
   ikon előtt/után is nulla marad (nincs "csak jobb oldalon nagyobb
   margó" jellegű aszimmetria, amit a régi li+li margin okozott). */
.home-header-alt .header-chip--social{
    padding:0 12px;
}
.home-header-alt .header-chip--social .social-links{
    display:flex;
    align-items:center;
    height:100%;
}
.home-header-alt .header-chip--social .social-links li{
    margin:0 !important;
    padding:0 !important;
    display:flex;
    align-items:center;
    position:relative;
}
/* Nincs kör/doboz háttér és nincs elválasztó vonal sem az ikonok
   között - csak maguk az ikonok, egyenletes térközzel. */
.home-header-alt .header-chip--social .social-links li+li{
    margin-left:12px !important;
}
.home-header-alt .header-chip--social .social-links li a{
    width:auto !important;
    height:auto !important;
    line-height:1 !important;
    font-size:14px !important;
    background:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:#ffffff !important;
    transition:color 0.2s ease !important;
}
.home-header-alt .header-chip--social .social-links li a:hover{
    color:#B87333 !important;
}

/* A fehér sávból eltűnt a logó - a menü + gomb blokk (nav-outer) most
   egyedül van az inner-container-ben, ezért középre igazítjuk minden
   szélességnél. A régi margin-top értékek (amik a logóhoz igazítottak)
   már nem kellenek, enélkül nem lenne pontos a függőleges középre
   igazítás. */
.home-header-alt .header-upper .inner-container{
    display:flex;
    align-items:center;
    justify-content:center;
}
.home-header-alt .header-upper .inner-container:after{
    content:none;
}
.home-header-alt .header-upper .main-menu .navigation{
    margin-top:0 !important;
}
.home-header-alt .header-upper .konfigurator-btn-box{
    margin-top:0 !important;
}

/* ≥1301px (teljes, nem hamburger menü): eddig a menü+gomb együtt egy
   tömbként lett középre igazítva (justify-content:center a nav-outer-en,
   ami a menüt ÉS a gombot is tartalmazza) - emiatt a gomb szélessége
   miatt a tömb egésze középen volt, de a MENÜ önmagában nézve balra
   csúszott a valódi középponttól, a gomb pedig "lógott" a jobb oldalon,
   nem tűnt a kompozíció részének. Itt 3 oszlopos grid-trükkel szétválasztjuk
   a kettőt: a 2 szélső oszlop rugalmas és üres (csak helykitöltő), a
   középső oszlop (menü) emiatt pontosan a rendelkezésre álló teljes
   szélesség közepén marad, a gomb pedig a jobb oszlopban, a jobb szélhez
   igazítva - a szélső oszlopok automatikusan annyi helyet engednek neki,
   amennyi kell, tehát átfedés sem alakulhat ki. */
@media only screen and (min-width:1301px){
    .home-header-alt .header-upper .nav-outer{
        width:100%;
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
    }
    .home-header-alt .header-upper .nav-outer .mobile-nav-toggler{
        display:none !important;
    }
    .home-header-alt .header-upper .nav-outer .main-menu{
        grid-column:2;
        justify-self:center;
    }
    .home-header-alt .header-upper .nav-outer .konfigurator-btn-box{
        grid-column:3;
        justify-self:end;
        margin-left:0 !important;
    }
}

/* 1101-1300px: a téma alapból (konfigurator-btn.css) ≤1300px-nél
   hamburgerre vált, mert eredetileg a logó + menü + gomb együtt csak
   eddig fért el egy sorban. Ezen az oldalon (home-header-alt) viszont
   a logó már NEM ebben a sávban van (feljebb, a header-top-ban), tehát
   csak a menünek + gombnak kell elférnie - ennyi hellyel ez szűkebb
   ablaknál is megoldható, ezért itt (csak erre az oldalra) visszavesszük
   a hamburgerre váltás küszöbét, és az itt megadott, ≥1301px-es "teljes
   menü, gomb jobbra" elrendezést kiterjesztjük 1101px-ig. A sticky fejlécet
   (ami megtartotta a logót) ez nem érinti, ott marad az eredeti 1300px-es
   küszöb. FONTOS: az 1301px-es küszöböt korábban azért állítottuk pont
   ide, mert valós Safari-ban hamarabb tört, mint a fejlesztői böngésző
   szimulációja mutatta (ld. konfigurator-btn.css megjegyzése) - ez az
   1101px-es érték egy óvatos becslés a logó hiányára, de érdemes élő
   böngészőben (nem csak asztali Chrome-ban) leellenőrizni, mielőtt ez a
   fejléc élesbe kerül. */
@media only screen and (min-width:1101px) and (max-width:1300px){
    .home-header-alt .header-upper .nav-outer .main-menu{
        display:block !important;
    }
    .home-header-alt .header-upper .nav-outer .mobile-nav-toggler{
        display:none !important;
    }
    .home-header-alt .header-upper .inner-container{
        justify-content:center;
    }
    .home-header-alt .header-upper .nav-outer{
        float:none;
        width:100%;
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
    }
    .home-header-alt .header-upper .nav-outer .main-menu{
        grid-column:2;
        justify-self:center;
    }
    .home-header-alt .header-upper .nav-outer .konfigurator-btn-box{
        display:block !important;
        grid-column:3;
        justify-self:end;
        margin-left:0 !important;
        order:0;
    }
    .home-header-alt .header-upper .nav-outer .konfigurator-btn-box .btn-title{
        padding:8px 22px;
        font-size:16px;
    }
    .home-header-alt .main-menu .navigation{
        margin-left:0;
    }
    .home-header-alt .main-menu .navigation>li{
        margin-right:24px;
    }
    .home-header-alt .main-menu .navigation>li>a{
        font-size:15px;
    }
}

/* Az új mobil hamburger + email ikon (header-top-ban, a top-left
   belsejében) csak ≤1100px-nél látszik - asztali nézetben eltűnik,
   ott a header-upper-es teljes menü/gomb van használatban. */
.home-header-alt .header-top .home-header-mobile-toggler,
.home-header-alt .header-top .home-header-mobile-icons{
    display:none;
}

/* ≤1100px (hamburger mód): eddig 2 különálló sáv volt egymás alatt
   (sötét header-top: logó+chipek, majd fehér header-upper: gomb+
   hamburger) - ez zsúfoltnak/régimódinak tűnt. Itt egyetlen sötét
   sávvá vonjuk össze: a header-upper-t (a gombbal + eredeti,
   image-alapú hamburgerrel együtt) elrejtjük, és helyette a
   header-top sorában jelenik meg minden: hamburger balra, logó
   középen, email ikon jobbra. A .top-left mostantól teljes
   szélességű flex sor (hamburger - logó (flex:1, középre igazítva) -
   email ikon), a .top-right (email/nyelv/social chipek) el van rejtve.
   A nyelvválasztó/social chipek (amik idáig a top-right-ban voltak)
   mobilon elrejtődnek - a social linkek megvannak a nyitott
   hamburgermenü alján is. A hamburger gomb
   ".mobile-nav-toggler" osztályt visel, ugyanazt, amit a script.js
   figyel - tehát ugyanúgy megnyitja a menüt, mint az eredeti (most
   elrejtett) header-upper-es gomb, nem kell hozzá külön JS. */
@media only screen and (max-width:1100px){
    .home-header-alt .header-upper{
        display:none !important;
    }
    .home-header-alt .header-top .inner{
        display:block;
    }
    .home-header-alt .main-header .header-top .inner .top-left{
        display:flex !important;
        align-items:center;
        justify-content:space-between;
        width:100%;
    }
    .home-header-alt .header-top .logo-box{
        flex:1 1 auto;
        display:flex;
        justify-content:center;
    }
    .home-header-alt .header-top .logo-box .logo img{
        width:150px;
    }
    .home-header-alt .header-top .top-right{
        display:none;
    }
    .home-header-alt .header-top .home-header-mobile-toggler{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:5px;
        flex:0 0 38px;
        width:38px;
        height:38px;
        border-radius:9px;
        background:rgba(255,255,255,0.08);
        cursor:pointer;
    }
    .home-header-alt .header-top .home-header-mobile-icons{
        display:flex;
        align-items:center;
        gap:8px;
        flex:0 0 auto;
    }
    .home-header-alt .header-top .home-header-mobile-icon{
        display:flex;
        align-items:center;
        justify-content:center;
        flex:0 0 38px;
        width:38px;
        height:38px;
        border-radius:9px;
        background:rgba(255,255,255,0.08);
        color:#ffffff;
        font-size:17px;
        line-height:1;
        padding:0;
        border:none;
        cursor:pointer;
        transition:color 0.2s ease;
    }
    .home-header-alt .header-top .home-header-mobile-icon:hover{
        color:#B87333;
    }
    .home-header-alt .header-top .home-header-mobile-lang{
        position:relative;
    }
    .home-header-alt .header-top .home-header-mobile-lang .lang-switcher__flag{
        font-size:17px;
        line-height:1;
    }
    .home-header-alt .header-top .home-header-mobile-lang .lang-switcher__panel{
        top:calc(100% + 10px);
        left:auto;
        right:0;
    }
}

/* Nagyon keskeny telefonokon (≤360px) a 3 ikon + logó + hamburger
   könnyen összezsúfolódna - itt kicsit kisebbre vesszük az ikonokat
   és a logót, hogy minden kényelmesen elférjen egy sorban. */
@media only screen and (max-width:360px){
    .home-header-alt .header-top .home-header-mobile-icons{
        gap:5px;
    }
    .home-header-alt .header-top .home-header-mobile-icon,
    .home-header-alt .header-top .home-header-mobile-toggler{
        flex:0 0 34px;
        width:34px;
        height:34px;
        font-size:15px;
    }
    .home-header-alt .header-top .logo-box .logo img{
        width:125px;
    }
}

/* Animált hamburger: 3 vízszintes csík, ami nyitáskor X-é alakul át.
   A body "mobile-menu-visible" osztályát a script.js már kezeli
   (ez nyitja/zárja a menüt) - itt csak erre az osztályra épülő tiszta
   CSS-animációt adunk hozzá, nincs szükség plusz JS-re. */
.home-header-alt .header-top .home-header-mobile-toggler .hamburger-bar{
    display:block;
    width:22px;
    height:2px;
    border-radius:2px;
    background:#ffffff;
    transition:transform 0.3s ease, opacity 0.3s ease, background 0.2s ease;
}
.home-header-alt .header-top .home-header-mobile-toggler:hover .hamburger-bar{
    background:#B87333;
}
body.mobile-menu-visible .home-header-alt .header-top .home-header-mobile-toggler .hamburger-bar:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}
body.mobile-menu-visible .home-header-alt .header-top .home-header-mobile-toggler .hamburger-bar:nth-child(2){
    opacity:0;
}
body.mobile-menu-visible .home-header-alt .header-top .home-header-mobile-toggler .hamburger-bar:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

/* Nagyon keskeny telefonokon is ugyanez a szűkebb (150px-es) logó jó,
   nincs szükség további tördelésre - a téma saját ≤575px-es szabályai
   (pl. social ikonok elrejtése) itt már nem relevánsak, mert a teljes
   top-right sáv el van rejtve ≤1100px-től. */

/* Nyitott hamburgermenü (.mobile-menu): a témában alapból egy 300px
   széles, jobbról becsúszó sáv - a látványterv szerint viszont ez
   teljes képernyős legyen, a menüpontok pedig függőlegesen középen.
   A .menu-box lesz a flex-konténer: a nav-logo + close-btn (abszolút
   pozicionált, a téma saját CSS-e szerint) a tetején marad, a
   .menu-outer (benne a script.js által futásidőben beillesztett
   ul.navigation) flex:1-gyel foglalja el a maradék helyet és
   középre igazítja a listát, a Konfigurátor gomb + social ikonok
   pedig lent, a lista után következnek (margin-top:auto-val
   leszorítva az aljára). Sötét, semleges háttér (#161616, nem lila),
   réz (#B87333) márkaszínű kiemelésekkel. */
.home-header-alt .mobile-menu{
    width:100%;
}
.home-header-alt .mobile-menu .menu-box{
    background:#161616;
    display:flex;
    flex-direction:column;
    padding-top:90px;
}
.home-header-alt .mobile-menu .nav-logo{
    margin-bottom:0;
}
.home-header-alt .mobile-menu .nav-logo img{
    width:150px;
    height:auto;
}
.home-header-alt .mobile-menu .menu-outer{
    flex:1;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}
.home-header-alt .mobile-menu .navigation{
    width:100%;
}
.home-header-alt .mobile-menu .navigation li>a{
    font-size:19px;
    font-weight:500;
    text-transform:none;
    padding:16px 40px;
}
.home-header-alt .mobile-menu .navigation li ul li>a{
    font-size:19px;
    color:rgba(255,255,255,0.75);
}
/* Szintek megkülönböztetése háttérszínnel: minél mélyebbre nyílik a
   menü, annál világosabb a háttér - így egyértelmű, hogy hányadik
   szinten jár a felhasználó. Az alap (.menu-box) sötét #161616,
   a 2. és 3. szint a márka réz színének (#B87333) nagyon halvány,
   barnás rétegét kapja rá - finom, letisztult átmenet, nem szürke. */
.home-header-alt .mobile-menu .navigation > li > ul{
    background:rgba(184,115,51,0.045);
}
.home-header-alt .mobile-menu .navigation > li > ul > li > ul{
    background:rgba(184,115,51,0.085);
}
.home-header-alt .mobile-menu .navigation li.dropdown .dropdown-btn{
    background:rgba(184,115,51,0.18);
    color:#B87333;
    top:11px;
}
.home-header-alt .mobile-menu .navigation li>a:before{
    background:#B87333;
    width:3px;
}
.home-header-alt .mobile-konfigurator-box{
    padding:10px 30px 10px;
    margin-top:auto;
}
.home-header-alt .mobile-konfigurator-box .theme-btn.btn-style-four{
    background-color:#B87333;
    background-image:none;
    width:100%;
}
.home-header-alt .mobile-konfigurator-box .btn-title{
    color:#2c1608;
}
.home-header-alt .mobile-menu .social-links{
    padding:10px 25px 30px;
}

/* Görgetésirány-érzékeny mobil fejléc (≤1100px): lefelé görgetésnél
   eltűnik (translateY(-100%)), felfelé görgetésnél visszajelenik -
   így böngészés közben nem foglal helyet a kis kijelzőn, de egy
   mozdulattal újra elérhető. A tényleges scroll-figyelést az
   index.html végén lévő kis inline script végzi (test.js-szintű
   apró logika, nem éri meg külön fájlba tenni) - a "mobile-header-
   fixed" / "mobile-header-hidden" osztályokat teszi a body-ra, ez a
   fájl csak a CSS-oldalát adja hozzá. A régi (érintetlenül hagyott)
   sticky fejlécet ezen a szélességen kikapcsoljuk, hogy ne jelenjen
   meg egyszerre a kettő - a header-top veszi át teljesen a "görgetés
   közben is elérhető fejléc" szerepét mobilon. */
@media only screen and (max-width:1100px){
    .home-header-alt .sticky-header{
        display:none !important;
    }
    .home-header-alt .header-top{
        transition:transform 0.3s ease;
    }
    body.home-header-alt.mobile-header-fixed .header-top{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:99999;
    }
    body.home-header-alt.mobile-header-fixed .page-wrapper{
        padding-top:var(--mobile-header-h, 76px);
    }
    body.home-header-alt.mobile-header-fixed.mobile-header-hidden .header-top{
        transform:translateY(-100%);
    }
}