body{
  margin: 0 !important;
}

.hero-logo{
  width: clamp(200px, 22vw, 340px);
  height: auto;
  display: block;
  opacity: 0;
}

.footer-top{
  z-index: 3;
}

/* NAV külön pozicionálva a logó alá */
.main-nav{
  position: absolute;
  left: 50%;
  top: 11.5vw;
  transform: translateX(-50%);

  width: min(1200px, 92vw);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.main-nav-list{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 55px);

  list-style: none;
  margin: 0;
  padding: 0
}

.secondary-nav-row{
  display:flex;
  justify-content:center;
  width:100%;
}

.secondary-nav-link{
  text-decoration:none;
  font-family:'Playfair Display', serif; /* 🔥 EZ A LÉNYEG */
  font-weight:600;
  letter-spacing:3px;
  font-size:22px;
  color:#3f4a36;

}

.secondary-nav-link:hover{
  opacity:0.7;
}

/* =========================
   HERO: VIDEO + PNG OVERLAY
   ========================= */

:root{
  --hero-text: #ffffff;
}

.hero{
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
}

/* VIDEO HÁTTÉR */

.hero-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* PNG RÉTEG (katlanhater.png) */

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
}

/* FELSŐ KÉP */

.hero-overlay::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:50%;
  background-image:url('assets/images/katlanhaterfelso.png');
  background-size:100% auto;
  background-position:center top;
  background-repeat:no-repeat;
}

/* ALSÓ KÉP */

.hero-overlay::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:50%;
  background-image:url('assets/images/katlanhateralso.png');
  background-size:100% auto;
  background-position:center bottom;
  background-repeat:no-repeat;
}

/* MOBIL ÁLLÓ NÉZET — külön háttérképek kizárólag portrait mobilon.
   Minden más (méret, pozíció, ismétlés, animáció) változatlan marad;
   csak a background-image URL-t cseréljük le a mob-verziókra. */
@media (max-width: 1024px) and (orientation: portrait) {
  .hero-overlay::before{
    background-image:url('assets/images/katlanhaterfelsomob.png');
  }
  .hero-overlay::after{
    background-image:url('assets/images/katlanhateralsomob.png');
  }
}

/* Fekvő tablet (≈iPad mini 1024×768): alsó katlan-kép cserélve a lablec
   verzióra. min-height:601 kizárja a fekvő telefont. */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) and (min-height: 601px) {
  .hero-overlay::after{
    background-image:url('assets/images/katlan_lablec.png');
  }
}



/* =========================
   HERO CONTENT
   ========================= */

.hero-inner{
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
  color: var(--hero-text);
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

.hero-title{
  margin: 0 0 10px 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: 0.02em;
}

.hero-subtitle{
  margin: 0 0 26px 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  opacity: 0.95;
}

.hero-title,
.hero-subtitle{

opacity:0;
transform:translateY(10px);
transition:all .6s ease;

}

.hero-title.show,
.hero-subtitle.show{

opacity:1;
transform:translateY(0);

}

.link-subtitle,
.link-subtitle:visited,
.link-subtitle:hover,
.link-subtitle:active{

color:#ffffff;
text-decoration:none;

font-family:'Playfair Display', serif;
font-size:inherit;
font-weight:inherit;

}

.hero-inner{
position:relative;
z-index:10;
}

.hero-news-overlay{
position:absolute;
inset:0;

background-image:url('assets/images/galeriahatter.png');
background-size:cover;
background-position:center;

display:none;

z-index:3;
pointer-events:none;
}

.hero.news-open .hero-news-overlay{
display:block;
}
/* ================================= */
/* HERO NYÍL */
/* ================================= */

.hero-arrow-toggle{
margin-top:40px;
cursor:pointer;
text-align:center;
}

.more-news-text{
display:block;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:8px;
}

.arrow{
width:18px;
height:18px;
border-right:2px solid white;
border-bottom:2px solid white;
transform:rotate(45deg);
margin:0 auto;
transition:transform .3s;
}

.arrow.open{
transform:rotate(225deg);
}

.hero-arrow-toggle{
cursor:pointer;
position:relative;
z-index:20;
}

/* ================================= */
/* HERO CONTENT RÉTEG */
/* ================================= */

.hero-inner{

position:relative;

z-index:5;

}


/* ================================= */
/* TOVÁBBI HÍREK SZEKCIÓ */
/* ================================= */

.hero-news{

background:#d5cfc0;

padding:80px 0;

}


/* ================================= */
/* HÍREK TARTALOM */
/* ================================= */

.news-inner{

max-width:1100px;

margin:0 auto;

padding:0 40px;

font-size:18px;

line-height:1.7;

color:#2e3b2f;

}


/* ================================= */
/* CÍMEK */
/* ================================= */

.news-inner h2{

font-size:36px;

margin-bottom:10px;

}


.news-inner h3{

margin-top:25px;

margin-bottom:15px;

}





.katlan-main-title{
    text-align:center;
    font-family:'Playfair Display', serif;
    font-size:36px;
    font-weight:600;
    letter-spacing:4px;
    color:#3f4a36;
    margin-bottom:25px;
}



/* ================================= */
/* BEKEZDÉSEK */
/* ================================= */

.news-inner p{

margin-bottom:18px;

}


/* ================================= */
/* LINK */
/* ================================= */

.berlet-link{

font-weight:600;

text-decoration:none;

color:#2e3b2f;

}


.berlet-link:hover{

text-decoration:underline;

}


.hirek-layout{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:60px;
}


.hirek-text{
max-width:900px;
text-align:center;
}

.hirek-image img{
    width:320px;
    height:auto;
    display:block;
}

.subhir{
display:flex;
justify-content:center;
}

.subhir .hirek-text{
max-width:900px;
margin:0 auto;
text-align:center;
}

.hirek-image{
display:flex;
align-items:center;
justify-content:center;
gap:30px;
margin-bottom:20px;
}



.secondary-menu li{
margin:0 35px 0 0;
}

.secondary-nav-row{
text-align:center;
}
/* CTA */

.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-button{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: transform 160ms ease, background 160ms ease;
}

.hero-button:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.18);
}

.hero-button:active{
  transform: translateY(0px);
}

/* HEADER TITLE A KERETBEN */

/* ÖRDÖGKATLAN logó/felirat */
.hero-title-box{
  position: absolute;
  top: 4.4vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;

  width: auto;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.hero-title-link{
  display: inline-block;
  text-decoration: none;
}
.hero-title-text{

font-family:'Playfair Display', serif;

font-size:42px;
font-weight:600;

letter-spacing:6px;

color:#4b5a34;

text-transform:uppercase;

}

/* =========================
SUBMENU PANEL
========================= */

.submenu-panel{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:2;
}

.submenu-panel.active{
display:flex;
pointer-events:auto;
}

/* háttér ami eltakarja a videót */

.submenu-background{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background-image:url('assets/images/galeriahatter.png');
background-size:cover;
background-position:center;

z-index:1;

}

/* submenu sor */

.submenu-content{

position:relative;
z-index:3;

width:100%;

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

margin-top:40px;

}

.submenu-content > ul{
display:none;
list-style:none;
padding:0;
margin:0;

flex-direction:row;
gap:18px 40px;           /* sor-köz 18px, oszlop-köz 40px */
}

/* Tördelés CSAK desktop/laptop nézetben (≥1025px). Mobilon a menü
   flex-direction:column-ra vált — ott a flex-wrap több OSZLOPBA tördelne,
   ami elrontaná a függőleges görgetést, ezért mobilon NEM engedjük. */
@media (min-width:1025px){
.submenu-content > ul{
flex-wrap:wrap;
justify-content:center;
}
}

.submenu-content ul.active{
display:flex;
}

/* Kötelező sortörés a Programok almenüben: teljes szélességű, láthatatlan
   flex-elem — a 4. pont után a többi menüpont biztosan új sorba kerül.
   Mobilon (oszlop-elrendezés) elrejtve, hogy ne hagyjon üres helyet/vonalat. */
.submenu-row-break{
flex-basis:100%;
width:100%;
height:0;
margin:0;
padding:0;
border:0 !important;
list-style:none;
pointer-events:none;
}
@media (max-width:1024px){
.submenu-row-break{ display:none; }
}

.submenu-content li{

font-size:22px;
font-weight:600;

letter-spacing:3px;

color:#3f4a36;
cursor:pointer;

}


.submenu-content li:hover{
opacity:0.7;
}

.hero-inner.hidden{
opacity:0;
pointer-events:none;
transition:opacity .25s ease;
}

.submenu-panel.active ~ .hero .hero-inner{
opacity:0;
pointer-events:none;
}

/* HOSSZÚ SZÖVEG */

.submenu-text{

display:none;

width:92vw;
max-width:1100px;

max-height:60vh;
max-height:60svh;

overflow-y:auto;
-webkit-overflow-scrolling:touch;

padding:35px 50px;

margin:0 auto;

font-family:'Playfair Display', serif;
font-size:18px;

line-height:1.45;

color:#2f3a2a;

}


.submenu-text.active{
display:block;
}

.submenu-background{
pointer-events:none;
}

.submenu-text::-webkit-scrollbar{
width:6px;
}

.submenu-text::-webkit-scrollbar-thumb{
background:#3f4a36;
border-radius:10px;
}

.footer-container{
position:relative;
}

.footer-mainmenu{

position:absolute;
bottom:120px;
left:80px;

display:flex;
flex-direction:column;
gap:18px;

font-family:'Playfair Display', serif;
font-size:16px;
letter-spacing:2px;
text-transform:uppercase;

}

.footer-mainmenu a{

text-decoration:none;
color:#4b4b4b;
transition:opacity .2s ease;

}

.footer-mainmenu a:hover{

opacity:.6;

}

.footer-top{

position:absolute;

left:0;
right:0;
bottom:8vw;

z-index:20;

display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
padding:0 11vw 0 10vw;
box-sizing:border-box;

}

.footer-top-menu{
display:flex;
gap:20px;

font-family:'Playfair Display', serif;
font-size:15px;
font-weight:600;

letter-spacing:3px;
text-transform:uppercase;
}

/* minden link állapot */

.footer-top-menu a,
.footer-top-menu a:link,
.footer-top-menu a:visited{

text-decoration:none !important;

color:#3f4a36 !important;

font-family:'Playfair Display', serif;
font-size:18px;
font-weight:600;

letter-spacing:3px;
text-transform:uppercase;

}

.footer-top-menu a:hover{

opacity:0.7;

}

/* =========================
   HEADER NAVIGATION
   ========================= */

.site-header{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(260px, 30vw, 420px);
  z-index: 20;
  pointer-events: none;
}

.site-header > *{
  pointer-events: auto;
}

.main-nav ul{
  display:flex;
  gap:20px;
  list-style:none;
  margin:0;
  padding:0;
}

.main-nav li{
  position:relative;
}

.main-nav a{
  text-decoration:none;
  font-family:'Playfair Display', serif;
  font-weight:600;

  letter-spacing:3px;
  font-size:18px;

  color:#3f4a36;
  text-transform:uppercase;
}

.main-nav a:hover{
  opacity:0.7;
}

/* =========================
   SUBMENU
   ========================= */

.submenu{
  position:absolute;
  top:35px;
  left:0;

  display:none;
  flex-direction:column;
  gap:10px;

  background:white;
  padding:15px 18px;
  border-radius:6px;

  box-shadow:0 10px 25px rgba(0,0,0,0.1);

  list-style:none;
}

.main-nav li:hover > .submenu{
  display:flex;
}

.submenu a{
  font-size:13px;
  letter-spacing:1px;
  color:#333;
  white-space:nowrap;
}

/* nested submenu */

.submenu .submenu{
  left:100%;
  top:0;
}


/* ============================= */
/* ===== FOOTER ALAP ===== */
/* ============================= */

.footer-sponsors{
background-image:url('assets/images/footerbg.png');
background-repeat:no-repeat;
background-position:center bottom;
background-size:100% 100%;

padding:53px 0px 140px 0px;
margin-top:-53px;
max-height:320px;
}

/* ============================= */
/* ===== BELSŐ DOBOZ ===== */
/* ============================= */

.footer-inner-box {
    max-width: 1400px;
    margin: 0px auto;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 60px 50px;
    background: linear-gradient(
        to bottom,
        #C7CCC1 0%,
        #EDD7C9 100%
    );

    box-shadow: 
        0 20px 60px rgba(0,0,0,0.08),
        0 5px 15px rgba(0,0,0,0.04);
    
    position:relative;
    z-index:2;
}

/* ============================= */
/* ===== 4 FŐ TÁMOGATÓ ===== */
/* ============================= */

.main-sponsors {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.main-sponsors img {
    max-height: 90px;
    width: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.main-sponsors a:hover img {
    transform: scale(1.05);
    opacity: 0.85;
}

/* ============================= */
/* ===== TOGGLE GOMB ===== */
/* ============================= */

.more-sponsors-toggle {
    text-align: center;
    margin-bottom: 30px;
}

#toggleSponsors {
    background: transparent;
    border: 1px solid #4a4a4a;
    padding: 12px 30px;
    cursor: pointer;
    font-size: 15px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

#toggleSponsors:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* ============================= */
/* ===== LENYÍLÓ RÉSZ ===== */
/* ============================= */

.more-sponsors-wrapper {
    max-height: 0;
    overflow: hidden;
    transition:max-height .6s ease;
}

/* ============================= */
/* ===== FUTÓSZALAG ===== */
/* ============================= */

.marquee {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px 0;
}

/* fade mask két oldalon */
.marquee::before,
.marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-content {
    display: inline-flex;
    gap: 80px;
    align-items: center;
    animation: scrollMarquee 35s linear infinite;
}

.marquee-content img {
    max-height: 65px;
    width: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.marquee-content a:hover img {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Animáció */
@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Hoverre megáll */
.marquee:hover .marquee-content {
    animation-play-state: paused;
}

/* ============================= */
/* ===== MÉDIAPARTNEREK ===== */
/* ============================= */

.media-partners {
    margin-top: 60px;
    text-align: center;
}

.media-partners h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.media-logos {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.media-logos img {
    max-height: 60px;
    width: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.media-logos a:hover img {
    transform: scale(1.05);
    opacity: 0.85;
}

/* =========================
PAPER OPEN – NAGY OLDALAK (csak desktop)
KIKAPCSOLVA 2026-05-29: a keretek nem mozdulnak el menü-nyitáskor.
A kód szándékosan benn marad (kommentben) — ha valaha vissza akarjuk
kapcsolni, csak az alábbi blokk komment-jelét kell levenni.
========================= */

.hero-overlay::before,
.hero-overlay::after{
  transition: transform .6s ease;
}

/*
@media (min-width: 1025px) {

  .hero-expanded .hero-overlay::before{
    transform: translateY(-247px);
    transition: transform .6s ease;
  }

  .hero-expanded .hero-overlay::after{
    transform: translateY(247px);
    transition: transform .6s ease;
  }

}
*/

/* =========================
CLOSE BUTTON
========================= */

/* Gomb konténer (visszanyíl + X) */
.submenu-nav-btns{
  position:fixed;
  right:60px;
  z-index:9999;
  display:none;
  align-items:center;
  gap:5px;
}

body.menu-open .submenu-nav-btns{
  display:flex;
  top:50%;
  transform:translateY(-65%);
}

body.expanded-mode .submenu-nav-btns{
  display:flex;
  top:50%;
  transform:translateY(-50%);
}

.submenu-close,
.submenu-back{
  width:48px;
  height:48px;

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

  font-size:38px;
  font-weight:1000;

  cursor:pointer;

  color:#000;

  transition:all .3s ease;
}

.submenu-close:hover,
.submenu-back:hover{
  transform:scale(1.15);
}

/* Visszanyíl alapból rejtett, csak ha van history */
.submenu-back{
  display:none;
  transform:translateY(-3px);
}

.submenu-back.visible{
  display:flex;
  transform:translateY(-3px);
}
/* =========================
NAV HIDE WHEN EXPANDED
========================= */

/* Desktop: opacity is 0 + pointer-events none */
@media (min-width: 1025px) {

  body.expanded-mode .site-header{
    opacity:0;
    transition:opacity .3s ease;
  }

  body.expanded-mode .footer-mainmenu,
  body.expanded-mode .footer-top{
    opacity:0;
    transition:opacity .3s ease;
  }

}

/* Minden méretben: expanded modeban nem kattinthatóak */
body.expanded-mode .site-header,
body.expanded-mode .site-header > *,
body.expanded-mode .site-header a,
body.expanded-mode .site-header button,
body.expanded-mode .footer-mainmenu,
body.expanded-mode .footer-mainmenu > *,
body.expanded-mode .footer-mainmenu a,
body.expanded-mode .footer-top,
body.expanded-mode .footer-top > *,
body.expanded-mode .footer-top a,
body.expanded-mode .footer-top button {
  pointer-events: none !important;
}

/* Mobilon (≤1024px) a fejléc NEM tűnik el (az opacity:0 csak desktopon hat),
   és ő a navigációs felület: a logó (főoldalra vezető link) és a
   "Keresel valamit?" gomb expanded-mode-ban is kattintható kell maradjon.
   A re-enable szelektorok specificitása (0,3,1) veri a fenti tiltók (0,2,2)
   !important szabályát. Desktopon (≥1025px) változatlan a viselkedés. */
@media (max-width: 1024px) {
  body.expanded-mode .site-header .hero-title-box,
  body.expanded-mode .site-header .hero-title-box *,
  body.expanded-mode .site-header .hero-title-link,
  body.expanded-mode .site-header .mobile-search-toggle,
  body.expanded-mode .site-header .mobile-search-toggle * {
    pointer-events: auto !important;
  }
}

/* =========================
EXPANDED MODE LAYOUT
========================= */

body.expanded-mode .submenu-text{

max-width:1200px;

height:60vh;
height:60svh;

margin: 20px auto 20px auto;

overflow-y:auto;

padding:0 10px;

}

/* Scroll lock */
body.menu-open{
  overflow: hidden;
}

html:has(body.menu-open){
  overflow: hidden;
}


/* =========================
FOOTER SOCIAL ICONS
========================= */

.footer-social{
  position:static;
  transform:none;

  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
}

.footer-social a,
.footer-social button{
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
}

.footer-social img{
  display:block;
  width:40px;
  height:40px;
  object-fit:contain;
  transition:transform .25s ease;
}

.footer-social a:hover img,
.footer-social button:hover img{
  transform:scale(1.22);
}

.footer-social button{
background:none;
border:none;
padding:0;
cursor:pointer;
}

/* =========================
NEWSLETTER PANEL
========================= */

.newsletter-panel{

position:fixed;
left:0;
bottom:0;
width:100%;
height:100%;

background-image:url('<?php echo get_template_directory_uri(); ?>/assets/images/galeriahatter.png');
background-size:cover;

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

opacity:0;
pointer-events:none;

transition:opacity .4s ease;

z-index:999;
}

.newsletter-panel.active{
opacity:1;
pointer-events:auto;
}

.newsletter-content{

max-width:600px;

background:#ecd8c8;

padding:60px;

border:1px solid #000;

font-family:'Playfair Display', serif;
font-size:20px;
line-height:1.6;

text-align:center;

}

#flipbook-container iframe{
  width:100%;
  height:100%;
  border:0;
}
/* =========================
GYIK – ALAP LAYOUT
========================= */

.gyik-wrapper{
max-width:900px;
margin:40px auto;
padding:0 20px;
}

.gyik-cim{
font-size:32px;
margin-bottom:40px;
text-align:center;
}

/* TÉMA */

.tema-doboz{
margin:20px 0;
cursor:pointer;
}

/* ALKÉRDÉSEK */

.kerdes-lista{
display:none;
margin-top:20px;
}

.tema-doboz.open .kerdes-lista{
display:block;
}

.kerdes-doboz{
margin:15px 0;
cursor:pointer;
}

.kerdes-inner{
font-size:18px;
font-weight:600;
}



/* VÁLASZ */

.valasz-doboz{
display:none;
margin-top:10px;
line-height:1.6;
}

.kerdes-doboz.open .valasz-doboz{
display:block;
}

/* =========================
GYIK TÉMA DOBOZOK
========================= */

.tema-doboz{

border:1px solid #000;

background:#ecd8c8;

padding:12px 18px;

margin-bottom:12px;

max-width:900px;

margin-left:auto;
margin-right:auto;

cursor:pointer;

transition:background .2s ease, transform .15s ease;

}

/* cím */

.tema-inner{

font-size:22px;
font-weight:600;

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

}

.tema-inner::after{

content:"";

width:10px;
height:10px;

border-right:2px solid #3f4a36;
border-bottom:2px solid #3f4a36;

transform:rotate(45deg);

transition:transform .35s ease;

}

.tema-doboz.open .tema-inner::after{

transform:rotate(224deg);

}

/* hover effekt */

.tema-doboz:hover{

background:rgba(0,0,0,0.03);

transform:translateY(-2px);

}


.kerdes-inner::after{

content:"";

display:block;

height:1px;

background:#000;

margin-top:10px;

width:100%;

opacity:0.4;

}

.submenu-text a,
.submenu-text a:visited{

color:#3f4a36;

text-decoration:underline;

font-weight:600;

}

.submenu-text a:hover{

color:#1f2a1c;

}

.kerdes-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

/* nyíl */

.kerdes-inner::after{


content:"";

width:10px;
height:10px;

border-right:2px solid #3f4a36;
border-bottom:2px solid #3f4a36;

transform:rotate(45deg);

transition:transform .35s ease;

}

.kerdes-doboz.open .kerdes-inner::after{

transform:rotate(100deg);

}

.valasz-doboz a{
color:#22452e !important;
text-decoration:underline !important;
font-weight:700;
}

/* =========================
SORSZAMOKROL – ALAP LAYOUT
========================= */

.sorszam-wrapper{
max-width:900px;
margin:0 auto;
}

.sorszam-cim{
font-size:36px;
text-align:center;
margin-bottom:50px;
}

.sorszam-doboz{

border:1px solid #000;
background:#ecd8c8;

padding:12px 18px;
margin-bottom:12px;

cursor:pointer;

transition:background .2s ease, transform .15s ease;

}

/* hover effekt ugyanaz mint a gyik */

.sorszam-doboz:hover{

background:rgba(0,0,0,0.03);
transform:translateY(-2px);

}

.sorszam-fejlec{

font-size:20px;
font-weight:600;

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

}

.sorszam-tartalom{

max-height:0;
overflow:hidden;

margin-top:0;

line-height:1.6;

transition:max-height .45s ease, margin .35s ease;

}

.sorszam-doboz.open .sorszam-tartalom{

max-height:8000px;
margin-top:15px;

}

.sorszam-doboz.open .sorszam-tartalom{
display:block;
}

.sorszam-info{
text-align:center;
margin:40px 0;
}

.sorszam-gomb{

background:none;
border:none;

color:#3f4a36;

font-weight:600;

cursor:pointer;
text-decoration:underline;

}

.sorszam-appok{

display:flex;
justify-content:center;
gap:25px;

margin-top:30px;

}

.sorszam-appok img{

height:55px;

}

.sorszam-extra{

margin-top:50px;

}

/* =========================
SORSZÁM ACCORDION (details/summary)
========================= */

.sorszam-extra-details{
  margin-top:50px;
}

.sorszam-extra-details > summary{
  list-style:none;
  text-align:center;
  margin:40px 0;
  cursor:pointer;
}

.sorszam-extra-details > summary::-webkit-details-marker{
  display:none;
}

.sorszam-info-summary p{
  margin:0;
}

.sorszam-fejlec::after{

content:"";

width:10px;
height:10px;

border-right:2px solid #3f4a36;
border-bottom:2px solid #3f4a36;

transform:rotate(45deg);

transition:transform .35s ease;

}

.sorszam-doboz.open .sorszam-fejlec::after{

transform:rotate(224deg);

}


/* =========================
SORSZÁM RENDSZER DOBOZOK
========================= */

.sorszam-extra{
display:none;
margin-top:50px;
}

.sorszam-extra.active{
display:block;
}


/* KÉT DOBOZ GRID */

.sorszam-box-grid{

display:grid;
grid-template-columns:1fr 1fr;

gap:30px;

margin-bottom:40px;

}


/* KIS DOBOZOK */

.sorszam-info-box{

background:#ecd8c8;

border:1px solid #000;

border-radius:12px;

padding:25px;

max-height:260px;

overflow-y:auto;

line-height:1.6;

}


/* NAGY DOBOZ */

.sorszam-nagy-doboz{

background:#ecd8c8;

border:3px solid #c40000;

border-radius:14px;

padding:35px;

margin-top:30px;

line-height:1.7;

}


/* PIROS BEVEZETŐ */

.sorszam-piros{

color:#c40000;

font-weight:600;

margin-bottom:25px;

}


/* GYIK CÍM */

.sorszam-gyik-cim{

text-align:center;

font-size:32px;

margin-top:60px;

}

/* =========================
SORSZÁM DOBOZ SCROLLBAR
========================= */

.sorszam-info-box::-webkit-scrollbar{
width:8px;
}

.sorszam-info-box::-webkit-scrollbar-track{
background:transparent;
border-radius:10px;
}

.sorszam-info-box::-webkit-scrollbar-thumb{
background:#3f4a36;
border-radius:10px;
}

.sorszam-info-box::-webkit-scrollbar-thumb:hover{
background:#2e3b2f;
}

/* =========================
SORSZÁMOK - GYAKORI KÉRDÉSEK
========================= */

.sorszam-gyik-lista{
max-width:900px;
margin:35px auto 0 auto;
}

.sorszam-gyik-doboz{

border:1px solid #000;
background:#ecd8c8;

padding:12px 18px;
margin-bottom:12px;

cursor:pointer;

transition:background .2s ease, transform .15s ease;

}

.sorszam-gyik-doboz:hover{

background:rgba(0,0,0,0.03);
transform:translateY(-2px);

}

.sorszam-gyik-fejlec{

font-size:20px;
font-weight:600;

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

}

.sorszam-gyik-fejlec::after{

content:"";

width:10px;
height:10px;

border-right:2px solid #3f4a36;
border-bottom:2px solid #3f4a36;

transform:rotate(45deg);

transition:transform .35s ease;

flex-shrink:0;

}

.sorszam-gyik-doboz.open .sorszam-gyik-fejlec::after{
transform:rotate(224deg);
}

.sorszam-gyik-tartalom{

max-height:0;
overflow:hidden;

margin-top:0;

line-height:1.7;

transition:max-height .35s ease, margin .25s ease;

}

.sorszam-gyik-doboz.open .sorszam-gyik-tartalom{

max-height:1400px;
margin-top:16px;

}

/* kérdés és válasz közti csík */

.sorszam-gyik-doboz.open .sorszam-gyik-tartalom::before{

content:"";
display:block;

height:1px;
background:#000;

margin:0 12px 18px 12px;

}

/* =========================
LÉPÉS RENDSZER
========================= */

.lepes-indikator{

display:flex;
justify-content:center;
gap:14px;
margin:30px 0;

}

.lepes-golyo{

width:16px;
height:16px;

border:2px solid #3f4a36;
border-radius:50%;

cursor:pointer;

transition:transform .2s ease, background .2s ease;

}

.lepes-golyo.active{

background:#3f4a36;

}

.lepes-golyo:hover{

transform:scale(1.2);

}


/* lépés doboz */

.lepes-doboz{

background:#ecd8c8;
border:1px solid #000;

padding:35px;

position:relative;

}

.lepes{

display:none;
line-height:1.7;

}

.lepes.active{

display:block;

}


/* nyilak */

.lepes-nav{

position:absolute;
right:20px;
top:20px;

display:flex;
gap:10px;

}

.lepes-nav div{

cursor:pointer;

padding:6px 10px;

border-radius:6px;

transition:background .2s ease, transform .2s ease;

}

.lepes-nav div:hover{

background:rgba(0,0,0,0.05);
transform:scale(1.1);

}

.lepes-golyo{
width:14px;
height:14px;
border:2px solid #4b563c;
border-radius:50%;
cursor:pointer;
transition:all .2s ease;
}

.lepes-golyo.active{
background:#4b563c;
}

.lepes-golyo:hover{
transform:scale(1.2);
}

.lepes-nav div{
cursor:pointer;
transition:all .2s ease;
padding:6px 12px;
border-radius:4px;
}

.lepes-nav div:hover{
transform:scale(1.1);
background:#e6e1d6;
}

.lepes-doboz{
border:1px solid #4b563c;
padding:25px;
margin-top:20px;
transition:height .3s ease;
}

.sorszam-figyelmeztetes{
background:#ecd8c8;
border:2px solid #b92b2b;
padding:30px;
margin-top:40px;
}

.sorszam-figyelmeztetes h3{
color:#b92b2b;
margin-bottom:15px;
font-weight:600;
}

.sorszam-ketdoboz{
display:flex;
gap:30px;
margin-top:40px;
}

.sorszam-negyzet{
background:#ecd8c8;
flex:1;
border:1px solid #4b563c;
padding:25px;
border-radius:10px;
max-height:300px;
overflow:auto;
}

.sorszam-negyzet strong{
display:block;
margin-bottom:15px;
}

.sorszam-negyzet::-webkit-scrollbar{
width:8px;
}

.sorszam-negyzet::-webkit-scrollbar-track{
background:transparent;
border-radius:10px;
}

.sorszam-negyzet::-webkit-scrollbar-thumb{
background:#3f4a36;
border-radius:10px;
}

.sorszam-negyzet::-webkit-scrollbar-thumb:hover{
background:#2e3b2f;
}

.sorszam-hosszu{
background:#ecd8c8;
border:1px solid #4b563c;
padding:30px;
margin-top:40px;
}

.sorszam-csapat{
background:#ecd8c8;
border:2px solid #b92b2b;
padding:30px;
margin-top:40px;
}

.sorszam-csapat strong{
color:#b92b2b;
display:block;
margin-bottom:15px;
}

.sorszam-appok{
display:flex;
gap:20px;
margin-top:20px;
}

.sorszam-appok img{
height:50px;
}

.sorszamgep-gyik{
margin-top:40px;
}

.sorszamgep-gyik-doboz{
background:#ecd8c8;
border:1px solid #4b563c;
margin-bottom:15px;
cursor:pointer;
transition:all .3s ease;
}

.sorszamgep-gyik-fejlec{
padding:20px;
font-weight:700;
display:flex;
justify-content:space-between;
align-items:center;
}

.sorszamgep-gyik-fejlec::after{
content:"";
width:10px;
height:10px;
border-right:2px solid #3f4a36;
border-bottom:2px solid #3f4a36;
transform:rotate(45deg);
transition:transform .35s ease;
flex-shrink:0;
}

.sorszamgep-gyik-tartalom{
max-height:0;
overflow:hidden;
padding:0 20px;
transition:max-height .35s ease;
}

.sorszamgep-gyik-doboz.open .sorszamgep-gyik-tartalom{
max-height:600px;
padding:20px;
}

.sorszamgep-gyik-doboz.open .sorszamgep-gyik-fejlec::after{
transform:rotate(224deg);
}

.sorszamgep-gyik-tartalom{
border-top:none;
margin:0 20px;
}

.sorszamgep-gyik-doboz.open .sorszamgep-gyik-tartalom{
border-top:1px solid #4b563c;
}

.sorszam-info a,
.sorszam-info button{
font-size:inherit;
}

/* =========================
        Dokumentumtár
========================= */

.docs-wrapper{
  display:flex;
  gap:80px; /* nagyobb távolság */
  justify-content:center;
  align-items:flex-start;
}

.docs-box{
  width:650px; /* nagyobb doboz */
  background:#ecd8c8;
  border:1px solid #2f3a2e; /* vastagabb keret */
  cursor:pointer;
  padding:0; /* fontos */
}

.docs-header{
  padding:22px 24px; /* nagyobb belső tér */
  font-size:22px; /* nagyobb cím */
  font-weight:700; /* VASTAG */
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#2f3a2e;
}

.docs-header::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid #3f4a36;
  border-bottom:2px solid #3f4a36;
  transform:rotate(45deg);
  transition:transform .35s ease;
  flex-shrink:0;
}

.docs-box.open .docs-header::after{
  transform:rotate(224deg);
}

.docs-content{
  max-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:max-height .4s ease;
}

.docs-box.open .docs-content{
  max-height:1000px;
}

.docs-content a{
  padding:12px 18px;
  text-decoration:none;
  color:#3f4a36;
  border-top:1px solid rgba(0,0,0,0.2);
  text-align:center; /* EZ KELL */
}

.docs-content a:hover{
  background:rgba(0,0,0,0.05);
}

/* =========================
          ÁSZF
========================= */

.aszf-wrapper{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:30px;
}

/* CÍM */
.aszf-main-title{
  text-align:center;
  font-size:30px;
  font-weight:700;
  color:#2f3a2e;
}

.aszf-main-title span{
  font-size:30px;
  font-weight:700;
}

/* DOBOZ */
.aszf-box{
  border:1px solid #2f3a2e;
  background:#ecd8c8;
  cursor:pointer;
}

/* HEADER */
.aszf-header{
  padding:28px 40px;
  font-size:22px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* NYÍL */
.aszf-header::after{
  content:"";
  width:14px;
  height:14px;
  border-right:2px solid #2f3a2e;
  border-bottom:2px solid #2f3a2e;
  transform:rotate(45deg);
  transition:.3s;
}

/* OPEN */
.aszf-box.open .aszf-header::after{
  transform:rotate(225deg);
}

/* CONTENT */
.aszf-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  padding:0 40px;
}

.aszf-box.open .aszf-content{
  max-height:2000px;
  padding:20px 40px 30px;
}

/* SZÖVEG */
.aszf-content p{
  margin-bottom:15px;
  line-height:1.6;
  font-size:16px;
}

/* FOOTER */
.aszf-footer{
  text-align:center;
  margin-top:40px;
  font-size:16px;
}

/* =========================
          Közlekedes
========================= */

.kozlekedes-wrapper{
  display:flex;
  gap:80px;
  max-width:1200px;
  margin:0 auto;
}

.kozlekedes-col{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:25px;
}

.kozlekedes-title{
  font-size:28px;
  font-weight:700;
  color:#2f3a2e;
  margin-bottom:10px;
}

/* DOBOZ */
.kozlekedes-box{
  border:1px solid #2f3a2e;
  background:#ecd8c8;
  cursor:pointer;
}

/* HEADER */
.kozlekedes-header{
  padding:22px 30px;
  font-size:22px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* NYÍL */
.kozlekedes-header::after{
  content:"";
  width:12px;
  height:12px;
  border-right:2px solid #2f3a2e;
  border-bottom:2px solid #2f3a2e;
  transform:rotate(45deg);
  transition:.3s;
}

.kozlekedes-box.open .kozlekedes-header::after{
  transform:rotate(225deg);
}

/* CONTENT */
.kozlekedes-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  padding:0 30px;
}

.kozlekedes-box.open .kozlekedes-content{
  max-height:1500px;
  padding:20px 30px 30px;
}

.kozlekedes-content p{
  margin-bottom:12px;
  line-height:1.6;
}

/* =========================
          Szállás
========================= */

.szallas-wrapper{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:50px;
}

/* PIROS DOBOZ */
.szallas-main-box{
  border:2px dashed #c0392b; /* SZAGGATOTT PIROS */
  padding:40px 60px;
  text-align:center;
  line-height:1.7;
  font-size:18px;
  background:#ecd8c8;
}

/* KÉT DOBOZ */
.szallas-boxes{
  display:flex;
  gap:40px;
  align-items:flex-start; /* 🔥 EZ KELL */
}

/* DOBOZ */
.szallas-box{
  flex:1;
  border:1px solid #2f3a2e;
  background:#ecd8c8;
  cursor:pointer;
}

/* HEADER */
.szallas-header{
  padding:22px 30px;
  font-size:20px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* NYÍL */
.szallas-header::after{
  content:"";
  width:10px;
  height:10px;
  border-right:2px solid #3f4a36;
  border-bottom:2px solid #3f4a36;
  transform:rotate(45deg);
  transition:transform .35s ease;
  flex-shrink:0;
}

.szallas-box.open .szallas-header::after{
  transform:rotate(224deg);
}

/* CONTENT */
.szallas-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
  padding:0 30px;
  text-align:left;
  font-family: 'Playfair Display', serif;
}

.szallas-box.open .szallas-content{
  max-height:1000px;
  padding:20px 30px 30px;
}

/* =========================
        Műsorfüzetek
========================= */

.musor-wrapper{
  max-width:1200px;
  margin:0 auto;
}

.musor-title{
  text-align:center;
  font-size:32px;
  margin-bottom:40px;
}

/* GRID */
.musor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
  gap:30px;
}

/* CARD */
.musor-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;

  aspect-ratio: 3 / 4;   /* 🔥 IDE kerüljön */
}

.musor-card img{
  width:100%;
  height:100%;           /* 🔥 EZ HIÁNYZOTT */
  object-fit:cover;
  object-position: top;
  display:block;
}
.musor-card span{
  display:block;
  margin-top:10px;
  font-weight:600;
}

.musor-card:hover{
  transform:translateY(-5px) scale(1.03);
}

/* MODAL */
.musor-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.8);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.musor-modal.active{
  display:flex;
}

.musor-modal-inner{
  width:90%;
  height:90%;
  background:#fff;
  position:relative;
}

.musor-modal iframe{
  width:100%;
  height:100%;
}

/* CLOSE */
.musor-close{
  position:absolute;
  top:10px;
  right:20px;
  font-size:30px;
  cursor:pointer;
  z-index:10;
}

.musor-year{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);

  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);

  color:#fff;
  font-size:22px;
  font-weight:700;

  padding:10px 22px;
  border-radius:12px;

  pointer-events:none;
}

/* =========================
   HÍREK GRID
========================= */

.hirek-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap:25px;
    margin-top:40px;
}

/* DOBOZ */

.hir-doboz{
    position:relative;
    height:180px;

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

    text-align:center;

    border:1px solid #000;
    cursor:pointer;

    background-size:cover;
    background-position:center;

    transition:transform .2s ease;
}

.hir-doboz:hover{
    transform:scale(1.03);
}

/* CÍM */

.hir-cim{
    color:#fff;
    font-size:20px;
    font-weight:600;
    text-shadow:0 2px 8px rgba(0,0,0,0.6);
}

.kiemelt-hir{
    text-align:center;
}

.kiemelt-hir p{
    text-align:center;
}

.kiemelt-hir *{
    text-align:center;
}

.kiemelt-hir img{
    display:block;
    margin:20px auto;
    max-width:40%;
}
/* =========================
   KIEMELT HÍR
========================= */

.kiemelt-hir{
    display:none;

    border:1px solid #000;
    padding:30px;
    margin-bottom:40px;

    background:#ecd8c8;
}

.kiemelt-hir.active{
    display:block;
}

.kiemelt-hir-kep{
    width:70%;          /* 🔥 EZ szabályozza a méretet */
    max-width:700px;   /* ne legyen túl nagy */
    height:auto;

    margin:20px auto;  /* középre igazítás */

    display:block;
}

.kiemelt-hir{
    position:relative;
}

.kiemelt-hir-fejlec{
    position:absolute;
    top:10px;
    right:15px;
}

.hir-bezar{
    font-size:44px;
    cursor:pointer;
    color:#000;
}

.hir-bezar:hover{
    opacity:0.6;
}

.hir-doboz{
    position:relative;
    overflow:hidden;
}

/* SÖTÉT SÁV */

.hir-cim{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;

    display:flex;              /* 🔥 EZ A LÉNYEG */
    justify-content:center;    /* vízszintes közép */
    align-items:center;        /* függőleges közép */

    background:rgba(0,0,0,0.6);

    color:#fff;
    font-size:20px;
    font-weight:600;

    padding:10px 0;
    text-align:center;
}

/* =========================
   Galeria
========================= */

.galeria-stage{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:20px 0 10px;
}

.ok-carousel{
  width:min(1100px, 92vw);
  overflow:hidden;
}

.ok-carousel-viewport{
  position:relative;
  width:100%;
  height:460px;
  overflow:hidden;
  border-radius:28px;
}

.ok-carousel-track{
  display:flex;
  height:100%;
  transition:transform .55s ease;
  will-change:transform;
}

.ok-carousel-slide{
  flex:0 0 68%;
  margin:0 1.5%;
  height:100%;
  border-radius:24px;
  overflow:hidden;
  opacity:.55;
  transform:scale(.9);
  transition:transform .45s ease, opacity .45s ease;
}

.ok-carousel-slide.is-active{
  opacity:1;
  transform:scale(1);
}

.ok-carousel-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.ok-carousel-controls{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}

.ok-carousel:hover .ok-carousel-controls{
  opacity:1;
  pointer-events:auto;
}

.ok-carousel-btn{
  width:52px;
  height:52px;
  border:none;
  outline:none;
  border-radius:999px;
  background:rgba(24,24,24,.55);
  color:#fff;
  font-size:0;
  line-height:1;
  cursor:pointer;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow:none;
}

.ok-carousel-btn:hover{
  transform:scale(1.06);
}

.ok-carousel-btn svg{
  width:22px;
  height:22px;
  display:block;
  fill:#fff;
}

.ok-carousel-controls .ok-toggle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}

/* Toggle (pause) gomb ikon */
.ok-toggle::before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: white;
  mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="4" width="4" height="16" fill="white"/><rect x="15" y="4" width="4" height="16" fill="white"/></svg>');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="4" width="4" height="16" fill="white"/><rect x="15" y="4" width="4" height="16" fill="white"/></svg>');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Is-paused állapotban: play ikon */
.ok-carousel.is-paused .ok-toggle::before{
  mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="5,3 19,12 5,21" fill="white"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="5,3 19,12 5,21" fill="white"/></svg>');
}

.ok-carousel-thumbs{
  max-height:0;
  overflow:hidden;
  display:flex;
  gap:10px;
  align-items:center;
  padding:0 14px;
  margin-top:0;
  border-radius:0 0 22px 22px;
  transition:max-height .35s ease, padding .35s ease, margin-top .35s ease;
}

.ok-carousel.is-paused .ok-carousel-thumbs{
  max-height:96px;
  padding:14px;
  margin-top:10px;
}

.ok-carousel-thumb{
  width:92px;
  height:64px;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  opacity:.7;
  border:2px solid transparent;
  flex:0 0 auto;
}

.ok-carousel-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ok-carousel-thumb.is-active{
  opacity:1;
  border-color:#3f4a36;
}

.ok-prev::before,
.ok-next::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: white;

  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* BAL nyíl */
.ok-prev::before {
  mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="15,4 7,12 15,20" fill="white"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="15,4 7,12 15,20" fill="white"/></svg>');
}

/* JOBB nyíl */
.ok-next::before {
  mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="9,4 17,12 9,20" fill="white"/></svg>');
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><polygon points="9,4 17,12 9,20" fill="white"/></svg>');
}

.ok-carousel{
  width:min(1100px, 92vw);

  background-image: url('assets/images/katlan_web_hatter.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  padding: 20px;
  border-radius: 28px;
  position: relative;
    /* 🔥 külső árnyék */
  box-shadow: 
    0 10px 25px rgba(0,0,0,0.15),
    0 2px 6px rgba(0,0,0,0.1);

  /* 🔥 belső árnyék */
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.207),
    0 2px 6px rgba(0, 0, 0, 0.204),
    inset 0 2px 8px rgba(0, 0, 0, 0.235);
}



.ok-carousel-thumbs{
  overflow-x: auto;
  scroll-behavior: smooth;
}

.ok-carousel-thumbs::-webkit-scrollbar {
  height: 8px;
}

.ok-carousel-thumbs::-webkit-scrollbar-track {
  background: transparent; /* 🔥 ez szedi ki a fehéret */
}

.ok-carousel-thumbs::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
}

.ok-carousel-thumbs::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5);
}

.ok-carousel-thumbs {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) transparent;
}

/* FELSŐ CÍM */
.galeria-main-title{
  text-align:center;
  font-size:32px;
  font-weight:700;
  margin:40px 0 20px;
  color:#000;
}

/* ALSÓ BLOKK */
.galeria-info{
  max-width:800px;
  margin:40px auto;
  text-align:center;
}

/* MÁSODIK CÍM */
.galeria-subtitle{
  font-size:22px;
  margin-bottom:30px;
}

/* ÉVEK DOBOZOK */
.galeria-years{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.galeria-years a{
  display:flex;
  justify-content:center;
  align-items:center;
  height:48px;
  border:1px solid #000;
  background:#ecd8c8;
  text-decoration:none;
  color:#000;
  font-weight:700;
  font-size:18px;
  transition:all .2s ease;
}

/* hover */
.galeria-years a:hover{
  background:#e0c9b6;
  transform:scale(1.02);
}

/* ALSÓ SZÖVEG */
.galeria-footer-text{
  margin-top:30px;
  font-size:18px;
  line-height:1.6;
}

/* =========================
   Produkcioink
========================= */

.produkciok-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.oszlop {
    flex: 1;
}

.produkcio-item {
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.produkcio-item {
    margin-bottom: 20px;
}

/* CARD */
.produkcio-card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* KÉP */
.produkcio-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

/* OVERLAY */
.produkcio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);

    display: flex;
    align-items: flex-end;

    padding: 20px;

    opacity: 0;
    transition: 0.3s ease;
}

/* CÍM */
.produkcio-title {
    color: rgb(0, 0, 0);
    font-size: 18px;
    font-weight: 500;
}

/* HOVER */
.produkcio-card:hover .produkcio-image img {
    transform: scale(1.05);
}

.produkcio-card:hover .produkcio-overlay {
    opacity: 1;
}

.produkcio-content {
    display: none;
    margin-top: 10px;
}

.produkcio-item.active .produkcio-content {
    display: block;
    animation: fadeIn 0.3s ease;
}

.produkcio-header {
    cursor: pointer;
    font-weight: bold;
    padding: 10px 0;
}

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

.produkcio-item {
    border: 1px solid #000;
    background: #ecd8c8;
    margin-bottom: 10px;
}

/* HEADER */
.produkcio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    font-weight: bold;
}

/* NYÍL */
.produkcio-arrow {
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

/* NYITOTT ÁLLAPOT */
.produkcio-item.active .produkcio-arrow {
    transform: rotate(225deg);
}

/* LENYÍLÓ RÉSZ */
.produkcio-content {
    display: none;
    padding: 15px;
    border-top: 1px solid #000;
}

/* NYITOTT */
.produkcio-item.active .produkcio-content {
    display: block;
}

.slider {
    position: relative;
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform 0.4s ease;
}

.slide {
    min-width: 100%;
}

.slide img {
    width: 100%;
    display: block;
}

/* Produkció dobozban lévő slider mérete – csak mobilon/tableten */
@media (max-width: 1024px) {
    .produkcio-content .slider {
        max-width: 320px;
        margin: 0 auto 12px auto;
        border-radius: 15px;
    }

    .produkcio-content .slide img {
        width: 100%;
        max-height: 220px;
        object-fit: cover;
        display: block;
    }
}

/* Asztali nézetben: fele akkora mint teljes szélesség */
@media (min-width: 1025px) {
    .produkcio-content .slider {
        max-width: 50%;
        border-radius: 15px;
        margin: 0 auto 12px auto;
    }

    .produkcio-content .slide img {
        width: 100%;

        object-fit: cover;
        display: block;
    }
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }

/* Fő cím */
.submenu-text h2 {
    text-align: center;
    width: 100%;
}

/* Oszlop címek */
.oszlop h3 {
    text-align: center;
    width: 100%;
}

.custom-list {
    list-style: none;
    padding-left: 0;
}

.custom-list li{
    font-family: 'Playfair Display', serif !important;
}

.custom-list li::before {
    content: "- ";
}

.produkcio-content ul {
    display: block !important;
}

.produkcio-content ul li {
    font-weight: 400 !important;
}
.produkcio-content ul li {
    cursor: default;
}

/* =========================

========================= */

.mobile-search-toggle {
  display: none;

  background: none !important;
  border: none !important;
  padding: 0 !important;

  font-family: 'Playfair Display', serif;
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;

  color: #3f4a36;

  cursor: pointer;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  top: 25vw;

  z-index: 50;
}

@media (max-width: 1024px) {

  /* Vízszintes görgetés tiltása mobilon */
  /* overflow-x: clip: nem hoz létre scroll containert (iOS fix) */
  html {
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
  }

  .main-nav {
    display: none;
  }

  .mobile-search-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

}

/* ---- Hamburger ikon a "Keresel valamit?" gomb elején ----
   Nyitott menüben (body.menu-open) X-szé alakul, .3s-es minimál animációval. */
.mobile-burger {
  display: inline-block;
  /* em-alapú méret: a gomb betűméretéhez (a szöveghez) igazodik, így minden
     képernyőméretnél PONTOSAN olyan magas, mint a felirat nagybetűi.
     A gomb align-items:center miatt nem lóg se lejjebb, se feljebb. */
  width: 1.05em;
  height: 0.72em;
  position: relative;
  flex: 0 0 auto;
  padding-bottom: 7px;
}
.mobile-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #3f4a36;
  transition: transform .3s ease, opacity .3s ease, top .3s ease;
}
.mobile-burger span:nth-child(1) { top: 0; }
.mobile-burger span:nth-child(2) { top: 7px; }
.mobile-burger span:nth-child(3) { top: 14px; }



.mobile-main-menu {
  list-style: none;
  padding: 20px;
  margin: 0;
  text-align: center;
}

.mobile-main-menu li {
  margin-bottom: 15px;
}

.mobile-main-menu a {
  display: block;
  font-size: 18px;
  color: white;
  text-decoration: none;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
/* =========================
   TABLET LOGO MÉRET (768px – 1024px)
   ========================= */

@media (min-width: 768px) and (max-width: 1024px) {
  .hero-title-box .hero-logo {
    width: clamp(145px, calc(145px + (100vw - 768px) * 0.20), 196px) !important;
    max-width: 196px !important;
    height: auto !important;
    display: block !important;
  }
}

/* =========================
   MOBIL LOGO MÉRET ÉS GOMB STÍLUS (≤768px)
   ========================= */

@media (max-width: 768px) {
  .hero-title-box .hero-logo {
    width: clamp(85px, calc(175px - (768px - 100vw) * 0.22), 175px) !important;
    height: auto !important;
  }

  .mobile-search-toggle {
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: clamp(13px, 3.5vw, 17px) !important;
    letter-spacing: clamp(1px, 0.4vw, 2px) !important;
  }
}

@media (max-width: 480px) {
  .hero-title-box .hero-logo {
    width: clamp(65px, calc(110px - (480px - 100vw) * 0.26), 110px) !important;
  }

  .mobile-search-toggle {
    font-size: 12px !important;
  }
}

@media (max-width: 350px) {
  .mobile-search-toggle {
    font-size: clamp(10px, 3.2vw, 11px) !important;
  }
}

/* =========================
   📱 VALÓDI MOBIL / IPHONE FIX
   ========================= */

.hero-section {
  min-height: 100svh;
}

/* =============================================
   ADMIN BAR KOMPENZÁCIÓ (bejelentkezett nézet)
   WP admin bar: ≥783px = 32px, 600–782px = 46px
   ============================================= */

/* 32px admin bar (≥783px) — felirat + gomb pozíció korrekció
   A html elem kap margin-top: 32px-t, de site-header (position:absolute top:0)
   nem mozdul → a feliratot és gombot le kell tolni ugyanennyivel */
body.admin-bar .hero-title-box {
  top: calc(10vw + 32px) !important;
}
body.admin-bar .mobile-search-toggle {
  top: calc(35vw + 32px) !important;
}
body.admin-bar .main-nav {
  top: calc(11.5vw + 32px) !important;
}


/* 46px admin bar (600px–782px) — felirat + gomb korrekció */
@media (min-width: 600px) and (max-width: 782px) {
  body.admin-bar .hero-title-box {
    top: calc(10vw + 46px) !important;
  }
  body.admin-bar .mobile-search-toggle {
    top: calc(35vw + 46px) !important;
  }
}

/* 46px admin bar (600px–782px) — felirat + gomb korrekció */
@media (min-width: 320px) and (max-width: 600px) {
  body.admin-bar .hero-title-box {
    top: calc(10vw + 46px) !important;
  }
  body.admin-bar .mobile-search-toggle {
    top: calc(35vw + 46px) !important;
  }
}

/* MOBIL FEKVŐ NÉZET — feljebb húzott felirat és „Keresel valamit?" gomb.
   Csak landscape-en, max 1024px-ig. Álló mobil és desktop érintetlen. */
@media (max-width: 1024px) and (orientation: landscape) {
  .hero-title-box {
    top: 4.4vw;
  }
  .mobile-search-toggle {
    top: 12vw;
  }
}

/* MOBIL ÁLLÓ NÉZET — a felirat top pozíciójának explicit rögzítése.
   Visszaállítja az alap 10vw-t portrait mobilon (a fenti landscape
   szabály így biztosan nem szivárog át). Desktop érintetlen. */
@media (max-width: 1024px) and (orientation: portrait) {
  .hero-title-box {
    top: 10vw;
  }
}

/* =========================
   📱 MOBIL FŐMENÜ – FÜGGŐLEGES LISTA
   ========================= */

/* A submenu-content ul.active általánosan flex-row – ezt mobilon felülírjuk */
@media (max-width: 1024px) {

  /* A mobile-main-menu mindig oszlopként jelenik meg */
  /* !important kell mert .submenu-content > ul magasabb specificitású */
  .mobile-main-menu {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 30px 20px !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
  }

  .mobile-main-menu:not(.active) {
    display: none !important;
  }

  .mobile-main-menu.active {
    display: flex !important;
  }

  .mobile-main-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(63, 74, 54, 0.2);
  }

  .mobile-main-menu li:first-child {
    border-top: 1px solid rgba(63, 74, 54, 0.2);
  }

  .mobile-main-menu a {
    display: block;
    width: 100%;
    padding: 14px 0;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: clamp(14px, 3.5vw, 18px);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #3f4a36;
    text-decoration: none;
  }

  .mobile-main-menu a:hover {
    opacity: 0.7;
  }

  /* Az almenük (info, kapcsolat stb.) is oszlopként jelenjenek meg */
  .submenu-content > ul.active {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 70px 20px !important;
    gap: 0 !important;
  }

  /* Tablet (501–1024px): az almenük függőleges padding-je nagyobb,
     hogy a wood-frame keret és a tartalom közt megfelelő levegő legyen. */
  @media (min-width: 501px) {
    .submenu-content > ul.active {
      padding: 150px 20px !important;
    }
  }

  /* Secondary nav linkek: ugyanolyan stílus mint a mobile-main-menu */
  .secondary-nav-link {
    display: block;
    width: 100%;
    padding: 16px 0;
    text-align: center;
    font-family: 'Playfair Display', serif;
    font-size: clamp(14px, 3.5vw, 18px) !important;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #3f4a36;
    text-decoration: none;
  }

  /* Elválasztó vonalak a li elemeken – ugyanolyan szélesség mint a főmenünél */
  .submenu-content > ul li {
    width: 100%;
    border-bottom: 1px solid rgba(63, 74, 54, 0.2);
  }

  .submenu-content > ul li:first-child {
    border-top: 1px solid rgba(63, 74, 54, 0.2);
  }

}


/* =========================
   📱 FOOTER-TOP – MOBIL LAYOUT
   ========================= */

@media (max-width: 1024px) {

  /* Gombok konténer: jobb felső sarok, tépett papír alja alatt */
  body.menu-open .submenu-nav-btns,
  body.menu-open:not(.expanded-mode) .submenu-nav-btns,
  body.expanded-mode .submenu-nav-btns {
    top: 22vw !important;
    right: 8px !important;
    transform: none !important;
  }

  .footer-top {
    left: 0 !important;
    right: 0 !important;
    bottom: 36px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    transform: none !important;
  }

  .footer-top-menu {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 28px;
    font-size: 15px;
    letter-spacing: 3px;
  }

  body.menu-open .footer-top-menu {
    display: flex !important;
  }

  body.expanded-mode .footer-top-menu {
    display: none !important;
  }

  .footer-top-menu a,
  .footer-top-menu a:link,
  .footer-top-menu a:visited {
    font-size: clamp(11px, 2.8vw, 15px);
    letter-spacing: clamp(1px, 0.4vw, 2.5px);
  }

  /* Közösségi ikonok: static elrendezés, ne lógjon ki */
  .footer-social {
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 28px !important;
  }

  .footer-social img {
    width: 34px;
    height: 34px;
  }

  /* Galéria: viewport magassága arányosan csökken */
  /* Galéria: teljes szélesség, minimális padding */
  .submenu-text[data-menu="galeria"] {
    width: 98vw;
    max-width: 98vw;
    padding: 35px 4px;
  }

  .ok-carousel {
    width: 98vw;
  }

  .ok-carousel-viewport {
    height: 300px;
  }

  /* Dokumentumtár dobozok: egymás alá */
  .docs-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .docs-box {
    width: 100%;
  }

  /* Sorszám info boxok: egymas ala */
  .sorszam-box-grid {
    grid-template-columns: 1fr;
  }

  /* Sorszám négyzet dobozok: egymas ala */
  .sorszam-ketdoboz {
    flex-direction: column;
  }

  /* Fő támogatók: 2 oszlop tábléten */
  .main-sponsors {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .footer-inner-box {
    padding: 40px 30px;
  }

}


@media (max-width: 1300px) {

  /* Fő támogatók: 2 oszlop tábléten */
  .main-sponsors {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}
@media (max-width: 800px) {

  /* Közlekedés oszlopok: egymás alá */
  .kozlekedes-wrapper {
    flex-direction: column;
    gap: 40px;
  }

}

@media (max-width: 700px) {

  /* Szállás dobozok: egymás alá, teljes szélesség */
  .szallas-boxes {
    flex-direction: column;
  }

  .szallas-box {
    width: 100%;
  }

}

@media (min-width: 421px) and (max-width: 1024px) {

  /* Footer menüpontok egy kicsit feljebb, ne érjenek bele a tépett papír mintába */
  .footer-top {
    bottom: 10vh !important;
  }

}
@media (min-width: 321px) and (max-width: 420px) {

  /* Footer menüpontok egy kicsit feljebb, ne érjenek bele a tépett papír mintába */
  .footer-top {
    bottom: 71px !important;
  }

}
@media (max-width: 1024px) {

  /* Footer social: csak menü nyitva esetén fix pozíció, X gomb magasságában, bal oldal */
  body.menu-open .footer-social {
    position: fixed !important;
    top: 32vw !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex-direction: row !important;
    gap: 16px !important;
    z-index: 9998;
  }

  /* Tablet landscape (kb. iPad mini 1024×768): a 32vw itt túl sok, mert a vw
     a hosszabb (1024) oldalra vetít. min-height:601 kizárja a fekvő telefont,
     ami amúgy is külön (4228-as) blokkból kapja a teljes-oldal-görgetést. */
  @media (orientation: landscape) and (min-width: 768px) and (min-height: 601px) {
    body.menu-open .footer-social {
      top: 15vw !important;
    }
  }

  body.menu-open .footer-social img {
    width: 28px !important;
    height: 28px !important;
  }

}

@media (max-width: 1024px) {

  /* Mobil + tablet főmenü görgethetővé tétele (a landscape-mobil blokk lentebb
     felülírja, ahol az egész oldal görög). Tableten (501–1024px portré /
     nagyobb magasság) e nélkül a menü lelógna a viewportról.
     65%-os max-height: a menü kb. 745px (9 menüpont, 50px + 15px margó/db,
     90+60 padding). iPad mini portré (1024 magas) × 0.65 = 666 < 745 → scroll
     mindig triggerel. 75%-on borderline volt és Safari URL-bar nélkül nem
     görgött. Landscape esetekre úgyis a lentebbi (orientation:landscape +
     max-height:600) blokk lép életbe. */
  .mobile-main-menu {
    max-height: 65vh !important;
    max-height: 65svh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding: 90px 20px 60px !important;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 18%,
      black 82%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 18%,
      black 82%,
      transparent 100%
    ) !important;
  }

}

/* ============================= */
/* ===== MOBIL <=600px ===== */
/* ============================= */

@media (max-width: 600px) {

  /* Mobil főmenü: első pont lejjebb kezdődjön */
  .mobile-main-menu {
    padding-top: 80px !important;
  }

  .footer-inner-box {
    padding: 30px 16px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
  }

  /* Fő támogatók: 1 oszlop mobilon */
  .main-sponsors {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 15px;
  }

  .main-sponsors img {
    max-height: 60px;
  }

  /* Futószalag: kisebb képek mobilon */
  .marquee-content img {
    max-height: 50px;
    width: auto;
  }

  /* App store logók: egymás alá */
  .sorszam-appok {
    flex-direction: column;
    align-items: center;
  }

}

/* =========================
   IMAGE MODAL (buszok kép)
========================= */

.image-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.88);
  align-items: center;
  justify-content: center;
  /* Mindent blokkol alatta */
  pointer-events: none;
}

.image-modal.open {
  display: flex;
  pointer-events: all;
}

.image-wrapper {
  position: relative;
  width: 17.4vw;
  height: 49vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.image-wrapper.is-zoomed {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: all;
  align-items: flex-start;
  justify-content: flex-start;
}

.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  cursor: zoom-in;
  display: block;
  pointer-events: all;
}

.image-wrapper img.zoomed {
  max-width: none;
  max-height: none;
  width: 150%;
  height: auto;
  cursor: zoom-out;
}

.image-close {
  position: absolute;
  top: -0px;
  right: -6px;
  width: 36px;
  height: 36px;

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700px;
  color: black;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease;
  pointer-events: all;
  user-select: none;
}

/* Modal nyitva: scroll tiltás a háttérben */
body.image-modal-open {
  overflow: hidden;
}

/* =========================
   TAXIK A KATLANBAN
========================= */

.taxi-wrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 20px 60px;
  text-align: center;
  font-family: 'Playfair Display', serif;
}

.taxi-section {
  margin-bottom: 48px;
}

.taxi-section-title {
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
  border-bottom: 2px solid rgba(0, 0, 0, 0.828);
  padding-bottom: 10px;
  font-family: 'Playfair Display', serif;
}

/* Telefonszámok */
.taxi-phones {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.taxi-phones a{
  text-decoration: none;
}

.taxi-phone-item {
  display: block;
  font-size: 1.25em;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
  padding: 4px 0;
  font-family: 'Playfair Display', serif;
}

.taxi-phone-item:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* Árlista */
.taxi-prices {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.taxi-price-item {
  font-size: 1.1em;
  padding: 3px 0;
  font-family: 'Playfair Display', serif;
}

.taxi-price-loc {
  font-weight: 600;
}

.taxi-empty {
  opacity: 0.6;
  font-style: italic;
  font-family: 'Playfair Display', serif;
}

/* "ide kattintva" és "Itt a leírás." link stílus */
a.taxi-link,
a.gyalog-link {
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
}

a.taxi-link:hover,
a.gyalog-link:hover {
  opacity: 0.75;
}

/* =========================
   VYLYAN – PALKONYA GYALOGÖSVÉNY
========================= */

.gyalog-wrapper {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 20px 60px;
  font-family: 'Playfair Display', serif;
}

.gyalog-title {
  font-family: 'Playfair Display', serif;
}

.gyalog-content {
  font-family: 'Playfair Display', serif;
  line-height: 1.85;
}

.gyalog-content p {
  margin-bottom: 1.4em;
  font-family: 'Playfair Display', serif;
}

.gyalog-phone-line {
  font-family: 'Playfair Display', serif;
  margin-bottom: 0.6em;
}

.gyalog-phone {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.gyalog-phone:hover {
  text-decoration: underline;
  opacity: 0.75;
}

@media (max-width: 600px) {
  .gyalog-wrapper {
    padding: 20px 16px 48px;
  }
}

/* Mobil */
@media (max-width: 600px) {
  .taxi-phone-item {
    font-size: 1.1em;
  }
  .taxi-price-item {
    font-size: 1em;
  }
}

/* =========================
   ENGLISH OLDAL
========================= */

.english-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 20px 60px;
}

.english-title-block {
  text-align: center;
  margin-bottom: 40px;
}

.english-main-title {
  font-size: 2em;
  font-weight: 700;
  margin-bottom: 10px;
}

.english-subtitle {
  font-size: 1.1em;
  opacity: 0.75;
  font-style: italic;
}

/* DOBOZOK */
.english-boxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.english-box {
  border: 1px solid #2f3a2e;
  background: #ecd8c8;
  cursor: pointer;
}


/* HEADER */
.english-header {
  padding: 22px 30px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* NYÍL */
.english-header::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid #2f3a2e;
  border-bottom: 2px solid #2f3a2e;
  transform: rotate(45deg);
  transition: .3s;
}

.english-box.open .english-header::after {
  transform: rotate(225deg);
}

/* CONTENT */
.english-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
  padding: 0 30px;
}

.english-box.open .english-content {
  max-height: 2000px;
  padding: 20px 30px 30px;
}

.english-content p {
  margin-bottom: 12px;
  line-height: 1.7;
}

.english-content ul {
  margin: 0 0 14px 20px;
  padding: 0;
}

.english-content ul li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Mobil */
@media (max-width: 768px) {
  .english-header {
    font-size: 17px;
    padding: 18px 20px;
  }
  .english-content {
    padding: 0 20px;
  }
  .english-box.open .english-content {
    padding: 16px 20px 24px;
  }
}

/* =========================
   ADMIN-SZERKESZTETT TARTALOM: bekezdés-margók
   Ha a TinyMCE editorban Entert nyomunk, az oldalon
   is elkülönülő bekezdésként jelenjen meg.
========================= */

/* Általános szöveges almenü-tartalmak (Jelentkezőknek, Sajtókapcsolat, Katlancsapat stb.) */
.submenu-text p {
  margin-bottom: 1.2em;
  line-height: 1.7;
}

/* Összecsukható dobozok tartalma (Ördögkatlan, Sorszámokról) */
.sorszam-gyik-tartalom p {
  margin-bottom: 1.1em;
  line-height: 1.7;
}

/* GYIK válaszmező */
.valasz-doboz p {
  margin-bottom: 1.0em;
  line-height: 1.6;
}

/* =========================
   KÉP NÉZET PANEL
========================= */

.kep-nezet-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 60vh;
  padding: 24px;
  box-sizing: border-box;
}

.kep-nezet-wrapper img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
  .kep-nezet-wrapper {
    padding: 12px;
    min-height: 50vh;
  }
  .kep-nezet-wrapper img {
    max-height: 70vh;
  }
}

/* =========================
   PROGRAMOK ALMENÜ — "Hamarosan" jelölés
   ========================= */
.secondary-nav-link.is-soon {
  opacity: .45;
  pointer-events: none;   /* nem kattintható, amíg nem kész */
  cursor: default;
}
.nav-soon-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  vertical-align: middle;
  border-radius: 999px;
  background: rgba(63, 74, 54, .12);
  color: #3f4a36;
}

/* =========================================================
   📱 FEKVŐ MOBIL — GÖRGETHETŐ EGÉSZ OLDAL
   Csak fekvő telefon: max-width 1024 + landscape + max-height 600
   (a max-height kizárja a tabletet, pl. iPad 1024×768).
   Álló mobil és desktop teljesen érintetlen.

   Cél: a menü ne legyen görgetés-zárolt, egy-képernyős overlay —
   az egész oldal hosszú lapként görögjön, a katlan keretképek
   teljes méretben maradnak (semmit nem vágunk le).
   ========================================================= */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {

  /* 1) Görgetés feloldása + egységes háttér (a rejtett hero helyett) */
  body.menu-open,
  html:has(body.menu-open) {
    overflow: auto !important;
  }
  body.menu-open {
    background: url('assets/images/galeriahatter.png') center top / cover fixed no-repeat;
  }

  /* 2) A menüpanel FOLYÁSBA kerül (relative, hogy a háttere is rá igazodjon),
        a hero rejtve → a footer és a támogatók a menü UTÁN, természetes folyásban
        jelennek meg (nem lebegnek a hero után középen). */
  .submenu-panel {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .submenu-background {
    min-height: 100%;
  }
  body.menu-open .hero {
    display: none !important;
  }

  /* 3) Keretképek a menüben: a PANEL tartalma kap saját, FOLYÁSBAN lévő felső/alsó
        keretet → [felső kép][menü][alsó kép], görgethető, natív arány (semmi levágás). */
  .submenu-content {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    margin-top: 0 !important;
  }

  /* Felső keretkép — a menü mindig EZUTÁN kezdődik (natív arány: 1920×486) */
  .submenu-content::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1920 / 486;
    background: url('assets/images/katlanhaterfelso.png') center top / 100% auto no-repeat;
  }
  /* Alsó keretkép — a menüt EZ zárja, közvetlenül a tartalom után (natív arány: 1920×402) */
  .submenu-content::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1920 / 402;
    background: url('assets/images/katlanhateralso.png') center bottom / 100% auto no-repeat;
  }

  /* A menü a két keret között, felülről folyva, belső görgetés/maszk nélkül */
  .mobile-main-menu,
  .submenu-content > ul.active {
    max-height: none !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    padding: 16px 18px 32px !important;
  }
  body.expanded-mode .submenu-text {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto !important;
    padding: 16px 10px 32px !important;
  }

  /* 4) A footer-gombok LEBEGNEK (fixed): a Dokumentumtár/ÁSZF/Impresszum a viewport
        aljához, a social a bal felső sarokhoz rögzítve. A TÁMOGATÓK viszont NEM
        lebegnek — a panel relative (flow-ban), ezért a támogatók a menü UTÁN, az
        oldal végén, az alsó kép alatt folynak (nem középen lebegve, mint korábban). */
  body.menu-open .footer-top {
    position: fixed !important;
    bottom: 6px !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 20px !important;
    z-index: 9998;
  }
  body.menu-open .footer-social {
    position: fixed !important;
    top: 8px !important;
    left: 12px !important;
    right: auto !important;
    transform: none !important;
    gap: 14px !important;
    z-index: 9998;
  }
  body.menu-open .footer-sponsors {
    display: block !important;
    position: static !important;
  }

  /* Bezáró (×) gomb a jobb felső sarokba */
  body.menu-open .submenu-nav-btns {
    top: 8px !important;
    right: 12px !important;
    transform: none !important;
  }

  /* 5) Főoldal (menü NÉLKÜL): a social/hírlevél/angol sor lejjebb,
        hogy fekvőben ne ússzon be magasra */
  .footer-top {
    bottom: 10px !important;
  }

}

/* =========================================================
   📜 EXPANDED SUBMENU-TEXT — görgethető tartalom a hero-overlay
   katlan-keretek MÖGÉ csúsztatva (panel z-index:2 < overlay z-index:6,
   pointer-events:none miatt a görgő/touch a kereten át a tartalomra megy).

   Mechanika: a .submenu-text teljes viewportot tölt ki, és a tartalom
   padding-top/bottom-ja megfelel a keret-kép vizuális magasságának.
   Scroll = 0 → a felső padding kitölti a frame takarási zónáját →
   az első tartalom-sor a frame ALATT, teljesen olvashatóan kezdődik.
   Max scroll → az alsó padding kitölti az alsó frame zónáját →
   az utolsó sor a frame FÖLÖTT, teljesen olvashatóan végződik.

   A keret-kép magasság viewport-szélességhez kötött (background-size:
   100% auto), ezért vw-ben paddingelünk.

   Landscape phone (max-width:1024 + landscape + max-height:600) NEM ide
   tartozik — az a 4228-as blokkból teljes-oldal-görgetést kap, nincs
   belső scroll → érintetlen.
   ========================================================= */

/* FONTOS: box-sizing: border-box. Content-box esetén a height:100vh +
   padding > 100vh → az elem túlnyúlik a viewporton, és a padding-bottom
   a viewport ALATT található → sosem látszik, hiába van benne. Border-box-szal
   a teljes elem PONTOSAN 100vh, mindkét padding a viewporton belül van. */

/* PHONE PORTRÉ — a *mob.png keretek arányát (51.4% top, 40.8% bottom)
   teljes egészében kompenzáljuk + 2vw buffer, így a tartalom soha nem
   tűnik el a kép illusztrált része alá. */
@media (max-width: 500px) and (orientation: portrait) {
  body.expanded-mode .submenu-text {
    box-sizing: border-box !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 auto !important;
    padding: 54vw 10px 43vw !important;
  }
}

/* TABLET PORTRÉ — ugyanazok a *mob.png képek nagyobb viewporton. Teljes
   kép-magasságú padding (a) opció: tartalom-terület ~280px marad
   768x1024-en, de a kezdő/vég-pozíció kép-elkerülése GARANTÁLT.
   Ha túl szűk, érdemes inkább a tablet portré-hoz külön, KISEBB
   keret-képeket terveztetni (jelenleg a mob képeket örökli, amik
   amúgy is 768px-re vannak optimalizálva, nem 1024-re). */
@media (min-width: 501px) and (max-width: 1024px) and (orientation: portrait) {
  body.expanded-mode .submenu-text {
    box-sizing: border-box !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 auto !important;
    padding: 54vw 10px 43vw !important;
  }
}

/* LANDSCAPE TABLET (≈iPad mini 1024×768) — desktop top (24.3vw) +
   katlan_lablec bottom (20.9vw). Tartalom-terület ~310px marad
   768-ból, ami fekvésben kisebb gond mert vízszintesen több hely van.
   min-height:601 kizárja a fekvő telefont (4228-as blokk kezeli). */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1024px) and (min-height: 601px) {
  body.expanded-mode .submenu-text {
    box-sizing: border-box !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    margin: 0 auto !important;
    padding: 26vw 10px 22vw !important;
  }
}