/* Header, footer, gomb, kártya, badge, pattern. */

/* --- Gomb --------------------------------------------------- */
.nw-btn {
  display: inline-flex; align-items: center; gap: var(--nw-space-1);
  padding: 0.75rem 1.5rem;
  font-family: var(--nw-font-display);
  font-size: var(--nw-text-sm);
  font-weight: var(--nw-fw-semibold);
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: var(--nw-radius-pill);
  transition: background var(--nw-dur-fast) var(--nw-ease),
              color var(--nw-dur-fast) var(--nw-ease);
}
.nw-btn:hover { background: var(--nw-fg); color: var(--nw-bg); }

/* Sun-kitöltésű gomb. A felirat NAVY — fehérrel 1,97:1 lenne. */
.nw-btn--sun {
  background: var(--nw-sun);
  color: var(--nw-on-sun);
  border-color: var(--nw-sun);
}
.nw-btn--sun:hover { background: var(--nw-white); color: var(--nw-navy); border-color: var(--nw-white); }

/* A Contact gomb hoveren opak feherre valt (lasd feljebb), a lebego
   fejlec hattere viszont attetszo -- navy szegely nelkul a gomb
   elveszne a mogotte atlatszo hatteren. */
.nw-header__contact:hover { border-color: var(--nw-navy); }

/* Nagy valtozat: ahol a gomb a szekcio fo tartalma, nem melleklete. */
.nw-btn--lg {
  padding: 1rem 2rem;
  font-size: var(--nw-text-base);
}
/* Kis valtozat: a lebego fejlec 56px-es savjahoz meretezve. Korabban
   a markup hasznalta, de a class-hoz nem tartozott szabaly. */
.nw-btn--sm {
  padding: 0.5rem 1.1rem;
}
/* Kulso linket jelzo nyil. A gombban all, tehat currentColor -- a Sun-gomb
   navy feliratan navy, hoverben ugyanugy valt. */
.nw-btn__ext {
  font-size: 1.1em;
  line-height: 1;
  transition: transform var(--nw-dur-fast) var(--nw-ease);
}
.nw-btn:hover .nw-btn__ext { transform: translate(2px, -2px); }

/* --- Lebegő nav ------------------------------------------------
   Nem teljes szélességű sáv: önálló, lekerekített, lebegő konténer.
   A teljes szélességű navy utility-bar volt az egyik dolog, ami a
   Lufthansára emlékeztetett.

   Referencia: rivian.com. A kódjukat lemértük: a header egy rounded,
   overflow-hidden konténer, ami NYITÁSKOR UGYANABBAN a dobozban nő
   meg, és közben a saját sarokkerekítése animálódik. Nem dropdown
   alatta: a menü belül van. Ezt vettük át, a palettájukat nem. */
.nw-header {
  position: fixed;
  inset-block-start: var(--nw-nav-inset);
  inset-inline: var(--nw-nav-inset);
  z-index: var(--nw-z-header);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* A csoport tartja ossze a menu-shellt es a kulon lebego Contact gombot:
   egy sorban, kozepre igazitva, hogy a ketto egyutt viselkedjen ugy, mint
   korabban az egyetlen doboz. A toggle csak mobilon lathato, es akkor a
   Contact gomb el van rejtve -- tehat a shell nyitott (magasabb) allapota
   soha nem talalkozik a kulon gombbal, az `align-items:center` biztonsagos. */
.nw-header__group {
  pointer-events: none;
  display: flex; align-items: center; gap: var(--nw-space-1);
  inline-size: 100%; max-inline-size: var(--nw-max-width);
}

.nw-header__shell {
  pointer-events: auto;
  flex: 1 1 auto; min-inline-size: 0;
  /* Dinamikus attetszoseg: a hatter a mogotte gorgeteo tartalomtol fugg,
     nem fix feher -- ezert backdrop-filter, nem sima szin. */
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-radius: var(--nw-nav-radius);
  box-shadow: var(--nw-shadow-nav);
  overflow: clip;
  transition: border-radius var(--nw-dur-base) var(--nw-ease),
              box-shadow var(--nw-dur-base) var(--nw-ease),
              background var(--nw-dur-base) var(--nw-ease);
}
@supports not (backdrop-filter: blur(1px)) {
  .nw-header__shell { background: rgb(255 255 255 / 0.97); }
}
.nw-header[data-scrolled] .nw-header__shell { box-shadow: var(--nw-shadow-lift); }
.nw-header[data-open] .nw-header__shell {
  border-radius: var(--nw-nav-radius-open);
  background: rgb(255 255 255 / 0.97);
}

.nw-header__contact { pointer-events: auto; flex-shrink: 0; }

.nw-header__bar {
  display: flex; align-items: center; gap: var(--nw-space-3);
  min-block-size: var(--nw-nav-h);
  padding-inline: var(--nw-space-3);
}
.nw-header__logo { display: flex; align-items: center; }
.nw-header__logo img { height: 20px; width: auto; }

.nw-header__inline { display: flex; align-items: center; gap: var(--nw-space-3); margin-inline: auto; }
.nw-header__inline a {
  position: relative;
  padding-block: 0.4rem;
  font-family: var(--nw-font-display);
  font-size: var(--nw-text-sm);
  font-weight: var(--nw-fw-medium);
  color: var(--nw-ink);
  text-decoration: none;
  transition: color var(--nw-dur-fast) var(--nw-ease);
}
.nw-header__inline a:hover,
.nw-header__inline a[aria-current] { color: var(--nw-blue-1); }
.nw-header__inline a::after {
  content: "";
  position: absolute; inset-inline: 0; inset-block-end: 0;
  block-size: 2px; border-radius: 2px; background: var(--nw-blue-1);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--nw-dur-base) var(--nw-ease);
}
.nw-header__inline a[aria-current]::after { transform: scaleX(1); }

.nw-header__actions { display: flex; align-items: center; gap: var(--nw-space-1); }

.nw-header__toggle {
  inline-size: 38px; block-size: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--nw-r-sm);
}
.nw-header__bars {
  position: relative;
  display: block; inline-size: 18px; block-size: 2px; border-radius: 2px;
  background: var(--nw-ink);
  transition: background var(--nw-dur-fast) var(--nw-ease);
}
/* Abszolút pozíció, hogy a nyitott (X) állásban a ket vonal PONTOSAN a
   kozeppontban keresztezze egymast -- relative+top eseten a normal flow
   miatt a ket szar aszimmetrikus lett. */
.nw-header__bars::before, .nw-header__bars::after {
  content: ""; position: absolute; inset-inline-start: 0;
  inline-size: 18px; block-size: 2px; border-radius: 2px;
  background: var(--nw-ink);
  transition: transform var(--nw-dur-base) var(--nw-ease);
}
.nw-header__bars::before { inset-block-start: -6px; }
.nw-header__bars::after  { inset-block-start: 6px; }
.nw-header[data-open] .nw-header__bars { background: transparent; }
.nw-header[data-open] .nw-header__bars::before { transform: translateY(6px) rotate(45deg); }
.nw-header[data-open] .nw-header__bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* A kinyíló panel UGYANEBBEN a konténerben. */
.nw-header__panel {
  border-block-start: 1px solid var(--nw-line);
  padding: var(--nw-space-3) var(--nw-space-3) var(--nw-space-4);
}
.nw-header__big { display: grid; gap: 0.15rem; }
.nw-header__big a {
  display: block;
  padding-block: 0.5rem;
  font-family: var(--nw-font-display);
  font-size: var(--nw-text-2xl);
  font-weight: var(--nw-fw-semibold);
  letter-spacing: var(--nw-tracking-tight);
  color: var(--nw-ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  animation: nw-menu-in 420ms var(--nw-ease) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.nw-header__big a span {
  display: inline-block;
  transition: transform var(--nw-dur-base) var(--nw-ease),
              color var(--nw-dur-base) var(--nw-ease);
}
.nw-header__big a:hover span { transform: translateX(10px); color: var(--nw-blue-1); }

@keyframes nw-menu-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nw-header__big a { opacity: 1; transform: none; animation: none; }
}

/* A ket nezet ELTERO navigaciot visz, nem ugyanazt ket meretben.

   Desktop: a fomenu latszik, tehat a hamburger mellette puszta duplikacio
   lenne -- ket ut ugyanoda. Elrejtjuk; a panelben levo ket extra link
   (Responsibility, Contact) kozul a Contact gombkent all a fejlecben, a
   Responsibility pedig megszunt, tehat nem veszik el semmi.

   Mobil: a hamburger viszi az EGESZ navigaciot, a Contact is benne van,
   ezert a fejlecbol kikerul a Contact gomb -- igy a logo mellett nem
   szorong ket kontroll. */
@media (min-width: 901px) {
  .nw-header__toggle { display: none; }
}

@media (max-width: 900px) {
  .nw-header__inline { display: none; }
  .nw-header__actions { margin-inline-start: auto; }
  .nw-header__contact { display: none; }
}

/* --- Footer --------------------------------------------------- */
.nw-footer {
  background: var(--nw-bg); color: var(--nw-fg);
  padding-block: var(--nw-space-8) var(--nw-space-4);
}
.nw-footer__claim {
  font-family: var(--nw-font-display);
  font-size: var(--nw-text-2xl);
  font-weight: var(--nw-fw-bold);
  letter-spacing: var(--nw-tracking-tight);
  max-width: 16ch;
  margin-bottom: var(--nw-space-8);
}
.nw-footer__cols {
  display: grid; gap: var(--nw-space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding-block: var(--nw-space-4);
  border-block-end: 1px solid var(--nw-rule);
}
.nw-footer__cols h4 {
  font-size: var(--nw-text-xs); letter-spacing: var(--nw-tracking-wide);
  text-transform: uppercase; color: var(--nw-fg-secondary);
  margin-bottom: var(--nw-space-2);
}
.nw-footer__cols li + li { margin-top: 0.5rem; }
.nw-footer__cols a { font-size: var(--nw-text-sm); text-decoration: none; }
.nw-footer__cols a:hover { color: var(--nw-blue-4); }
.nw-footer__ext {
  font-size: var(--nw-text-xs);
  letter-spacing: var(--nw-tracking-wide);
  color: var(--nw-fg-secondary);
  margin-inline-start: 0.35rem;
}

/* Korabban ket elem allt itt egymassal szemben: balra a "Part of" +
   anyavallalati lockup, jobbra a copyright. Az ugyfel 2026-08-24-en
   kerte az anyavallalati hivatkozas teljes eltavolitasat, tehat csak a
   copyright maradt -- a space-between egy elemnel balra igazit, ami itt
   a helyes eredmeny. */
.nw-footer__base {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--nw-space-2);
  padding-top: var(--nw-space-4);
}
.nw-footer__copy { font-size: var(--nw-text-xs); color: var(--nw-fg-secondary); margin: 0; }

/* --- Placeholder badge ----------------------------------------
   Az egész rendszert a body.is-wireframe kapcsolja. Éles előtt
   egyetlen osztály levétele mindet elrejti. */
.nw-ph { display: none; }
.is-wireframe .nw-ph {
  display: inline-block;
  padding: 0.15em 0.6em;
  border: 1px dashed var(--nw-sun);
  border-radius: var(--nw-radius-pill);
  font-family: var(--nw-font-display);
  font-size: var(--nw-text-xs);
  font-weight: var(--nw-fw-semibold);
  letter-spacing: var(--nw-tracking-wide);
  text-transform: uppercase;
  color: var(--nw-accent-text);
  vertical-align: middle;
}
.is-wireframe [data-placeholder] { outline: 1px dashed rgb(255 165 0 / 0.45); outline-offset: 4px; }

/* --- neuwerk pattern -----------------------------------------
   A logó grafikai szimbólumából származó forma. Brandbook:
   csak Blue tint 1 navy háttéren, nagy léptékben. Szekciónként
   legfeljebb 3 forma, mindegyik legalább 40vmin. */
.nw-pattern {
  position: absolute; inset: 0;
  z-index: var(--nw-z-pattern);
  pointer-events: none;
  overflow: clip;
}
.nw-pattern__shape {
  position: absolute;
  background: var(--nw-pattern-fill);
  border-radius: var(--nw-radius-pill);
  transform: rotate(var(--nw-pattern-tilt)) translate3d(0, var(--shift, 0), 0);
  will-change: transform;
  min-inline-size: 40vmin; min-block-size: 22vmin;
}

/* v2: a pattern VILAGOS szekcioban is el, csak halvanyabb toltessel
   (--nw-pattern-fill temankent van beallitva). A v1-ben csak soteten
   letezett, ezert a vilagos szekciok teljesen dísztelenek voltak. */