@font-face {
  font-family: 'Rokkitt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://acelkert.hu/wp/wp-content/uploads/elementor/google-fonts/fonts/rokkitt-qfde35qfgyfjgy5hkemcdubl.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Rokkitt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://acelkert.hu/wp/wp-content/uploads/elementor/google-fonts/fonts/rokkitt-qfde35qfgyfjgy5hkeicdubl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rokkitt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://acelkert.hu/wp/wp-content/uploads/elementor/google-fonts/fonts/rokkitt-qfde35qfgyfjgy5hkeacdg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



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}

  /* === MOBILE HAMBURGER: fix fekete szín === */
  .hamburger-container{display:block;text-align:center;margin-top:10px}

  .hamburger-container button.hamburger{
    font-size:24px;
    cursor:pointer;
    padding:10px;
    background:none;
    border:none;
    font-weight:bold;

    color:#000 !important;
    -webkit-text-fill-color:#000 !important;

    -webkit-appearance:none;
    appearance:none;

    -webkit-tap-highlight-color: transparent;
  }

  .hamburger-container button.hamburger:active,
  .hamburger-container button.hamburger:focus{
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    outline:none;
  }
} 



/* 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;
  }
}


@media (max-width: 768px) {
  .banner .banner-text {
    top: auto !important;
    bottom: clamp(12px, 4vw, 24px) !important;
    left: 50%;
    transform: translateX(-50%) !important;
    font-size: clamp(1rem, 4vw, 1.35rem);
    padding: 0 16px;
    text-align: center;
    max-width: min(92%, 36ch);
  }
}


/* CLS FIX: mobilon foglaljunk helyet a hamburgernek és a menü sávnak */
@media (max-width: 768px){

  /* Hamburger: ne display:none-ról ugorjon be */
  .hamburger-container{
    display:block;              /* maradjon jelen */
    min-height:48px;            /* foglaljon helyet */
    text-align:center;
    margin-top:10px;
  }

  /* Menü konténer: legyen stabil a helye (ne lökje el a tartalmat) */
  .menu-container{
    display:block;              /* legyen ott a layoutban */
    max-height:0;               /* de csukva marad */
    overflow:hidden;
    padding:0;
    margin:0;
  }

  .menu-container.active{
    max-height:80vh;            /* nyitáskor lenyílik */
    overflow:auto;
    padding:10px 0;
  }
}
@font-face {
  font-family: 'Rokkitt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://acelkert.hu/wp/wp-content/uploads/elementor/google-fonts/fonts/rokkitt-qfde35qfgyfjgy5hkemcdubl.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Rokkitt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://acelkert.hu/wp/wp-content/uploads/elementor/google-fonts/fonts/rokkitt-qfde35qfgyfjgy5hkeicdubl.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Rokkitt';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://acelkert.hu/wp/wp-content/uploads/elementor/google-fonts/fonts/rokkitt-qfde35qfgyfjgy5hkeacdg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



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}

  /* === MOBILE HAMBURGER: fix fekete szín === */
  .hamburger-container{display:block;text-align:center;margin-top:10px}

  .hamburger-container button.hamburger{
    font-size:24px;
    cursor:pointer;
    padding:10px;
    background:none;
    border:none;
    font-weight:bold;

    color:#000 !important;
    -webkit-text-fill-color:#000 !important;

    -webkit-appearance:none;
    appearance:none;

    -webkit-tap-highlight-color: transparent;
  }

  .hamburger-container button.hamburger:active,
  .hamburger-container button.hamburger:focus{
    color:#000 !important;
    -webkit-text-fill-color:#000 !important;
    outline:none;
  }
} 



/* 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;
  }
}


@media (max-width: 768px) {
  .banner .banner-text {
    top: auto !important;
    bottom: clamp(12px, 4vw, 24px) !important;
    left: 50%;
    transform: translateX(-50%) !important;
    font-size: clamp(1rem, 4vw, 1.35rem);
    padding: 0 16px;
    text-align: center;
    max-width: min(92%, 36ch);
  }
}


/* CLS FIX: mobilon foglaljunk helyet a hamburgernek és a menü sávnak */
@media (max-width: 768px){

  /* Hamburger: ne display:none-ról ugorjon be */
  .hamburger-container{
    display:block;              /* maradjon jelen */
    min-height:48px;            /* foglaljon helyet */
    text-align:center;
    margin-top:10px;
  }

  /* Menü konténer: legyen stabil a helye (ne lökje el a tartalmat) */
  .menu-container{
    display:block;              /* legyen ott a layoutban */
    max-height:0;               /* de csukva marad */
    overflow:hidden;
    padding:0;
    margin:0;
  }

  .menu-container.active{
    max-height:80vh;            /* nyitáskor lenyílik */
    overflow:auto;
    padding:10px 0;
  }
}