/* Veyanix nyilvános oldalak: közös keret (fejléc, mobil dokk, lábléc, süti-sáv igazítás).
   Minden nyilvános oldal <head>-jének végén töltődik be, az oldal saját stílusa UTÁN, ezért a régi, oldalanként
   másolt fejléc/lábléc szabályokat felülírja. A "body" előtag a súly miatt kell (a lapok közepén is vannak <style> blokkok).
   Markup: inc/layout/site-header.php és inc/layout/site-footer.php. Tokenek: az oldal :root-ja (levendula, tinta, betűk). */

:root{
  --sc-bar-h:68px;
  --sc-bar-r:20px;
  --sc-bar-bg:rgba(255,255,255,.95);
  --sc-bar-line:rgba(185,175,230,.45);
  --sc-sh-1:0 1px 2px rgba(23,18,44,.05),0 10px 28px -16px rgba(60,40,140,.22);
  --sc-sh-2:0 18px 44px -22px rgba(60,40,140,.38);
  --sc-night:#130F24;
}

/* ---------- Ugrás a tartalomra (billentyűzet) ---------- */
body .skip-link{
  position:fixed; left:16px; top:-60px; z-index:1000;
  padding:12px 18px; border-radius:999px;
  background:var(--lavender-700); color:#fff; font:600 14px/1 var(--font-display); text-decoration:none;
  transition:top var(--duration-base) var(--ease-standard);
}
body .skip-link:focus{ top:12px; outline:2px solid #fff; outline-offset:2px; }

/* ---------- Fejléc: egy lebegő, fehér sáv minden oldalon ---------- */
body .site-header{ position:sticky; top:0; z-index:40; padding:12px 0; }
body .site-header .container{
  box-sizing:border-box;
  width:calc(100% - 48px); max-width:1280px; margin:0 auto;
  display:flex; align-items:center; gap:20px;
  height:var(--sc-bar-h); padding:0 10px 0 20px;
  background:var(--sc-bar-bg);
  border:1px solid var(--sc-bar-line);
  border-radius:var(--sc-bar-r);
  box-shadow:var(--sc-sh-1);
  transition:box-shadow var(--duration-base) var(--ease-standard);
}
body .site-header.is-scrolled .container{ box-shadow:var(--sc-sh-2); }
body .site-header .brand{ display:flex; align-items:center; flex:none; border-radius:10px; }
body .site-header .brand-logo{ display:block; width:auto; height:40px; }
body .site-header .brand-logo.lg-dark{ display:none; }

body .main-nav{ display:flex; align-items:center; gap:2px; font:600 15px/1 var(--font-display); }
body .main-nav a{
  color:var(--ink-600); padding:11px 14px; border-radius:12px; white-space:nowrap; text-decoration:none;
  transition:background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
body .main-nav a:hover{ color:var(--lavender-700); background:var(--lavender-050); }
body .main-nav a[aria-current="page"]{ color:var(--lavender-700); background:var(--lavender-100); }

/* "Kinek szól" lenyíló (asztal): egyetlen gomb, nem külön oldal. Rámutatásra és kattintásra nyílik; az almenü a gomb alatt, a sáv alá nyúlik.
   A refresh.css a .main-nav a elemeire teszi a vonal-jelzőt (aktív / hover): ugyanezt kapja a gomb is, hogy a menüpontok egyformák legyenek.
   A panel és a gomb közti hidat a panel felső kitöltése adja (nem csukódik be út közben); gombbal / billentyűvel a JS teszi .is-open-ra. */
body .main-nav .nav-dd{ position:relative; display:flex; align-items:center; }
body .main-nav .nav-dd-trigger{
  position:relative; display:inline-flex; align-items:center; gap:5px; padding:11px 10px 11px 14px; border:0; border-radius:0; background:none;
  color:var(--v-text, var(--ink-600)); font:inherit; white-space:nowrap; cursor:pointer;
  transition:color var(--duration-base) var(--ease-standard);
}
body .main-nav .nav-dd:hover .nav-dd-trigger, body .main-nav .nav-dd.is-open .nav-dd-trigger, body .main-nav .nav-dd.is-current .nav-dd-trigger{ color:var(--v-ink, var(--lavender-700)); }
body .main-nav .nav-dd-trigger svg{ width:15px; height:15px; flex:none; transition:transform var(--duration-base) var(--ease-standard); }
body .main-nav .nav-dd.is-open .nav-dd-trigger svg{ transform:rotate(180deg); }
body .main-nav .nav-dd-trigger::after{
  content:""; position:absolute; left:14px; right:10px; bottom:2px; height:2px; border-radius:2px; background:var(--v-accent, var(--lavender-600));
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
body .main-nav .nav-dd.is-current .nav-dd-trigger::after{ transform:scaleX(1); }
body .main-nav .nav-dd:hover .nav-dd-trigger::after, body .main-nav .nav-dd.is-open .nav-dd-trigger::after{ transform:scaleX(1); opacity:.45; }
body .main-nav .nav-dd.is-current:hover .nav-dd-trigger::after, body .main-nav .nav-dd.is-current.is-open .nav-dd-trigger::after{ opacity:1; }
body .main-nav .nav-dd-trigger:focus-visible{ outline:2px solid var(--lavender-600); outline-offset:1px; }
body .main-nav .nav-dd-panel{
  position:absolute; z-index:60; top:100%; left:-10px; width:max-content; min-width:100%; max-width:min(380px, calc(100vw - 32px)); padding-top:14px;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
}
body .main-nav .nav-dd.is-open .nav-dd-panel{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media (hover:hover){
  body .main-nav .nav-dd:hover:not(.is-dismissed) .nav-dd-panel{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
}
body .main-nav .nav-dd-card{
  display:flex; flex-direction:column; gap:1px; padding:10px; background:#fff; border:1px solid var(--sc-bar-line); border-radius:20px; box-shadow:var(--sc-sh-2);
}
body .main-nav .nav-dd-h{ margin:10px 12px 3px; font:700 11px/1.4 var(--font-body); letter-spacing:.09em; text-transform:uppercase; color:#6E698A; }
body .main-nav .nav-dd-h:first-child{ margin-top:4px; }
body .main-nav .nav-dd-panel a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; font:600 15px/1.3 var(--font-display); white-space:normal; }
/* az almenü elemein a hover / aktív jelzés a sor háttere (a menüsor alsó vonala itt egy hosszú csík lenne) */
body .main-nav .nav-dd-panel a::after{ display:none; }
body .main-nav .nav-dd-panel a:hover, body .main-nav .nav-dd-panel a[aria-current="page"]{ background:var(--lavender-100) !important; color:var(--lavender-700); }
/* 1280 px alatt a "Kezdőlap" a menüből kimarad (a logó ugyanoda visz), hogy a hetedik elem is elférjen a sávban (mérve: 1181–1215 px közt e nélkül a jobb oldali gombok kilógnának) */
@media (max-width:1279px){
  body .main-nav .nav-home{ display:none; }
}
@media (max-width:1180px){
  body .main-nav .nav-dd-trigger{ padding:11px 8px 11px 10px; }
  body .main-nav .nav-dd-trigger::after{ left:10px; right:8px; }
}
/* a legkeskenyebb asztali sávban (1021–1100 px) szűkebb a menüpontok kitöltése, hogy maradjon tartalék a gombok előtt */
@media (max-width:1100px){
  html body .main-nav a{ padding:11px 8px; } /* "html" az előtagban: a fájl későbbi, 1180 px alatti szabályánál (azonos erősség) ez erősebb legyen */
  html body .main-nav .nav-dd-trigger{ padding:11px 6px 11px 8px; }
  html body .main-nav .nav-dd-trigger::after{ left:8px; right:6px; }
}
@media (prefers-reduced-motion:reduce){
  body .main-nav .nav-dd-trigger, body .main-nav .nav-dd-trigger svg, body .main-nav .nav-dd-trigger::after, body .main-nav .nav-dd-panel{ transition:none; }
}

body .header-spacer{ flex:1; }
body .header-actions{ display:flex; align-items:center; gap:6px; }
body .login-link{
  display:inline-flex; align-items:center; height:44px; padding:0 16px; border-radius:999px;
  font:600 14px/1 var(--font-display); color:var(--lavender-700); text-decoration:none; white-space:nowrap;
}
body .login-link:hover{ background:var(--lavender-100); color:var(--lavender-700); }
body .header-cta{ height:44px; padding:0 20px; white-space:nowrap; }
body .header-cta .hc-short{ display:none; }

body .site-header a:focus-visible,
body .app-dock a:focus-visible,
body .site-footer a:focus-visible{ outline:2px solid var(--lavender-600); outline-offset:3px; }

@media (max-width:1180px){
  body .main-nav a{ padding:11px 10px; font-size:14px; }
  body .site-header .container{ gap:12px; }
}
/* 1020 px alatt a menü az alsó dokkba költözik (nincs hamburger); a fejléc rögzített. */
@media (max-width:1020px){
  body .main-nav{ display:none; }
  body .site-header{ position:fixed; left:0; right:0; top:0; padding-top:calc(10px + env(safe-area-inset-top)); }
  body > main{ padding-top:calc(var(--sc-bar-h) + 22px + env(safe-area-inset-top)); }
}
@media (max-width:720px){
  :root{ --sc-bar-h:60px; --sc-bar-r:18px; }
  body .site-header{ padding:calc(8px + env(safe-area-inset-top)) 0 8px; }
  body .site-header .container{ width:calc(100% - 24px); padding:0 8px 0 14px; gap:8px; }
  body .site-header .brand-logo{ height:34px; }
  body > main{ padding-top:calc(var(--sc-bar-h) + 16px + env(safe-area-inset-top)); }
}
@media (max-width:520px){
  body .header-cta .hc-long{ display:none; }
  body .header-cta .hc-short{ display:inline; }
  body .header-cta{ padding:0 16px; font-size:14px; }
  body .login-link{ padding:0 12px; font-size:14px; }
}
@media (max-width:400px){
  body .header-cta .btn-ic{ display:none; }
  body .site-header .container{ padding:0 6px 0 12px; gap:4px; }
  body .site-header .brand{ flex:0 1 auto; min-width:0; }
  body .site-header .brand-logo{ height:30px; }
  body .login-link{ padding:0 10px; font-size:13.5px; }
  body .header-cta{ padding:0 14px; font-size:13.5px; }
}
/* legkeskenyebb telefon: a belépés a láblécben is elérhető, a fő gomb kapja a helyet */
@media (max-width:345px){
  body .login-link{ display:none; }
}

/* ---------- Mobil alsó dokk ---------- */
body .app-dock{ display:none; }
@media (max-width:1020px){
  body > main{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  body .app-dock{
    display:flex; align-items:stretch; gap:2px;
    position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:30;
    max-width:560px; margin:0 auto; padding:5px;
    background:var(--sc-bar-bg); border:1px solid var(--sc-bar-line); border-radius:22px; box-shadow:var(--sc-sh-2);
  }
  body .app-dock-item{
    flex:1 1 0; min-width:0; height:54px; padding:6px 2px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    border-radius:17px; color:var(--ink-600); text-decoration:none; overflow:hidden;
    transition:background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
  }
  body .app-dock-item:hover{ color:var(--lavender-700); background:var(--lavender-050); }
  body .app-dock-icon{ display:flex; flex:none; }
  body .app-dock-icon svg{ width:20px; height:20px; }
  body .app-dock-label{ display:block; max-width:100%; font:600 11px/1 var(--font-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body .app-dock-item.is-active{ background:var(--lavender-100); color:var(--lavender-700); box-shadow:none; }
  body .app-dock-item.is-active:hover{ color:var(--lavender-700); }
  /* a "Kinek" elem gomb (a lenyíló lapot nyitja), nem link: a gomb alapstílusát le kell venni */
  body button.app-dock-item{ appearance:none; -webkit-appearance:none; border:0; background:transparent; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  body .app-dock button:focus-visible{ outline:2px solid var(--lavender-600); outline-offset:-2px; }
}
/* a "Kinek szól" lap a dokk fölött (telefon): hat oldal csoportonként, nagy érintési felület; a hidden attribútum zárja */
body .dock-sheet{ display:none; }
@media (max-width:1020px){
  body .dock-sheet:not([hidden]){
    display:flex; flex-direction:column; gap:1px; position:fixed; left:10px; right:10px; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:31;
    max-width:560px; max-height:min(68vh, 520px); margin:0 auto; padding:12px; overflow-y:auto; overscroll-behavior:contain;
    background:#fff; border:1px solid var(--sc-bar-line); border-radius:22px; box-shadow:var(--sc-sh-2);
    animation:dock-sheet-in var(--duration-base) var(--ease-standard);
  }
  body .dock-sheet-h{ margin:10px 12px 3px; font:700 11px/1.4 var(--font-body); letter-spacing:.09em; text-transform:uppercase; color:#6E698A; }
  body .dock-sheet-h:first-child{ margin-top:2px; }
  body .dock-sheet a{ display:flex; align-items:center; min-height:48px; padding:10px 12px; border-radius:14px; font:600 16px/1.3 var(--font-display); color:var(--ink-600); text-decoration:none; }
  body .dock-sheet a:hover, body .dock-sheet a[aria-current="page"]{ background:var(--lavender-100); color:var(--lavender-700); }
  body .dock-sheet a:focus-visible{ outline:2px solid var(--lavender-600); outline-offset:-2px; }
}
@keyframes dock-sheet-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ body .dock-sheet{ animation:none !important; } }
@media (max-width:360px){
  body .app-dock{ left:6px; right:6px; padding:4px; }
  body .app-dock-item{ height:50px; }
  body .app-dock-label{ font-size:10.5px; }
}
/* 6 elem a dokkban: a legkeskenyebb telefonon (320 px) a "Kezdőlap" / "Funkciók" / "Működés" felirat 10,5 px-en 4 px-szel szélesebb a helyénél, ezért ott kisebb */
@media (max-width:340px){
  body .app-dock-label{ font-size:9.5px; }
}

/* ---------- Lábléc: oszlopos, sötét éjszakai sáv ---------- */
body .site-footer{
  margin-top:0; padding:clamp(48px,6vw,72px) 0 28px;
  background:#FBFAFD; color:var(--ink-600,#55506A); border-top:1px solid #E8E4F1;
}
body .site-footer .container{ display:block; box-sizing:border-box; max-width:1280px; margin:0 auto; padding:0 24px; }
body .footer-top{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.55fr) minmax(0,.8fr) minmax(0,1fr); gap:32px 32px;
  padding-bottom:40px; border-bottom:1px solid #E8E4F1;
}
body .footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
body .footer-brand .brand-logo{ display:block; height:40px; width:auto; }
body .footer-brand .tagline{ margin:0; font:400 15px/1.5 var(--font-body); color:var(--ink-600,#55506A); }
body .footer-cta{ margin-top:6px; height:44px; padding:0 20px; }
body .footer-col{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
body .footer-col h2{
  margin:0 0 10px; font:600 14px/1 var(--font-display); color:#6E698A; /* kontraszt >= 4,5:1 a lábléc háttérén (Lighthouse) */
}
body .footer-col a{
  display:inline-flex; align-items:center; min-height:40px;
  font:500 15px/1.3 var(--font-display); color:#16122A; text-decoration:none;
}
body .footer-col a:hover{ color:var(--lavender-700,#5A49B3); text-decoration:underline; text-underline-offset:4px; }
body .footer-col a[aria-current="page"]{ color:var(--lavender-700,#5A49B3); }
/* "Kérdezd az AI-t" oszlop: egyszínű ikon a név előtt; a segítő szöveg ("új lapon nyílik") csak képernyőolvasónak látszik */
/* közösségi ikonok a márka-oszlopban: 44 px-es kattintási felület, a látható ikon a szöveg bal széléhez igazítva */
body .footer-social{ display:flex; align-items:center; gap:2px; margin:0 0 0 -12px; }
body .footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; color:#6E698A; }
body .footer-social a:hover, body .footer-social a:focus-visible{ color:var(--lavender-700,#5A49B3); background:#F0ECFA; }
body .footer-social svg{ width:20px; height:20px; }
body .footer-ai a svg{ flex:none; width:18px; height:18px; margin-right:10px; color:#6E698A; }
body .footer-ai a:hover svg, body .footer-ai a:focus-visible svg{ color:var(--lavender-700,#5A49B3); }
body .footer-vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
body .footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:18px;
  font:400 13px/1.4 var(--font-body); color:#6E698A;
}
body .footer-bottom small{ font:inherit; }
/* jogi hivatkozások a © sor mellett: kicsi, aláhúzott szöveg (mint egy jogi sor), nem külön oszlop */
body .footer-legal{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 22px; }
body .footer-legal a{ display:inline-flex; align-items:center; min-height:32px; font:400 13px/1.4 var(--font-body); color:#55506A; text-decoration:underline; text-decoration-color:rgba(85,80,106,.4); text-underline-offset:3px; }
body .footer-legal a:hover{ color:var(--lavender-700,#5A49B3); text-decoration-color:currentColor; }
/* a régi, egy soros lábléc elemei (ha egy oldal még azt használná) */
body .site-footer .footer-spacer, body .site-footer .footer-lang{ display:none; }

@media (max-width:1100px){
  body .footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  body .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  body .site-footer .container{ padding:0 20px; }
  body .footer-top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; }
  body .footer-bottom{ flex-direction:column; align-items:flex-start; gap:6px; }
  body .footer-legal a{ min-height:40px; }
}
@media (max-width:1020px){
  body .site-footer{ padding-bottom:calc(104px + env(safe-area-inset-bottom)); }
}

/* ---------- Süti-sáv: asztalon a bal alsó sarokban, mobilon kompakt, a dokk fölött ---------- */
body #vcc{ left:24px; right:auto; bottom:24px; margin:0; max-width:420px; padding:18px; border-radius:20px; border-color:var(--sc-bar-line); box-shadow:var(--sc-sh-2); }
body #vcc h2{ font:600 16px/1.3 var(--font-display); }
body #vcc p{ font-size:13.5px; line-height:1.5; }
body #vcc .vcc-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
body #vcc .vcc-row button{ min-height:44px; padding:10px 12px; font:600 14px/1.1 var(--font-display); }
body #vcc .vcc-row .vcc-primary{ grid-column:1 / -1; }
@media (max-width:1020px){
  body #vcc{ left:10px; right:10px; max-width:560px; margin:0 auto; bottom:calc(84px + env(safe-area-inset-bottom)); padding:16px; }
}
@media (max-width:520px){
  body #vcc p{ font-size:13px; margin-bottom:10px; }
}

@media (prefers-reduced-motion:reduce){
  body .site-header .container, body .main-nav a, body .app-dock-item, body .skip-link{ transition:none; }
}