@font-face {
  font-family: 'Rokkitt';
  src: url('/fonts/rokkitt.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block; /* blokkolja a renderelést a font betöltéséig, így nincs FOUT */
}


body{margin:0;font-family:'Rokkitt',serif}
.header{width:100%;background:#fff;color:#000;font-size:17px;padding:10px 20px;box-shadow:0 2px 5px rgba(0,0,0,0.1);display:flex;align-items:center;justify-content:space-between;gap:10px}
.header a{color:#000;text-decoration:none;font-weight:bold}
.header a:hover{text-decoration:underline}
.header .contact{display:flex;align-items:center;gap:20px}

.banner{position:relative;width:100%;height:400px;overflow:hidden}
.banner img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1280 / 400;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(70%);
}

.banner-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:2rem;font-weight:bold;text-align:center;text-shadow:0 0 10px rgba(0,0,0,0.7)}

@media (max-width: 768px) {
  .banner .banner-text {
    font-size: 1rem !important;
    line-height: 1.2;
  }
}



.menu-container{width:100%;background:#fff;position:sticky;top:0;z-index:1000;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.menu{list-style:none;margin:0;padding:0;display:flex;justify-content:center}
.menu>li{position:relative}
.menu>li>a{display:block;padding:15px 20px;color:#000;text-decoration:none;font-size:18px;text-align:center}
.menu>li>a:hover{background:#f0f0f0}
.submenu{display:none;position:absolute;top:100%;left:0;background:#fff;list-style:none;padding:0;margin:0;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.submenu li a{display:block;padding:10px 20px;color:#000;text-decoration:none}
.submenu li a:hover{background:#f0f0f0}
.menu>li:hover .submenu{display:block}

.hamburger-container{display:none}

@media(max-width:768px){
  .header{flex-direction:column;align-items:center;text-align:center;padding:15px 0}
  .logo{font-size:22px;font-weight:bold;display:block;width:100%}
  .header .contact{flex-direction:column;gap:5px;align-items:center;text-align:center;width:100%}
  .header .contact a{font-size:16px;display:inline-block}
  .opening-hours{font-size:14px;display:block}

  .menu-container{display:none;text-align:center;background:#fff;padding:10px 0;box-shadow:0 5px 10px rgba(0,0,0,0.1)}
  .menu-container.active{display:block}
  .menu{flex-direction:column;align-items:center}
  .menu>li{width:100%}
  .menu>li>a{padding:10px;font-size:16px}
  .submenu{position:static}

  .hamburger-container{display:block;text-align:center;margin-top:10px}
  .hamburger{font-size:24px;cursor:pointer;padding:10px;background:none;border:none;font-weight:bold}
}

/* Második fejléc alapjai */
.header-alt {
  width: 100%;
  background: #f8f8f8;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
}

/* Ha új logó osztály van */
.header-alt .logo-small {
  font-size: 20px;
  font-weight: 600;
}

/* Kapcsolati info ugyanúgy */
.header-alt .contact {
  display: flex;
  gap: 15px;
  font-size: 14px;
}

/* Mobilra */
@media (max-width:768px) {
  .header-alt {
    flex-direction: column;
    text-align: center;
    padding: 12px 0;
  }
  .header-alt .contact a {
    font-size: 14px;
  }
  .banner {
    height: 300px; /* ha beadtad */
  }
  .banner-text {
    font-size: 1rem;   /* fél annyi, mint az eredeti 2rem */
    line-height: 1.2;  /* tetszőlegesen finomhangolható */
  }
}


/* ==== Lézervágott-banner alapok ==== */
.lezervagott-banner {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

/* A kép pozícionálása */
.lezervagott-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* itt állítsd be, mi legyen látható: */
  object-position: center 40%;
}

/* Szöveg az overlay-ben */
.lezervagott-banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 0 0 10px rgba(0,0,0,0.7);
}

/* Mobilra egy az egyben követi az eredeti banner szabályait */
@media (max-width: 768px) {
  .lezervagott-banner {
    height: 300px; /* ha szeretnéd alacsonyabbra */
  }
  .lezervagott-banner-text {
    font-size: 1.5rem;
    padding: 0 1rem;
  }
}



.referencia-galeria img {
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out;
}
.galeria img:hover {
  transform: scale(1.03);
}



/* Vásárlói vélemények egymás alatt – letisztult megjelenés */
.testimonial-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 40px 0;
  margin-top: 37px;  /* ide írtuk az extra 37px-t */
}

.testimonial-item {
  background: #f9f9f9;      /* halvány, nem tolakodó háttér */
  border-left: 4px solid #007BFF;  /* finom vizuális kiemelés */
  padding: 16px 20px;
  border-radius: 4px;
}

.testimonial-item blockquote {
  margin: 0;
  font-style: italic;
  font-size: 1rem;
  color: #333;
}

.testimonial-item cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-weight: bold;
  font-size: 0.875rem;
  color: #555;
  text-align: right;
}

/* Mobilon is legyen elég légies */
@media (max-width: 768px) {
  .testimonial-stack {
    gap: 15px;
    margin: 30px 0;
  }
  .testimonial-item {
    padding: 14px 16px;
  }
  .testimonial-item blockquote {
    font-size: 0.95rem;
  }
  .testimonial-item cite {
    font-size: 0.85rem;
  }
}


/* ===== Referencia-galéria: multi‐soros hover‐overlay ===== */
.referencia-galeria {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
}

.referencia-galeria-item {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.referencia-galeria-thumb {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.referencia-galeria-item:hover .referencia-galeria-thumb {
  filter: brightness(50%);
  transform: scale(1.05);
}

/* Pseudo-elem, ami minden három soros adatot kiír */
.referencia-galeria-item::after {
  content:
    attr(data-description) "\A\A"
    "Típus: " attr(data-type) "\A"
    "Ár: " attr(data-price);
  position: absolute;
  inset: 0; /* top/right/bottom/left = 0 */
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 20px;
  font-size: 0.9rem;
  white-space: pre-line; /* engedi a \A sortörést */
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: opacity 0.3s ease;
  pointer-events: none; /* lightbox kattinthatóságért */
}

/* csak hover-kor látható */
.referencia-galeria-item:hover::after {
  opacity: 1;
  pointer-events: auto;
}

/* Mobilra kisebb magasság */
@media (max-width:768px) {
  .referencia-galeria {
    grid-template-columns: repeat(2,1fr);
  }
  .referencia-galeria-thumb {
    height: 180px;
  }
}
@media (max-width:480px) {
  .referencia-galeria {
    grid-template-columns: 1fr;
  }
  .referencia-galeria-thumb {
    height: 160px;
  }
}


/* Alapból elrejtjük */
.siremlek-mobile-caption {
  display: none;
}

/* Mobil: kép alá, blokkban mutatjuk */
@media (max-width: 768px) {
  .referencia-galeria {
    grid-template-columns: 1fr; /* egy oszlop */
  }
  .siremlek-mobile-caption {
    display: block;
    background: #f9f9f9;
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.4;
    margin-top: 8px;
  }
  .siremlek-mobile-caption p {
    margin: 4px 0;
  }
  /* Kikapcsoljuk az overlay-t mobilon */
  .referencia-galeria-item::after {
    display: none !important;
  }
}