/* =========================================================
   ReadIGo – Hamburger (mobil) – erősített, !important-tal
   - Desktopon TUTI rejtett
   - Mobilon szép, középre zárt, egymás alatti gombok
   - Semmi mást nem bánt
   ========================================================= */

/* ===== ALAP: DESKTOPON REJTETT ===== */
header .menu-toggle{
  display: none !important;
}

/* (Megjelenés-beli alapok – csak ha látszana) */
header .menu-toggle{
  width: 44px;
  height: 44px;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  outline: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  z-index: 101;
}

header .menu-toggle div{
  position: absolute;
  width: 22px;
  height: 2.6px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 1px rgba(0,0,0,.2);
  transition: transform .22s ease, opacity .18s ease, width .22s ease;
}
header .menu-toggle div:nth-child(1){ transform: translateY(-7px); }
header .menu-toggle div:nth-child(2){ transform: translateY(0); }
header .menu-toggle div:nth-child(3){ transform: translateY(7px); }

header .menu-toggle.is-open div:nth-child(1){ transform: translateY(0) rotate(45deg); width: 22px; }
header .menu-toggle.is-open div:nth-child(2){ opacity: 0; transform: translateY(0) scaleX(.6); }
header .menu-toggle.is-open div:nth-child(3){ transform: translateY(0) rotate(-45deg); width: 22px; }

/* ===== MOBIL NÉZET ===== */
@media (max-width: 768px){

  /* HAMBURGER ikon TUTI látszik mobilon */
  header .menu-toggle{
    display: flex !important;
    position: absolute !important;
    top: 18px !important;
    right: 16px !important;
  }

  /* NAV összecsukott alaphelyzet – erős felülírás */
  header nav{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;

    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;

    margin-top: 10px !important;
    padding: 0 !important;

    background: linear-gradient(to bottom, var(--blue-500), var(--blue-600)) !important;
    border-radius: 0 0 var(--radius-16) var(--radius-16) !important;
    box-shadow: var(--shadow-2) !important;

    transform-origin: top !important;
    transition: max-height .35s ease, opacity .35s ease, padding .3s ease !important;
    z-index: 100 !important;
  }

  /* NAV nyitva – biztosan kinyílik és szépen rendezett */
  header nav.active{
    max-height: 700px !important;
    opacity: 1 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 18px !important;
  }

  /* Linkek: egységes szélesség, középre, egymás alatt */
  header nav a,
  header nav button,
  header .dropdown > span{
    width: 88% !important;         /* elég széles, de nem ér a széléig */
    margin: 10px auto !important;  /* egymás alatti spacing */
    padding: 14px 20px !important;
    display: block !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    color: #fff !important;

    /* Alap kék gomb kinézet – a saját osztályaid (btn-orange/btn-green) úgyis felülírják a gradienst */
    background: linear-gradient(to bottom, var(--blue-300), var(--blue-500)) !important;
    box-shadow: 0 4px #2d78b3 !important;
    transition: transform .18s ease, background .2s ease !important;
  }

  /* Ne „rángasson” hoverre mobilon, de ha mégis van hover, ne zavarjon */
  header nav a:hover,
  header nav button:hover,
  header .dropdown > span:hover{
    transform: scale(1.02) !important;
  }

  /* Dropdown tartalom mobilon vonalban és szépen */
  header .dropdown-content{
    position: static !important;
    display: none !important;
    width: 100% !important;
    box-shadow: none !important;
    background: transparent !important;
    animation: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.mobile-open .dropdown.open .dropdown-content{
    display: block !important;
  }

  /* Lágy beúszás a linkeknek, sorban */
  header nav.active a{ animation: fadeInSlide .3s ease both !important; }
  header nav.active a:nth-child(1){ animation-delay: .02s !important; }
  header nav.active a:nth-child(2){ animation-delay: .06s !important; }
  header nav.active a:nth-child(3){ animation-delay: .10s !important; }
  header nav.active a:nth-child(4){ animation-delay: .14s !important; }

  @keyframes fadeInSlide{
    from{ opacity: 0; transform: translateY(-6px); }
    to  { opacity: 1; transform: translateY(0); }
  }
}