/*
 * Príma Sörpad · alap és közös komponensek
 *
 * A statikus oldal base.css és site.css alaprétegének átirata az Avada
 * DOM-jára. A színek a tokenek.css-ből jönnek (az Avada palettára kötve),
 * a betű, a tartalomszélesség és a szekciók térköze a globális
 * beállításokból. Itt csak az van, amit beállítással nem lehet elérni.
 *
 * Az osztálynevek a statikus oldaléi, az elemek „CSS Class" mezőjébe írva:
 *   container  psp-section, psp-motif-section
 *   oszlop     psp-head
 *   Title      psp-eyebrow, psp-split
 *   Text       psp-lead
 *   Button     psp-pill (+ --amber, --cream, --outline, --lg, --sm)
 */

/* ── 1 · Alap ─────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

.fusion-body {
  background: var(--ink-900);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

[hidden] { display: none !important; }

.fusion-body h1, .fusion-body h2, .fusion-body h3,
.fusion-body h4, .fusion-body h5, .fusion-body h6 { text-wrap: balance; }

.fusion-body p { margin: 0 0 var(--space-4); }
.fusion-body p:last-child { margin-bottom: 0; }
.fusion-body .fusion-text > :last-child { margin-bottom: 0; }

.fusion-body a { text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--duration-fast) var(--ease-standard); }
/* A szövegbe írt gombok (pirula, kis gomb) nem aláhúzott linkek. */
.fusion-body .post-content .fusion-text a:not(.psp-pill):not(.psp-btn) { text-decoration: underline; }
.fusion-body .fusion-text a.psp-pill,
.fusion-body .fusion-text a.psp-btn { text-decoration: none; }

.fusion-body img, .fusion-body svg, .fusion-body video { max-width: 100%; }

.fusion-body :where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::selection { background: var(--amber-200); color: var(--ink-800); }

/* Az Avada reszponzív tipográfiája (JS) 1000 px alatt képpontra fagyasztja a
   Title elemek címsorának méretét. A design clamp()-pel méretez a burkolón,
   a címsor ahhoz igazodik: ezért itt mindig 1em. */
.fusion-body .fusion-title .fusion-title-heading { font-size: 1em !important; }

/* A horgonyra ugrás ne csússzon a visszatérő fejléc alá. */
.fusion-fullwidth[id] { scroll-margin-top: 104px; }

/* ── 2 · A lap kerete ─────────────────────────────────────────────────────
   Sötét keret, benne a lap: fent a bordó sáv lekerekítve, a tartalom alul
   lekerekítve, a lábléc külön lekerekített tömb. A statikus oldalon ez a
   .psp-frame, .psp-column és .psp-footerwrap volt. */

.fusion-body #boxed-wrapper { background: var(--ink-900); }

.fusion-body #wrapper {
  padding: var(--psp-frame-pad);
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--ink-900);
}

.fusion-body #main {
  padding: 0;
  background: var(--surface-page);
  border-bottom-left-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
  overflow: clip;
}

.fusion-body #main > .fusion-row { max-width: none; }

.fusion-body .fusion-tb-footer {
  margin-top: var(--psp-frame-pad);
  border-radius: var(--radius-2xl);
  overflow: clip;
}

@media (max-width: 760px) {
  :root { --psp-frame-pad: 8px; }
}

/* ── 3 · Szekció ──────────────────────────────────────────────────────── */

.fusion-fullwidth.psp-section { position: relative; overflow: clip; isolation: isolate; }

/* Háttérmotívum: a szekció két szélén tükrözve, a tartalom mögött. Két
   egymás utáni szekció nem lehet motívumos. */
.fusion-fullwidth.psp-motif-section { position: relative; overflow: hidden; isolation: isolate; }
.fusion-fullwidth.psp-motif-section::before,
.fusion-fullwidth.psp-motif-section::after {
  content: "";
  position: absolute;
  top: -8%;
  width: var(--motif-width);
  aspect-ratio: 1586 / 1413;
  background: url("../kepek/bg-element.svg") no-repeat center / contain;
  opacity: var(--motif-opacity);
  pointer-events: none;
  z-index: -1;
}
.fusion-fullwidth.psp-motif-section::before { left: -9%; }
.fusion-fullwidth.psp-motif-section::after { right: -9%; transform: scaleX(-1); }
@media (max-width: 1000px) {
  .fusion-fullwidth.psp-motif-section::before { left: -12%; }
  .fusion-fullwidth.psp-motif-section::after { right: -12%; }
}
@media (max-width: 700px) {
  .fusion-fullwidth.psp-motif-section::before { left: -20%; }
  .fusion-fullwidth.psp-motif-section::after { right: -20%; }
}

/* ── 4 · Szekciófej ───────────────────────────────────────────────────── */

.fusion-layout-column.psp-head > .fusion-column-wrapper {
  /* Oszlopközös containerben a fej a két szélső köz nélkül számol. */
  max-width: min(760px, calc(100% - var(--awb-spacing-left-large, 0px) - var(--awb-spacing-right-large, 0px)));
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  text-align: center;
}
.fusion-layout-column.psp-head { margin-bottom: 32px; }
.fusion-layout-column.psp-head--left > .fusion-column-wrapper {
  max-width: none;
  margin-left: var(--awb-spacing-left-large, 0px);
  margin-right: var(--awb-spacing-right-large, 0px);
  align-items: flex-start;
  text-align: left;
}
@media (max-width: 900px) {
  .fusion-layout-column.psp-head { margin-bottom: 24px; }
}

/* ── 5 · Eyebrow: vonal, szó, vonal ───────────────────────────────────── */

/* Az Avada a Title elem színét és betűméretét a burkolón, változóból adja
   (--awb-text-color, --awb-font-size), erős szelektorral: ezért itt is a
   változót állítjuk, nem a tulajdonságot. */
/* A statikus oldalon az eyebrow egy 16 px-es szövegsorban ülő inline elem:
   a sor 24,8 px magas, a felirat a szekció tetejétől ugyanoda esik. Itt ugyanez a
   doboz, hogy a fej alatti cím pontosan ugyanoda kerüljön. */
.fusion-body .fusion-title.psp-eyebrow {
  --awb-text-color: var(--amber-800);
  --awb-font-size: 11px;
  margin: 0 !important;
  min-height: 24.8px;
  padding-top: 8px;
  box-sizing: border-box;
  align-items: flex-start;
  line-height: 1;
}
.fusion-body .fusion-title.psp-eyebrow .fusion-title-heading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.fusion-body .fusion-title.psp-eyebrow .fusion-title-heading::before,
.fusion-body .fusion-title.psp-eyebrow .fusion-title-heading::after {
  content: "";
  flex: 0 0 auto;
  width: 3.2em;
  height: 2px;
  background: var(--amber-700);
}
/* A ritkítás az utolsó betű után is tesz egy közt: a jobb vonal ennyivel beljebb jön. */
.fusion-body .fusion-title.psp-eyebrow .fusion-title-heading::after { margin-left: -0.18em; }
.fusion-body .fusion-title.psp-eyebrow--inverse { --awb-text-color: var(--amber-500); }
.fusion-body .fusion-title.psp-eyebrow--inverse .fusion-title-heading::before,
.fusion-body .fusion-title.psp-eyebrow--inverse .fusion-title-heading::after { background: var(--amber-500); }

/* Saját markupban (pluginok): <span class="psp-eyebrow">Szó</span> */
span.psp-eyebrow, p.psp-eyebrow, div.psp-eyebrow:not(.fusion-title) {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--font-body); font-size: 11px; font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark); text-transform: uppercase;
  white-space: nowrap; line-height: 1; color: var(--amber-800);
}
span.psp-eyebrow::before, span.psp-eyebrow::after,
p.psp-eyebrow::before, p.psp-eyebrow::after,
div.psp-eyebrow:not(.fusion-title)::before, div.psp-eyebrow:not(.fusion-title)::after {
  content: ""; flex: 0 0 auto; width: 3.2em; height: 2px; background: var(--amber-700);
}
span.psp-eyebrow::after, p.psp-eyebrow::after, div.psp-eyebrow:not(.fusion-title)::after { margin-left: -0.18em; }
span.psp-eyebrow--inverse, p.psp-eyebrow--inverse { color: var(--amber-500); }
span.psp-eyebrow--inverse::before, span.psp-eyebrow--inverse::after,
p.psp-eyebrow--inverse::before, p.psp-eyebrow--inverse::after { background: var(--amber-500); }

/* ── 6 · Kétsoros cím ─────────────────────────────────────────────────── */

.fusion-body .fusion-title.psp-split {
  --awb-text-color: var(--text-heading);
  --awb-font-size: clamp(30px, 4.4vw, 44px);
  margin: 12px 0 0 !important;
}
.fusion-body .fusion-title.psp-split .fusion-title-heading,
.psp-split:not(.fusion-title) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-align: center;
}
.psp-split:not(.fusion-title) { font-size: clamp(30px, 4.4vw, 44px); color: var(--text-heading); }
.psp-split:not(.fusion-title) { margin-top: 12px; }
/* A statikus oldalon a betűköz a címsor alapméretéhez (h1 48, h2 38, h3 30 px)
   igazodik, nem a clamp()-es mérethez: ezért itt képpontban áll. */
.fusion-body .fusion-title.psp-split h1.fusion-title-heading { letter-spacing: -1.2px; }
.fusion-body .fusion-title.psp-split h2.fusion-title-heading { letter-spacing: -0.95px; }
.fusion-body .fusion-title.psp-split h3.fusion-title-heading { letter-spacing: -0.75px; }
.fusion-body .fusion-title.psp-split .fusion-title-heading em,
.psp-split:not(.fusion-title) em {
  display: block;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.015em;
  color: var(--amber-800);
}
.fusion-body .fusion-title.psp-split--left .fusion-title-heading,
.psp-split--left:not(.fusion-title) { text-align: left; }
.fusion-body .fusion-title.psp-split--sm { --awb-font-size: clamp(26px, 3.4vw, 34px); }
.psp-split--sm:not(.fusion-title) { font-size: clamp(26px, 3.4vw, 34px); }
.fusion-body .fusion-title.psp-split--inverse { --awb-text-color: var(--amber-100); }
.psp-split--inverse:not(.fusion-title) { color: var(--amber-100); }
.fusion-body .fusion-title.psp-split--inverse .fusion-title-heading em,
.psp-split--inverse:not(.fusion-title) em { color: var(--amber-200); }
/* Az eyebrow nélküli cím nem kap felső közt. */
.fusion-body .fusion-column-wrapper > .fusion-title.psp-split:first-child { margin-top: 0 !important; }

/* ── 7 · Bevezető ─────────────────────────────────────────────────────── */

.fusion-body .fusion-text.psp-lead,
p.psp-lead {
  margin: 12px auto 0;
  max-width: 54ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text-muted);
}
.fusion-layout-column.psp-head--left .fusion-text.psp-lead { margin-left: 0; }
.fusion-body .fusion-text.psp-lead--inverse,
p.psp-lead--inverse { color: color-mix(in srgb, var(--amber-100) 72%, transparent); }

/* ── 8 · Ikon ─────────────────────────────────────────────────────────── */

.fusion-body .fontawesome-icon[class*="psp-i-"] {
  float: none;
  margin: 0;
  line-height: 1;
}

/* ── 9 · Pirula gomb ──────────────────────────────────────────────────────
   Natív Button elem a psp-pill osztállyal: a felirat után az ikon egy
   korongban ül, hoverre az ikon jobbra kiúszik, balról beúszik a párja.
   Saját markupban: <a class="psp-pill"><span class="psp-pill__szoveg">…</span>
   <i class="psp-i-arrow-right psp-pill__ikon"></i></a> */

.psp-pill,
.fusion-body .fusion-button.psp-pill {
  --awb-padding-top: 0px; --awb-padding-bottom: 0px;
  --awb-padding-left: 24px; --awb-padding-right: 5px;
  --psp-pill-bg: var(--ink-800);
  --psp-pill-fg: var(--amber-100);
  --psp-pill-bg-h: var(--ink-900);
  --psp-pill-fg-h: var(--amber-100);
  --psp-disc-bg: var(--amber-500);
  --psp-disc-fg: var(--ink-900);
  --psp-disc-bg-h: var(--amber-100);
  --psp-disc-fg-h: var(--ink-900);
  --psp-disc: 40px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 5px 0 24px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 14.5px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  max-width: 100%;
  background: var(--psp-pill-bg);
  color: var(--psp-pill-fg);
  box-shadow: none;
  transition: var(--transition-control);
}
.psp-pill .fusion-button-text,
.fusion-body .fusion-button.psp-pill .fusion-button-text,
.psp-pill .psp-pill__szoveg { color: inherit; padding: 0; }

.psp-pill:hover,
.fusion-body .fusion-button.psp-pill:hover,
.fusion-body .fusion-button.psp-pill:focus,
.fusion-body .fusion-button.psp-pill:active {
  background: var(--psp-pill-bg-h);
  color: var(--psp-pill-fg-h);
  border-color: transparent;
  box-shadow: none;
}
.fusion-body .fusion-button.psp-pill:hover .fusion-button-text,
.fusion-body .fusion-button.psp-pill:focus .fusion-button-text,
.fusion-body .fusion-button.psp-pill:active .fusion-button-text { color: inherit; }
.psp-pill:active,
.fusion-body .fusion-button.psp-pill:active { transform: translateY(1px); }

/* A korong: maga az ikon elem. */
.psp-pill > i,
.fusion-body .fusion-button.psp-pill > i {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--psp-disc);
  height: var(--psp-disc);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font-size: 17px;
  line-height: 1;
  background: var(--psp-disc-bg);
  color: var(--psp-disc-fg);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.psp-pill > i::before,
.psp-pill > i::after {
  grid-area: 1 / 1;
  transition: transform var(--duration-base) var(--ease-standard);
}
/* A beúszó pár: ugyanaz a maszk, balról vár. */
.psp-pill > i::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  -webkit-mask: var(--psp-ikon) no-repeat center / contain;
  mask: var(--psp-ikon) no-repeat center / contain;
  background-color: currentColor;
  transform: translateX(-200%);
}
.psp-pill:hover > i::before { transform: translateX(200%); }
.psp-pill:hover > i::after { transform: translateX(0); }
.psp-pill:hover > i,
.fusion-body .fusion-button.psp-pill:hover > i { background: var(--psp-disc-bg-h); color: var(--psp-disc-fg-h); }

/* Méretek. */
.psp-pill--lg,
.fusion-body .fusion-button.psp-pill--lg { height: 58px; --psp-disc: 48px; }
.psp-pill--sm,
.fusion-body .fusion-button.psp-pill--sm {
  height: 40px; gap: 10px; padding-left: 18px; font-size: 13px;
  --awb-padding-left: 18px; --psp-disc: 30px;
}
.psp-pill--sm > i,
.fusion-body .fusion-button.psp-pill--sm > i { font-size: 14px; }

/* Változatok. */
.psp-pill--amber,
.fusion-body .fusion-button.psp-pill--amber {
  --psp-pill-bg: var(--amber-500); --psp-pill-fg: var(--ink-900);
  --psp-pill-bg-h: var(--amber-600); --psp-pill-fg-h: var(--ink-900);
  --psp-disc-bg: var(--ink-800); --psp-disc-fg: var(--amber-100);
  --psp-disc-bg-h: var(--ink-900); --psp-disc-fg-h: var(--amber-100);
}
.psp-pill--cream,
.fusion-body .fusion-button.psp-pill--cream {
  --psp-pill-bg: var(--amber-100); --psp-pill-fg: var(--ink-900);
  --psp-pill-bg-h: var(--amber-200); --psp-pill-fg-h: var(--ink-900);
  --psp-disc-bg: var(--ink-800); --psp-disc-fg: var(--amber-100);
  --psp-disc-bg-h: var(--ink-900); --psp-disc-fg-h: var(--amber-100);
}
.psp-pill--outline,
.fusion-body .fusion-button.psp-pill--outline {
  --psp-pill-bg: transparent; --psp-pill-fg: var(--amber-100);
  --psp-pill-bg-h: color-mix(in srgb, var(--amber-100) 10%, transparent); --psp-pill-fg-h: var(--amber-100);
  --psp-disc-bg: var(--amber-100); --psp-disc-fg: var(--ink-900);
  --psp-disc-bg-h: var(--amber-500); --psp-disc-fg-h: var(--ink-900);
  border-color: color-mix(in srgb, var(--amber-100) 40%, transparent);
}
.psp-pill--outline:hover,
.fusion-body .fusion-button.psp-pill--outline:hover,
.fusion-body .fusion-button.psp-pill--outline:focus { border-color: color-mix(in srgb, var(--amber-100) 40%, transparent); }

/* ── 10 · Kis gomb és címke ───────────────────────────────────────────── */

.psp-btn,
.fusion-body .fusion-button.psp-btn {
  --awb-padding-top: 0px; --awb-padding-bottom: 0px;
  --awb-padding-left: 14px; --awb-padding-right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--control-height-sm);
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--amber-700);
  background: var(--amber-500);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-control);
}
.fusion-body .fusion-button.psp-btn .fusion-button-text,
.fusion-body .fusion-button.psp-btn > i { color: inherit; }
.psp-btn:hover,
.fusion-body .fusion-button.psp-btn:hover,
.fusion-body .fusion-button.psp-btn:focus { background: var(--amber-600); color: var(--ink-900); border-color: var(--amber-700); }
.psp-btn:active,
.fusion-body .fusion-button.psp-btn:active { transform: translateY(1px); }

.psp-tag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-heading);
}

/* ── 11 · Közös animációk (popup, nagyító) ────────────────────────────── */

@keyframes psp-pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes psp-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── 12 · Képernyőolvasónak szóló szöveg ──────────────────────────────── */

.psp-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}