/* okosugyintezo-child — komponensek. Mérföldkő 1: FEJLÉC + HERO.
   (A többi komponens — feature/steps/pricing/faq/… — a C2–C4 epicben.) */

/* ============ FEJLÉC (sticky) ============ */
.oui-header {
  position: sticky; top: 0; z-index: 100;
  /* 2026-08-19 (Istvan MASODIK pontositasa): a korall/piros valtozatot
     visszavontuk -- a fejlec hattere most a LABLEC kekje (ugyanaz a
     gradiens-keplet mint a .oui-footer-nel), feher szoveggel/logoval. */
  background: linear-gradient(135deg, var(--c-indigo), var(--c-indigo-700));
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  /* Teljes szelesseg -- kideritve 2026-08-19: a fejlec a GP "Page Header"
     modul .inside-page-hero.grid-container wrapperebe van agyazva, aminek
     SAJAT max-width:1200px korlatja van (elesben merve: header 1200px
     szeles volt 1440px viewport-on, kozepre igazitva, ~120px ures savval
     mindket oldalon) -- ugyanaz a "kitores" trukk mint a hero/tint-
     szekcioknal, csak most a fejlecre alkalmazva. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.oui-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); }
.oui-header__bar { display: flex; align-items: center; gap: var(--sp-5); min-height: var(--header-h); }
.oui-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: #fff; }
.oui-brand__mark { /* egyedi logó-ikon (a header markup "O" fallback-szövege elrejtve) */
  flex: none; width: 36px; height: 36px; border-radius: 10px; overflow: hidden;
  /* Codex-tervezte logó, átlátszó hátterű PNG-ből -- indigo vonalrajz +
     korall pipa-nyíl. FEHÉR chip-háttér kell alá FÜGGETLENÜL a fejléc
     aktuális színétől, mert a logó saját indigo eleme egy indigó fejlécen/
     chipen eltűnne, fehéren viszont mindkét szín (indigo+korall) jól
     látszik, ahogy a terv is mutatta. */
  background: #fff url("../img/logo.webp") center / 78% no-repeat;
  font-size: 0; color: transparent;
}
.oui-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.oui-nav__links { display: flex; align-items: center; gap: 2px; }
.oui-nav__links a { padding: 10px 14px; border-radius: 10px; font-weight: 600; color: #fff; transition: background-color .15s ease, color .15s ease; }
.oui-nav__links a:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.oui-nav__cta { margin-left: var(--sp-3); }
/* A fejléc "Kérek konzultációt" gombja ISMÉT korall (István MÁSODIK
   pontosítása 2026-08-19) -- ugyanaz mint a hero-gomb (.oui-btn--cta
   globális --c-cta színe), ezért itt már NINCS szükség saját felülírásra,
   a korábbi piros (--c-red) szabály törölve. A sötét indigó fejléc-hátteren
   a korall gomb önmagában is jól elkülönül, extra egyedi szín nem kell. */

/* "Megoldások" lenyíló almenü -- a link+7 szolgáltatás-oldal listát JS
   (theme.js) építi fel a meglévő "Megoldások" linkből, nem kell hozzá
   markup-változtatás a fejléc-elemben. Asztalon abszolút pozícionált panel,
   mobilon (lásd a fájl alján a mobil media query-t) a hamburger-menün belül
   soros/harmonika-szerű. */
.oui-nav__item--dropdown { position: relative; }
.oui-nav__dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; border-radius: 10px; background: transparent;
  font: inherit; font-weight: 600; color: #fff; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.oui-nav__dropdown-toggle:hover,
.oui-nav__dropdown-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); color: #fff; }
.oui-nav__dropdown-caret { width: 9px; height: 9px; flex: none; transition: transform var(--dur-ui) var(--ease-out); }
.oui-nav__dropdown-toggle[aria-expanded="true"] .oui-nav__dropdown-caret { transform: rotate(180deg); }
.oui-nav__dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 110;
  min-width: 300px; padding: var(--sp-2);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility var(--dur-ui);
}
.oui-nav__dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.oui-nav__dropdown a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font-weight: 600; font-size: 0.92rem; color: var(--c-text);
  transition: background-color .15s ease, color .15s ease;
}
.oui-nav__dropdown a:hover { background: var(--c-indigo-050); color: var(--c-indigo); }

/* Mobil hamburger */
/* 2026-08-19: a fejléc hátterének indigóra váltásával a régi indigó
   navtoggle-háttér beleolvadt volna -- most fehér chip, indigó vonalakkal
   (ugyanaz a fordított logika, mint a márka-logónál). */
.oui-navtoggle { display: none; width: 44px; height: 44px; border: 0; border-radius: 12px; background: #fff; cursor: pointer; place-items: center; gap: 5px; }
.oui-navtoggle span { display: block; width: 20px; height: 2px; border-radius: 99px; background: var(--c-indigo); transition: transform .2s ease, opacity .2s ease; }
.oui-navtoggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.oui-navtoggle.is-open span:nth-child(2) { opacity: 0; }
.oui-navtoggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============ HERO ============ */
.oui-hero {
  position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem);
  /* 2026-08-19: az "Aurora UI" mesh-gradient FELKÖLTÖZÖTT a body-ra (ld.
     base.css), hogy az EGÉSZ oldalon egységesen fusson, nem csak itt --
     ezért itt most átlátszó, a body fixed-attachment hátterét mutatja. A
     ::before/::after mozgó derengő rétegek (lentebb) maradnak, azok egy
     KÜLÖN, csak a hero-ra jellemző, animált kiegészítő effekt. */
  background: transparent;
  /* Teljes szélességű háttér a GP tartalom-wrapper max-width-je ellenére
     (István döntése 2026-08-19: a hero ne "kártyaszerű" legyen, hanem
     szélig érjen) -- a .oui-hero maga a GP .inside-article/.grid-container
     korlátozott szélességű ősén belül ül, ezért a klasszikus "kitörős"
     trükkel viszi ki a hátterét a viewport szélére, a belső tartalom
     (.oui-hero__grid) pedig a beágyazott .oui-container-en keresztül
     marad a normál 1160px-es mértéken. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.oui-hero::before { /* indigo derengés fent — bátrabb, mozgó réteg */
  content: ""; position: absolute; inset: -34% 24% auto -12%; height: 580px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(28, 43, 74, 0.17), transparent 70%);
  pointer-events: none; will-change: transform;
}
.oui-hero::after { /* türkiz derengés lent-jobb — az aurora másik mozgó rétege */
  content: ""; position: absolute; inset: auto -10% -30% 26%; height: 520px; z-index: 0;
  background: radial-gradient(55% 55% at 70% 60%, rgba(47, 191, 143, 0.16), transparent 70%);
  pointer-events: none; will-change: transform;
}
.oui-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.oui-hero__title { margin-bottom: var(--sp-5); max-width: 15ch; }
.oui-hero__lead { font-size: var(--fs-lead); color: var(--c-muted); max-width: 46ch; margin-bottom: var(--sp-6); }
.oui-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.oui-hero__phone { margin-top: var(--sp-5); display: inline-flex; align-items: center; gap: 8px; color: var(--c-muted); font-size: 0.95rem; }
.oui-hero__phone b { color: var(--c-indigo); font-size: 1.05rem; font-family: var(--font-body); }

/* Hero vizuál — AI-generált illusztráció (WebP, theme-relatív háttér) + lebegő chip overlay. */
.oui-hero__visual { position: relative; min-height: 420px; }
.oui-hero__img {
  position: absolute; inset: 20px 0 20px 30px; border-radius: var(--radius-lg); overflow: hidden;
  background-color: var(--c-indigo-050); background-position: center;
  /* 2026-08-19: "cover"-ről "contain"-re váltva -- a doboz saját alakja
     (kb 1.2:1, a .oui-hero__visual mérete adja) nem egyezik az illusztrációk
     natív arányával (16:9-hez közeli), "cover"-rel a kép szélei levágódtak.
     "contain"-nel a TELJES kompozíció mindig látszik, a fennmaradó sávot a
     background-color (világos indigo-tint) tölti ki matt keretként -- ez
     szándékos, nem hiba, illik az illusztrációk saját világos hátteréhez. */
  background-size: contain; background-repeat: no-repeat;
  box-shadow: var(--shadow-lg);
}
/* Per-oldal illusztráció (theme-relatív). 2026-08-19: Codex-generált v2
   képkészlet (a jelenlegi oldal-palettával, indigo/korall/türkiz), a
   főoldal és a hívásfogadó mostantól KÜLÖN, saját illusztrációt kap
   (korábban közösön osztoztak). A webes-erdeklődőkezelő KIVÉTEL -- az
   a régi (v1) illusztrációt tartja meg, amíg a Codex-verzió (angol
   szöveg volt rajta) javítás alatt nincs jóváhagyva. */
.oui-hero__img--home { background-image: url("../img/hero-illustration-home.webp"); }
.oui-hero__img--recepcios { background-image: url("../img/hero-illustration-recepcios.webp"); }
.oui-hero__img--weboldal { background-image: url("../img/weboldal-illustration.webp"); }
.oui-hero__img--idopont { background-image: url("../img/idopont-illustration.webp"); }
.oui-hero__img--ajanlat { background-image: url("../img/ajanlat-illustration.webp"); }
.oui-hero__img--erdeklodo { background-image: url("../img/erdeklodo-illustration.webp"); }
.oui-hero__img--dashboard { background-image: url("../img/dashboard-illustration.webp"); }
.oui-hero__img--iroda { background-image: url("../img/iroda-illustration.webp"); }

/* Főoldali hero: az illusztráció teljesen látható (block), alatta 3 elcsúsztatott (staggered) event-kártya. */
.oui-hero__visual--stack { min-height: 0; }
.oui-hero__visual--stack .oui-hero__img { position: static; inset: auto; width: 100%; aspect-ratio: 5 / 4; }
.oui-hero__cards { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; }
.oui-hero__evt {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 9px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px;
}
.oui-hero__evt > div { min-width: 0; }
.oui-hero__evt:nth-child(1) { margin-top: 18px; }
.oui-hero__evt:nth-child(2) { margin-top: 0; }
.oui-hero__evt:nth-child(3) { margin-top: 28px; }
.oui-hero__evt .oui-card__dot { width: 30px; height: 30px; font-size: 15px; border-radius: 10px; background: var(--c-indigo-050); flex: none; }
.oui-hero__evt .oui-card__dot--live { background: var(--c-badge-050); }
.oui-hero__evt .oui-card__t { color: var(--c-indigo); font-weight: 700; font-size: .82rem; line-height: 1.2; }
.oui-hero__evt .oui-card__s { color: var(--c-muted); font-size: .72rem; line-height: 1.25; overflow-wrap: anywhere; }
/* A "hívás → foglalás → összefoglaló" kártya kompakt, opak UI-overlay a hero-illusztráció
   JOBB-ALSÓ sarkában — csak a sarkot fedi, az illusztráció nagy része tisztán látszik. */
.oui-hero__card {
  position: absolute; right: 10px; bottom: 16px; left: auto; top: auto; width: min(66%, 320px);
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--c-indigo), var(--c-indigo-700)); color: #fff;
  box-shadow: 0 18px 44px rgba(28, 43, 74, 0.28); border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--sp-4);
}
.oui-hero__card .oui-card__row { padding: 9px 0; }
.oui-hero__card .oui-card__dot { width: 32px; height: 32px; font-size: 15px; }
.oui-hero__card::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 107, 74, 0.35), transparent 65%); }
.oui-card__row { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.oui-card__row:last-child { border-bottom: 0; }
.oui-card__dot { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); font-size: 18px; }
.oui-card__dot--live { background: rgba(47, 191, 143, 0.22); }
.oui-card__t { font-weight: 700; font-size: 0.95rem; }
.oui-card__s { font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.oui-card__badge { margin-left: auto; font-size: 0.72rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: rgba(47, 191, 143, 0.9); color: #06331f; }
.oui-hero__float {
  position: absolute; left: -8px; top: 14px; bottom: auto; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px;
  background: var(--c-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--c-border);
}
.oui-hero__float .oui-card__dot { background: rgba(234, 90, 56, 0.12); color: var(--c-cta); }
.oui-hero__float .oui-card__t { color: var(--c-indigo); }
.oui-hero__float .oui-card__s { color: var(--c-muted); }

/* ============ Reszponzív ============ */
@media (max-width: 1024px) {
  .oui-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .oui-hero__visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .oui-hero__title { max-width: 20ch; }
}
/* Nav hamburgerre vált ≤960px-en (tabletnél a teljes desktop-nav kilógna). */
@media (max-width: 960px) {
  .oui-nav__links, .oui-nav__cta { display: none; }
  .oui-navtoggle { display: inline-grid; }
  .oui-nav.is-open { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) - 6px);
    display: block; padding: 10px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; box-shadow: var(--shadow-lg); }
  .oui-nav.is-open .oui-nav__links { display: flex; flex-direction: column; align-items: stretch; }
  /* A nyitott mobil-panel háttere FEHÉR marad (var(--c-surface)) a fejléc
     sötét indigó színétől függetlenül, ezért a linkek/toggle-szöveg itt
     VISSZAVÁLT sötétre -- a fejléc-sávban lévő fehér szöveg-szabály csak
     a zárt, sávban futó nav-ra érvényes. */
  .oui-nav.is-open .oui-nav__links a { padding: 12px 14px; color: var(--c-text); }
  .oui-nav.is-open .oui-nav__links a:hover { background: var(--c-indigo-050); color: var(--c-indigo); }
  .oui-nav.is-open .oui-nav__cta { display: block; margin: 6px 0 0; }
  .oui-nav.is-open .oui-btn { width: 100%; }
  .oui-nav.is-open .oui-nav__dropdown-toggle { color: var(--c-text); }
  .oui-nav.is-open .oui-nav__dropdown-toggle:hover,
  .oui-nav.is-open .oui-nav__dropdown-toggle[aria-expanded="true"] { background: var(--c-indigo-050); color: var(--c-indigo); }

  /* "Megoldások" almenü mobilon: nem lebegő panel, hanem a mobil-nav
     szűk sávjába illő, kinyíló harmonika-szakasz. */
  .oui-nav__dropdown-toggle { width: 100%; justify-content: space-between; padding: 12px 14px; }
  .oui-nav__dropdown {
    position: static; min-width: 0; margin: 2px 0 6px; padding: 4px 0 4px var(--sp-4);
    background: transparent; border: 0; border-left: 2px solid var(--c-border); border-radius: 0;
    box-shadow: none; opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .oui-nav__dropdown.is-open { display: block; }
}
@media (max-width: 760px) {
  .oui-hero { padding-top: 2.5rem; }
  .oui-hero__actions { flex-direction: column; align-items: stretch; }
  .oui-hero__actions .oui-btn { width: 100%; }
  /* Mobilon NINCS átfedés: a kép + kártya + chip egymás ALÁ tördel. */
  .oui-hero__visual { min-height: 0; }
  .oui-hero__img { position: static; inset: auto; width: 100%; aspect-ratio: 5 / 4; }
  .oui-hero__card { position: static; width: auto; margin: 16px 12px 0; }
  .oui-hero__float { position: static; margin: 12px 12px 0; }
  .oui-hero__cards { flex-direction: column; margin-inline: 4px; }
  .oui-hero__evt { margin-top: 0; }
}

/* ============ Sticky mobil demó-CTA (GP Hook Element helye; itt a stílus) ============ */
.oui-sticky-cta { display: none; }
@media (max-width: 760px) {
  .oui-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: block; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(247, 248, 250, 0.92); backdrop-filter: blur(8px); border-top: 1px solid var(--c-border);
  }
  .oui-sticky-cta .oui-btn { width: 100%; }
  body { padding-bottom: 76px; } /* ne takarja a lábléc-tartalmat */
}