/* ===========================================================
   BONT-ÉP GENERÁL Kft. — honlap stílusok
   A betűtípusok külön fájlban: css/betutipusok.css
   =========================================================== */

/* ---- Design tokenek ---- */
:root {
  --grafit:    #1A1D21;
  --meszfeher: #F4F2EE;
  --gepsarga:  #E8A33D;
  --acelkek:   #4A5A6A;
  --papir:     #FFFFFF;
  --vonal:     #D8D4CC;

  /* Mért kontrasztarányok (WCAG, 2026-09-09):
       grafit    mészfehéren ....... 16,0:1  ✔ bármihez
       mészfehér grafiton .......... 16,0:1  ✔ bármihez
       acélkék   mészfehéren .......  6,4:1  ✔ folyószöveghez is
       gépsárga  grafiton ..........  7,9:1  ✔ folyószöveghez is
       gépsárga  mészfehéren .......  1,9:1  ✘ SZÖVEGKÉNT TILOS

     A gépsárga világos háttéren kizárólag díszítő elem lehet (vonal, keret,
     ikon kitöltése) — soha nem szöveg. Világos háttéren szöveghez az
     acélkék való. */

  --betu-cim:    "Archivo", system-ui, sans-serif;
  --betu-szoveg: "Inter", system-ui, sans-serif;

  --racs-max: 1200px;
  --terkoz-1: 0.5rem;
  --terkoz-2: 1rem;
  --terkoz-3: 2rem;
  --terkoz-4: 4rem;
  --terkoz-5: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }

/* A hidden attribútumnak mindig győznie kell. Enélkül egy display: flex
   vagy display: block szabály felülírja a böngésző alapértelmezett
   [hidden] { display: none } beállítását, és a rejtett elem láthatóvá válik
   — ez történt a lightbox fedőrétegével. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--betu-szoveg);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--grafit);
  background: var(--meszfeher);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--betu-cim);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--terkoz-2);
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--terkoz-2); }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.racs {
  width: 100%;
  max-width: var(--racs-max);
  margin-inline: auto;
  padding-inline: var(--terkoz-3);
}

/* Képernyőolvasónak szánt, vizuálisan rejtett szöveg */
.rejtett {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Ugrás a tartalomra — billentyűzetes navigációhoz */
.ugras {
  position: absolute;
  left: var(--terkoz-2);
  top: -100px;
  z-index: 100;
  background: var(--gepsarga);
  color: var(--grafit);
  padding: var(--terkoz-1) var(--terkoz-2);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s;
}
.ugras:focus { top: var(--terkoz-2); }

/* ---- Rétegrend-motívum: útpályaszerkezet mint szekcióhatár ---- */
.retegrend {
  height: 10px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to bottom,
    var(--grafit)   0 3px,
    var(--gepsarga) 3px 5px,
    var(--acelkek)  5px 7px,
    var(--vonal)    7px 10px
  );
}

/* ---- Fókuszgyűrű: billentyűzetes bejáráshoz kötelező ---- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--gepsarga);
  outline-offset: 2px;
}

/* ===========================================================
   FEJLÉC
   =========================================================== */

.fejlec {
  background: var(--grafit);
  color: var(--meszfeher);
  position: sticky;
  top: 0;
  z-index: 50;
}

.fejlec-racs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--terkoz-2);
  min-height: 72px;
}

.logo {
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}
.logo-nev { color: var(--meszfeher); }
.logo-forma {
  color: var(--gepsarga);
  font-size: 0.75em;
  font-weight: 400;
  font-family: var(--betu-szoveg);
}

.fomenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--terkoz-3);
}

.fomenu a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: var(--terkoz-1) 0;
  border-bottom: 2px solid transparent;
  display: block;
}
.fomenu a:hover { border-bottom-color: var(--gepsarga); }
.fomenu a[aria-current="page"] {
  border-bottom-color: var(--gepsarga);
  color: var(--gepsarga);
}

/* Hamburger gomb — csak mobilon látszik */
.menu-gomb {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--terkoz-1);
}
.menu-ikon,
.menu-ikon::before,
.menu-ikon::after {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--meszfeher);
  transition: transform 0.2s, opacity 0.2s;
}
.menu-ikon::before,
.menu-ikon::after {
  content: "";
  position: relative;
}
.menu-ikon::before { top: -8px; }
.menu-ikon::after  { top: 6px; }

/* ===========================================================
   FELÜTÉS
   =========================================================== */

.felutes {
  background: var(--grafit);
  color: var(--meszfeher);
  padding-block: var(--terkoz-5) var(--terkoz-4);
}

.felutes h1 { max-width: 18ch; }

.felutes-alcim {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  max-width: 58ch;
  color: #C9C5BE;
}

.felutes-tenyek {
  list-style: none;
  margin: var(--terkoz-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--terkoz-3);
  border-top: 1px solid #33383E;
  padding-top: var(--terkoz-3);
}
.felutes-tenyek li { font-size: 0.95rem; color: #C9C5BE; }
.felutes-tenyek strong {
  display: block;
  font-family: var(--betu-cim);
  font-size: 1.6rem;
  color: var(--gepsarga);
  line-height: 1.2;
}

/* ===========================================================
   SZEKCIÓK
   =========================================================== */

section { padding-block: var(--terkoz-5); }
.felutes, .geppark-sav { padding-block: 0; }
.felutes { padding-block: var(--terkoz-5) var(--terkoz-4); }

.szekcio-bevezeto {
  max-width: 62ch;
  color: var(--acelkek);
  margin-bottom: var(--terkoz-4);
}

.kozepre { text-align: center; margin-top: var(--terkoz-4); }

/* ---- Szakág-kártyák ---- */
.kartyak {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--terkoz-3);
}

.kartya {
  text-decoration: none;
  background: var(--papir);
  border: 1px solid var(--vonal);
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
}
.kartya:hover {
  border-color: var(--grafit);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .kartya { transition: none; }
  .kartya:hover { transform: none; }
}

.kartya-kep { aspect-ratio: 4 / 3; overflow: hidden; }
.kartya-kep img { width: 100%; height: 100%; object-fit: cover; }

.kartya-szoveg { padding: var(--terkoz-2); display: flex; flex-direction: column; flex: 1; }
.kartya-szoveg h3 { margin-bottom: var(--terkoz-1); }
.kartya-szoveg p { font-size: 0.95rem; color: var(--acelkek); flex: 1; }

.tovabb {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--grafit);
  border-bottom: 2px solid var(--gepsarga);
  align-self: flex-start;
  padding-bottom: 2px;
}

/* ---- Géppark-sáv ---- */
.geppark-sav { position: relative; background: var(--grafit); }
.geppark-sav > picture img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  object-fit: cover;
  opacity: 0.42;
}
.geppark-sav-szoveg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  color: var(--meszfeher);
}
.geppark-sav-szoveg p { max-width: 52ch; }

/* Kis kijelzőn a szöveg a kép alá kerül — olvashatóbb, mint rácsúsztatva */
@media (max-width: 700px) {
  .geppark-sav > picture img { opacity: 1; aspect-ratio: 4 / 3; }
  .geppark-sav-szoveg {
    position: static;
    padding-block: var(--terkoz-4);
  }
}

/* ---- Képrács ---- */
.kepracs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--terkoz-2);
}
.kepracs a {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--vonal);
}
.kepracs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s;
}
.kepracs a:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .kepracs img { transition: none; }
  .kepracs a:hover img { transform: none; }
}

/* ---- Belső oldalak fejrésze ---- */
.oldal-fej {
  background: var(--grafit);
  color: var(--meszfeher);
  padding-block: var(--terkoz-4);
}
.oldal-fej h1 { max-width: 20ch; }

.szakag-ugras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--terkoz-2);
  margin-top: var(--terkoz-3);
  padding-top: var(--terkoz-3);
  border-top: 1px solid #33383E;
}
.szakag-ugras a {
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--gepsarga);
  border: 1px solid #33383E;
  padding: 0.5em 1em;
}
.szakag-ugras a:hover { border-color: var(--gepsarga); }

.szakag h2 {
  border-left: 6px solid var(--gepsarga);
  padding-left: var(--terkoz-2);
}

/* Horgonyra ugráskor a lebegő fejléc eltakarná a szekció címét.
   A fejléc 72 px magas, ehhez jön egy kis levegő. */
section[id],
main[id] {
  scroll-margin-top: 88px;
}

/* ---- Széles kép (géppark oldal) ---- */
.szeles-kep { padding: 0; background: var(--grafit); }
.szeles-kep a { display: block; }
.szeles-kep img {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 62vh;
  object-fit: cover;
}

/* ---- Géplista ---- */
.geplista-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--terkoz-3);
}

.geplista-blokk {
  background: var(--papir);
  border: 1px solid var(--vonal);
  border-top: 4px solid var(--gepsarga);
  padding: var(--terkoz-2);
}
.geplista-blokk h3 { margin-bottom: var(--terkoz-2); }

.geplista { list-style: none; margin: 0; padding: 0; }
.geplista li {
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: 1px solid var(--vonal);
  position: relative;
  font-size: 0.95rem;
}
.geplista li:last-child { border-bottom: 0; }
/* Négyzet jelölő a felsorolás előtt — a gépsárga itt dísz, nem szöveg,
   ezért világos háttéren is használható. */
.geplista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1em;
  width: 8px;
  height: 8px;
  background: var(--gepsarga);
}

/* ---- Érvek ---- */
.ervek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--terkoz-3);
}
.erv h3 {
  border-left: 4px solid var(--gepsarga);
  padding-left: var(--terkoz-2);
  margin-bottom: var(--terkoz-1);
}
.erv p { color: var(--acelkek); font-size: 0.95rem; padding-left: calc(var(--terkoz-2) + 4px); }

/* ---- Két hasáb ---- */
.ket-hasab {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--terkoz-4);
}
.ket-hasab h2:not(:first-child) { margin-top: var(--terkoz-4); }

/* ---- Üzenetdoboz (üres állapot, hiányzó adat) ---- */
.uzenet-doboz {
  background: var(--papir);
  border: 1px solid var(--vonal);
  border-left: 6px solid var(--acelkek);
  padding: var(--terkoz-3);
  margin-bottom: var(--terkoz-4);
}
.uzenet-doboz p:last-child { margin-bottom: 0; }

.gomb-sor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--terkoz-2);
  margin-top: var(--terkoz-3);
}

/* ---- Adatlista ---- */
.adatlista { margin: 0; }
.adatlista dt {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acelkek);
  margin-top: var(--terkoz-2);
}
.adatlista dd {
  margin: 0;
  padding-bottom: var(--terkoz-1);
  border-bottom: 1px solid var(--vonal);
  font-weight: 600;
}

.cim { font-size: 1.05rem; line-height: 1.8; }

/* Telefon és e-mail a kapcsolati oldalon: ezért van az oldal, kapjon súlyt.
   Világos háttéren a szöveg grafit — a gépsárga itt aláhúzásként dísz,
   mert szövegszínként csak 1,9:1 kontrasztot adna. */
.adatlista dd.nagy-ertek {
  font-family: var(--betu-cim);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  padding-block: var(--terkoz-1);
  overflow-wrap: anywhere;
}
.adatlista dd.nagy-ertek a {
  color: var(--grafit);
  text-decoration-color: var(--gepsarga);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
.adatlista dd.nagy-ertek a:hover { color: var(--acelkek); }

/* ---- Kapcsolat szekció (egyoldalas változat) ---- */
.kapcsolat-szekcio { background: var(--grafit); color: var(--meszfeher); }
.kapcsolat-szekcio .szekcio-bevezeto { color: #C9C5BE; }

/* 2×2 elrendezés, nem négy szűk hasáb: négy oszlopban a kártya belseje
   csak ~194 px, amibe a 209 px-es e-mail cím nem fér el. Két oszlopban
   ~488 px jut rá, és a telefonszám is nagyobb súlyt kap. */
.kapcsolat-racs {
  display: grid;
  /* A min(360px, 100%) kötelező: sima minmax(360px, 1fr) esetén a 375 px-es
     kijelzőn a 360 px-es minimum plusz a keret túllógna a képernyőn. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--terkoz-3);
}

.kapcsolat-blokk {
  border: 1px solid #33383E;
  padding: var(--terkoz-3);
}
.kapcsolat-blokk p:last-child { margin-bottom: 0; }

/* A telefon és az e-mail kapja a hangsúlyt — ezért van az oldal. */
.kapcsolat-kiemelt { border-color: var(--gepsarga); }

.kapcsolat-cimke {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C9C5BE;
  margin-bottom: var(--terkoz-1);
}

.kapcsolat-ertek {
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.25;
  /* Hosszú e-mail cím se lógjon ki keskeny kijelzőn */
  overflow-wrap: anywhere;
}
/* Gépsárga sötét háttéren 7,9:1 — folyószövegként is megfelel. */
.kapcsolat-ertek a { color: var(--gepsarga); text-decoration: none; }
.kapcsolat-ertek a:hover { text-decoration: underline; }

/* Az e-mail cím hosszabb, mint a telefonszám, és az Archivo félkövér túl
   széles hozzá: a kártyában a @ jelnél kettétörne. Mérve 331 px kellene a
   rendelkezésre álló ~194 px helyett. A keskenyebb Inter és a kisebb fokozat
   együtt fér el — az e-mail cím nem szám, nem kell neki kijelző-betű. */
.kapcsolat-ertek a[href^="mailto:"] {
  font-family: var(--betu-szoveg);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  overflow-wrap: anywhere;
}

.kapcsolat-apro { margin-top: var(--terkoz-4); color: #9E9A94; }

/* ---- Impresszum ---- */
.impresszum-szekcio { background: var(--papir); border-top: 1px solid var(--vonal); }
.apro { font-size: 0.9rem; color: var(--acelkek); max-width: 70ch; }

/* ---- Referenciatáblázat (a későbbi kitöltéshez) ---- */
.referencia-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.referencia-tabla th,
.referencia-tabla td {
  text-align: left;
  padding: var(--terkoz-2);
  border-bottom: 1px solid var(--vonal);
  vertical-align: top;
}
.referencia-tabla th {
  font-family: var(--betu-cim);
  border-bottom: 2px solid var(--grafit);
}

/* ---- Gomb ---- */
.gomb {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  padding: 0.75em 1.5em;
  border: 2px solid currentColor;
}
.gomb:hover { background: var(--gepsarga); color: var(--grafit); border-color: var(--gepsarga); }

.gomb-kiemelt {
  background: var(--gepsarga);
  color: var(--grafit);
  border-color: var(--gepsarga);
}
.gomb-kiemelt:hover { background: var(--grafit); color: var(--meszfeher); border-color: var(--grafit); }

/* ---- Záró szekció ---- */
.zaro {
  background: var(--papir);
  border-top: 1px solid var(--vonal);
  text-align: center;
}
.zaro p { max-width: 54ch; margin-inline: auto; color: var(--acelkek); }

/* ===========================================================
   LÁBLÉC
   =========================================================== */

.lablec {
  background: var(--grafit);
  color: #C9C5BE;
  padding-top: var(--terkoz-4);
  font-size: 0.95rem;
}
.lablec-racs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--terkoz-3);
  padding-bottom: var(--terkoz-4);
}
.lablec-cim {
  font-family: var(--betu-cim);
  font-weight: 700;
  color: var(--meszfeher);
  margin-bottom: var(--terkoz-1);
}
.lablec a { color: var(--gepsarga); }
.lablec-alja {
  border-top: 1px solid #33383E;
  padding-block: var(--terkoz-2);
  font-size: 0.85rem;
}
.lablec-alja p { margin: 0; }

/* ===========================================================
   LIGHTBOX (js/galeria.js)
   =========================================================== */

.fedo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 18, 21, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--terkoz-3);
}
.fedo img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
}
.fedo-bezar {
  position: absolute;
  top: var(--terkoz-2);
  right: var(--terkoz-2);
  background: none;
  border: 2px solid var(--meszfeher);
  color: var(--meszfeher);
  font-size: 1.75rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.fedo-bezar:hover { background: var(--gepsarga); color: var(--grafit); border-color: var(--gepsarga); }

/* Léptető nyilak. A képre úsznak rá, ezért kapnak saját hátteret —
   világos fotón a puszta fehér körvonal eltűnne. */
.fedo-lep {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(16, 18, 21, 0.7);
  border: 2px solid var(--meszfeher);
  color: var(--meszfeher);
  font-size: 2.25rem;
  line-height: 1;
  width: 56px;
  height: 56px;
  cursor: pointer;
}
.fedo-elozo { left: var(--terkoz-2); }
.fedo-kovetkezo { right: var(--terkoz-2); }
.fedo-lep:hover { background: var(--gepsarga); color: var(--grafit); border-color: var(--gepsarga); }

.fedo-szamlalo {
  position: absolute;
  bottom: var(--terkoz-2);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: var(--meszfeher);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
}

/* ===========================================================
   MOBIL
   =========================================================== */

@media (max-width: 820px) {
  :root { --terkoz-5: 3.5rem; --terkoz-4: 2.5rem; --terkoz-3: 1.25rem; }

  .fejlec-racs { flex-wrap: wrap; }

  /* Progresszív fejlesztés: JS nélkül a menü kibontva látszik, a gomb rejtve.
     Ha a szkript lefutott, felteszi a .js-menu osztályt, és a menü
     összecsukhatóvá válik. Így JS nélkül sem marad elérhetetlen navigáció. */
  .menu-gomb { display: none; }
  .fomenu { flex-basis: 100%; display: block; }

  .js-menu .menu-gomb { display: block; }
  .js-menu .fomenu { display: none; }
  .js-menu .fomenu.nyitva { display: block; }

  .fomenu ul {
    flex-direction: column;
    gap: 0;
    padding-bottom: var(--terkoz-2);
  }
  .fomenu a {
    padding: 0.75em 0;
    border-bottom: 1px solid #33383E;
  }
  .fomenu a[aria-current="page"],
  .fomenu a:hover { border-bottom-color: var(--gepsarga); }

  /* Keskeny kijelzőn a nyilak kisebbek és a szélhez simulnak,
     hogy minél kevesebbet takarjanak a képből. */
  .fedo-lep {
    width: 44px;
    height: 44px;
    font-size: 1.75rem;
  }
  .fedo-elozo { left: 0; }
  .fedo-kovetkezo { right: 0; }
}