/* =========================
   ALAP STÍLUSOK (MEGHAGYVA)
   ========================= */
body { background-color: #D3FEEC; }




.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #FED3E5;
  color: #2b003e;
}

.dropdown-content a:hover {
  background-color: #FED3E5;
  color: #2b003e;
}

.active { color: #CB0000; }



/* =========================
   NAV & MENÜ — DESKTOP
   ========================= */
.topnav {
  background-color: #A1FDD6;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 0;           /* tiszta él */
}

.hamburger {
  display: none;        /* desktopon rejtve */
  background: transparent;
  border: 0;
  padding: 12px;
  cursor: pointer;
  color: #2b003e;
}

.topnav .menu {
  display: flex;        /* desktopon vízszintes sor */
  align-items: center;
  gap: 0;
}

.topnav a,
.topnav .dropbtn {
  display: block;
  color: #2b003e;
  text-decoration: none;
  font-size: 20px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

/* Fő dropdown (desktop) */
.dropdown {
  position: relative;
}

.dropdown > .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #A1FDD6;
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
  z-index: 1000;
}

.dropdown:hover > .dropdown-content {
  display: block;       /* desktopon hoverre nyit */
}

/* Submenu (desktop: jobbra nyíló) */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-content {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 220px;
  background-color: #A1FDD6;
  box-shadow: 0 8px 16px rgba(0,0,0,.2);
  z-index: 1001;
}

.dropdown-submenu:hover > .dropdown-content {
  display: block;       /* submenu hoverre nyit */
}

/* Linkek a lenyílókban */
.dropdown-content a {
  float: none;
  color: #2b003e;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

 

/* =========================
   MOBIL (HAMBURGER) ≤ 768px
   ========================= */
@media (max-width: 768px) {
  /* Hamburger látszik, menü alapból rejtve */
  .hamburger { display: inline-flex; }
  .topnav { align-items: stretch; }

  .topnav .menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #A1FDD6;
    padding: 8px 0;
  }

  /* Hamburger kattintásra a JS .open-t ad a nav-ra */
  .topnav.open .menu { display: flex; }

  /* Minden elem teljes szélességű blokk */
  .topnav a,
  .topnav .dropbtn,
  .dropdown,
  .dropdown-submenu {
    width: 100%;
  }

  /* Mobilon a hoveres nyitást letiltjuk (érintés) */
  .dropdown:hover > .dropdown-content,
  .dropdown-submenu:hover > .dropdown-content {
    display: none;
  }

  /* Minden lenyíló relatív, lefelé nyíljon */
  .dropdown > .dropdown-content,
  .dropdown-submenu > .dropdown-content {
    position: relative;
    top: 0;
    left: 0;
    min-width: 100%;
    box-shadow: none;
    display: none;                 /* alap: csukva */
    z-index: auto;
  }



  /* JS a szülőre .open-t tesz kattintáskor */
  .dropdown.open > .dropdown-content { display: block; }
  .dropdown-submenu.open > .dropdown-content { display: block; }

  /* Érintésbarát fókusz támogatás (ha nincs JS) */
  .dropdown:focus-within > .dropdown-content { display: block; }
  .dropdown-submenu:focus-within > .dropdown-content { display: block; }
}

/* =========================
   KISEGÍTŐ FINOMÍTÁSOK
   ========================= */
/* Mutassunk fókuszkeretet billentyűzésnél */
.topnav a:focus,
.topnav .dropbtn:focus,
.hamburger:focus {
  outline: 2px solid #2b003e55;
  outline-offset: 2px;
}

/* SVG ikon örökölje a színt */
.hamburger svg { display: block; }