/* =========================================================
   mobile.css — MOBIL-ONLY
   Követelmények:
   - hamburger: ul.menu.is-open FULLSCREEN/FIXED overlay + saját görgetés
   - responsive tweak (hero, térkép, táblázat, gombok)
   - <=299px: oldal rejtése + pontos üzenet
   ========================================================= */

@media (max-width: 900px){

  body {
    /* Mivel a --navh 72px, ez eltolja a tartalmat a fix menü alól */
    padding-top: var(--navh);
  }
  h1{
    margin-top: 2.7rem;
  } 

 .navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
  z-index: 2001;
  display: flex; 
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap; /* Wrap helyett érdemes nowrap-et használni, hogy ne ugorjon alá */
  padding: 0 15px; /* Ez biztosítja a távolságot a szélétől */
  height: var(--navh); /* Legyen fix magassága, amihez a menü igazodik */
  }
  /* hamburger gomb */
  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-right:auto;

    background: var(--bg);
    color: var(--primary);

    border: 2px solid var(--accent);
    border-radius: 999px;

    padding: .55rem .85rem;
    font-weight: 900;
    cursor: pointer;
  }

  /* mobilon az alap menü ne lógjon a flow-ban */
  ul.menu{
    display:none;
  }

  /* ====== NYITOTT MENÜ: FIX, TELJES KÉPERNYŐS (navbar alól), SAJÁT GÖRGETÉS ======
     Ez oldja meg azt, hogy ne a weboldalt kelljen görgetned a menüben. */
  ul.menu.is-open{
    display:flex;

    position: fixed;
    top: var(--navh);
    left: 0;
    right: 0;

    max-height: calc(100dvh - var(--navh) - 1rem);
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;

    background: var(--primary);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* megakadályozza, hogy a menü görgetése “átcsússzon” a body-ra */
    overscroll-behavior: contain;

    z-index: 2000;
  }

  /* Kompatibilitás, ha valahol .open maradt */
  ul.menu.open{
    display:flex;
  }
  /* 1. Levesszük a térközt magáról a listaelemről (ha van), hogy a link teljesen kitölthesse */
  ul.menu.is-open li {
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none; /* Biztos ami biztos, ne legyen pötty */
  }

  /* 2. A menün BELÜLI hivatkozásokat blokk elemmé tesszük */
  ul.menu.is-open a{
    display: block;           /* Ettől lesz belőle egy teljes sort kitöltő "doboz" */
    width: 100%;              /* Kifeszítjük a teljes rendelkezésre álló szélességre */  
    box-sizing: border-box;   /* Biztosítja, hogy a padding miatt ne lógjon ki oldalra */
    padding: 1rem;
    border-radius: 12px;
    color:#fff;
    text-decoration: none;    /* Aláhúzás eltávolítása, ha esetleg lenne */
    text-align: center;
  }
  /* 3. Ugyanez érvényes, ha esetleg <button> tageket használsz a hivatkozások helyett/mellett */
  ul.menu.is-open button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    border-radius: 12px;
    color: #fff;
    background: transparent;
    border: none;
    text-align: left;         /* Vagy 'center', ahogy jobban tetszik */
    font-size: 1rem;
  }

  /* hover/fókusz: accent háttér + sötét szöveg (WCAG miatt) */
  ul.menu.is-open a:hover,
  ul.menu.is-open a:focus-visible{
    background: var(--accent);
    color: var(--text);
    outline-color: var(--bg);
  }

  /* Ha a böngésző támogatja a :has()-t, tiltsuk le a háttér görgetését is */
  @supports selector(:has(*)){
    html:has(ul.menu.is-open),
    body:has(ul.menu.is-open){
      overflow: hidden;
    }
  }

  /* gombok egymás alá */
  .gomb-sor{
    flex-direction: column;
  }
  .gomb-sor input[type="submit"],
  .gomb-sor a.vissza-gomb{
    width:100%;
    text-align:center;
  }

  /* hero kisebb */
  .hero img{
    height: 240px;
  }

  /* térkép kisebb */
  .terkep iframe{
    height: 320px;
  }

  /* táblázat mobilon görgethető */
  #foglalastabla{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
  }

  /* reCAPTCHA sokszor túl széles */
  .g-recaptcha{
    transform: scale(.92);
    transform-origin: 0 0;
  }
  .demo-szalag {
  position: fixed;
  top: 86px;
  right: -65px;
  font-size: .68rem;
  } 
  .slider-kontener {
        padding: 0 35px;
    }

    .velemeny-kartya {
        flex: 0 0 calc(100% - 10px);
    }

    .velemenyek-ablak {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .nav-nyil {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
    .minigolf-logo{
        max-width: 260px;
    }
    .hero-nyil {
    display: none !important; /* Mobilon teljesen eltüntetjük a nyilakat */
  }

  .hero-kontener {
      margin: 1rem auto; /* Visszavesszük a nyilak miatti esetleges margót */
  }
  .minigolf-cim {
    font-size: 40px !important;
    -webkit-text-stroke: 10px #064016 !important;

  }
}


/* Extra kicsi kijelző: 299px és alatta */
@media (max-width: 299px){

  body{
    overflow: hidden;
  }

  body > *{
    display:none !important;
  }

  body::before{
    content: "Túl kicsi a képernyőd. Próbáld meg elforgatni.";
    position: fixed;
    inset: 0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding: 1rem;
    text-align:center;

    background: var(--bg);
    color: var(--text);

    font-weight: 950;
    font-size: 1.05rem;
    line-height: 1.35;

    z-index: 9999;
  }
}