/* A /kapcsolat űrlapja.
 *
 * 2026-09-16 óta a kapcsolat oldalon PONTOSAN a /landing űrlapja fut:
 * ugyanaz a mezőkészlet, ugyanaz a végpont (/api/landing), ugyanaz a
 * kliensoldali logika (assets/landing.js). Ez a fájl csak a megjelenést
 * hozza át, és SZÁNDÉKOSAN nem a teljes assets/landing.css.
 *
 * MIÉRT NEM A LANDING.CSS: az a fájl a landing teljes oldalképét viszi, és
 * globális alapokat állít (body, h1-h3, * box-sizing, .ld-sav térközök). A
 * kapcsolat oldalnak saját, eltérő tipográfiája és elrendezése van, amit a
 * task szerint nem bántunk; a landing.css betöltése ezeket felülírná.
 *
 * Ezért itt csak az ŰRLAP-SZINTŰ szabályok állnak, mindegyik a
 * #kapcsolat-urlap konténerre szűkítve, hogy semmi ne szivárogjon ki a lap
 * többi részére. A deklarációk betű szerint az assets/landing.css megfelelő
 * szabályaiból jönnek; ha ott változnak, itt is át kell vezetni.
 */

/* MÉRT HIBA (2026-09-16): a mezők jobbra kilógtak a kártyából. A fenti
   komment rögzíti, hogy a landing.css globális `* box-sizing` szabályát
   szándékosan nem hoztuk át — de a .ld-input szabály épp arra épül:
   width:100% + padding:12px + border:1px. Content-box modellben ez
   100% + 26px, tehát a mező mindig szélesebb a helyénél. Az egyedi
   legördülők azért maradtak a helyükön, mert azok flex elemek.
   A szabály a konténerre SZŰKÍTVE áll: globális `*` szétcsúsztatná a
   kapcsolat oldal többi részét, ami nem erre a dobozmodellre épül. */
#kapcsolat-urlap,
#kapcsolat-urlap *,
#kapcsolat-urlap *::before,
#kapcsolat-urlap *::after {
  box-sizing: border-box;
}

#kapcsolat-urlap {
  --ld-szoveg: #f5f5f3;
  --ld-halk: #b6b5b5;
  --ld-rez: #f0a84b;
  --ld-cta-hatter: linear-gradient(180deg, #f0ac55, #e38a42);
  --ld-cta-hover: linear-gradient(180deg, #f6b96a, #e7954d);
  /* MÉRT HIBA (2026-09-16): az űrlap serif betűkkel jelent meg. A .ld-input
     `font: inherit`-tel a szülőtől örököl, a .ld-cimke pedig egyáltalán nem
     kapott családot — a szülőtől viszont nem az Instrument Sans érkezik,
     ezért a böngésző serif tartalékra esett. Itt a konténer adja meg a
     családot, hogy minden gyerek ebből örököljön. */
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  display: grid;
  min-width: 0;
}

/* Az űrlap és a naptár egymásra rétegezve: csak az aktuális lépés foglal
   helyet, így a naptár stabil magassága nem hagy üres helyet az űrlap alatt. */
#kapcsolat-urlap > #ld-form,
#kapcsolat-urlap > #ld-naptar {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  min-width: 0;
}
#kapcsolat-urlap > [hidden] { display: none !important; }
#kapcsolat-urlap [hidden] { display: none !important; }

#kapcsolat-urlap .ld-sr,
#kapcsolat-urlap .ld-hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

#kapcsolat-urlap .ld-mezok {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 16px;
}
#kapcsolat-urlap .ld-mezo { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#kapcsolat-urlap .ld-mezo--teljes { grid-column: 1 / -1; }

#kapcsolat-urlap .ld-cimke {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  color: #e1d9d2; font-size: 13px; line-height: 1.6; font-weight: 500;
  letter-spacing: .01em;
}

#kapcsolat-urlap .ld-input {
  width: 100%; min-width: 0; min-height: 50px; appearance: none; -webkit-appearance: none;
  background: #0d0d0e; border: 1px solid #50463e; border-radius: 7px; padding: 12px;
  color: var(--ld-szoveg); font: inherit; font-size: 16px; line-height: 1.5; outline: none;
  /* A natív input/select a böngésző saját betűjét erőlteti, és a `font:
     inherit` ezt nem minden motorban győzi le (Safariban mérve gyakori).
     Ezért a család a rövidítés UTÁN, külön is ki van írva. */
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
#kapcsolat-urlap .ld-input:focus {
  border-color: var(--ld-rez); box-shadow: 0 0 0 3px rgba(240, 168, 75, .12);
}
#kapcsolat-urlap .ld-input::placeholder { color: #8f8781; }
#kapcsolat-urlap .ld-input.is-hibas { border-color: #ef9a75; }

/* A megjegyzés fix, ötsoros doboz, mint a /landing űrlapján: nem nő és nem
   méretezhető át (16 px × 1,5 sormagasság × 5 sor + belső margó + keret). */
#kapcsolat-urlap .ld-textarea { height: 146px; resize: none; overflow: auto; }

#kapcsolat-urlap .ld-gomb {
  display: inline-flex; justify-content: center; align-items: center;
  max-width: 100%; background: var(--ld-cta-hatter); color: #1a1206;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  font-family: 'Instrument Sans', sans-serif; font-weight: 650; line-height: 1.4;
  letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer;
  transition: background .2s, transform .2s;
}
#kapcsolat-urlap .ld-gomb:hover { background: var(--ld-cta-hover); transform: translateY(-2px); }
#kapcsolat-urlap .ld-gomb:focus-visible { outline: 2px solid var(--ld-szoveg); outline-offset: 5px; }
#kapcsolat-urlap .ld-gomb:disabled { opacity: .65; cursor: wait; transform: none; }
#kapcsolat-urlap .ld-gomb--teljes { width: 100%; }
#kapcsolat-urlap #ld-kuld { min-height: 48px; margin-top: 24px; padding: 12px 22px; font-size: 14px; }

#kapcsolat-urlap .ld-hiba { margin: 16px 0 0; color: #ffb294; font-size: 14px; line-height: 1.7; }
#kapcsolat-urlap .ld-adatkezeles { margin: 18px 0 0; font-size: 11px; line-height: 1.8; color: #b4aaa2; }
#kapcsolat-urlap .ld-adatkezeles a { color: #cfc3b8; text-underline-offset: 3px; }

#kapcsolat-urlap #ld-naptar { scroll-margin-top: 110px; }
#kapcsolat-urlap #ld-naptar-cim {
  margin: 0; font-family: 'Clash Display', 'Instrument Sans', sans-serif;
  font-weight: 600; font-size: 26px; line-height: 1.2;
}
#kapcsolat-urlap #ld-naptar-szoveg {
  margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: var(--ld-halk);
}
#kapcsolat-urlap #ld-calendly-allapot {
  min-height: 3.6em; margin: 18px 0 0; font-size: 13px; line-height: 1.8; color: var(--ld-halk);
}
#kapcsolat-urlap #ld-calendly {
  flex: 1 1 0; min-height: 660px; height: 0; margin-top: 12px; overflow: auto;
  background: #18181b; border-radius: 10px; line-height: 0;
}
/* A Calendly világos színsémájú, egyedi sötét háttérrel. Az iframe sémája
   egyezzen vele, különben a böngésző fehérre festi az áttetsző alsó részt. */
#kapcsolat-urlap #ld-calendly iframe {
  display: block; width: 100%; height: 100%; min-height: 660px; border: 0;
  color-scheme: light; background: #18181b !important;
}

@media (max-width: 480px) {
  #kapcsolat-urlap .ld-mezok { grid-template-columns: 1fr; gap: 22px; }
  /* Telefonon a gomb közvetlenül az utolsó legördülő alatt ült, túl szorosan.
     Tulajdonosi visszajelzés (2026-09-16): kerüljön picit lejjebb. */
  #kapcsolat-urlap #ld-kuld { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  #kapcsolat-urlap .ld-gomb:hover { transform: none; }
}