/* okosugyintezo-child — base: reset-lite, tipográfia, gomb + jelvény, konténer. */

/* Self-hosted betűk (Inter + Fraunces, változó tengely). Licenc: assets/fonts/LICENSE.txt.
   latin + latin-ext subset (utóbbi a magyar ő/ű és egyéb ékezetek miatt kell).
   font-weight TARTOMÁNY (nem fix érték), mert mindkét fájl valódi variable font. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 2026-08-19 (v0.2.3 regresszio, HARMADIK gradiens-korben bevezetett hiba):
   a /blog/ (archívum, home.php) tartalma ELTOLODOTT/levágódott -- pontos
   elesi getComputedStyle-meressel es hu szimulacioval megtalalva: a GP
   "separate-containers" .site-content flex konteneren belul a home.php
   sablonja RÖVIDEBB DOM-lancot hasznal mint a page/single sablonok (nincs
   .content-area/.site-main/article/.inside-article/.entry-content koztes
   retag, a <main id="primary"> KOZVETLEN szuloje a .oui-section elemunknek)
   -- ilyen roviditett lancnal a #primary flex-item a benne levo, negativ
   margoju (kitores-technikas) .oui-section miatt 0 szelessegre zsugorodott
   (flex "content-based sizing" + negativ margo interakcio), ez tolta el/
   vagta le a lattato tartalmat. Fix: a #primary flex-item explicit
   width:100%-ot kap, igy nem a gyermekei (negativ margoju) tartalombol
   szamitja a sajat szelesseget. Szimulacioval ellenoritve MINDKET
   sablon-strukturan (archivum: 0px->1200px javult; single/page: nem
   valtozott, tovabbra is 0/1440px helyesen), nincs regresszio. */
#primary { width: 100%; min-width: 0; }
body {
  margin: 0;
  /* 2026-08-19 (Istvan MASODIK kerese): korabban ez a finom "Aurora UI"
     szinatmenet CSAK a .oui-hero sajat hattere volt -- most a body szintjere
     kerult, UGYANAZZAL a keplettel, `background-attachment: fixed`-del,
     hogy a viewporthoz rogzitve, az OLDAL TELJES HOSSZABAN egysegesen
     lathato maradjon (nem a dokumentum, hanem a viewport pozicioihoz
     igazodik, igy nem "hig" ki egy hosszu oldalon). A .oui-hero SAJAT
     hattere emiatt torolve (ld. components.css) -- igy nincs duplazodas
     a lap tetejen, egyetlen forras van mindenhol. */
  background:
    radial-gradient(42% 52% at 88% 4%, rgba(255, 107, 74, 0.13), transparent 60%),
    radial-gradient(46% 56% at 6% 96%, rgba(47, 191, 143, 0.12), transparent 62%),
    radial-gradient(50% 45% at 50% 50%, rgba(28, 43, 74, 0.04), transparent 70%),
    var(--c-bg);
  background-attachment: fixed;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--lh-head);
  color: var(--c-indigo);
  margin: 0 0 var(--sp-4);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--sp-4); max-width: var(--measure); }

/* Fókusz — látható, akadálymentes. */
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; border-radius: 4px; }

/* Konténer + szekció-ritmus. */
.oui-container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* GeneratePress saját .inside-article padding-je (Testreszabó-generált,
   élőben padding:30px, ld. 2026-08-18 VIZSLA mérése + headless-chromium
   ellenőrzés) a .oui-container gutterünkre RÁADÓDOTT, dupla margót adva.
   A --gutter az EGYETLEN szándékolt vízszintes spacing-forrás, a
   .oui-hero/.oui-section padding-block az EGYETLEN függőleges forrás --
   a GP saját paddingjét MINDEN irányban nullázzuk (2026-08-19: a felső/alsó
   30px egy vékony fehér sávot hagyott a fejléc és a hero szín-háttere
   között, mert a korábbi fix csak a bal/jobb oldalt nullázta). Minden
   ebben a themeban élő oldal saját maga ad top-paddinget a legelső
   .oui-hero/.oui-section elemén, tehát ez sosem hagy 0 térközt. */
/* 2026-08-19 (HARMADIK kor, VALODI gyokerok megtalalva): a body-szintu
   fixed gradiens NEM latszott a bekezdesekben, mert a GP core dinamikusan
   MEG EGY sajat szabalyt ad az .inside-article-nek amit korabban nem
   neztem meg: background-color:var(--base-3) (elesben ellenorizve
   getComputedStyle-lal: rgb(255,255,255), TELJESEN OPAK feher) -- ez az
   OSSZES tartalmunk (minden .oui-hero/.oui-section) KOZOS oseleme, tehat
   ez az egyetlen opak feher retag takarta el a body gradienset MINDENUTT
   a tartalom-oszlopon belul (csak a legszelso margokon latszott at, ott
   ahol az .inside-article mar nem er el -- pontosan ezt irta le Istvan).
   Padding MELLETT most a hatterszin is nullazva. */
.inside-article { padding: 0 !important; background-color: transparent !important; }
/* 2026-08-19: a fejléc-hero fehér sáv VISSZAJÖTT -- gyökérok NEM az
   .inside-article volt ezúttal (az fixen 0px, ellenőrizve élőben), hanem a
   GP core "separate-containers" elrendezés SAJÁT margója: a .site-main
   elem (a #content wrapperen belül) alapból margin:20px-et kap MINDEN
   irányban ebben a layout-módban -- ez adta a mért pontos 20px rést a
   fejléc alja és a hero teteje között. GP-nek van saját beépített
   override-ja erre (.full-width-content.no-sidebar.separate-containers),
   de az egy külön Testreszabó-kapcsolóhoz kötött, amit nem állítottunk be
   -- ahelyett hogy azt kérnénk Istvántól, a gyermek-témában közvetlenül
   nullázzuk, ugyanúgy ahogy a többi GP-alapértelmezést is felülírtuk. */
.separate-containers.no-sidebar .site-main { margin: 0 !important; }
.oui-section { padding-block: var(--section-pad); }
.oui-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--c-muted);
}

/* Jelvények ("0-24 elérhető • Magyarul • …") — turkiz accent. */
.oui-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.oui-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--c-badge-050); color: #14795a;
  font-size: 0.8125rem; font-weight: 700;
}
.oui-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-badge); }

/* Gomb komponens. */
.oui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 var(--sp-6);
  border-radius: var(--radius-pill); border: 2px solid transparent;
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 700; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.oui-btn--cta { background: var(--c-cta); color: #fff; box-shadow: 0 12px 24px rgba(234, 90, 56, 0.28); }
.oui-btn--cta:hover { background: var(--c-cta-hover); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(234, 90, 56, 0.34); }
.oui-btn--outline { background: transparent; color: var(--c-indigo); border-color: rgba(28, 43, 74, 0.2); }
.oui-btn--outline:hover { border-color: var(--c-indigo); background: var(--c-indigo-050); }
.oui-btn--ghost { background: transparent; color: var(--c-indigo); min-height: 44px; padding: 0 var(--sp-4); }

.oui-btn--sm { min-height: 44px; font-size: 1rem; padding: 0 var(--sp-5); }

/* Press-feedback (Feedback; ~140ms). :active touch-on is rendben, nem kell hover-gate. */
.oui-btn:active { transform: scale(0.97); transition: transform var(--dur-press) var(--ease-out); }
.oui-btn--cta:active { transform: translateY(-1px) scale(0.97); }