/*
 * Komponensek — 03-components.css
 * ------------------------------------------------------------------
 * Újrafelhasználható, önálló UI-elemek. Ezek a szabályok sosem
 * tartalmaznak szekció-specifikus margót/elhelyezést — azt a
 * szekciót összeállító pattern CSS-e (06-page-fooldal.css) adja hozzá,
 * a komponens-osztállyal együtt használt saját osztályon keresztül,
 * pl. class="button button--primary hero__cta".
 *
 * Minden szín/betű/térköz a theme.json presetekből vagy a
 * 00-tokens.css egyedi property-jeiből jön — nincs hardcode-olt
 * hex/px érték a geometrián kívül (padding, min-height).
 */

/* --- Gomb — .button ------------------------------------------------ */

.button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--wp--preset--font-family--nunito-sans);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--torzs);
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-gomb);
  padding: 15px 26px;
  min-height: var(--erintesi-cel);
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button--primary {
  background: var(--wp--preset--color--elsodleges);
  color: var(--wp--preset--color--alap);
}
.button--primary:hover {
  background: var(--wp--preset--color--elsodleges-sotet);
  color: var(--wp--preset--color--alap);
}

.button--korvonalas {
  background: transparent;
  border-color: var(--wp--preset--color--elsodleges);
  color: var(--wp--preset--color--elsodleges);
}
.button--korvonalas:hover {
  background: color-mix(in srgb, var(--wp--preset--color--elsodleges) 8%, transparent);
}

/* Jelzőszín (signature) gomb — KIZÁRÓLAG a beiratkozási CTA-khoz tartva,
   hogy tényleg kiugorjon a különben visszafogott palettából. Ne
   használd más gombokra — a "pop" pont attól működik, hogy ritka. */
.button--jelzo {
  background: var(--wp--preset--color--jelzo);
  color: var(--wp--preset--color--alap);
}
.button--jelzo:hover {
  background: var(--wp--preset--color--jelzo-sotet);
  color: var(--wp--preset--color--alap);
}

.button--kicsi {
  padding: 11px 20px;
  font-size: var(--wp--preset--font-size--aprobetus);
}

/* --- Szöveges link nyíllal — .link ---------------------------------- */

.link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  text-decoration: none;
  color: var(--wp--preset--color--elsodleges);
}
.link:hover {
  color: var(--wp--preset--color--elsodleges-sotet);
}
.link--vilagos {
  color: var(--wp--preset--color--arany-vilagos);
}
.link--vilagos:hover {
  color: var(--wp--preset--color--alap);
}
.link--arany {
  color: var(--wp--preset--color--arany);
}
.link--arany:hover {
  color: var(--wp--preset--color--elsodleges-sotet);
}
.link svg {
  flex: none;
}

/* --- Címke / eyebrow szövegek --------------------------------------- */

/* Eyebrow — kis kiemelő szó/kifejezés a cím fölött.
   2026-08-06: korábban dőlt volt — a felhasználó szerint az
   eyebrow+cím dőlt/nem-dőlt keveredése összevisszának hatott, ezért
   mindkettő egységesen álló (nem dőlt); a hangsúlyt a szín + a
   félkövér súly adja, nem a dőlt stílus-váltás. */
.eyebrow {
  margin: 0;
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--alcim);
  color: var(--wp--preset--color--arany);
}
.eyebrow--vilagos {
  color: var(--wp--preset--color--arany-vilagos);
}

/* Nagybetűs, ritkított kis címke — pl. hír-kategória, "GYORS ELÉRÉS" */
.cimke {
  font-size: var(--wp--preset--font-size--aprobetus);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--arany);
}

/* Cím-méret utility-k — explicit felülírás, nem a theme.json H-szint
   alapértékére hagyatkozva (pl. egy H2 lehet "cim-kozepes" is, ha a
   szekcióban nem a legnagyobb kiemelést kell kapnia).
   Melyiket melyik szekció kapja — nem véletlenszerű, hanem szerep
   szerint dől el: .cim-nagy az önálló, editoriális szekció-fejléceknél
   (Értékek, Iskolai életünket, Közösség, Ismerkedjünk meg — mindegyik
   önmagában álló "állítás"); .cim-kozepes ahol a fejléc funkcionális/
   sűrű tartalom mellett kísérő szerepben van (Két útvonal csempéi,
   Hírek+Események, Kapcsolat — mindegyik lista/adatsor/rövid CTA
   mellett áll). Új szekciónál ez alapján válaszd, ne találomra. */
.cim-hero {
  font-size: var(--wp--preset--font-size--cim-hero);
}
.cim-nagy {
  font-size: var(--wp--preset--font-size--cim-nagy);
}
.cim-kozepes {
  font-size: var(--wp--preset--font-size--cim-kozepes);
}

/* Szekció-fejléc: eyebrow + H2 pár, a kezdőlap legtöbb szekciójában */
.szekcio-fejlec {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 680px;
  /* A WP ".is-layout-constrained > *" szabálya "margin-left/right: auto
     !important"-tal középre húzná ezt a (szándék szerint balra igazított)
     dobozt — csak egy másik !important tudja felülírni, a sima
     specificitás/forrássorrend itt nem elég (lásd fejlesztesi-naplo.md). */
  margin-inline: 0 !important;
}
.szekcio-fejlec .eyebrow {
  margin-bottom: 6px;
}

/* Ferde, kis elválasztó jel — a mockup "aranyszín skew" akcentje */
.elvalaszto-jel {
  display: inline-block;
  width: 14px;
  height: 2.5px;
  background: var(--wp--preset--color--arany-elenk);
  transform: skewX(-24deg);
  margin: 0 18px;
}

/* --- Kártya — .card -------------------------------------------------- */

/* Elem-családok — ismétlődő listaelemekhez ELŐSZÖR ezt a 2 meglévő
   családot nézd meg, csak indokolt esetben legyen új 3.:
   1. "Doboz" — teljes keret/árnyék + lekerekített sarok, önálló
      választható/kiemelt egységekhez: .card (Ismerkedjünk meg),
      .ket-utvonal__csempe (Két útvonal), .ertek-kartya (Értékek),
      a mozaik-rács .media-frame elemei (Iskolai életünket).
   2. "Lista-elem" — csak alsó vonal, sűrű, pásztázható tartalomhoz:
      .hirek-esemenyek-elem/.esemeny-elem (Hírek+Események). */

/* 2026-08-06, UX audit: a korábbi éles sarok + kemény szürke szegély
   "form/dashboard"-szerű, hideg hatást keltett ("profi, barátságos
   kinézetet szeretnék, ez közel sem olyan" visszajelzés) — lekerekített
   sarok + lágy emelt-árnyék (kemény szegély helyett) barátságosabb,
   miközben a tipográfia adja a "professzionális" réteget. */
.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--wp--preset--color--szoveg);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-kartya);
  border: 1px solid var(--border-halvany);
  box-shadow: 0 2px 12px rgba(18, 30, 38, 0.05);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover {
  border-color: var(--wp--preset--color--elsodleges);
  background: color-mix(in srgb, var(--wp--preset--color--elsodleges) 5%, transparent);
  box-shadow: 0 8px 20px rgba(18, 30, 38, 0.09);
  transform: translateY(-2px);
}
.card--kiemelt {
  background: var(--wp--preset--color--elsodleges);
  border-color: var(--wp--preset--color--elsodleges);
  color: var(--wp--preset--color--alap);
}
.card--kiemelt:hover {
  background: var(--wp--preset--color--elsodleges-sotet);
}
/* Jelzőszín kártya — csak a Beiratkozás CTA-hoz, lásd .button--jelzo */
.card--jelzo {
  background: var(--wp--preset--color--jelzo);
  border-color: var(--wp--preset--color--jelzo);
  color: var(--wp--preset--color--alap);
}
.card--jelzo:hover {
  background: var(--wp--preset--color--jelzo-sotet);
}
.card--jelzo .card__alcim {
  color: var(--wp--preset--color--alap);
  opacity: 0.85;
}
.card--kozepre {
  align-items: center;
  text-align: center;
}
.card__cim {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 600;
  font-size: 21px;
}
.card__alcim {
  font-size: 15px;
  color: var(--wp--preset--color--tompitott-vilagos);
}
.card--kiemelt .card__alcim {
  color: var(--wp--preset--color--alap);
  opacity: 0.85;
}

/* --- Képkeret — .media-frame ----------------------------------------- */

.media-frame {
  border-radius: var(--radius-kep);
  overflow: hidden;
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-frame--negyzetes {
  aspect-ratio: 1 / 1;
}
.media-frame--fekvo {
  aspect-ratio: 4 / 3;
}
.media-frame--keretezett {
  border: 8px solid var(--wp--preset--color--alap);
  box-shadow: 0 12px 28px rgba(18, 30, 38, 0.22);
}

/* Fotó-felirat — VALÓDI, szerkeszthető figcaption (nem a képbe
   sütött szöveg), hogy egy nem-technikai admin a blokk-szerkesztőben
   is tudja módosítani, és képernyőolvasó is helyesen felolvassa. A
   `.media-frame` (relative pozíciójú figure) belsejében, a keret
   aljára illesztve, sötét féligáttetsző "pill" jelvényként — ez a
   szokásos, kész (nem placeholder-jellegű) fotófelirat-minta.
   2026-09-05: korábban krémszínű, szaggatott keretes, monospace
   "helyőrző-címke" stílus volt (lásd fejlesztesi-naplo.md,
   2026-08-20-i bejegyzés) — miután az "Iskolai életünket képekben"
   szekcióba valós fotók kerültek, a felhasználó ezt "gagyinak" jelezte
   (a placeholder-jelleg megmaradt, holott már nem placeholder a
   tartalom) — lekerekítve és kisebbre állítva, a `.kapcsolat__terkep-
   cimke` (ami VALÓBAN placeholder marad, amíg nincs térkép) mostantól
   NEM ugyanazt a stílust használja, tudatosan szét van választva a
   két eset (kész fotó felirata vs. cserére váró helyőrző címkéje).
   FONTOS: a szelektor a WP core saját `.wp-element-caption`
   osztályát célozza, NEM egy egyedi osztálynevet — a core/image blokk
   szerkesztői validációja a figcaption osztályát is a blokk saját
   (nem testreszabható) `save()`-jéhez hasonlítja; egy egyedi osztály
   "A blokkban váratlan, vagy hibás tartalom van" hibát okozna a
   szerkesztőben (lásd fejlesztesi-naplo.md, 2026-08-20-i bejegyzés). */
.media-frame {
  position: relative;
}
.media-frame .wp-element-caption {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-family: var(--wp--preset--font-family--nunito-sans);
  font-weight: 700;
  font-size: 11px;
  color: var(--wp--preset--color--alap);
  background: color-mix(in srgb, var(--wp--preset--color--szoveg) 55%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  margin: 0;
}

/* --- Esemény adatai (dátum, helyszín) --------------------------------- */

.esemeny-adatok {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  color: var(--wp--preset--color--tompitott-vilagos);
  font-size: var(--wp--preset--font-size--aprobetus);
}
.esemeny-adatok__datum {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 600;
  color: var(--wp--preset--color--elsodleges);
  font-size: var(--wp--preset--font-size--torzs);
}

/* --- Színminta — stíluskalauz swatch ---------------------------------- */

.szinminta {
  width: 128px;
  height: 84px;
  display: flex;
  align-items: flex-end;
  padding: 8px;
  font-size: var(--wp--preset--font-size--aprobetus);
  border-radius: var(--radius-kep);
  border: 1px solid var(--border-halvany);
}

/* --- Érték-kártya — az "Értékek" szekció ismétlődő eleme ------------- */

/* 2026-08-06: korábban számozott "lista-elem" (csak alsó vonal, dőlt
   szám) volt — a felhasználó szerint az "Értékek" szekció összhatása
   rendezetlen volt, ikonokat kért. Most a "doboz" család tagja: teljes
   keret + lekerekített sarok + ikon, ugyanaz a nyelv, mint a .card-nál. */
.ertek-kartya {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-kartya);
  border: 1px solid var(--border-halvany);
  background: var(--wp--preset--color--alap);
  box-shadow: 0 2px 12px rgba(18, 30, 38, 0.05);
}
.ertek-kartya__ikon {
  color: var(--wp--preset--color--elsodleges);
  margin-bottom: 4px;
}
.ertek-kartya h3 {
  margin: 0;
  font-size: var(--wp--preset--font-size--torzs);
}
.ertek-kartya p {
  margin: 0;
  color: var(--wp--preset--color--tompitott);
}

/* --- Űrlap — .urlap (pl. kapcsolat-űrlap) ----------------------------- */

.urlap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--30);
  max-width: 640px;
}
.urlap__mezo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.urlap__mezo--teljes {
  grid-column: 1 / -1;
}
.urlap__mezo--rejtett {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.urlap__mezo label {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--aprobetus);
}
.urlap__mezo input,
.urlap__mezo textarea {
  font-family: inherit;
  font-size: var(--wp--preset--font-size--torzs);
  color: var(--wp--preset--color--szoveg);
  background: var(--wp--preset--color--alap);
  border: 1.5px solid var(--border-kozepes);
  border-radius: var(--radius-gomb);
  padding: 12px 14px;
  min-height: var(--erintesi-cel);
  box-sizing: border-box;
}
.urlap__mezo textarea {
  min-height: 140px;
  resize: vertical;
}
.urlap__mezo input:focus,
.urlap__mezo textarea:focus {
  border-color: var(--wp--preset--color--elsodleges);
}
.urlap__gomb {
  grid-column: 1 / -1;
  justify-self: start;
}

.urlap__visszajelzes {
  max-width: 640px;
  margin: 0 0 var(--wp--preset--spacing--30);
  padding: 14px 18px;
  border-radius: var(--radius-kartya);
  font-weight: 700;
}
.urlap__visszajelzes--siker {
  background: color-mix(in srgb, var(--wp--preset--color--elsodleges) 12%, transparent);
  color: var(--wp--preset--color--elsodleges-sotet);
}
.urlap__visszajelzes--hiba {
  background: var(--wp--preset--color--kozlemeny-hatter);
  color: var(--wp--preset--color--arany);
}

@media (max-width: 640px) {
  .urlap {
    grid-template-columns: 1fr;
  }
}

/* --- Galéria-blokk elem — .galeria-elem (lightbox-indító gomb) ------- */

/* A .media-frame-t (lekerekített keret) örökli, csak a kattintható
   "gomb" jelleget adja hozzá — a lightbox JS (galeria-lightbox.js)
   nyitja meg rá kattintva. */
.galeria-elem {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  position: relative;
}
.galeria-elem::after {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--wp--preset--color--szoveg) 0%, transparent);
  transition: background-color 0.15s ease;
}
.galeria-elem:hover::after,
.galeria-elem:focus-visible::after {
  background: color-mix(in srgb, var(--wp--preset--color--szoveg) 12%, transparent);
}
.galeria-blokk__nincs-tartalom {
  color: var(--wp--preset--color--tompitott);
}

/* --- Tanár-kártya — .tanar-kartya (Pedagógusaink rács) ---------------- */

/* A "doboz" család 3. tagja (lásd a .card feletti doc-komment) — a
   fotó (.media-frame) + cím/alcím pár (a .card__cim/.card__alcim
   tipográfiai nyelvén) kombinációja. Maga a kártya (név/pozíció
   szöveg) NEM link — csak a fotó kattintható, ami a lightboxot
   nyitja meg nagyobb méretben (.galeria-elem a fotó linkjén, lásd
   galeria-lightbox.js és fejlesztesi-naplo.md 2026-08-24). */
.tanar-kartya {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tanar-kartya .media-frame {
  margin-bottom: 10px;
}
.tanar-kartya__nev {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 600;
  font-size: 21px;
  margin: 0;
}
.tanar-kartya__pozicio {
  font-size: 15px;
  color: var(--wp--preset--color--tompitott-vilagos);
  margin: 0;
}

/* --- Záró CTA doboz — .zaro-cta (szinkronizált minta, wp_block #142) - */

/* A "doboz" család tagja — a legtöbb aloldal alján megjelenő,
   szinkronizált mintaként (Site Editor → Minták → "Záró CTA —
   Kapcsolat") EGYETLEN helyen karbantartott záró felhívás. Korábban
   dísztelen szöveg+gomb páros volt, ami vizuálisan belesimult a
   bekezdések közé — most a `.card`/`.ertek-kartya` "doboz"-receptet
   követi (alap-háttér + halvány keret + puha árnyék), hogy TÉNYLEG
   kiugró CTA-ként hasson, ne sima bekezdésként.
   2026-08-25: több finomítási kör után (lásd fejlesztesi-naplo.md)
   a korábbi ikon-kísérletek (ikon-jelvények, ikon-halmaz, majd
   vallási szimbólumok) helyett egy tisztán TIPOGRÁFIAI grafika lett
   a végleges megoldás — lásd `.zaro-cta__grafika-jel` lent. */
.zaro-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-kartya);
  background: var(--wp--preset--color--alap);
  border: 1px solid var(--border-halvany);
  box-shadow: 0 2px 12px rgba(18, 30, 38, 0.05);
}
.zaro-cta__szoveg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 520px;
}
.zaro-cta__szoveg h2 {
  margin: 0;
}
.zaro-cta__szoveg p {
  margin: 0 0 6px;
  color: var(--wp--preset--color--tompitott);
}

/* Dekoratív grafika a doboz jobb oldalán.
   2026-08-25, 3. finomítás: a korábbi ikon-alapú próbálkozások
   (ikon-jelvények, majd egységes ikoncsalád, majd vallási szimbólumok
   — kereszt, nyitott könyv/Biblia) mind felhasználói visszajelzésre
   estek ki: a Református hagyomány nem használ keresztet díszítő
   elemként, bibliai utalás sem volt kívánatos, az ikon-halmaz pedig
   "gagyi" hatású volt. A végső megoldás NEM ikon, hanem egy nagy,
   a site saját címsor-betűtípusával (Nunito, extra vastag súllyal)
   szedett kérdőjel — tisztán TIPOGRÁFIAI grafika, ami:
   (a) garantáltan illeszkedik a designba, mert a site SAJÁT
       betűkészletét használja, nem egy külső ikon-nyelvet;
   (b) tartalmilag pontosan passzol — a doboz szövege pontosan arra
       biztat, hogy ha kérdése van, keresse az iskolát (ez volt az
       eredeti "Kérdése van?" szöveg szándéka is, mielőtt a "Jó
       helyen jár." címre cserélődött — a kérdőjel most vizuálisan
       viszi tovább ugyanazt a gondolatot);
   (c) semleges, nem vallási, nem egy tetszőleges ikonkészletből
       választott elem. Arany színnel a kör halvány, elsődleges-
       színű háttere előtt jó kontrasztot ad, a site két fő
       márkaszíne (kék+arany) így ebben az egy elemben is találkozik. */
.zaro-cta__grafika {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 184px;
  height: 184px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--elsodleges) 8%, transparent);
}
.zaro-cta__grafika-jel {
  font-family: var(--wp--preset--font-family--nunito);
  font-weight: 900;
  font-size: 108px;
  line-height: 1;
  color: var(--wp--preset--color--arany);
}

@media (max-width: 680px) {
  .zaro-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .zaro-cta__grafika {
    order: -1;
    width: 132px;
    height: 132px;
  }
  .zaro-cta__grafika-jel {
    font-size: 76px;
  }
}