/* ==========================================================================
   OptimoWP — a téma központi stíluslapja
   Irány: NEO-KLASSZIKUS / IDŐTLEN  (forrásdesign: design/c-neo-klasszikus/)

   VERZIÓ: 2026-10-18.1  (az oldalépítős változat 2026-09-16.3 utódja)
   Változás az oldalépítős változathoz képest:
     - a gomb maga az <a class="owp-btn">, a menü WordPress-menü,
       a GYIK <details>, az űrlap Fluent Forms;
     - a preview.css állványzata (wrap, stack …) itt él, owp- prefixszel;
     - a reset csak a téma saját konténereire hat (a Pencilino Médiatár-ablakát nem érinti).
   ========================================================================== */
/* ==========================================================================
   1. DESIGN-TOKENEK
   ========================================================================== */

:root {
  /* verziójelölő — keresd a live forrásban, hogy az aktuális CSS van-e beillesztve */
  --owp-css-version: "2026-10-19.1";

  /* felületek */
  --owp-paper:     #fcfbf8;   /* alap tört fehér */
  --owp-paper-2:   #f4f2ec;   /* mélyebb szekciók */
  --owp-paper-3:   #ffffff;   /* kártyák, kiemelt sávok */

  /* tinta */
  --owp-ink:       #23262b;
  --owp-ink-mid:   #565c66;
  --owp-ink-soft:  #6a707a;   /* 2026-09-09: #8b909a→#6a707a, WCAG AA (apró szöveg 3,1→4,8 tört fehéren) */

  /* akcentusok */
  --owp-navy:      #2f3e55;
  --owp-navy-dark: #23303f;
  --owp-gold:      #a5854f;
  --owp-gold-dark: #8a6d3c;
  --owp-gold-soft: #c9ab72;   /* sötét háttéren */
  --owp-gold-text: #846838;   /* 2026-09-10: WCAG AA arany SZÖVEGRE világoson (link, felirat) 3,34→5,0; a márka-arany #a5854f a felületeken/keretben marad */

  /* vonalak */
  --owp-line:      #dcd8ce;
  --owp-line-soft: #eae7df;
  --owp-line-dark: rgba(255,255,255,.16);

  /* betűk */
  --owp-f-disp: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --owp-f-text: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --owp-f-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* tipográfiai skála */
  --owp-t--1: clamp(0.8rem,  0.77rem + 0.13vw, 0.88rem);
  --owp-t-0:  clamp(1.04rem, 1rem    + 0.20vw, 1.16rem);
  --owp-t-1:  clamp(1.22rem, 1.12rem + 0.50vw, 1.50rem);
  --owp-t-2:  clamp(1.60rem, 1.35rem + 1.20vw, 2.40rem);
  --owp-t-3:  clamp(2.10rem, 1.60rem + 2.40vw, 3.60rem);
  --owp-t-4:  clamp(2.50rem, 1.80rem + 3.60vw, 4.80rem);

  /* terek — 2026-07-19: a függőleges ritmus ~20%-kal szűkítve.
     A korábbi értékek mellett nagy üres sávok keletkeztek a blokkok között
     (az új honlap oldal 10 120 px magas volt). */
  --owp-sp-sec:  clamp(3.25rem, 2rem + 4.6vw, 6.75rem);
  --owp-sp-lg:   clamp(2rem, 1.25rem + 2.4vw, 4rem);
  --owp-sp-md:   clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
  --owp-sp-sm:   clamp(1rem, .8rem + .9vw, 1.6rem);

  --owp-wrap: 1160px;
}


/* ==========================================================================
   2. ALAP — reset (csak a téma konténereire), tipográfia, elrendezés-segédek
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--owp-paper);
  color: var(--owp-ink);
  font-family: var(--owp-f-text);
  font-size: var(--owp-t-0);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* :where() → 0 specificitás, így minden komponens-szabály felülírja (mint a preview elem-resetje) */
:where(.owp-hdr, .owp-main, .owp-ftr) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(.owp-hdr, .owp-main, .owp-ftr) :where(ul, ol) { padding: 0; list-style: none; }
:where(.owp-main, .owp-ftr) :where(img) { max-width: 100%; height: auto; display: block; }
:where(.owp-hdr, .owp-main, .owp-ftr) :where(a) { color: inherit; }

h1, h2, h3, h4 { font-family: var(--owp-f-disp); font-weight: 400; line-height: 1.16; }

/* boxed szélesség */
.owp-wrap {
  width: 100%;
  max-width: var(--owp-wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, .8rem + 2.2vw, 3.5rem);
}
.owp-sticky { position: sticky; top: 0; z-index: 50; }
.admin-bar .owp-sticky { top: var(--wp-admin--admin-bar--height, 32px); }
.owp-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
/* align-content: start — megnyújtott rácscellában (pl. egy sorban lévő lépések) ne ossza szét a sorokat */
.owp-stack   { display: grid; gap: 1rem; align-content: start; }
.owp-stack-2 { display: grid; gap: 1.75rem; align-content: start; }
.owp-mt-sm { margin-top: var(--owp-sp-sm); }
.owp-mt-md { margin-top: var(--owp-sp-md); }
.owp-mt-lg { margin-top: var(--owp-sp-lg); }
.owp-btns { display: flex; flex-wrap: wrap; gap: 1rem; }
.owp-btns--center { justify-content: center; }
.owp-ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; }

/* A WordPress szabványos képernyőolvasó-osztálya (a core admin-CSS-sel azonos definíció).
   A frontenden a témának kell adnia — enélkül a Pencilino Médiatár-ablakában a rejtett
   feliratok („Párbeszéd bezárása”, „Szűrés dátum alapján” …) láthatóvá válnak és átfednek. */
.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
  padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}

/* képernyőolvasó-szöveg és „ugrás a tartalomhoz” */
.owp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.owp-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--owp-navy); color: #fff; padding: .6em 1em;
  font: 600 var(--owp-t--1)/1.2 var(--owp-f-ui); text-decoration: none;
}
.owp-skip:focus { top: 1rem; }

/* Pencilino formázott szöveg: a belső bekezdések a burok stílusát öröklik */
.pencil-richtext > :first-child { margin-top: 0; }
.pencil-richtext p { margin: 0; }
.pencil-richtext p + p, .pencil-richtext p + ul, .pencil-richtext ul + p { margin-top: .85em; }
.pencil-richtext ul, .pencil-richtext ol { margin: 0; padding-left: 1.2em; }
.pencil-richtext a { color: var(--owp-gold-text); }
.owp-sec--navy .pencil-richtext a { color: var(--owp-gold-soft); }

/* „máshol szerkeszthető” régió: elrendezés-semleges burok */
.pencil-managed-region { min-width: 0; }

/* Referenciák: az owp-about 2 EGYENLŐ oszlopa (a .6fr/1fr alap helyett). */
.owp-about.owp-about--even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }

/* ==========================================================================
   3. SZEKCIÓK
   ========================================================================== */

.owp-sec        { padding-block: var(--owp-sp-sec); background: var(--owp-paper); }
.owp-sec--paper { background: var(--owp-paper-3); }
.owp-sec--deep  { background: var(--owp-paper-2); }
.owp-sec--navy  { background: var(--owp-navy); color: #fff; }
.owp-sec--tight { padding-block: calc(var(--owp-sp-sec) * .55); }

/* sötét szekción belüli szövegszínek */
.owp-sec--navy h1, .owp-sec--navy h2, .owp-sec--navy h3 { color: #fff; }
.owp-sec--navy p { color: rgba(255,255,255,.74); }


/* ==========================================================================
   4. TIPOGRÁFIA-SEGÉDOSZTÁLYOK
   ========================================================================== */

.owp-eyebrow {
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--owp-gold-text);
}
.owp-sec--navy .owp-eyebrow { color: var(--owp-gold-soft); }

.owp-h1    { font-size: var(--owp-t-4); }
.owp-h2    { font-size: var(--owp-t-2); }
.owp-h3    { font-size: var(--owp-t-1); }
.owp-title { font-size: var(--owp-t-3); }

.owp-lead  { font-size: var(--owp-t-1); color: var(--owp-ink-mid); line-height: 1.6; }
.owp-muted { color: var(--owp-ink-mid); }
.owp-small { font-size: var(--owp-t--1); color: var(--owp-ink-soft); }

/* mértéktartó sorhossz — a klasszikus arányok kulcsa */
.owp-measure    { max-width: 62ch; margin-inline: auto; }
.owp-measure-sm { max-width: 46ch; margin-inline: auto; }

/* Balra zárt felsorolás arany jelöléssel — szövegblokkokba (pl. referenciák).
   A csomagkártyák középre zárt listája ettől külön él, ott a jelölés
   megtörné a szimmetriát. */
.owp-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .7rem;
  font-size: var(--owp-t--1);
  color: var(--owp-ink-mid);
  text-align: left;
}
.owp-list li { padding-left: 1.5em; position: relative; }
.owp-list li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: .8em; height: 1px; background: var(--owp-gold);
}


/* ==========================================================================
   5. DÍSZEK — ✦ elválasztó és kettős vonal
   ========================================================================== */

/* Használat: <div class="owp-orn" aria-hidden="true">✦</div> — a ✦ díszítés, nem tartalom. */
.owp-orn {
  width: 150px; max-width: 100%;   /* fix szélesség → a ::before/::after szárnyvonalak mindig kapnak helyet */
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.1rem;
  color: var(--owp-gold);
  font-size: 1.15rem;      /* a glif legyen látható — ez az irány kézjegye */
  letter-spacing: 0;       /* egyetlen karakternél a betűköz csak jobbra tolná */
  line-height: 1;
}
.owp-orn::before,
.owp-orn::after {
  content: ""; flex: 1; height: 1px;
  background: var(--owp-line);
}
.owp-sec--navy .owp-orn        { color: var(--owp-gold-soft); }
.owp-sec--navy .owp-orn::before,
.owp-sec--navy .owp-orn::after { background: var(--owp-line-dark); }

/* kettős vonal */
.owp-rule2 {
  border-top: 1px solid var(--owp-line);
  border-bottom: 1px solid var(--owp-line);
  height: 3px;
}


/* ==========================================================================
   6. GOMBOK — maga az <a> kapja az osztályt (Pencilino pencil_button)
   ========================================================================== */

.owp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: .95em 1.9em;
  border-radius: 0;
  background: var(--owp-navy);
  color: #fff;
  border: 1px solid var(--owp-navy);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
a.owp-btn { color: #fff; }
.owp-btn:hover, .owp-btn:focus-visible { background: var(--owp-ink); border-color: var(--owp-ink); color: #fff; }

.owp-btn--gold { background: var(--owp-gold); border-color: var(--owp-gold); }
.owp-btn--gold:hover, .owp-btn--gold:focus-visible { background: var(--owp-gold-dark); border-color: var(--owp-gold-dark); }

a.owp-btn--ghost, .owp-btn--ghost { background: transparent; color: var(--owp-navy); border-color: var(--owp-line); }
.owp-btn--ghost:hover, .owp-btn--ghost:focus-visible { background: var(--owp-navy); border-color: var(--owp-navy); color: #fff; }

/* sötét szekcióban a ghost gomb világos keretet kap */
.owp-sec--navy a.owp-btn--ghost { color: #fff; border-color: var(--owp-line-dark); }
.owp-sec--navy .owp-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--owp-navy); }

.owp-btn--lg { padding: 1.1em 2.3em; }

/* szöveges link-gomb (kártyák alján) */
.owp-link, a.owp-link {
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--owp-gold-text);
  text-decoration: none;
  border-bottom: 1px solid var(--owp-line);
  padding-bottom: .3em;
}
.owp-link:hover { color: var(--owp-gold-dark); border-bottom-color: var(--owp-gold); }

/* ==========================================================================
   7. FEJLÉC / NAVIGÁCIÓ — WordPress-menü, egy szint almenüvel, mobilmenü
   ========================================================================== */

.owp-hdr {
  background: rgba(252,251,248,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--owp-line);
}
.owp-hdr__bar { min-height: 84px; position: relative; }

.owp-logo, a.owp-logo {
  font-family: var(--owp-f-disp);
  font-size: 1.5rem;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--owp-ink);
}
.owp-logo .owp-logo__accent { color: var(--owp-gold); }

.owp-nav__list { display: flex; align-items: center; gap: clamp(1rem, .5rem + 1.4vw, 2.25rem); }
.owp-nav__list li { position: relative; }
.owp-nav__list a {
  display: block;
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--owp-ink-mid);
  text-decoration: none;
  padding: .5em .2em;
}
.owp-nav__list a:hover,
.owp-nav__list a:focus-visible,
.owp-nav__list .current-menu-item > a,
.owp-nav__list .current-menu-ancestor > a,
.owp-nav__list .current_page_item > a { color: var(--owp-gold-text); }

/* almenü (Szolgáltatások → csomagok) */
.owp-nav__list .menu-item-has-children > a::after {
  content: ""; display: inline-block; margin-left: .45em; vertical-align: .2em;
  border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0;
}
.owp-nav__list .sub-menu {
  position: absolute; left: -1rem; top: 100%; z-index: 60;
  min-width: 17rem; padding: .6rem 0;
  background: var(--owp-paper-3);
  border: 1px solid var(--owp-line);
  border-top: 2px solid var(--owp-gold);
  box-shadow: 0 12px 28px rgba(35,38,43,.08);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.owp-nav__list li:hover > .sub-menu,
.owp-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.owp-nav__list .sub-menu a { padding: .55em 1.25em; letter-spacing: .1em; }

.owp-hdr__actions { display: flex; align-items: center; gap: 1rem; }

/* hamburger — csak mobilon */
.owp-burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--owp-line); cursor: pointer;
  align-items: center; justify-content: center;
}
.owp-burger__bars, .owp-burger__bars::before, .owp-burger__bars::after {
  display: block; width: 18px; height: 1.5px; background: var(--owp-ink); position: relative;
  transition: transform .2s, background .2s;
}
.owp-burger__bars::before, .owp-burger__bars::after { content: ""; position: absolute; left: 0; }
.owp-burger__bars::before { top: -6px; }
.owp-burger__bars::after  { top: 6px; }
.owp-burger[aria-expanded="true"] .owp-burger__bars { background: transparent; }
.owp-burger[aria-expanded="true"] .owp-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.owp-burger[aria-expanded="true"] .owp-burger__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   8. HERO
   ========================================================================== */

.owp-hero {
  padding-block: clamp(3.25rem, 1.75rem + 6.4vw, 7.5rem)
                 clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  text-align: center;
}
.owp-hero__title { font-size: var(--owp-t-4); max-width: 18ch; margin-inline: auto; }
.owp-hero__lead  { font-size: var(--owp-t-1); color: var(--owp-ink-mid);
                   line-height: 1.6; max-width: 56ch; margin-inline: auto; }

/* belső oldalak rövidebb heroja */
.owp-hero--page { padding-block: clamp(2.5rem, 1.6rem + 3.2vw, 4.75rem)
                                 clamp(1.75rem, 1.25rem + 1.6vw, 2.75rem); }


/* ==========================================================================
   9. GYORSTÉNYEK sáv
   ========================================================================== */

.owp-facts {                                 /* 3 oszlopos konténer */
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--owp-line);
  border-bottom: 1px solid var(--owp-line);
}
.owp-fact {                                  /* egy cella */
  padding: 1.75rem 1rem;
  border-right: 1px solid var(--owp-line);
  text-align: center;
}
.owp-fact:last-child { border-right: 0; }
.owp-fact__label {
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--owp-ink-soft);
}
.owp-fact__value { font-size: var(--owp-t-1); }


/* ==========================================================================
   10. SZEKCIÓFEJLÉC — szimmetrikus, középre zárt
   ========================================================================== */

.owp-sechead {
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--owp-sp-lg);
}
.owp-sechead__title { font-size: var(--owp-t-2); }
.owp-sechead__lead  { color: var(--owp-ink-mid); }


/* ==========================================================================
   11. CSOMAGKÁRTYÁK (kezdőlap / szolgáltatások)
   ========================================================================== */

.owp-pk      { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
               gap: var(--owp-sp-sm); }              /* rács */
.owp-pk-card {                                        /* egy kártya */
  background: var(--owp-paper-3);
  border: 1px solid var(--owp-line);
  padding: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  text-align: center;
  display: flex; flex-direction: column;
}
.owp-pk-card__name  { font-size: var(--owp-t-1); }
.owp-pk-card__for   { color: var(--owp-ink-mid); font-size: var(--owp-t--1);
                      min-height: 3em; }
.owp-pk-card__price { font-size: var(--owp-t-2); color: var(--owp-navy); }
.owp-pk-card__price small {
  font-family: var(--owp-f-ui); font-size: var(--owp-t--1);
  color: var(--owp-ink-soft); letter-spacing: .06em;
}
.owp-pk-card__note  { font-family: var(--owp-f-ui); font-size: var(--owp-t--1);
                      color: var(--owp-ink-soft); }
.owp-pk-card__list  {
  list-style: none; margin: 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--owp-line);
  display: grid; gap: .7rem;
  font-size: var(--owp-t--1); color: var(--owp-ink-mid);
}
.owp-pk-card__foot  { margin-top: auto; }


/* ==========================================================================
   12. ÁRBLOKK (csomag-aloldalak)
   ========================================================================== */

.owp-price {
  background: var(--owp-paper-3);
  border: 1px solid var(--owp-line);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  text-align: center;
  max-width: 900px; margin-inline: auto;
}
.owp-price__grid {                           /* két árszint egymás mellett */
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--owp-sp-sm);
}
.owp-price__tier {
  padding: var(--owp-sp-sm);
  border: 1px solid var(--owp-line-soft);
  background: var(--owp-paper);
}
.owp-price__tier--featured { border-color: var(--owp-gold); }
.owp-price__label  { font-family: var(--owp-f-ui); font-size: var(--owp-t--1);
                     letter-spacing: .2em; text-transform: uppercase;
                     color: var(--owp-ink-soft); }
.owp-price__amount { font-size: var(--owp-t-3); color: var(--owp-navy);
                     line-height: 1.1; }
.owp-price__amount small { font-family: var(--owp-f-ui); font-size: var(--owp-t--1);
                     color: var(--owp-ink-soft); letter-spacing: .06em; }
.owp-price__sub    { font-size: var(--owp-t--1); color: var(--owp-ink-mid); }

/* Alanyi adómentes mondat — MINDEN árblokk mellé kötelező */
.owp-price__vat {
  font-size: var(--owp-t--1);
  color: var(--owp-ink-soft);
  font-style: italic;
  margin-top: var(--owp-sp-sm);
}


/* ==========================================================================
   13. FOLYAMAT — római számos, körkeretes lépések
   ========================================================================== */

.owp-steps { display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
             gap: var(--owp-sp-sm); }
.owp-step  { text-align: center; }
.owp-step__num {
  width: 3.75rem; height: 3.75rem;            /* öt cella szélességében a 3rem elveszett */
  margin-inline: auto;
  border: 1px solid var(--owp-gold);
  border-radius: 50%;
  display: grid; place-content: center;
  font-family: var(--owp-f-disp);
  font-size: var(--owp-t-0);
  letter-spacing: .06em;
  color: var(--owp-gold-text);
}
.owp-step__title { font-size: var(--owp-t-0); }
.owp-step__desc  { font-size: var(--owp-t--1); color: var(--owp-ink-mid); }


/* ==========================================================================
   14. PROBLÉMA- ÉS CÉLCSOPORT-KÁRTYÁK
       („Miért fontos?" 4 db · „Kinek szól?" 3 db)
   ========================================================================== */

/* Négy kártya EGY sorban: keskenyebb dobozok, kevesebb holt tér.
   Kétoszlopos rácsban a rövid mondatok félig üresen hagyták a kártyákat. */
.owp-probs { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
             gap: var(--owp-sp-sm); }
.owp-prob  {
  background: var(--owp-paper-3);
  border: 1px solid var(--owp-line);
  border-top: 2px solid var(--owp-gold);
  padding: calc(var(--owp-sp-sm) * .9);
  font-size: var(--owp-t--1);
  line-height: 1.6;
  color: var(--owp-ink-mid);
}

.owp-auds { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
            gap: var(--owp-sp-sm); }
.owp-aud  {
  background: var(--owp-paper-3);
  border: 1px solid var(--owp-line);
  padding: var(--owp-sp-sm);
  text-align: center;
}
.owp-aud__title { font-size: var(--owp-t-1); }
.owp-aud__desc  { font-size: var(--owp-t--1); color: var(--owp-ink-mid); }


/* ==========================================================================
   15. JELLEMZŐ-KÁRTYÁK („Mit kapsz?" 6 db)
   ========================================================================== */

.owp-feats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
             gap: var(--owp-sp-sm); }
.owp-feat  {
  background: var(--owp-paper-3);
  border: 1px solid var(--owp-line);
  padding: var(--owp-sp-sm);
}
.owp-feat__title { font-size: var(--owp-t-1); }
.owp-feat__desc  { font-size: var(--owp-t--1); color: var(--owp-ink-mid); }

/* címkék */
.owp-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.owp-tag  {
  font-family: var(--owp-f-ui);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--owp-navy);
  border: 1px solid var(--owp-line);
  padding: .35em .8em;
}


/* ==========================================================================
   16. RÓLAM + FOTÓHELY
   ========================================================================== */

.owp-about {                                  /* 2 oszlop */
  display: grid;
  grid-template-columns: minmax(0,.6fr) minmax(0,1fr);
  gap: var(--owp-sp-lg);
  align-items: center;
}
.owp-about__sig {
  padding-top: 1.5rem;
  border-top: 1px solid var(--owp-line);
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--owp-ink-soft);
}

/* Kettős keretes fotóhely — 3:4 álló. A valódi fotó cseréje a design
   érintése nélkül lehetséges: ugyanez az osztály marad a képen. */
.owp-photo {
  aspect-ratio: 3 / 4;
  background: var(--owp-paper-2);
  border: 1px solid var(--owp-line);
  padding: .6rem;
}
.owp-photo__in {
  height: 100%;
  border: 1px solid var(--owp-line);
  display: grid; place-content: center; gap: .6rem;
  text-align: center; padding: 1.5rem;
}
.owp-photo { overflow: hidden; }
.owp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* helykitöltő tartalma — a valódi fotó behelyezésekor törölhető */
.owp-photo__mark { font-size: var(--owp-t-3); color: var(--owp-ink-soft); }
.owp-photo__cap  {
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--owp-ink-soft);
}


/* ==========================================================================
   17. REFERENCIÁK
   ========================================================================== */

.owp-refs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
            gap: var(--owp-sp-md); }
.owp-ref  { text-align: center; }
.owp-ref__shot {                              /* képhely */
  aspect-ratio: 4 / 3;
  background: var(--owp-paper-2);
  border: 1px solid var(--owp-line);
  display: grid; place-content: center;
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--owp-ink-soft);
}
.owp-ref__shot img { width: 100%; height: 100%; object-fit: cover; }
.owp-ref__name { font-size: var(--owp-t-1); }
.owp-ref__desc { font-size: var(--owp-t--1); color: var(--owp-ink-mid); }
.owp-ref .owp-tags { justify-content: center; }



/* referencia-oldal: a WordPress-tartalom bekezdései */
.owp-ref__body p { color: var(--owp-ink-mid); margin: 0; }
.owp-ref__shot { overflow: hidden; }
.owp-ref__shot img { display: block; }

/* általános (jogi) oldalak blokktartalma */
.owp-prose > * + * { margin-top: 1em; }
.owp-prose h2, .owp-prose h3 { margin-top: 1.8em; }
.owp-prose a { color: var(--owp-gold-text); }
.owp-prose ul { list-style: disc; padding-left: 1.2em; }
.owp-prose ol { list-style: decimal; padding-left: 1.2em; }

/* ==========================================================================
   18. TÁBLÁZAT — összehasonlítás és hatókör
   ========================================================================== */

.owp-table { width: 100%; overflow-x: auto; }
.owp-table table {
  width: 100%; border-collapse: collapse;
  font-size: var(--owp-t--1);
  background: var(--owp-paper-3);
  min-width: 620px;
}
.owp-table th, .owp-table td {
  padding: .95rem 1rem;
  border: 1px solid var(--owp-line);
  text-align: center; vertical-align: top;
}
.owp-table thead th {
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600;
  background: var(--owp-paper-2);
  color: var(--owp-navy);
}
.owp-table tbody th {
  text-align: left; font-weight: 400;
  color: var(--owp-ink-mid); background: var(--owp-paper);
}
.owp-table td strong { color: var(--owp-navy); }


/* ==========================================================================
   19. GYIK — natív <details> harmonika
   ========================================================================== */

.owp-faq { max-width: 820px; margin-inline: auto; }
.owp-faq__item {
  border: 1px solid var(--owp-line);
  border-bottom: 0;
  background: var(--owp-paper-3);
}
.owp-faq__item:last-child { border-bottom: 1px solid var(--owp-line); }
.owp-faq__q {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--owp-f-disp);
  font-size: var(--owp-t-0);
  padding: 1.1rem 1.4rem;
}
.owp-faq__q::-webkit-details-marker { display: none; }
.owp-faq__q::after {
  content: "+"; flex: none;
  font-family: var(--owp-f-ui); font-size: 1.1em; line-height: 1;
  color: var(--owp-gold);
}
.owp-faq__item[open] > .owp-faq__q { color: var(--owp-gold-text); }
.owp-faq__item[open] > .owp-faq__q::after { content: "\2013"; }
.owp-faq__a {
  font-size: var(--owp-t--1);
  color: var(--owp-ink-mid);
  border-top: 1px solid var(--owp-line-soft);
  padding: 1.2rem 1.4rem;
}

/* ==========================================================================
   20. ŰRLAP — Fluent Forms, a téma tipográfiájára hangolva
       (a .owp-form burok szűkíti, így más Fluent űrlapot nem érint)
   ========================================================================== */

.owp-form { max-width: 720px; margin-inline: auto; }
.owp-form .fluentform .ff-el-group { margin-bottom: 1.25rem; }
.owp-form .fluentform .ff-el-input--label label {
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--owp-ink-mid);
}
.owp-form .fluentform .ff-el-is-required.asterisk-right label::after,
.owp-form .fluentform .ff-el-is-required.asterisk-left label::before { color: var(--owp-gold-text); }
.owp-req { color: var(--owp-gold-text); }

.owp-form .fluentform .ff-el-form-control {
  font-family: var(--owp-f-text);
  font-size: var(--owp-t-0);
  line-height: 1.5;
  background: var(--owp-paper-3);
  border: 1px solid var(--owp-line);
  border-radius: 0;
  padding: .85em 1em;
  color: var(--owp-ink);
  box-shadow: none;
}
.owp-form .fluentform textarea.ff-el-form-control { min-height: 8.5rem; resize: vertical; }
.owp-form .fluentform .ff-el-form-control:focus {
  border-color: var(--owp-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(165,133,79,.14);
}
.owp-form .fluentform .ff-el-tc label,
.owp-form .fluentform .ff_t_c,
.owp-form .fluentform .ff-el-form-check-label {
  font-family: var(--owp-f-text);
  font-size: var(--owp-t--1);
  text-transform: none; letter-spacing: 0;
  color: var(--owp-ink-mid);
}
.owp-form .fluentform .ff-btn-submit,
.owp-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
  font-family: var(--owp-f-ui);
  font-size: var(--owp-t--1);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  background: var(--owp-gold);
  border: 1px solid var(--owp-gold);
  border-radius: 0;
  padding: 1.05em 2.2em;
  color: #fff;
  box-shadow: none;
  max-width: 100%;
  white-space: normal;   /* 2026-10-19: a hosszú felirat 375 px-en kilógott */
  line-height: 1.5;
}
@media (max-width: 480px) {
  .owp-form .fluentform .ff-btn-submit,
  .owp-form .fluentform .ff-btn-submit:not(.ff_btn_no_style) { width: 100%; letter-spacing: .1em; padding-inline: 1.2em; }
}
.owp-form .fluentform .ff-btn-submit:hover { background: var(--owp-gold-dark); border-color: var(--owp-gold-dark); opacity: 1; }
.owp-form .ff-message-success {
  border: 1px solid var(--owp-line); border-left: 2px solid var(--owp-gold);
  background: var(--owp-paper-3); box-shadow: none; color: var(--owp-ink-mid);
}
.owp-form__missing { text-align: center; color: var(--owp-ink-mid); }

/* elérhetőség-sáv az űrlap mellett */
.owp-contact { display: grid; gap: var(--owp-sp-sm); }
.owp-contact__item {
  border-bottom: 1px solid var(--owp-line);
  padding-bottom: var(--owp-sp-sm);
}
.owp-contact__label {
  font-family: var(--owp-f-ui); font-size: var(--owp-t--1);
  letter-spacing: .2em; text-transform: uppercase; color: var(--owp-ink-soft);
}
.owp-contact__value { font-size: var(--owp-t-1); }
.owp-contact__value a { text-decoration: none; }

/* ==========================================================================
   21. KIEMELT DOBOZ / MEGJEGYZÉS
   ========================================================================== */

.owp-note {
  background: var(--owp-paper-3);
  border: 1px solid var(--owp-line);
  border-left: 2px solid var(--owp-gold);
  padding: var(--owp-sp-sm);
  font-size: var(--owp-t--1);
  color: var(--owp-ink-mid);
  max-width: 820px; margin-inline: auto;
}
.owp-note strong { color: var(--owp-navy); }


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

.owp-ftr {
  background: var(--owp-ink);
  color: rgba(255,255,255,.6);
  padding-block: 3.5rem 2.5rem;
  font-size: var(--owp-t--1);
}
.owp-ftr__h {
  font-family: var(--owp-f-disp);
  font-size: var(--owp-t-1);
  color: #fff;
}
/* a logó „WP" kiemelése sötét háttéren — ugyanaz az osztály, mint a fejlécben */
.owp-ftr .owp-logo__accent { color: var(--owp-gold-soft); }
.owp-ftr a { color: rgba(255,255,255,.6); text-decoration: none; }
.owp-ftr a:hover { color: #fff; }
.owp-ftr__legal {                             /* */
  border-top: 1px solid var(--owp-line-dark);
  padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  justify-content: center; text-align: center;
  color: rgba(255,255,255,.4);
}


.owp-ftr__menu a { text-decoration: none; }

/* ==========================================================================
   23. RESZPONZÍV
   ========================================================================== */

@media (max-width: 1024px) {
  .owp-pk, .owp-refs, .owp-feats,
  .owp-probs { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .owp-steps { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: var(--owp-sp-md); }
  .owp-auds  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .owp-about, .owp-about.owp-about--even { grid-template-columns: 1fr; }
  .owp-photo { max-width: 300px; margin-inline: auto; }
  .owp-ftr-grid { grid-template-columns: 1fr 1fr; }
}

/* mobilmenü 900 px alatt */
@media (max-width: 900px) {
  .owp-burger { display: inline-flex; }
  .owp-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--owp-paper);
    border-bottom: 1px solid var(--owp-line);
    box-shadow: 0 16px 24px rgba(35,38,43,.06);
    display: none;
  }
  .owp-hdr.is-open .owp-nav { display: block; }
  .owp-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem clamp(1.25rem, .8rem + 2.2vw, 3.5rem) 1.25rem; }
  .owp-nav__list a { padding: .85em 0; border-bottom: 1px solid var(--owp-line-soft); }
  .owp-nav__list .menu-item-has-children > a::after { display: none; }
  .owp-nav__list .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 0 1rem; border: 0; box-shadow: none; background: none;
  }
  .owp-nav__list .sub-menu a { padding: .7em 0; letter-spacing: .12em; }
}

@media (max-width: 767px) {
  .owp-hdr__bar { min-height: 66px; }
  .owp-hdr__cta { padding: .8em 1.1em; letter-spacing: .1em; }

  .owp-facts { grid-template-columns: 1fr; border-bottom: 0; }
  .owp-fact  { border-right: 0; border-bottom: 1px solid var(--owp-line); }
  .owp-fact:last-child { border-bottom: 1px solid var(--owp-line); }

  .owp-pk, .owp-refs, .owp-feats, .owp-steps,
  .owp-probs, .owp-auds, .owp-price__grid { grid-template-columns: 1fr; }

  .owp-ftr-grid { grid-template-columns: 1fr; text-align: center; }
  .owp-btns { justify-content: center; }
  .owp-ftr__legal { flex-direction: column; gap: .5rem; }
}

@media (max-width: 420px) {
  .owp-hdr__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}