#main-menu li {
    margin-left: 25px;
}

/* 1. A fő tároló maradjon a helyén */
#main-menu {
  display: block;
}

/* 2. CSAK a fő listára vonatkozzon a Flexbox */
#main-menu > ul {
    display: flex;
    list-style-type: none;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* 3. A főmenüpontok (li) egymás mellett */
#main-menu > ul > li {
    margin-left: 1rem;
    position: relative; /* Fontos: ehhez képest pozicionáljuk az almenüt */
}

/* 4. A linkek stílusa */
#main-menu ul li a {
    display: block;
    color: var(--title);
    text-decoration: none; 
    padding: 1rem; 
    font-weight: bold;
    font-size: smaller;
    transition: color 0.3s ease;
}

#main-menu ul li a:hover {
    color: pink;
}

/* 5. AZ ALMENÜ (Dropdown) - Itt a trükk! */
#main-menu ul li ul {
    display: none;       /* Alapból rejtve */
    position: absolute;  /* Kiszakad a flexboxból, így nem tolja szét a menüt! */
    top: 100%;           /* Pontosan a link alá */
    left: 0;
    background: white;
    min-width: 200px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    box-shadow: 0px 8px 15px rgba(0,0,0,0.1);
    z-index: 1000;
    
    /* Visszaállítjuk függőlegesre az almenüpontokat */
    flex-direction: column; 
}

/* 6. Az almenüpontok egymás alatt legyenek */
#main-menu ul li ul li {
    width: 100%;
    margin: 0;
}

/* 7. Megjelenítés hover-re */
#main-menu ul li:hover > ul {
    display: flex; /* Vagy display: block; */
}



#logo {
  max-height: 2.5rem;
}

.left-menu {
    display: flex;
}

.logo-container {
    align-content: center;
}




/* Mobilon alapértelmezett (pl. 768px alatt) */
@media (max-width: 768px) {
        /* A hamburger ikon kinézete */

    #main-menu > ul > li {
        margin-left: 0rem;
        position: relative; /* Fontos: ehhez képest pozicionáljuk az almenüt */
    }

    #top-head .content-box, #head .content-box {
            justify-content: space-between !important;
    }

    .mobile-hamburger-accordion {
        display: block;
    }

    .left-menu nav#main-menu {
        display: none;
    }

    /* A mobil panel stílusa */
    #hm-mobile-menu {
        width: 100%; /* Teljes képernyő */
        right: -100%; /* Képből ki */
        position: fixed;
        top: 0;
        height: 100vh;
        background: white;
        z-index: 9999;
        transition: right 0.4s ease;
    }

    #hm-mobile-menu.is-open {
        right: 0; /* Beúszik */
    }

    /* A menüpontok egymás alatt legyenek a panelben */
    .mobile-hamburger-accordion ul {
        list-style: none;
        padding: 0;
    }

    .mobile-hamburger-accordion li a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #eee;
        font-size: 1.2rem;
        text-decoration: none;
        color: #333;
    }
}

/* Asztali nézetben (768px felett) a gomb rejtve, a menü látható */
@media (min-width: 769px) {
    li:has(> a > i#hamburger) {
        display: none;
    }

    .mobile-hamburger-accordion {
      display: none;
    }
}

.header-search-container {
    position: relative;
    display: inline-block;
}

.search-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-color);
    padding: 10px;
    display: flex;
    align-items: center;
    transition: transform 0.3s;
}

.search-icon-btn:hover {
    transform: scale(1.1);
    color: var(--accent-peach);
}

/* A kereső sáv alaphelyzete */
.header-search-bar {
    position: absolute;
    top: 5rem; /* A header magasságához igazítva */
    right: 10%; /* Vagy ahol a main-menu elhelyezkedik */
    width: 320px;
    background: white;
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 999;
}

.header-search-bar.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Kereső ikon stílusa a menüben */
.search-trigger-icon {
    cursor: pointer;
    color: var(--text-color);
    font-size: 1.1rem;
    transition: color 0.3s;
}

.search-trigger-icon:hover {
    color: var(--accent-peach);
}

/* A keresőmező belső finomítása, hogy beleférjen */
.header-search-bar input[type="search"] {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid var(--beige2);
    border-radius: 20px;
}