/*
Theme Name: Rézkilincs Pszichológia
Theme URI: https://rezkilincspszichologia.hu
Author: Rézkilincs Pszichológia
Description: Egyedi téma a Rézkilincs Pszichológia weboldalhoz. A design tokenek az assets/css/tokens.css fájlban élnek — szín, tipográfia és térköz csak ott módosítandó.
Version: 2.0.0
License: Private
Text Domain: rezkilincs
*/

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

/* Vízszintes túlcsordulás elleni zár. A "clip" – szemben a "hidden"-nel –
   nem töri el a ragadós fejlécet.
   FONTOS: csak overflow-x szabad legyen itt. A kéttengelyes "overflow: clip"
   próba (2026-09-01) az EGÉSZ oldal görgethetőségét megszüntette – a html
   elem overflow-y: clip mellett fizikailag nem tud görgetni. Vissza lett
   állítva; a PinOnion #6 fejléc-csúszás valódi oka még vizsgálat alatt. */
html { overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--type-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  /* Mobil böngészők ne nagyítsák fel a szöveget fekvő tájolásban. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
h1, h2, h3, h4 {
  font-family: var(--type-heading);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-strong);
  margin: 0;
}
p, h1, h2, h3 { text-wrap: pretty; }
button { font: inherit; }

details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.sum-icon::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--c-copper);
  -webkit-mask: url('assets/img/icon-kilincs.svg') center / contain no-repeat;
  mask: url('assets/img/icon-kilincs.svg') center / contain no-repeat;
}

:where(a, button, summary, input, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.rk-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface-card); color: var(--text-strong);
  padding: var(--space-3) var(--space-4); z-index: 100;
}
.rk-skip:focus { left: var(--space-4); top: var(--space-4); }

/* ══════════════════════════════════════════════════════════════
   ELRENDEZÉS
══════════════════════════════════════════════════════════════ */
.rk-wide   { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter-inline); }
.rk-page   { max-width: var(--container-page); margin-inline: auto; padding-inline: var(--gutter-inline); }
.rk-narrow { max-width: 1000px;                margin-inline: auto; padding-inline: var(--gutter-inline); }

.rk-section        { padding-block: var(--space-9); }
.rk-section--warm  { background: var(--surface-card-warm); }
.rk-section--ruled { border-block: var(--border-hairline); }

/* ══════════════════════════════════════════════════════════════
   GOMBOK
══════════════════════════════════════════════════════════════ */
.rk-btn {
  font-family: var(--type-ui);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-rest);
  transition:
    background var(--dur-quick) var(--ease-standard),
    box-shadow var(--dur-quick) var(--ease-standard),
    transform  var(--dur-instant) var(--ease-standard);
}
.rk-btn:active { transform: scale(var(--press-scale)); }

.rk-btn--sm { height: var(--control-height-sm); padding-inline: var(--space-4); font-size: var(--size-xs); }
.rk-btn--md { height: var(--control-height);    padding-inline: var(--space-5); font-size: var(--size-sm); }
.rk-btn--lg { height: 54px;                     padding-inline: var(--space-6); font-size: var(--size-md); }

.rk-btn--primary         { background: var(--action-primary);   color: var(--action-primary-text); }
.rk-btn--primary:hover   { background: var(--action-primary-hover);   color: var(--action-primary-hover-text); box-shadow: var(--shadow-raised); }
.rk-btn--secondary       { background: var(--action-secondary); color: var(--action-secondary-text); }
.rk-btn--secondary:hover { background: var(--action-secondary-hover); color: var(--action-secondary-hover-text); box-shadow: var(--shadow-raised); }
.rk-btn--quiet           { background: transparent; color: var(--action-quiet-text); border-color: var(--action-quiet-border); }
.rk-btn--quiet:hover     { background: var(--c-copper-soft); color: var(--action-quiet-text); }

.rk-link {
  font-family: var(--type-body);
  font-weight: 600;
  color: var(--text-link);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--dur-quick) var(--ease-standard);
}
.rk-link:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════
   CÍMKÉK
══════════════════════════════════════════════════════════════ */
.rk-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-hairline);
  background: var(--surface-card-warm);
  color: var(--text-body);
  font-family: var(--type-label);
  /* 11px-ről feljebb: a címkék nagybetűsek és ritkított betűközűek,
     azon a méreten nehezen olvashatók voltak. */
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.rk-tag--calm { background: var(--surface-calm-soft); color: var(--c-copper-deep); border-color: transparent; }
.rk-tag--plain { text-transform: none; letter-spacing: 0; font-family: var(--type-body); }
.rk-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* Kattintható címke: ugyanaz a pirula, csak gomb. A böngésző saját
   gomb-stílusát le kell venni, különben szürke doboz lesz belőle. */
.rk-tag--gomb {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background var(--dur-quick) var(--ease-standard),
              color var(--dur-quick) var(--ease-standard);
}
.rk-tag--gomb:hover { background: var(--action-primary); color: var(--action-primary-text); }
.rk-tag--gomb[aria-pressed="true"] { background: var(--action-primary); color: var(--action-primary-text); }

/* ══════════════════════════════════════════════════════════════
   MÓDSZER-SZŰRŐ
   A sáv a lap tartalmában él (szerkesztőből átírható), de csak akkor
   jelenik meg, ha a JS bekapcsolta – enélkül a gombok nem működnének.
══════════════════════════════════════════════════════════════ */
.rk-szuro { display: none; }
.rk-szuro.is-kesz { display: block; margin-top: var(--space-6); margin-bottom: var(--space-6); }
/* A kérdés a lap törzsszövegének betűjét viseli, nem a felületi sans-t –
   a szöveg része, nem vezérlőelem-felirat. */
.rk-content .rk-szuro__cimke {
  font-family: var(--type-body);
  font-size: var(--size-base);
  color: var(--text-body);
  margin: 0 0 var(--space-3);
}
.rk-szuro__gombok { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rk-content .rk-szuro__db {
  font-family: var(--type-body);
  font-size: var(--size-sm);
  color: var(--text-muted);
  margin: var(--space-3) 0 0;
  min-height: 1.2em;
}
/* Szűrés közben a kártyák alatti címkesor kap egy kis levegőt. */
.rk-tags--szuro { margin-top: var(--space-4); }

/* A kiszűrt kártyát a hidden attribútum rejti el. Egy blokk-osztály
   display-szabálya felülírhatná, ezért kimondjuk. */
.rk-method[hidden] { display: none; }

/* ══════════════════════════════════════════════════════════════
   FEJLÉC
══════════════════════════════════════════════════════════════ */
.rk-header {
  /* "position: fixed", nem "sticky" — a body-n lévő overflow-x: clip miatt
     (l. fentebb) a body saját görgethető konténerré válik, és ehhez képest
     a sticky fejléc szétcsúszott a tényleges görgetéstől (PinOnion #6).
     A fixed nem függ attól, melyik elem a tényleges scroll-konténer, ezért
     nem tud lemaradni/elcsúszni. Cserébe a tartalom elé kerül – ezt a
     #rk-main padding-top-ja (lásd lentebb) ellensúlyozza. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface-page);
  border-bottom: var(--border-hairline);
}
/* A fejléc "fixed", tehát kiesik a dokumentum-folyásból – ezt a #rk-main
   felső paddingje ellensúlyozza, a fejléc tényleges (nav.js által mért)
   magasságával. */
#rk-main { padding-top: var(--rk-fejlec, 72px); }
/* Márka | középre igazított menü | jobb oldali akciók (CTA+hamburger) -
   3 oszlopos rács, hogy a menüpontok tényleg középen álljanak, nem csak
   a jobb oldali blokkon belül. Mobilon (lásd lentebb) a nav elrejtve,
   ez a rács ilyenkor 2 elemet tartalmaz (márka balra, akciók jobbra). */
.rk-header__inner {
  min-height: 72px;
  padding-block: var(--space-3);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
}
/* A márka blokk zsugorodhat és tördelhet – enélkül a hosszú oldalcím
   kinyomta a fejlécet, és vízszintes görgetést okozott mobilon. */
.rk-brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; color: inherit; }
.rk-brand:hover { color: inherit; }
.rk-brand__mark,
.rk-brand .custom-logo { height: 84px; width: auto; flex-shrink: 0; }

.rk-nav { display: flex; justify-content: center; min-width: 0; }

.rk-header__right { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; row-gap: var(--space-2); justify-content: flex-end; }


.rk-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  row-gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.rk-nav__list a {
  display: block;
  padding-block: 6px;
  white-space: nowrap;
  font-family: var(--type-label);
  font-size: 14px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-quick) var(--ease-standard);
}
.rk-nav__list a:hover { color: var(--text-strong); }
.rk-nav__list .current-menu-item > a,
.rk-nav__list .current_page_item > a,
.rk-nav__list .current-menu-ancestor > a,
.rk-nav__list .current_page_ancestor > a {
  color: var(--text-strong);
  border-bottom-color: var(--c-orange);
}

.rk-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.rk-hamburger, .rk-hamburger::before, .rk-hamburger::after {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-strong);
  border-radius: 2px;
  transition: transform var(--dur-calm) var(--ease-standard), opacity var(--dur-quick);
}
.rk-hamburger { position: relative; }
.rk-hamburger::before, .rk-hamburger::after { content: ''; position: absolute; left: 0; }
.rk-hamburger::before { top: -7px; }
.rk-hamburger::after  { top: 7px; }
.rk-nav-toggle[aria-expanded="true"] .rk-hamburger { background: transparent; }
.rk-nav-toggle[aria-expanded="true"] .rk-hamburger::before { transform: rotate(45deg) translate(5px, 5px); }
.rk-nav-toggle[aria-expanded="true"] .rk-hamburger::after  { transform: rotate(-45deg) translate(5px, -5px); }

/* ══════════════════════════════════════════════════════════════
   SZEKCIÓ FEJLÉC
══════════════════════════════════════════════════════════════ */
/* A szekciócímkék narancsak: ez a fő motívum egyik fele, és így
   végigvezeti a szemet az oldalon. */
.rk-eyebrow {
  font-family: var(--type-label);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin: 0 0 var(--space-3);
}
.rk-heading { font-size: var(--size-2xl); margin: 0; text-align: left; }
/* A bevezető bekezdés a törzsszöveggel azonos méretű (PinOnion #64,
   #65, #69): az ügyfél a hero bevezetőjéhez kérte igazítani, ami a
   látogatónak 17px-ként jelenik meg. Előzmény: 2026-09-05-én a
   cd4ad9d commit fordítva, a herót emelte 20px-re, hogy a kettő
   egyezzen – az a változtatás viszont sosem látszott (l. lentebb a
   .rk-content .rk-hero__lead szabályt), és a 09-17-i kérés írja felül. */
.rk-lead {
  font-family: var(--type-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  margin: var(--space-4) 0 0;
  /* Nincs szűkítés: a bevezető ugyanolyan széles, mint az alatta álló
     törzsszöveg. A korábbi 62ch-tól úgy tűnt, mintha minden oldal első
     bekezdése keskenyebb lenne a többinél. */
}
/* Ha egymás után több .rk-lead bekezdés következik (pl. a főoldal
   "Miben segítünk?" bevezetője, PinOnion #34), ne legyen köztük külön
   térköz – elég a sortávolság, hogy összefüggő szövegként hasson. */
.rk-lead + .rk-lead { margin-top: 0; }
/* Ha egy rk-lead bekezdés a .rk-content BELSEJÉBEN marad (nem csak az
   oldalfejlécbe emelt első bekezdésként, hanem pl. egy második/harmadik
   bevezető bekezdésként), az általános ".rk-content p" szabály
   (nagyobb specificitású: 1 osztály + 1 elem) felülírná a betűméretét –
   a szerkesztőben ez nem látszott, csak az élő oldalon. Ez a szabály
   (2 osztály) erősebb, így a rk-lead méret mindig érvényesül. */
.rk-content .rk-lead { font-size: var(--size-base); }
/* A szekció fejléc mindig balra zárt és egymás alá rendezett – a designban
   ez a blokk helyenként jobbra csúszott, az hiba volt.
   A blokk-térközt itt kikapcsoljuk: a felirat, a címsor és a bevezető saját,
   szoros margókkal ül egymás alatt, különben duplán adódna a hézag. */
.rk-sectionhead {
  margin-bottom: var(--space-7);
  text-align: left;
  display: block;
}
.rk-sectionhead > * { text-align: left; margin-block-start: 0; }
.rk-sectionhead .rk-eyebrow { margin: 0 0 var(--space-3); }
.rk-sectionhead .rk-heading { margin: 0; }
.rk-sectionhead .rk-lead    { margin: var(--space-4) 0 0; }

/* Az oldalfejléc alatt nincs vonal: a cím, a bevezető és a tartalom
   elválasztását a térköz végzi. A korábbi hajszálvonal minden aloldalon
   ott volt, és a harmonikás lapokon rögtön a lista saját vonala alá
   került. A belső padding marad, tehát a térközök nem változnak. */
.rk-pagehead { padding: var(--space-7) 0 var(--space-6); }
.rk-pagehead > * { margin-block-start: 0; }
.rk-pagehead .rk-heading { margin: 0; }
.rk-pagehead .rk-lead    { margin: var(--space-4) 0 0; }

/* Ha a bevezető több bekezdésre nyúlik (az első az oldalfejlécbe kerül,
   a többi a törzsben marad, l. page.php lead-kiemelés), a fejléc/törzs
   határán addig a section-térköz (pagehead alsó + content felső
   paddingje, együtt jóval nagyobb, mint space-4) állt, mint amennyi a
   bekezdések között van – emiatt volt egyenetlen a térköz. Ha a törzs
   rk-lead bekezdéssel kezdődik (vagyis a bevezető folytatódik), a két
   paddingot egyetlen, a bekezdésköz méretű résre szűkítjük. */
.rk-pagehead:has(+ .rk-content > .rk-lead:first-child) { padding-bottom: var(--space-4); }
.rk-content:has(> .rk-lead:first-child) { padding-top: 0; }
/* Ha a törzsben maradó utolsó bevezető bekezdés után rögtön tartalom jön
   (pl. a lenyíló témalista), a bekezdésköz (space-4) túl szorosnak
   hatott a lista felső vonala mellett – ezt nyitjuk meg. */
.rk-content > .rk-lead:last-of-type { margin-bottom: var(--space-6); }

/* Kiemelt kép egyes bejegyzésen (single.php) – szolgáltatásnak,
   szakembernek, blogposztnak egyaránt. */
.rk-post-thumb {
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 480px;
}
.rk-post-thumb img { width: 100%; height: auto; display: block; }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
/* A hero Gutenberg oszlopblokkból jön, ezért a wp-block-columns
   alapbeállításait felül kell írni. */
.rk-hero {
  padding-block: var(--space-5);
  gap: var(--space-8);
  align-items: center;
}
.wp-block-columns.rk-hero { margin-block: 0; }
.rk-hero > .wp-block-column { min-width: 0; }
.rk-hero__col { min-width: 0; }
.rk-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-calm-soft);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-6);
  font-family: var(--type-ui);
  font-size: var(--size-2xs);
  font-weight: var(--weight-medium);
  color: var(--c-copper-deep);
  letter-spacing: 0.02em;
}
.rk-hero__badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-yellow);
  flex-shrink: 0;
}
.rk-hero__title { font-size: var(--size-4xl); margin: 0 0 var(--space-5); }
.rk-hero__lead {
  font-family: var(--type-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  margin: 0 0 var(--space-6);
}
/* Ugyanaz a specificitás-csapda, mint a .rk-lead-nél: a hero bekezdései
   a .rk-content belsejében állnak, ahol a ".rk-content p" (1 osztály +
   1 elem) erősebb a puszta .rk-hero__lead osztálynál. Emiatt a hero
   mérete korábban némán 17px maradt akkor is, amikor a szabály 20px-et
   mondott – most a 17px a szándék, ezért ez a sor ki is mondja. Enélkül
   egy későbbi "specificitás-javítás" visszavinné 20px-re. */
.rk-content .rk-hero__lead { font-size: var(--size-base); }
.rk-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }

.rk-hero__visual { position: relative; min-width: 0; }
.rk-hero__image {
  width: 100%;
  height: 560px;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-card-warm);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-3);
  box-sizing: border-box;
}
/* Fotónak object-fit: cover kellett (kitölti, szükség esetén vág).
   Az ajtó-illusztráció egy önálló kompozíció – azt nem szabad vágni,
   ezért contain: a teljes kép látszik, a konténer háttere ad keretet. */
.rk-hero__image img { width: 100%; height: 100%; object-fit: contain; }
.rk-hero__image--cover img { object-fit: cover; }
.rk-hero__note {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: var(--surface-card-warm);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 18px 22px;
}
.rk-hero__note-label {
  font-family: var(--type-label);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-copper-deep);
  margin-bottom: 4px;
}
.rk-hero__note-value { font-family: var(--type-heading); font-size: var(--size-lg); color: var(--c-copper-deep); }

.rk-placeholder { color: var(--text-muted); font-family: var(--type-ui); font-size: var(--size-sm); font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   IDÉZET
══════════════════════════════════════════════════════════════ */
/* A panel a CTA-minta elrendezését veszi át (.rk-cta .rk-cta__box) –
   balra zárt, lekerekített, ugyanaz a térköz –, de saját színt kap:
   a heroban is látható gombszínt (--action-primary), nem a CTA sárgáját.
   A .rk-quote .rk-cta__box szelektor (két osztály) erősebb, mint az
   önmagában álló .rk-cta__box, ezért csak itt írja felül a színt –
   a valódi CTA-panelt nem érinti. */
.rk-quote .rk-cta__box { background: var(--action-primary); }
.rk-content .rk-quote .rk-cta__box,
.rk-content .rk-quote .rk-cta__box p { color: var(--action-primary-text); }
.rk-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-xl);
  line-height: var(--leading-body);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   TÉMAKÖR LISTA
══════════════════════════════════════════════════════════════ */
/* Sorszám helyett kulcslyuk-jel áll a sorok előtt (PinOnion #60-#62):
   a sorszámozás önmagában rangsort sugallt, pedig a témakörök egyenrangúak.
   Maszkként töltjük be, hogy a színe CSS-ből (var(--c-copper)) jöjjön, ne
   legyen az SVG-be égetve – ugyanaz a technika, mint a kilincs-ikonnál. */
/* Nincs fehér kártya-háttér – a korábbi lenyíló lista (.rk-acc) stílusát
   követi: alsó vonallal elválasztott sorok, kártya-doboz nélkül. */
.rk-topiclist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.rk-topiclist > li,
.rk-topiclist__item {
  border-bottom: var(--border-hairline);
  padding: var(--space-4) 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin: 0;
}
/* A jel egy sornyi magas dobozban ül, felülre igazítva: így a több sorba
   törő témakörök esetén is az ELSŐ sorhoz igazodik, nem a sorok közepéhez. */
.rk-topiclist > li::before,
.rk-topiclist__item::before {
  content: '';
  min-width: 24px;
  flex-shrink: 0;
  align-self: flex-start;
  height: calc(var(--size-base) * var(--leading-body));
  background-color: var(--c-copper);
  -webkit-mask: url('assets/img/icon-kulcslyuk.svg') center / 13px 13px no-repeat;
  mask: url('assets/img/icon-kulcslyuk.svg') center / 13px 13px no-repeat;
}
.rk-num {
  font-family: var(--type-heading);
  font-size: var(--size-xs);
  color: var(--c-copper);
  min-width: 24px;
  flex-shrink: 0;
}
.rk-topiclist__title {
  font-family: var(--type-body);
  font-size: var(--size-base);
  font-weight: 500;
  margin: 0;
}
.rk-topiclist__title a { color: var(--text-strong); }
.rk-topiclist__title a:hover { color: var(--text-link); }

/* ══════════════════════════════════════════════════════════════
   MÓDSZER ELŐNÉZET
══════════════════════════════════════════════════════════════ */
/* Kártyás rács, szám nélkül – a témakör-listával (fent) ellentétben
   itt nincs helyben kinyíló szöveg, a kártya csak terel a
   /modszereink/ megfelelő szakaszára. Két oszlop, hogy a bővebb
   szövegnek legyen helye; a szegély és az árnyék állandó, nem csak
   hoverre – önmagában is jól elváljon a kártya az oldal hátterétől. */
.rk-methodgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}
.rk-methodgrid > li,
.rk-methodgrid__item {
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-rest);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  transition: border-color var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
}
.rk-methodgrid > li:hover,
.rk-methodgrid__item:hover {
  border-color: var(--line-copper);
  box-shadow: var(--shadow-card);
}
.rk-methodgrid__title {
  font-family: var(--type-heading);
  font-size: var(--size-base);
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  line-height: var(--leading-snug);
}
.rk-methodgrid__short {
  font-family: var(--type-body);
  font-size: var(--size-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
  margin: 0;
}
.rk-methodgrid__link {
  font-family: var(--type-ui);
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--c-orange-deep);
  text-decoration: none;
  margin-top: auto;
}
.rk-methodgrid__link:hover { color: var(--c-orange-darker); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .rk-methodgrid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   SZAKEMBER ELŐNÉZET

   Keret nélküli sorlista, hajszálvonallal elválasztva – ugyanaz a
   ritmus, amit a témakörök, a szolgáltatások és a módszerek is
   visznek. A korábbi dobozos kártya volt az egyetlen elem az
   oldalon, ami kereteződött, és ettől kilógott a sorból.

   Fotó egyelőre nincs, és képhelyet sem hagyunk: egy üres arckép-
   sziluett hiányzó adatnak látszik, nem tervezői döntésnek. A név
   melletti sárga jelzővonal viszi a képhely szerepét – ugyanaz a
   3px-es sárga vonal, mint a .rk-callout dobozokon. Ha megjönnek a
   portrék, a sor bal oldalán nyílik nekik oszlop.
══════════════════════════════════════════════════════════════ */
.rk-peoplelist { display: flex; flex-direction: column; }
.rk-personrow {
  display: grid;
  grid-template-columns: 110px 1fr 220px;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-6);
  border-top: var(--border-hairline);
}
/* A sorokat a post-template <li>-jei tartják, ezért a legelsőt ott
   kell megfogni – a .rk-personrow a saját <li>-jén belül mindig
   első gyerek volna. */
.rk-peoplelist > li:first-child .rk-personrow { border-top: 0; padding-top: 0; }

/* Igazolvány-arányú arckép a sor elején (PinOnion #39). A post-featured-image
   blokk kép nélkül semmit sem ad ki, ezért maga a doboz kap háttérszínt –
   ez a placeholder, amíg nincs feltöltve kép: kép-kocka, nem üres lyuk. */
.rk-personrow__avatar {
  width: 110px;
  height: 138px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-calm-soft);
  border: var(--border-hairline);
  flex-shrink: 0;
}
.rk-personrow__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rk-personrow__body { border-left: 3px solid var(--c-yellow); padding-left: var(--space-5); }
.rk-personrow__name { font-family: var(--type-heading); font-size: var(--size-xl); margin: 0 0 var(--space-2); }
.rk-personrow__name a { color: var(--text-strong); text-decoration: none; }
.rk-personrow__name a:hover { color: var(--text-link); }
.rk-personrow__role {
  font-family: var(--type-ui);
  font-size: var(--size-xs);
  letter-spacing: 0.04em;
  color: var(--c-copper);
  font-weight: 500;
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}
/* A kivonat a szakember saját mondata, ezért idézetként áll: dőlt
   szerif, a törzsszövegnél egy fokkal nagyobb. */
.rk-personrow__quote p {
  font-family: var(--type-body);
  font-style: italic;
  font-size: var(--size-md);
  line-height: var(--leading-body);
  color: var(--text-body);
  margin: 0;
}
.rk-personrow__side { padding-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }

/* Fogadókészség. A pötty szándékosan rézszínű, nem narancs: a felirat
   három állapotot vehet fel („fogad" / „várólista" / „nem fogad"), és
   egy zöld-piros logikájú jelzés a „nem fogad" szövegen hazudna. Így
   a pötty csak vezérjel, a szó viszi a jelentést.
   Ha a mező üresen marad, az egész sor eltűnik. */
.rk-content .rk-personrow__status {
  font-family: var(--type-ui);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-copper);
  line-height: 1.4;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.rk-personrow__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.rk-personrow__status:empty { display: none; }
.rk-personrow .wp-block-read-more,
.rk-personrow .rk-link {
  font-family: var(--type-body);
  font-weight: 600;
  color: var(--text-link);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.rk-personrow .wp-block-read-more:hover,
.rk-personrow .rk-link:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════
   CTA SÁV
══════════════════════════════════════════════════════════════ */
.rk-cta { padding-block: var(--space-8); margin-inline: 0; }
.rk-cta__box {
  background: var(--surface-calm);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
/* A szöveg (cím+leírás) töltse ki a rendelkezésre álló helyet, a gomb
   pedig tartsa meg a saját méretét – így hosszabb szöveggel is egy
   sorban maradnak, csak a szöveg tördelődik, nem a gomb csúszik le
   külön sorba. Keskeny nézeten a lenti média-lekérdezés úgyis
   oszlopba rendezi mindkettőt. */
.rk-cta__box > .wp-block-group { flex: 1 1 420px; min-width: 0; }
.rk-cta__box > .wp-block-buttons { flex-shrink: 0; }
/* A sárgán KIZÁRÓLAG sötét felirat olvasható: fehérrel 1,59:1,
   sötéttel 10,51:1. */
.rk-cta__box,
.rk-cta__box p,
.rk-cta__box h2 { color: var(--text-on-calm-strong); }
.rk-cta__title { font-size: var(--size-xl); margin: 0 0 var(--space-3); color: var(--text-on-calm-strong); }
.rk-cta__text {
  font-family: var(--type-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  margin: 0;
  color: var(--text-on-calm-strong);
}
/* A gomb a blokkban be van állítva „action" Gutenberg-színre – nincs
   szükség felülírásra. A tokens.css-ben ezért lett a gombszín a
   mélyített helyett a még sötétebb narancs: az már a sárga panelen
   is elkülönül (lásd ott a számokat), külön fekete változat nélkül. */

/* A gomb felirata a felületi betűtípussal, ahogy a design mutatja. */
.rk-cta__box .wp-block-button__link,
.rk-content .wp-block-button__link {
  font-family: var(--type-ui);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  letter-spacing: 0.01em;
  padding: 0 var(--space-6);
  height: 54px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

/* ══════════════════════════════════════════════════════════════
   HARMONIKA
══════════════════════════════════════════════════════════════ */
/* A kézzel írt harmonika-markup (.rk-acc__summary / __title / __body)
   helyét a Gutenberg core/details blokk vette át – azok a szabályok már
   nem találtak semmit, ezért kikerültek. A .rk-acc saját border-bottom-ja
   is velük ment: a szegélyt lejjebb a .rk-content .wp-block-details.rk-acc
   szabály adja, felül. */
.rk-acc__desc { font-family: var(--type-body); font-size: var(--size-base); line-height: var(--leading-body); color: var(--text-body); margin: 0 0 var(--space-4); }

.rk-callout {
  background: var(--surface-card-warm);
  border-left: 3px solid var(--c-yellow);
  padding: 14px 18px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-4);
}
.rk-callout p { font-family: var(--type-body); font-size: var(--size-base); line-height: var(--leading-body); color: var(--c-copper-deep); margin: 0; }

/* Ideiglenes kiemelés a jogi oldalakon: a még hiányzó vállalkozói adatok
   helye. Szándékosan hangos – szaggatott kerettel, sárgán –, hogy senki ne
   nézze át fölötte. Ha egyszer minden mező kitöltött, ez a szabály és a
   <mark> elemek is törölhetők. Kereséshez: rk-kitoltendo. */
.rk-content mark.rk-kitoltendo {
  background: var(--c-yellow-soft);
  color: var(--c-copper-deep);
  border: 1px dashed var(--c-yellow);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-family: var(--type-ui);
  font-size: 0.85em;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Harmonikánként egy továbbvezető link a témakör saját aloldalára.
   Ez váltotta ki a lap alján állt „Témakörök részletesen" listát:
   ugyanaz a belső linkelés, csak kontextusban. */
.rk-content .rk-acc__more {
  font-family: var(--type-ui);
  font-size: var(--size-sm);
  margin-top: var(--space-4);
}
.rk-content .rk-acc__more a {
  color: var(--text-link);
  text-decoration: none;
  border-bottom: 1px solid var(--line-copper);
  transition: color var(--dur-quick) var(--ease-standard);
}
.rk-content .rk-acc__more a:hover,
.rk-content .rk-acc__more a:focus-visible {
  color: var(--text-link-hover);
  border-bottom-color: var(--text-link-hover);
}

/* Gutenberg core/details blokk a harmonika stílusában. */
.rk-content .wp-block-details.rk-acc,
.rk-content .wp-block-details.rk-faq__item {
  padding: 0;
  margin-block: 0;
  border-top: var(--border-hairline);
  border-bottom: 0;
}
/* A vonalak a lista elemeit választják el egymástól, ezért a legelső elem
   fölé nem kell: ott nincs mit elválasztani, csak a bevezetőtől húzna egy
   vonalat. */
.rk-content > .wp-block-details.rk-acc:first-child,
.rk-content > .wp-block-details.rk-faq__item:first-child { border-top: 0; }

.wp-block-details.rk-acc > summary,
.wp-block-details.rk-faq__item > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-5);
  font-family: var(--type-body);
  font-size: var(--size-md);
  font-weight: 500;
}
.wp-block-details.rk-faq__item > summary { font-size: var(--size-base); padding-block: var(--space-4); }

/* A harmonika-elemek jele kulcslyuk, nem sorszám (PinOnion #63, #66,
   #67). Előzmény: 2026-09-05-én a sorszámozás ide vissza lett állítva,
   mert akkor úgy tűnt, csak a GYIK újrainduló számozása volt zavaró –
   az ügyfél viszont 09-17-én több helyen is újra kérte a szám nélküli
   jelölést, ezért az a döntés ezzel érvényét vesztette. */
.wp-block-details.rk-acc > summary::before {
  content: '';
  min-width: 24px;
  flex-shrink: 0;
  align-self: flex-start;
  height: calc(var(--size-md) * var(--leading-body));
  background-color: var(--c-copper);
  -webkit-mask: url('assets/img/icon-kulcslyuk.svg') center / 13px 13px no-repeat;
  mask: url('assets/img/icon-kulcslyuk.svg') center / 13px 13px no-repeat;
}

/* A GYIK kérdései elé korábban kategóriánként újrainduló sorszám került
   (01, 02, 03…) – az ügyfél visszajelzése szerint ez zavaró volt, mert
   minden kategória alatt újrakezdődött. Sima pont-jelölésre cserélve. */
.wp-block-details.rk-faq__item > summary::before {
  content: '';
  align-self: center;
  width: 6px;
  height: 6px;
  min-width: 6px;
  border-radius: 50%;
  background: var(--c-copper);
  flex-shrink: 0;
}

/* A nyitó/csukó jel egy kulcs-ikon (assets/img/icon-kilincs.svg,
   game-icons.net, sbed, CC BY 3.0), döntött pozícióba forgatva magában
   az SVG-ben. Maszkként töltjük be, hogy a színét (var(--c-copper))
   CSS-ből, a téma bármely réz-árnyalatához igazítva tudjuk vezérelni,
   nem az SVG-be égetve. Nyitáskor NEM forog/mozog tovább – csak a
   statikus, egyszer beállított dőlésszöget viseli mindkét
   állapotban.

   A .rk-acc harmonikákról és a GYIK-ből szándékosan hiányzik: az ügyfél
   mindkét helyen zavarónak találta (PinOnion #63). Állapotot amúgy sem
   jelzett – nyitáskor sem mozdult –, így az elhagyása nem visz el
   információt. A .rk-cv lenyílókon marad: azokban a bal oldal üres. */
.wp-block-details.rk-cv > summary::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--c-copper);
  -webkit-mask: url('assets/img/icon-kilincs.svg') center / contain no-repeat;
  mask: url('assets/img/icon-kilincs.svg') center / contain no-repeat;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: var(--space-4);
}

/* A nyitott tartalom a kérdés szövegével egy vonalban kezdődik. */
.wp-block-details.rk-acc > :not(summary) { padding-left: 40px; }
.wp-block-details.rk-acc > :last-child { padding-bottom: var(--space-5); }

.wp-block-details.rk-cv { border-top: var(--border-hairline); }
.wp-block-details.rk-cv > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  font-family: var(--type-ui);
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--text-strong);
}
.rk-cv__list { list-style: none; padding: 0 0 var(--space-4); margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.rk-cv__list li { font-family: var(--type-body); font-size: var(--size-sm); line-height: 1.6; color: var(--text-body); margin: 0; }
/* Réz pötty a felsorolás-jel helyén, ugyanaz a minta, mint a GYIK
   pontjainál (l. .rk-faq__item > summary::before). Csak a legfelső
   szint kapja: a beágyazott allisták a saját üres karikájukat viszik,
   különben két jelölés állna egymás mellett. */
.rk-cv__list > li { padding-left: var(--space-5); position: relative; }
.rk-cv__list > li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-copper);
}
/* Beágyazott allista: a böngésző üres karikája marad a jelölő. Nem
   flex, mert a flex-elemek elvesztik a list-item megjelenítést, és
   ezzel a karikát is. */
.rk-cv__list ul { list-style: circle; margin: var(--space-1) 0 0; padding-left: var(--space-6); }
.rk-cv__list ul li { display: list-item; margin-bottom: var(--space-1); }
.rk-cv__list strong { color: var(--c-copper); font-weight: 700; }
/* Egy sor = egy önálló bekezdés-blokk, nem lista-elem – így minden
   sor külön blokkként adható hozzá/vehető ki/rendezhető át a
   szerkesztőben, nem egy közös lista-blokk belsejében. */
.rk-cv__row { font-family: var(--type-body); font-size: var(--size-sm); line-height: 1.6; color: var(--text-body); margin: 0 0 var(--space-3); }
.rk-cv__row:last-child { margin-bottom: var(--space-4); }
.rk-cv__row strong { color: var(--c-copper); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   SZOLGÁLTATÁSOK
══════════════════════════════════════════════════════════════ */
.rk-service {
  border-bottom: var(--border-hairline);
  padding-block: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: var(--space-6);
  align-items: start;
}
.rk-service__main { min-width: 0; }
.rk-content .rk-service__title { font-family: var(--type-body); font-size: var(--size-md); font-weight: 600; margin: 0 0 var(--space-2); }
.rk-service__title a { color: var(--text-strong); }
.rk-service__title a:hover { color: var(--text-link); }
.rk-content .rk-service__desc { font-family: var(--type-body); font-size: var(--size-base); line-height: var(--leading-body); color: var(--text-body); margin: 0 0 var(--space-3); }

/* Az időtartam a design szerint pirula alakú címke. */
.rk-content .rk-service__duration {
  display: inline-block;
  margin: 0;
  padding: 3px var(--space-3);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-card-warm);
  font-family: var(--type-body);
  font-size: var(--size-xs);
  color: var(--text-body);
  line-height: 1.6;
}

.rk-content .rk-service__price {
  font-family: var(--type-heading);
  font-size: var(--size-lg);
  line-height: 1.25;
  color: var(--c-copper);
  text-align: right;
  margin: 0;
  padding-top: 2px;
}

.rk-note {
  background: var(--surface-calm-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  font-family: var(--type-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  color: var(--c-copper-deep);
}
.rk-note::before {
  content: '';
  width: 4px; min-width: 4px;
  background: var(--c-copper);
  border-radius: 2px;
  align-self: stretch;
}

/* ══════════════════════════════════════════════════════════════
   MÓDSZEREK
══════════════════════════════════════════════════════════════ */
.rk-method { border-bottom: var(--border-hairline); padding-block: var(--space-7); }
.rk-method__head { display: flex; gap: var(--space-5); align-items: baseline; margin-bottom: var(--space-4); }
.rk-method__head .rk-num { font-size: var(--size-base); }
.rk-method__title { font-size: var(--size-xl); margin: 0; }
/* Sorszám helyett kulcslyuk-jel (PinOnion #68). A méret em-ben van
   megadva, hogy a jel együtt nő-csökkenjen a címmel – ugyanaz a
   megfontolás, ami korábban a sorszám 0.65em-es méreténél is állt:
   egy fix 13px a 31px-es cím mellett elveszne. */
.rk-method__title::before {
  content: '';
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-right: var(--space-3);
  background-color: var(--c-copper);
  -webkit-mask: url('assets/img/icon-kulcslyuk.svg') center / contain no-repeat;
  mask: url('assets/img/icon-kulcslyuk.svg') center / contain no-repeat;
}
.rk-method__body { padding-left: 46px; }
.rk-method__desc { font-family: var(--type-body); font-size: var(--size-base); line-height: var(--leading-body); color: var(--text-body); margin: 0 0 var(--space-4); }
.rk-method__sign {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
  margin: var(--space-4) 0 0;
}

/* ══════════════════════════════════════════════════════════════
   SZAKEMBEREK
══════════════════════════════════════════════════════════════ */
.rk-people { padding-block: var(--space-8) var(--space-9); }
.rk-people .wp-block-post-template { display: flex; flex-direction: column; gap: var(--space-9); list-style: none; padding: 0; margin: 0; }

/* Teljes szakmai bemutatkozás a Rólunk oldalon – a tartalom a szakember
   saját oldaláról jön, így csak egy helyen kell szerkeszteni. */
.rk-person-full { padding-top: var(--space-7); border-top: var(--border-hairline); }
.rk-person-full:first-child { border-top: 0; padding-top: 0; }
.rk-person-full .rk-person__name { font-family: var(--type-heading); font-size: var(--size-xl); margin: 0 0 var(--space-2); }
.rk-person-full .rk-person__name a { color: var(--text-strong); }
.rk-person-full .rk-person__name a:hover { color: var(--text-link); }
.rk-person-full .rk-person__role { margin: 0 0 var(--space-5); }
.rk-person-full p { font-family: var(--type-body); font-size: var(--size-base); line-height: var(--leading-loose); color: var(--text-body); margin: 0 0 var(--space-4); }
.rk-person-full .wp-block-buttons { margin-top: var(--space-5); }
.rk-person { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-7); }
.rk-person__aside { min-width: 0; }
/* A width/height itt !important-tel győz a WordPress beépített
   .wp-block-post-featured-image alapstílusa (width:100%, responsive)
   fölött, ami különben szélesre nyújtaná a képet az egyéni szakember-
   oldalon - ez itt szándékosan fix "profil" méret, nem teljes szélességű
   kép. */
.rk-person__photo {
  width: 220px !important;
  height: 280px !important;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-arch);
  overflow: hidden;
  background: var(--surface-card-warm);
  display: flex; align-items: center; justify-content: center;
}
.rk-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.rk-person__name { font-family: var(--type-heading); font-size: var(--size-md); margin-bottom: var(--space-2); }
.rk-person__role { font-family: var(--type-ui); font-size: var(--size-sm); color: var(--c-copper); font-weight: 500; line-height: 1.5; }
.rk-person__bio { padding-top: 4px; }
.rk-person__bio p { font-family: var(--type-body); font-size: var(--size-base); line-height: var(--leading-loose); color: var(--text-body); margin: 0 0 var(--space-4); }

/* Sima, nem kattintható szakaszcím – a korábbi lenyíló (.rk-cv) fejlécének
   kinézetét (sor, alsó/felső vonal, ikon-hely) szándékosan NEM örökli,
   mert az kattinthatónak tűnt, pedig már nem az (l. PinOnion #31). */
.rk-cv__summary {
  font-family: var(--type-heading);
  font-size: var(--size-md);
  font-weight: 600;
  color: var(--text-strong);
  margin: var(--space-7) 0 var(--space-4);
}
.rk-cv__list { padding-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.rk-cv__item { font-family: var(--type-body); font-size: var(--size-sm); line-height: 1.6; color: var(--text-body); }
.rk-cv__year { color: var(--c-copper); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   GYIK
══════════════════════════════════════════════════════════════ */
/* A kategória felirat nagy levegőt kap fölötte, hogy a csoportok
   elváljanak. (A kérdések elé korábban kategóriánként újrainduló
   sorszám került – az ügyfél visszajelzése alapján ez most sima
   pont-jelölésre cserélődött, l. .wp-block-details.rk-faq__item
   > summary::before lejjebb.) */
.rk-content .rk-faq__catname,
.rk-faq__catname {
  font-family: var(--type-label);
  font-size: var(--size-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-copper);
  margin-block: var(--space-8) var(--space-3);
}
.rk-content .rk-faq__catname:first-child { margin-top: 0; }

.rk-faq__a {
  font-family: var(--type-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  margin: 0 0 var(--space-5);
  padding-left: 40px;
  white-space: pre-line;
}

/* ══════════════════════════════════════════════════════════════
   KAPCSOLAT
══════════════════════════════════════════════════════════════ */
/* Az elérhetőségek felül, négy hasábban – a látogató először azt látja,
   hogyan és hol érhet el titeket, csak utána az űrlapot. */
.rk-contact__info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
  padding: var(--space-6) 0 var(--space-7);
  border-bottom: var(--border-hairline);
  margin-bottom: var(--space-8);
}
.rk-contact__info > * { min-width: 0; }
.rk-contact__label {
  font-family: var(--type-label);
  font-size: var(--size-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-copper);
  margin-bottom: var(--space-2);
}
.rk-contact__value { font-family: var(--type-body); font-size: var(--size-base); line-height: 1.6; color: var(--text-body); margin: 0; }
.rk-contact__value a { color: var(--text-strong); border-bottom: 1px solid var(--line-copper); }
.rk-contact__value a:hover { color: var(--text-link-hover); border-bottom-color: var(--text-link-hover); }
.rk-contact__hint {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--type-ui);
  font-size: var(--size-xs);
  color: var(--text-muted);
}

/* Nincs saját háttere/kerete - csak a tartalmat tagoló blokk. Az egyetlen
   háttérrel rendelkező elem az űrlap kártyája (.rk-form-wrap, lentebb). */
.rk-contact-card { margin: var(--space-6) 0 var(--space-8); }
.rk-contact-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
.rk-contact-card .rk-heading { margin-top: 0; }
.rk-contact-card .rk-contact__label { margin-top: var(--space-5); }

/* A térkép beágyazva jelenik meg (loading="lazy"), csak akkor tölt be,
   amikor a látogató lefelé görgetve eléri. */
.rk-map { margin-top: var(--space-5); }
.rk-map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--radius-md);
  display: block;
}

/* ── Űrlap ────────────────────────────────────────────────────────
   Meleg tónusú kártyán ül, a név és az e-mail egy sorban.
   A jelölés a mu-plugin/rezkilincs-form.php-ból jön. */
.rk-form-wrap {
  background: var(--surface-card);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-card);
}
.rk-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-5);
}
/* Csali-mező botoknak – embernek nem látszik, grid-cellát sem foglal
   (position: absolute kiveszi a grid-elrendezésből). */
.rk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.rk-form-row--uzenet,
.rk-form-consent,
.rk-form-submit-row { grid-column: 1 / -1; }
.rk-form-submit-row { justify-self: start; }

/* A CF7 minden mezőt becsomagol egy <p>-be (böngésző-alapértelmezett
   margóval) – ez plusz, nem szándékolt térközt szúrna a label és a mező
   közé, illetve a rk-form-row saját flex-gap-jét is hatástalanítaná
   (mert a label+mező már csak EGY közös flex-item lenne). */
.rk-form-wrap .wpcf7-form p { margin: 0; }

.rk-form-row { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.rk-form-row label {
  font-family: var(--type-label);
  font-size: var(--size-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rk-form-row input,
.rk-form-row textarea {
  font-family: var(--type-body);
  font-size: var(--size-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--line-hairline);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset-well);
  padding: 0 var(--space-4);
  width: 100%;
  height: var(--control-height);
  outline: none;
  transition: border-color var(--dur-quick) var(--ease-standard);
}
.rk-form-row textarea { height: auto; min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; }
.rk-form-row input:focus,
.rk-form-row textarea:focus { border-color: var(--focus-ring); outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.rk-form-consent { margin: var(--space-4) 0 var(--space-5); font-family: var(--type-body); font-size: var(--size-sm); line-height: 1.55; }
.rk-form-consent label { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.rk-form-consent input { margin-top: 4px; flex-shrink: 0; accent-color: var(--c-copper); }

.rk-form-submit {
  font-family: var(--type-ui);
  font-weight: var(--weight-medium);
  font-size: var(--size-md);
  height: 54px;
  padding-inline: var(--space-6);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--action-secondary);
  color: var(--action-secondary-text);
  cursor: pointer;
  box-shadow: var(--shadow-rest);
  transition: background var(--dur-quick) var(--ease-standard), box-shadow var(--dur-quick) var(--ease-standard);
}
.rk-form-submit:hover { background: var(--action-secondary-hover); color: var(--action-secondary-hover-text); box-shadow: var(--shadow-raised); }

/* A visszajelző szöveget (siker/hiba) a Contact Form 7 adja, a saját
   .wpcf7-response-output osztályán keresztül – a form állapota szerint
   (sent/invalid/spam/unaccepted) más-más módosító osztályt is kap. */
.rk-form-wrap .wpcf7-response-output {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-5);
  font-family: var(--type-body);
  font-size: var(--size-base);
  border: 0;
}
.rk-form-wrap .wpcf7-form.sent .wpcf7-response-output {
  background: var(--surface-calm-soft);
  color: var(--c-copper-deep);
}
.rk-form-wrap .wpcf7-form.invalid .wpcf7-response-output,
.rk-form-wrap .wpcf7-form.unaccepted .wpcf7-response-output,
.rk-form-wrap .wpcf7-form.spam .wpcf7-response-output,
.rk-form-wrap .wpcf7-form.failed .wpcf7-response-output {
  background: var(--surface-accent-soft);
  color: var(--state-urgent);
}
.rk-form-wrap .wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--type-body);
  font-size: var(--size-2xs);
  color: var(--state-urgent);
}
.rk-form-wrap .wpcf7-form-control.wpcf7-not-valid { border-color: var(--state-urgent); }
.rk-form-wrap .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ══════════════════════════════════════════════════════════════
   MORZSAMENÜ (Yoast)
══════════════════════════════════════════════════════════════ */
.breadcrumbs {
  font-family: var(--type-ui);
  font-size: var(--size-xs);
  color: var(--text-muted);
  padding-block: var(--space-4) 0;
}
.breadcrumbs a { color: var(--text-muted); border-bottom: 1px solid transparent; transition: color var(--dur-quick) var(--ease-standard); }
.breadcrumbs a:hover { color: var(--text-link); border-bottom-color: var(--line-hairline); }
.breadcrumbs .breadcrumb_last { color: var(--text-body); }

/* ══════════════════════════════════════════════════════════════
   TARTALOM (Gutenberg)
══════════════════════════════════════════════════════════════ */
/* A blokkok közti hézagot a WordPress blokk-térköze adja (theme.json),
   ezért itt NEM teszünk rá saját margót – korábban duplán adódott össze,
   és emiatt volt mindenhol túl nagy a levegő. */
.rk-content { padding-block: var(--space-5) var(--space-8); }
.rk-content h2 { font-size: var(--size-xl); margin-block: var(--space-7) var(--space-4); }
.rk-content h3 { font-size: var(--size-lg); margin-block: var(--space-6) var(--space-3); }
.rk-content h4 { font-size: var(--size-lg); margin-block: var(--space-5) var(--space-4); }
.rk-content h2:first-child,
.rk-content h3:first-child { margin-top: 0; }
.rk-content p {
  font-family: var(--type-body);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  margin-block: 0;
}
/* A WordPress blokk-térköze (theme.json blockGap) csak a "layout"
   támogatással rendelkező konténerek (pl. Csoport blokk) BELSEJÉBEN
   működik automatikusan – a klasszikus témában a the_content() nyers,
   egymás után álló Bekezdés-blokkjai (nincsenek Csoportba csomagolva)
   emiatt sosem kaptak térközt: az Enter látszólag semmit nem csinált.
   Csak a .rk-content KÖZVETLEN gyermek bekezdéseire adunk saját térközt –
   a Csoportba ágyazott bekezdések a Gutenberg saját blockGap-jét kapják,
   ezt nem duplázzuk meg. */
.rk-content > p + p { margin-top: var(--space-4); }
/* Lista után következő bekezdés (pl. a főoldali "Hogyan dolgozunk?"
   listája alatti záró mondat) a fenti .rk-content > p + p szabályt nem
   kapja meg, mert nem <p> előzi meg – enélkül szinte a listához tapadt. */
.rk-content > ul + p,
.rk-content > ol + p { margin-top: var(--space-5); }
.rk-content ul, .rk-content ol { padding-left: var(--space-5); color: var(--text-body); }
.rk-content li + li { margin-top: var(--space-2); }
.rk-content .wp-block-separator { border: 0; border-top: var(--border-hairline); margin-block: var(--space-7); }

/* A sárga CTA dobozban minden szöveg sötét. Ez a szabály szándékosan
   erősebb, mint az általános .rk-content p — különben az nyerne, mert
   később szerepel a fájlban. Fehér felirattal a sárga csak 1,59:1. */
.rk-content .rk-cta__box,
.rk-content .rk-cta__box p,
.rk-content .rk-cta__box h2,
.rk-content .rk-cta__box .rk-cta__text,
.rk-content .rk-cta__box .rk-cta__title { color: var(--text-on-calm-strong); }

/* Az idézet is a CTA-mintát viseli (.rk-cta__box), a színét a fenti
   szabály már adja. Itt csak a dőlt-szerif méretet védjük ugyanazzal
   az okkal – az általános .rk-content p különben felülírná. */
.rk-content .rk-quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--size-xl);
  line-height: var(--leading-body);
}

/* A szekciócímke narancs marad a tartalomban is – az általános
   bekezdés-szabály különben elszürkítené. */
.rk-content .rk-eyebrow,
.rk-content p.rk-eyebrow { color: var(--text-eyebrow); }

/* Záró rész: a lista alatti összegző szöveg és gomb kap levegőt,
   hogy ne tapadjon rá az utolsó elemre. */
.rk-content .rk-closing { margin-top: var(--space-8); text-align: center; }
.rk-content .rk-closing p { margin: 0 0 var(--space-5); color: var(--text-body); }
.rk-content .wp-block-buttons { margin-block: var(--space-5) 0; }
.rk-content .rk-closing .wp-block-buttons { justify-content: center; }
.rk-content .wp-block-button__link { border-radius: var(--radius-sm); font-family: var(--type-ui); }

/* ══════════════════════════════════════════════════════════════
   LÁBLÉC
══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--c-ivory-deep);
  border-top: var(--border-hairline);
  margin-top: var(--space-6);
}
/* Két zóna: márka bal oldalon a saját tartalma szélességét foglalja el
   (nem nyúlik szét), a Kapcsolat+Jogi infó jobbra, egymás mellett - a
   sorok középre igazítva (align-items:center), hogy a rövidebb bal
   oldali blokk ne a tetejéhez, hanem a jobb oldal magasságához
   igazodjon. A korábbi "Oldal" menü-lista törölve - a főmenü
   desktopon fixed (mindig látható), így ez csak duplikáció volt. */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-5);
}
.footer-col--brand { flex: 1 1 280px; max-width: 460px; }
.footer-col--contact { display: flex; flex-wrap: wrap; gap: var(--space-8); flex: 0 0 auto; }
.footer-sub { min-width: 160px; }
/* A logó mellett (nem alatta) áll a bemutatkozó mondat, jobbra tőle. */
.footer-col--brand .footer-brand-row { display: flex; align-items: center; gap: var(--space-5); }
/* A lábléc logója (négyzetes, ikon+felirat egymáson) 3 rétegű kompozíció -
   kisebb méreten a felirat olvashatatlanná zsugorodott, ezért ez jóval
   nagyobb, mint a fejléc logója - itt a "Terápiás Műhely" sor is jól
   kiolvasható legyen. */
.footer-brand-row img,
.footer-brand-row .custom-logo { height: 150px; width: auto; flex-shrink: 0; }
.footer-tagline {
  font-family: var(--type-body);
  font-style: italic;
  font-size: var(--size-sm);
  line-height: var(--leading-body);
  color: var(--text-body);
  margin: 0;
  max-width: 220px;
}
.footer-desc { font-family: var(--type-body); font-size: var(--size-sm); line-height: var(--leading-body); color: var(--text-body); margin: 0; max-width: 360px; }
.footer-heading {
  font-family: var(--type-label);
  font-size: var(--size-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-copper);
  margin: 0 0 var(--space-3);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a, .footer-address, .footer-email a {
  font-family: var(--type-body);
  font-size: var(--size-sm);
  color: var(--text-body);
  font-style: normal;
}
.footer-links a:hover, .footer-email a:hover { color: var(--text-link-hover); }
.footer-bottom { border-top: var(--border-hairline); padding-block: var(--space-4); }
.footer-copy { font-family: var(--type-ui); font-size: var(--size-xs); color: var(--text-muted); margin: 0; }
.footer-location { font-family: var(--type-ui); font-size: var(--size-xs); color: var(--text-muted); margin: var(--space-2) 0 0; }

/* ══════════════════════════════════════════════════════════════
   RESZPONZÍV
══════════════════════════════════════════════════════════════ */
/* A fejléc egy sorban fér el: a márkanév és a menü is visszafogottabb
   méretet kap, különben a hosszú oldalcím két sorba töri az egészet.
   Ezek a szabályok szándékosan az alapértékek UTÁN állnak a fájlban,
   különben az azonos erősségű alapszabály nyerne. */
@media (min-width: 901px) {
  .rk-header__inner { min-height: 96px; gap: var(--space-4); }
  .rk-brand__mark,
  .rk-brand .custom-logo   { height: 96px; }
  .rk-header__right { gap: var(--space-4); }
  .rk-nav__list     { gap: var(--space-3); }
  .rk-nav__list a   { font-size: 13px; letter-spacing: 0.06em; }
}

/* Közepes szélességen tovább szűkítünk, mielőtt a mobilmenü átvenné. */
@media (min-width: 901px) and (max-width: 1150px) {
  .rk-brand__mark,
  .rk-brand .custom-logo { height: 78px; }
  .rk-nav__list   { gap: var(--space-2); }
  .rk-nav__list a { font-size: 12px; letter-spacing: 0.03em; }
}

@media (max-width: 900px) {
  :root { --gutter-inline: 18px; }

  /* ── B. Kompakt fejléc ────────────────────────────────────────
     Korábban 173px volt, a kijelző 18%-a – és ragadósként végig
     ott maradt. Most a felére csökken. */
  .rk-header__inner {
    min-height: 68px;
    padding-block: var(--space-2);
    gap: var(--space-3);
    flex-wrap: nowrap;
  }
  .rk-brand__mark,
  .rk-brand .custom-logo { height: 68px; }

  /* Az „Írj nekünk" a menüben úgyis elérhető Kapcsolatként. */
  .rk-header__cta { display: none; }
  .rk-header__right { gap: var(--space-3); flex-shrink: 0; }

  .rk-nav-toggle { display: flex; width: 44px; height: 44px; }
  .rk-nav { display: none; }

  /* A menü a fejléc TÉNYLEGES magasságától indul – a --rk-fejlec
     változót a nav.js frissíti. Enélkül 77px-es átfedés keletkezett. */
  .rk-nav.is-open {
    display: block;
    position: fixed;
    inset: var(--rk-fejlec, 72px) 0 0 0;
    background: var(--surface-page);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--gutter-inline) var(--space-9);
    z-index: 49;
    border-top: var(--border-hairline);
  }
  .rk-nav.is-open .rk-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .rk-nav.is-open .rk-nav__list li { border-bottom: var(--border-hairline); }
  .rk-nav.is-open .rk-nav__list a {
    padding-block: var(--space-4);
    font-size: 16px;
    border-bottom: 0;
    min-height: 52px;
    display: flex;
    align-items: center;
  }

  .rk-hero { gap: var(--space-7); padding-block: var(--space-4); }
  .rk-hero__visual { max-width: 520px; }
  .rk-hero__image { height: 440px; }
  .rk-hero__note { left: var(--space-3); bottom: -18px; }
  .rk-hero__title { font-size: var(--size-3xl); }

  .rk-topiclist { grid-template-columns: 1fr; gap: var(--space-4); }

  /* Kis kijelzőn a „Részletes bemutatkozás" a szöveg alá kerül,
     nem mellé – jobb szélen nem maradna neki hely. */
  .rk-personrow { grid-template-columns: 1fr; gap: var(--space-4); }
  .rk-personrow__side { padding-top: 0; }

  .rk-cta__box { padding: var(--space-6); }
  .footer-inner { gap: var(--space-6); }

  /* A cookie sáv ne lógjon ki a kijelzőből. */
  #moove_gdpr_cookie_info_bar,
  .moove-gdpr-info-bar-container { max-width: 100vw; box-sizing: border-box; }
}

/* ══════════════════════════════════════════════════════════════
   C. ÉRINTÉS-BARÁT MÉRETEK
   Érintőképernyőn minden kattintható elem legalább 44x44 px.
   Csak ott lép életbe, ahol nincs egérmutató – asztali gépen a
   sűrűbb elrendezés marad.
══════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .rk-link,
  .rk-topiclist__title a,
  .rk-contact__value a,
  .footer-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .rk-btn--sm { height: 44px; padding-inline: var(--space-5); font-size: var(--size-sm); }
  .rk-nav__list a { min-height: 44px; }
  .footer-links { gap: var(--space-1); }

  /* Érintés-visszajelzés: mobilon nincs hover, ezért a lenyomás számít. */
  .rk-btn:active,
  .rk-form-submit:active,
  .wp-block-button__link:active { opacity: 0.85; transform: scale(var(--press-scale)); }
  .rk-acc__summary:active,
  .wp-block-details > summary:active { background: var(--surface-card-warm); }

  /* Morzsamenü linkjei */
  .breadcrumbs a,
  .breadcrumbs span { min-height: 44px; display: inline-flex; align-items: center; }

  /* A cookie sáv gombjai: ez az első, amivel minden látogató találkozik,
     ezért itt különösen fontos a rendes érintőfelület. */
  .moove-gdpr-button-holder .mgbutton,
  #moove_gdpr_cookie_info_bar .mgbutton,
  .moove-gdpr-infobar-allow-all,
  .moove-gdpr-infobar-reject-btn {
    min-height: 44px !important;
    padding-inline: var(--space-5) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .change-settings-button,
  .gdpr-settings-btn { min-height: 44px !important; display: inline-flex !important; align-items: center; }
}

@media (max-width: 640px) {
  .rk-section { padding-block: var(--space-7); }
  .rk-hero__title { font-size: var(--size-2xl); }
  .rk-heading { font-size: var(--size-xl); }
  /* A 901px alatti tartományra korábban nem volt szabály – a 480px
     akkor egy fotóra szánt magasság volt, most az illusztrációhoz
     a legtöbb telefonon ez a méret jó. */
  .rk-hero__image { height: 340px; padding: var(--space-3); }
  .rk-quote p { font-size: var(--size-md); }

  .rk-hero__actions { flex-direction: column; align-items: stretch; }
  .rk-hero__actions .rk-btn { width: 100%; }

  .rk-service { grid-template-columns: 1fr; gap: var(--space-3); }
  .rk-content .rk-service__price { text-align: left; }

  .rk-form { grid-template-columns: 1fr; }
  .rk-contact-cols { grid-template-columns: 1fr; }
  .rk-form-wrap { padding: var(--space-5); }
  .rk-form-submit-row { justify-self: stretch; }
  .rk-form-submit { width: 100%; }

  .rk-acc__body, .rk-method__body { padding-left: 0; }
  .rk-person__photo { width: 100%; max-width: 220px; }

  .rk-cta__box { flex-direction: column; align-items: stretch; }
  .rk-cta__box .rk-btn { width: 100%; }
  .rk-cta__box .wp-block-buttons,
  .rk-cta__box .wp-block-button,
  .rk-cta__box .wp-block-button__link { width: 100%; }

  .footer-inner { flex-direction: column; }
  .footer-col--brand { max-width: none; }

  /* A GYIK és a témakörök lenyílóiban a válasz ne legyen behúzva:
     375px-en a 40px behúzás elveszi a szöveg helyét. */
  .rk-faq__a { padding-left: 0; }
  .wp-block-details.rk-acc > :not(summary) { padding-left: 0; }
}

/* ══════════════════════════════════════════════════════════════
   D. BEVITELI MEZŐK ÉS KIS KIJELZŐK
══════════════════════════════════════════════════════════════ */

/* Kis kijelzőn a 11px-es nagybetűs feliratok nehezen olvashatók –
   a címkék és a lábléc feliratai kapnak egy fokozatot. */
@media (max-width: 900px) {
  .rk-tag { font-size: 14px; height: 30px; letter-spacing: 0.08em; }
  .footer-heading { font-size: 12px; }
  .footer-copy,
  .footer-links a,
  .footer-address { font-size: 14px; }
  .breadcrumbs { font-size: 14px; }
  .rk-eyebrow { font-size: 12px; letter-spacing: 0.18em; }
  .rk-hero__badge { font-size: 12px; }
}

/* iOS minden 16px alatti mezőnél belenagyít fókuszáláskor: az oldal
   ugrik, a látogatónak vissza kell csippentenie. 16px ezt megszünteti. */
@media (max-width: 900px) {
  .rk-form-row input,
  .rk-form-row textarea,
  input[type="text"], input[type="email"], input[type="search"], textarea, select {
    font-size: 16px;
  }
  .rk-form-row input { height: 50px; }
  .rk-form-consent input[type="checkbox"] { width: 22px; height: 22px; }
}

/* 320px – régebbi, keskeny készülékek */
@media (max-width: 380px) {
  :root { --gutter-inline: 14px; }
  .rk-brand__mark,
  .rk-brand .custom-logo { height: 58px; }
  .rk-hero__title { font-size: var(--size-xl); }
  .rk-heading { font-size: var(--size-lg); }
  .rk-hero__image { height: 300px; }
  .rk-form-wrap { padding: var(--space-4); }
  .rk-cta__box { padding: var(--space-5); }
}

/* Fekvő tájolás alacsony kijelzőn: a ragadós fejléc ne egye meg a képet. */
@media (max-height: 480px) and (orientation: landscape) {
  .rk-header { position: static; }
  /* A fejléc itt visszakerül a dokumentum-folyásba, a #rk-main
     kompenzáló paddingje itt nem kell. */
  #rk-main { padding-top: 0; }
  .rk-nav.is-open { inset: 0; }
}