* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0f172a; }
img { max-width: 100%; display: block; }

/* NAV + HERO */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px;
  backdrop-filter: blur(6px);
  background: transparent;
  z-index: 10;
}
.nav .brand { font-weight: 700; letter-spacing: 0.08em; color: #ffffff; text-decoration: none; }
.nav ul { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.nav a { text-decoration: none; color: #ffffff; padding: 6px 8px; border-radius: 8px; font-weight: 700; }
.nav a:hover { text-shadow: 0 0 14px #60a5fa, 0 0 28px #60a5fa; font-weight: 800; }

.hero {
  height: 100vh;
  background-image: url('images/Enterier.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  display: grid;
  place-items: center;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.35) 100%);
}
.hero-inner {
  position: relative; z-index: 1;
  text-align: center; color: white; padding: 0 16px;
  display: grid; gap: 16px;
}
.hero-quote {
  max-width: 900px;
  margin: 0 auto;
  font-weight: 600;
  font-size: clamp(18px, 3.2vw, 28px);
  line-height: 1.3;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
 white-space: nowrap; text-align: center; font-weight: 700; text-align: left; margin: 0 auto; width: max-content; transform: translateX(-10%);}
.cta {
  justify-self: center;
  display: inline-block;
  padding: 14px 22px;
  background: #60a5fa; color: #0f172a; border-radius: 12px;
  font-weight: 700; text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  transform: translateY(0);
  transition: box-shadow .2s ease, transform .2s ease;
}
.cta:hover {
  box-shadow: 0 0 18px rgba(147,197,253,0.95), 0 8px 16px rgba(0,0,0,0.18);
  transform: translateY(-1mm);
}

/* SECTIONS */
main { background: #fff; }
.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: center; padding: 96px 24px; max-width: 1100px; margin: 0 auto;
}
.split-image { border-radius: 16px; overflow: hidden; box-shadow: 0 12px 24px rgba(0,0,0,0.08); }
.split-text h2 { margin: 0 0 12px; font-size: clamp(22px, 3vw, 32px); }
.split-text p { margin: 0 0 12px; line-height: 1.7; }
.split-text ul { padding-left: 20px; line-height: 1.9; margin: 0 0 12px; }
.split-text li { margin-bottom: 6px; }

.footer {
  padding: 24px; text-align: center; background: #f8fafc; color: #475569; border-top: 1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; padding: 56px 16px; }
  .nav { padding: 10px 16px; }
}


/* --- User requested nav modifications --- */
.nav {
  background: transparent;
}

.nav a { text-decoration: none; color: #ffffff; padding: 6px 8px; border-radius: 8px; font-weight: 700; }

.nav a:hover { text-shadow: 0 0 14px #60a5fa, 0 0 28px #60a5fa; font-weight: 800; }

/* Custom modifications */

#ingatlan-kozvetites {
  grid-template-columns: auto 1fr;
  column-gap: 2cm;
  padding-left: 1cm;
  padding-right: 1cm;
}
#ingatlan-kozvetites .split-image img {
  width: 70%;
  margin-left: 0;
}
#ingatlan-kozvetites .split-text { max-width: 18cm; }


/* === Ingatlanközvetítés – precíz elrendezés === */
#ingatlan-kozvetites {
  max-width: none;       /* ne szűkítse 1100px-re */
  width: 100%;
  margin: 0;             /* ne középre igazítsa */
  padding-left: 1.5cm;   /* bal oldali 1–2 cm */
  padding-right: 1.5cm;  /* jobb oldali 1–2 cm */
  column-gap: 1.5cm;     /* kép és szöveg között 1–2 cm */
  grid-template-columns: auto 1fr; /* bal: tartalom szélessége, jobb: maradék */
  align-items: start;
}
#ingatlan-kozvetites .split-image { justify-self: start; }
#ingatlan-kozvetites .split-image img {
  width: 70%;    /* 70%-os méret */
  height: auto;
  display: block;
  margin-left: 0; /* a szélhez közel */
}
#ingatlan-kozvetites .split-text { max-width: 18cm; }



/* === Ingatlanközvetítés – végső pontosítás === */
#ingatlan-kozvetites {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 1.5cm;
  padding-right: 1.5cm;
  column-gap: 1.5cm;
  grid-template-columns: auto 1fr;
  align-items: start;
}
#ingatlan-kozvetites .split-image {
  justify-self: start;
  border: none;
  box-shadow: none;
  border-radius: 0;
}
#ingatlan-kozvetites .split-image img {
  width: 70%;
  height: auto;
  display: block;
  margin: 0;
}
#ingatlan-kozvetites .split-text { max-width: 18cm; }


/* === Ingatlanközvetítés – szövegszélesség fixálás === */
#ingatlan-kozvetites .split-text { max-width: 18cm; }


/* === Ingatlanközvetítés – precíz flex elrendezés (csak ebben a szekcióban) === */
#ingatlan-kozvetites {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5cm;          /* kép és szöveg távolsága */
  padding-left: 1.5cm; /* bal oldali belső margó */
  padding-right: 1.5cm;/* jobb oldali belső margó */
  max-width: none;
  width: 100%;
  margin: 0;
}

#ingatlan-kozvetites .split-image {
  flex: 0 0 auto;
  border: none; box-shadow: none; border-radius: 0;
  margin: 0; padding: 0;
}

#ingatlan-kozvetites .split-image img {
  width: 8cm;   /* fix, stabil képszélesség */
  height: auto;
  display: block;
  margin: 0;
}

#ingatlan-kozvetites .split-text {
  flex: 0 0 18cm;  /* fix, stabil szövegszélesség */
  max-width: 18cm;
}


/* === Ingatlanközvetítés – jobb oldali margó beállítás === */
#ingatlan-kozvetites {
  padding-right: 1.5cm !important;
}
#ingatlan-kozvetites .split-text {
  flex: 1 1 auto;
  max-width: none;
}


/* === Ingatlanközvetítés – háttérszín beállítás === */
#ingatlan-kozvetites {
  background-color: #c0b8b3;
}


/* === Értékbecslés & Gazdasági tanácsadás – egységes elrendezés és háttér === */
#ertekbecsles, #tanacsadas {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1.5cm;
  padding-left: 1.5cm;
  padding-right: 1.5cm;
  max-width: none; width: 100%; margin: 0;
  background-color: #c0b8b3;
}
#ertekbecsles .split-image, #tanacsadas .split-image {
  flex: 0 0 auto; border: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0;
}
#ertekbecsles .split-image img, #tanacsadas .split-image img {
  width: 8cm; height: auto; display: block; margin: 0;
}
#ertekbecsles .split-text, #tanacsadas .split-text {
  flex: 1 1 auto; max-width: none;
}



/* === Footer módosítás === */
.footer {
  background-color: #c0b8b3 !important;
  color: #0f172a;
  font-weight: 700;
}

/* ----------------------------------------------------------
   Mobilnézet: reszponzív elrendezés és tördelés

   Az ingatlanközvetítés szekció és a hős idézet eredeti
   beállításai asztali nézetre lettek kialakítva. A fix
   centiméteres szélességek mobil eszközökön horizontális
   görgetést és kifutó tartalmat okoztak. Az alábbi
   media‑lekérdezés felülírja ezeket a szabályokat 900px alatti
   nézetben, így a tartalom rugalmasan kitölti a kisebb
   kijelzőt.
*/
@media (max-width: 900px) {
  /* A "display: flex !important" desktop szabály helyett
     mobilon blokkos elrendezést használunk, hogy a kép és a
     szöveg egymás alatt jelenjen meg. */
  #ingatlan-kozvetites {
    display: block !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 1rem !important;
  }

  /* A kép és a szöveg rugalmas szélességet kap, így nem
     kényszeríti ki a túl széles fix méreteket. */
  #ingatlan-kozvetites .split-image,
  #ingatlan-kozvetites .split-text {
    max-width: 100% !important;
    flex: none !important;
  }

  /* A kép töltse ki a rendelkezésre álló szélességet, és
     tartsa meg az arányait. */
  #ingatlan-kozvetites .split-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* A hős idézet mobilon engedje a sortörést, és ne tolja el a
     tartalmat vízszintesen. */
  .hero-quote {
    white-space: normal !important;
    width: 100% !important;
    transform: none !important;
  }
}


/* === Nav színváltás: hősről továbblapozva fekete === */
.nav.dark a { color: #0f172a; }
.nav.dark .brand { color: #0f172a; }


/* === Gazdasági tanácsadás: közelebb tolás az Értékbecsléshez === */
#tanacsadas {
  margin-top: -2cm; /* teljes szekciót (kép + szöveg) 2 cm-rel feljebb tolja */
}


/* === Gazdasági tanácsadás: még 1 cm-rel feljebb === */
#tanacsadas {
  margin-top: -3cm !important;
}


/* === Kapcsolat blokk a footer felett === */
.contact-block {
  text-align: center;
  padding: 32px 16px;
  background-color: #fff;
  color: #0f172a;
}
.contact-block h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}
.contact-block p {
  margin: 6px 0;
  font-size: 16px;
}


/* === Értékbecslés + Gazdasági tanácsadás közelebb az Ingatlanközvetítéshez === */
#ertekbecsles {
  margin-top: -1.5cm !important;
}

/* === Kapcsolat blokk háttérszín === */
.contact-block {
  background-color: #c0b8b3 !important;
}


/* === Kapcsolat blokk sötétebb háttér + fehér félkövér betűk === */
.contact-block {
  background-color: #a89f99 !important; /* sötétebb árnyalat */
  color: #ffffff !important;
}
.contact-block h2, .contact-block p {
  color: #ffffff !important;
  font-weight: 700;
}

/* --- Mobilnézet: navigáció menü tördelése --- */
@media (max-width: 900px) {
  /* A menüelemek ne lógjanak ki a képernyőről, hanem új sorba törjenek */
  .nav ul {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
}

/* --- Mobilnézet: hamburger ikon jól látható --- */
/* A hamburger ikon (három csík) legyen mindig az előtérben és örökölje a navigáció aktuális színét. */
.nav-toggle-label {
  position: relative;
  z-index: 1000;
  color: inherit;
}
/* Sötét nav állapotban feketére vált a hamburger ikon, hogy jól látható legyen világos háttéren. */
.nav.dark .nav-toggle-label {
  color: #0f172a;
}

/* === Hamburger menü megjelenítése mobilon === */
/* Az alapértelmezett checkbox eltüntetése */
.nav-toggle {
  display: none;
}
/* A három vonal megjelenítése: alapból rejtve, mobilon látszik */
.nav-toggle-label {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
}
/* A hamburger vonalak stílusa */
.nav-toggle-label span {
  background: currentColor;
  height: 2px;
  border-radius: 1px;
  display: block;
}

@media (max-width: 900px) {
  /* A hamburger gomb megjelenítése kis kijelzőn */
  .nav-toggle-label {
    display: flex;
  }
  /* A hamburger csíkok margója és animációja az X-hez */
  .nav-toggle-label span {
    margin: 4px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  /* A menüpontok alapból el vannak rejtve mobilon */
  /* A menüpontok alapból el vannak rejtve mobilon.
     A háttér legyen átlátszó, mert a felhasználó nem szeretne sötét keretet a menüpontok körül.
     A padding és a margó megmarad, hogy a lista tagjai elkülönüljenek egymástól. */
  .nav ul {
    display: none;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
    background: transparent !important;
    padding: 16px;
    margin: 0;
  }
  /* Ha a checkbox be van kapcsolva, jelenjenek meg a menüpontok */
  #nav-toggle:checked + .nav-toggle-label + ul {
    display: flex;
  }
  /* A hamburger átváltása X-re a menü lenyitásakor */
  #nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  #nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }
  #nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
}


/* === Kapcsolat blokk email link stílus === */
.contact-block a {
  color: #ffffff !important;
  text-decoration: underline !important;
  font-weight: 700;
}

/* --- Nav színezés a hős szakasz és a többi szakasz alapján --- */
/* Az alapértelmezett navigáció fehér színnel jelenik meg, a dark osztálynál sötét (fekete) színű lesz. */
.nav, .nav a, .nav .brand {
  color: #ffffff !important;
}
.nav.dark, .nav.dark a, .nav.dark .brand {
  color: #0f172a !important;
}

/* A dark mód alatt a lenyíló menü háttere világos, hogy a fekete szöveg jól olvasható legyen */
/* Mobilnézet: a lenyíló menü háttere legyen áttetsző, ne jelenjen meg fehér vagy fekete keret */
.nav.dark ul {
  background: transparent;
}

/* --- Hero idézet középre igazítása --- */
.hero-quote {
  white-space: normal !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
  transform: none !important;
}

/* --- Mobilnézet: Értékbecslés és Gazdasági tanácsadás szekciók felülbírálása --- */
@media (max-width: 900px) {
  /* A szekciók blokkos elrendezésre váltanak, hogy ne okozzanak vízszintes görgetést */
  #ertekbecsles,
  #tanacsadas {
    display: block !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    gap: 1rem !important;
  }

} /* lezárjuk az értékbecslés/tanácsadás mobil @media blokkot */

/* === Mobil hamburger ikon láthatósági és színkezelési javítás === */
/* A navigációs menü színe örökli a nav állapotát: fehér a hős szakaszon, fekete a sötét navban. */
.nav,
.nav a,
.nav .brand,
.nav-toggle-label {
  color: #ffffff !important;
}
.nav.dark,
.nav.dark a,
.nav.dark .brand,
.nav.dark .nav-toggle-label {
  color: #0f172a !important;
}

/* Mobilnézetben a hamburger ikon jelenjen meg, és a menüpontok alapból legyenek elrejtve. */
@media (max-width: 900px) {
  /* A hamburger ikon – három vonal – láthatóvá tétele és méretezése. */
  .nav-toggle-label {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
    position: relative;
    z-index: 1001;
  }
  /* A három vízszintes vonal stílusa és animációja az X-hez való átmenethez. */
  .nav-toggle-label span {
    background: currentColor !important;
    height: 2px;
    border-radius: 1px;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  /* A menüpontok rejtve vannak mobilon, háttér nélkül jelennek meg. */
  .nav ul {
    display: none !important;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    align-items: flex-end;
    justify-content: flex-end;
    background: transparent !important;
    padding: 16px;
    margin: 0;
  }
  /* A menü megjelenítése, amikor a checkbox be van jelölve. */
  #nav-toggle:checked + .nav-toggle-label + ul {
    display: flex !important;
  }
  /* A hamburger ikon X-re vált a menü nyitásakor. */
  #nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  #nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }
  #nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* A szekciókon belüli képek és szövegek 100% szélesek mobilon */
  #ertekbecsles .split-image,
  #tanacsadas .split-image,
  #ertekbecsles .split-text,
  #tanacsadas .split-text {
    max-width: 100% !important;
    flex: none !important;
  }
  #ertekbecsles .split-image img,
  #tanacsadas .split-image img {
    width: 100% !important;
    height: auto !important;
  }
}

/* --- A hamburger ikon kiemelése mobilon --- */
/* A hamburger gomb mögé enyhe hátteret teszünk, hogy jobban látható legyen a hős szakasz képén.
   A háttér színe a nav állapotától függ: sötét nav esetén világos, világos nav esetén sötétebb. */
/* A korábbi háttér kiemelést felülírjuk: mobilnézetben ne legyen külön háttere a hamburger gombnak. */
.nav-toggle-label {
  padding: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
}
.nav.dark .nav-toggle-label {
  background: rgba(255, 255, 255, 0.6);
}

/* --- Látható hamburger ikon: fehér csíkok a hős oldalon, fekete a sötét navban --- */
/* Mobilnézetben biztosítjuk, hogy a menüikon csíkjai jól láthatóak legyenek. */
@media (max-width: 900px) {
  .nav-toggle-label {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 32px !important;
    height: 26px !important;
    padding: 0 !important;
    background: none !important;
  }
  /* A hamburger ikon vonalainak stílusa: vastagabb, lekerekített csíkok. */
  .nav-toggle-label span {
    background-color: #ffffff !important;
    height: 4px !important;
    border-radius: 2px !important;
    margin: 5px 0 !important;
  }
  /* Sötét nav esetén a csíkok színe fekete. */
  .nav.dark .nav-toggle-label span {
    background-color: #0f172a !important;
  }
}

/* --- Kicsit vastagabb hamburger ikon mobilon --- */
/* A mobil nézetben a hamburger ikon vonalai kissé vastagabbak és szélesebbek, hogy jobban észrevehető legyen. */
@media (max-width: 900px) {
  .nav-toggle-label {
    width: 28px !important;
    height: 22px !important;
  }
  .nav-toggle-label span {
    height: 3px !important;
  }
}