/* ==========================================================================
   ODEN-STEEL COMPONENT / HEADER
   --------------------------------------------------------------------------
   Transzparens header a Hero felett, scroll után sötét, blur-ös állapot.
   Fixed pozíció -> az állapotváltás nem okoz layout shiftet (CLS = 0).
   Specifikáció: ui-kit/navigation/header.md
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-header);
  height: var(--header-height);
  overflow: visible;
  background-color: transparent;
  border-bottom: var(--border-width-thin) solid transparent;
  transition:
    background-color var(--transition-header),
    height var(--transition-header),
    box-shadow var(--transition-header),
    border-color var(--transition-header);
}

.site-header.is-scrolled {
  height: var(--header-height-scrolled);
  background-color: var(--color-header-scrolled);
  -webkit-backdrop-filter: blur(var(--blur-header));
  backdrop-filter: blur(var(--blur-header));
  border-bottom-color: var(--color-border-subtle);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  position: relative;
  z-index: 2;
  max-width: var(--container-main);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--page-margin);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

/* Desktop: a nav a teljes headerhez (viewport-szélesség) pozicionáljon,
   ne a max-width innerhez — így a menüközép = 50vw. */
@media (min-width: 1024px) {
  .site-header__inner {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Brand mark (ikon) — balra, a menüpontokkal egy tengelyen
   Desktop + tablet: before/after is látható. Mobil: teljesen elrejtve.
   -------------------------------------------------------------------------- */

.site-header__logo {
  position: relative;
  z-index: 3;
  display: none;
  flex-shrink: 0;
  align-items: center;
  align-self: center;
  height: auto;
  margin-right: 0;
  line-height: 0;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.site-header__logo:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.site-header__logo-img {
  display: block;
  width: auto;
  height: 42px;
  aspect-ratio: 1;
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* Before (sötét háttér): világos logó. After: sötét logó.
   Ugyanaz az állapotgép (body.is-hero-after) a header és a mobil hero logóra. */
.site-header__logo-img--on-light {
  display: none;
}

body.is-hero-after .site-header__logo-img--on-dark {
  display: none;
}

body.is-hero-after .site-header__logo-img--on-light {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Tablet + desktop: csak a fejléc logó a flow-ban (a hero mobil logó külön) */
@media (min-width: 768px) {
  .site-header > .site-header__inner > .site-header__logo,
  .site-header .site-header__logo:not(.hero__logo) {
    display: inline-flex;
    margin-right: 36px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}

@media (min-width: 1024px) {
  .site-header .site-header__logo:not(.hero__logo) {
    margin-right: clamp(32px, 2.4vw, 40px);
  }

  .site-header .site-header__logo:not(.hero__logo) .site-header__logo-img {
    height: 48px;
  }
}

/* --------------------------------------------------------------------------
   Desktop navigáció
   Viewport valódi vízszintes közepe (50vw) — független a logó szélességétől.
   -------------------------------------------------------------------------- */

.site-nav {
  height: 100%;
  min-width: 0;
}

@media (min-width: 1024px) {
  .site-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    height: 100%;
    min-width: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .site-nav__list {
    pointer-events: auto;
  }
}

.site-nav__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.site-nav__list > li {
  position: relative;
  display: flex;
  align-items: stretch;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-inline: var(--space-md);
  color: var(--color-white);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-button);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-base);
}

/* Szűk desktop: menüközép marad 50vw, gap finoman csökken a logó-ütközés ellen */
@media (min-width: 1024px) and (max-width: 1199px) {
  .site-nav__link {
    padding-inline: clamp(10px, 1.15vw, 14px);
  }
}

.site-nav__link:hover,
.site-nav__item--dropdown.is-open > .site-nav__link {
  color: var(--color-gold);
}

.site-nav__link:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.site-nav__chevron {
  flex-shrink: 0;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Szolgáltatások dropdown
   Fade + slide, pointer-barát hover gap, villogásmentes zárás (JS delay).
   -------------------------------------------------------------------------- */

.site-nav__dropdown {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: 50%;
  min-width: 320px;
  margin: 0;
  padding: var(--space-sm);
  list-style: none;
  background-color: var(--color-black-secondary);
  border: var(--border-width-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, var(--space-sm));
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s linear var(--duration-fast);
}

/* Láthatatlan híd a trigger és a panel közötti rés fölé,
   hogy a pointer átvitelekor ne záródjon be a menü. */
.site-nav__dropdown::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-md));
  left: 0;
  right: 0;
  height: var(--space-md);
}

.site-nav__item--dropdown.is-open .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    visibility 0s;
}

.site-nav__dropdown a {
  display: block;
  padding: var(--space-md);
  color: var(--color-white);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition:
    color var(--transition-base),
    background-color var(--transition-base);
}

.site-nav__dropdown a:hover {
  color: var(--color-gold);
  background-color: var(--color-surface-dark);
}

.site-nav__dropdown a:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Primary CTA
   Specifikáció: design-bible/04-color-system.md (CTA szabályok)
   Megjegyzés: a gombstílus később közös buttons modulba kerül.
   -------------------------------------------------------------------------- */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-y) var(--button-padding-x);
  background-color: var(--color-gold);
  color: var(--color-black-primary);
  font-family: inherit;
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-button);
  line-height: 1;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.btn-primary:hover {
  background-color: var(--color-gold-light);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Hamburger
   -------------------------------------------------------------------------- */

.site-header__hamburger {
  position: relative;
  z-index: 3;
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
}

.site-header__hamburger:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.site-header__icon {
  display: block;
}

/* --------------------------------------------------------------------------
   Mobil navigáció — teljes képernyős editorial overlay
   -------------------------------------------------------------------------- */

.mobile-nav {
  --menu-text: #f7f4ec;
  --menu-text-muted: rgba(247, 244, 236, 0.82);
  --menu-border: rgba(255, 255, 255, 0.07);
  --menu-accent: var(--color-gold);
  --menu-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 0s linear 180ms;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 180ms ease,
    visibility 0s;
}

.mobile-nav__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  opacity: 1;
}

@supports not (
  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
) {
  .mobile-nav__backdrop {
    background: rgba(0, 0, 0, 0.88);
  }
}

.mobile-nav__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  opacity: 1;
  color: var(--menu-text);
  background:
    var(--menu-noise),
    radial-gradient(
      circle at 85% 10%,
      rgba(190, 151, 74, 0.08),
      transparent 34%
    ),
    linear-gradient(180deg, #181816 0%, #0d0d0c 100%);
}

.mobile-nav__inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.mobile-nav__brand,
.mobile-nav__close,
.mobile-nav__link,
.mobile-nav__logo-brand,
.mobile-nav__footer .phone-cta,
.mobile-nav__social {
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.mobile-nav__header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;
  padding: max(18px, env(safe-area-inset-top, 0px)) clamp(20px, 5vw, 48px) 16px;
  border-bottom: 1px solid var(--menu-border);
}

.mobile-nav__brand {
  color: var(--menu-text);
  text-decoration: none;
  max-width: clamp(112px, 30vw, 154px);
}

.mobile-nav__brand-mark {
  display: block;
  font-size: clamp(15px, 3.8vw, 17px);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: none;
  white-space: nowrap;
}

.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(247, 244, 236, 0.94);
  cursor: pointer;
  transition:
    transform 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease;
}

.mobile-nav__close-svg {
  display: block;
  width: 14px;
  height: 14px;
}

.mobile-nav__close-svg line {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav__close:hover {
    border-color: color-mix(in srgb, var(--color-gold) 55%, transparent);
    background: rgba(255, 255, 255, 0.07);
    transform: rotate(10deg);
  }
}

.mobile-nav__content,
.mobile-nav__scroll-region {
  min-height: 0;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: flex;
  align-items: center;
  scrollbar-width: none;
}

.mobile-nav__content::-webkit-scrollbar,
.mobile-nav__scroll-region::-webkit-scrollbar {
  display: none;
}

.mobile-nav__nav {
  width: min(100%, 720px);
  margin: auto;
  padding: 34px clamp(24px, 8vw, 96px);
}

/* --------------------------------------------------------------------------
   Pulzáló márkalogó — menüpontok és CTA között, dokumentumfolyamban
   -------------------------------------------------------------------------- */

.mobile-nav__logo-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-block: clamp(4px, 1vh, 12px) clamp(2px, 0.8vh, 8px);
  padding-inline: 0;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
  overflow: visible;
}

.mobile-nav__logo-brand-glow {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  z-index: 0;
  overflow: visible;
}

.mobile-nav__logo-brand-glow::before,
.mobile-nav__logo-brand-glow::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
}

.mobile-nav__logo-brand-glow::before {
  width: 165%;
  background: radial-gradient(
    circle,
    rgba(214, 163, 0, 0.48) 0%,
    rgba(214, 163, 0, 0.25) 30%,
    rgba(214, 163, 0, 0.1) 54%,
    transparent 74%
  );
  filter: blur(15px);
  opacity: 0.3;
  animation: mobile-nav-logo-glow 3.4s ease-in-out infinite;
  animation-play-state: paused;
}

.mobile-nav__logo-brand-glow::after {
  width: 118%;
  background: radial-gradient(
    circle,
    rgba(242, 194, 48, 0.22) 0%,
    rgba(214, 163, 0, 0.1) 46%,
    transparent 72%
  );
  filter: blur(8px);
  opacity: 0.24;
  animation: mobile-nav-logo-inner-glow 3.4s ease-in-out 0.2s infinite;
  animation-play-state: paused;
}

.mobile-nav:not(.is-open) .mobile-nav__logo-brand-glow::before,
.mobile-nav:not(.is-open) .mobile-nav__logo-brand-glow::after {
  animation-play-state: paused;
}

.mobile-nav.is-open .mobile-nav__logo-brand-glow::before,
.mobile-nav.is-open .mobile-nav__logo-brand-glow::after {
  animation-play-state: running;
}

.mobile-nav__logo-brand-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(82px, 23vw, 118px);
  height: auto;
  max-width: 100%;
}

.mobile-nav__logo-brand:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 8px;
  border-radius: 8px;
}

@keyframes mobile-nav-logo-glow {
  0%,
  100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.9);
  }

  50% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes mobile-nav-logo-inner-glow {
  0%,
  100% {
    opacity: 0.24;
    transform: translate(-50%, -50%) scale(0.94);
  }

  50% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mobile-nav__logo-brand-logo {
    width: clamp(104px, 14vw, 136px);
  }

  .mobile-nav__logo-brand-glow::before {
    width: 175%;
  }
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.1vh, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 4px;
  color: var(--menu-text-muted);
  font-size: clamp(19px, 5.6vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition:
    color 200ms ease,
    transform 200ms ease;
}

.mobile-nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 0;
  height: 1px;
  background: var(--menu-accent);
  transform: translateX(-50%);
  transition: width 200ms ease;
}

.mobile-nav__link[aria-current="page"] {
  color: #f7f4ec;
}

.mobile-nav__link[aria-current="page"]::after {
  width: 30px;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav__link:hover {
    color: #f7f4ec;
    transform: translateX(3px);
  }

  .mobile-nav__link:hover::after {
    width: 28px;
  }
}

.mobile-nav__brand:focus-visible,
.mobile-nav__close:focus-visible,
.mobile-nav__link:focus-visible,
.mobile-nav__logo-brand:focus-visible,
.mobile-nav__facebook:focus-visible,
.mobile-nav__footer .phone-cta:focus-visible {
  outline: 2px solid var(--menu-accent);
  outline-offset: 6px;
  border-radius: 4px;
}

.mobile-nav__logo-brand:focus-visible {
  outline-offset: 8px;
  border-radius: 8px;
}

.mobile-nav__footer {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 22px);
  padding: 16px clamp(20px, 5vw, 48px)
    max(22px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--menu-border);
  overflow: visible;
}

.mobile-nav__cta-slot {
  display: flex;
  justify-content: center;
  width: min(100%, 340px);
}

.mobile-nav__footer .phone-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 340px);
  text-align: center;
}

/* Telefon ikon abszolút — a „Hívjon most” a gomb geometriai közepén marad */
.mobile-nav__footer .phone-cta__icon {
  position: absolute;
  left: 2px;
  top: 50%;
  z-index: 1;
  flex: none;
  transform: translateY(-50%);
  pointer-events: none;
}

.mobile-nav__footer .phone-cta__label {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  padding: 0 20px;
  text-align: center;
}

/* Menüben mindig a „Hívjon most” felirat — a telefonszám a tel: linkben van */
.mobile-nav__footer .phone-cta__desktop-label {
  display: none;
}

.mobile-nav__footer .phone-cta__mobile-label {
  display: inline;
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav__footer .phone-cta:hover .phone-cta__icon {
    transform: translateY(calc(-50% - 1px));
  }
}

.mobile-nav__social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mobile-nav__social-label {
  margin: 0;
  color: rgba(247, 244, 236, 0.62);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: none;
}

.mobile-nav__facebook {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #ffffff;
  color: #080808;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.mobile-nav__facebook-icon {
  display: block;
  width: 26px;
  height: 26px;
  fill: currentColor;
  transform: translateY(1px);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-nav__facebook:hover {
    transform: translateY(-2px) scale(1.03);
    background: #ffffff;
    color: #080808;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }
}

.mobile-nav__facebook:focus-visible {
  outline: 2px solid var(--menu-accent);
  outline-offset: 5px;
}

/* Overflow lock only — document scrollY must stay unchanged (no fixed body) */
html.is-mobile-nav-open,
body.is-mobile-nav-open {
  overflow: hidden;
  overscroll-behavior: none;
}

/* --------------------------------------------------------------------------
   Reszponzív viselkedés
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .site-nav {
    display: none;
  }

  .site-header__hamburger {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .site-header__hamburger,
  .mobile-nav {
    display: none !important;
  }
}

@media (max-height: 740px) {
  .mobile-nav__content {
    align-items: flex-start;
  }

  .mobile-nav__nav {
    padding-block: 20px;
  }

  .mobile-nav__list {
    gap: 8px;
  }

  .mobile-nav__link {
    min-height: 44px;
    font-size: clamp(18px, 5vw, 26px);
  }

  .mobile-nav__logo-brand {
    margin-block: 2px 0;
  }

  .mobile-nav__logo-brand-logo {
    width: 84px;
  }
}

@media (max-height: 700px) {
  .mobile-nav__footer {
    gap: 12px;
    padding-top: 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  }

  .mobile-nav__social {
    gap: 7px;
  }

  .mobile-nav__facebook {
    width: 42px;
    height: 42px;
  }

  .mobile-nav__facebook-icon {
    width: 24px;
    height: 24px;
  }
}

@media (max-height: 680px) {
  .mobile-nav__logo-brand {
    margin-block: 14px;
  }

  .mobile-nav__logo-brand-logo {
    width: 76px;
  }

  .mobile-nav__list {
    gap: 6px;
  }

  .mobile-nav__nav {
    padding-top: 14px;
  }
}

@media (max-height: 600px) {
  .mobile-nav__logo-brand {
    margin-block: 10px;
  }

  .mobile-nav__logo-brand-logo {
    width: 68px;
  }

  .mobile-nav__logo-brand-glow::before {
    width: 150%;
    filter: blur(12px);
  }
}

@media (max-width: 360px) {
  .mobile-nav__link {
    max-width: 16ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav {
    transition-duration: 0.01ms;
  }

  .mobile-nav *,
  .mobile-nav *::before,
  .mobile-nav *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .mobile-nav__link:hover,
  .mobile-nav__close:hover,
  .mobile-nav__facebook:hover,
  .mobile-nav__footer .phone-cta:hover .phone-cta__icon {
    transform: none;
  }

  .mobile-nav__logo-brand-glow::before,
  .mobile-nav__logo-brand-glow::after {
    animation: none !important;
    opacity: 0.58 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}

/* ==========================================================================
   HEADER ÁLLAPOTGÉP — ADAPTIVE GLASS (Hero after transition)
   --------------------------------------------------------------------------
   A header minden állapotban áttetsző, blur-ös üveg — nem külön blokk,
   hanem finoman olvad az aktuális szekció hátterébe:
     - alap (before / nyers): sötét tónusú glass,
     - Hero after (body.is-hero-after, a hero.js a sweep↔logó
       geometriai metszéspontjából vezérli):
       meleg, világos tónusú glass — továbbra is áttetsző, NEM tömör
       törtfehér.
   Csak szín / blur / shadow / border vált, 320ms alatt — nincs scale,
   slide vagy egyéb mozgás.
   ========================================================================== */

.site-header {
  background-color: rgba(18, 18, 18, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  transition:
    background-color 320ms ease,
    height var(--transition-header),
    border-color 320ms ease,
    box-shadow 320ms ease,
    color 320ms ease,
    backdrop-filter 320ms ease,
    -webkit-backdrop-filter 320ms ease;
}

/* Scroll után csak a magasság csökken — a glass karakter azonos marad
   (a tokenes tömör sötét hátteret felülírjuk) */
.site-header.is-scrolled {
  background-color: rgba(18, 18, 18, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.site-nav__link {
  color: rgba(255, 255, 255, 0.88);
}

/* --- Hero after állapot: meleg, világos tónusú, áttetsző glass --- */

body.is-hero-after .site-header,
body.is-hero-after .site-header.is-scrolled {
  background-color: rgba(250, 247, 242, 0.28);
  border-bottom-color: rgba(44, 42, 40, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

body.is-hero-after .site-nav__link {
  color: #2c2a28;
}

body.is-hero-after .site-nav__link:hover,
body.is-hero-after .site-nav__item--dropdown.is-open > .site-nav__link {
  color: #b88a00;
}

body.is-hero-after .site-nav__link:focus-visible {
  outline-color: #b88a00;
}

/* Hamburger ikon a világos tónusú glass alatt is látszódjon */
body.is-hero-after .site-header__hamburger {
  color: #2c2a28;
}

/* Dropdown a light glass alatt: meleg, világos, olvasható panel */
body.is-hero-after .site-nav__dropdown {
  background-color: rgba(250, 247, 242, 0.96);
  border-color: rgba(214, 163, 0, 0.24);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}

body.is-hero-after .site-nav__dropdown a {
  color: #2c2a28;
}

body.is-hero-after .site-nav__dropdown a:hover {
  color: #b88a00;
  background-color: rgba(214, 163, 0, 0.1);
}

/* A CTA minden állapotban arany marad, sötét felirattal */
body.is-hero-after .btn-primary {
  background-color: var(--color-gold);
  color: #0b0b0b;
}

/* ==========================================================================
   MOBILE / TABLET HEADER (max-width: 1023px)
   Átlátszó sáv; hamburger jobbra. Tablet: logó balra. Mobil: nincs logó.
   ========================================================================== */

@media (max-width: 1023px) {
  .site-header,
  .site-header.is-scrolled,
  body.is-hero-after .site-header,
  body.is-hero-after .site-header.is-scrolled {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    border-bottom-color: transparent;
    box-shadow: none;
    height: var(--header-height);
    transition: none;
  }

  .site-header__inner {
    position: relative;
    z-index: 2;
    justify-content: space-between;
  }

  /* Tableten a fejléc fehér ikonja marad before/after (átlátszó header).
     A mobil hero logóra NEM vonatkozik — az a body.is-hero-after swapot követi. */
  body.is-hero-after
    .site-header
    .site-header__logo:not(.hero__logo)
    .site-header__logo-img--on-dark {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  body.is-hero-after
    .site-header
    .site-header__logo:not(.hero__logo)
    .site-header__logo-img--on-light {
    display: none;
  }

  .site-header .site-header__logo:not(.hero__logo) .site-header__logo-img,
  body.is-hero-after
    .site-header
    .site-header__logo:not(.hero__logo)
    .site-header__logo-img {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  }

  .site-header__hamburger,
  body.is-hero-after .site-header__hamburger {
    color: rgba(255, 255, 255, 0.92);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  }
}

/* Mobil: fejléc logó elrejtve (a hero__logo külön jelenik meg a Hero tartalomban) */
@media (max-width: 767px) {
  .site-header .site-header__logo:not(.hero__logo),
  body.is-hero-after .site-header .site-header__logo:not(.hero__logo) {
    display: none;
    margin: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }
}

/* ==========================================================================
   SZOLGÁLTATÁSOK MEGA MENÜ (>= 1024px)
   --------------------------------------------------------------------------
   Teljes szélességű, világos editorial panel a fejléc alatt. A markupot a
   components/header/services-mega-menu.js építi a js/config/services.js
   listából, és a <body> végére portálozza — a .site-header backdrop-filterje
   és a .site-nav transformja egyaránt elrontaná a position: fixed-et.

   Rétegek:  oldal 0 · backdrop 800 · header 1000 · mega panel 1100 · modal 1200
   ========================================================================== */

.services-mega,
.services-mega-backdrop {
  --mega-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mega-duration-panel: 380ms;
  --mega-duration-ui: 280ms;
  --mega-surface: #f8f7f3;
  --mega-ink: #1b1a17;
  --mega-ink-muted: #6d675e;
  --mega-hairline: rgba(27, 26, 23, 0.12);
  --mega-gold: #8a6a00;
  /* Tompított bronz: architectural accent, nem telített arany. */
  --mega-bronze: #9c8049;
  --mega-top: var(--header-height);
}

/* A header scroll után alacsonyabb — a panel a tényleges alsó élét követi,
   így nem kell hardcode-olt top érték egyik breakpointon sem. */
html:has(.site-header.is-scrolled) .services-mega,
html:has(.site-header.is-scrolled) .services-mega-backdrop {
  --mega-top: var(--header-height-scrolled);
}

/* Nem desktop: a mega menü egyáltalán nem létezik, marad a hamburger. */
@media (max-width: 1023px) {
  .services-mega,
  .services-mega-backdrop {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Backdrop — a header alatt kezdődik, a panel mögött ül
   -------------------------------------------------------------------------- */

.services-mega-backdrop {
  position: fixed;
  top: var(--mega-top);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 800;
  background-color: rgba(12, 11, 9, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--mega-duration-panel) var(--mega-ease),
    visibility 0s linear var(--mega-duration-panel);
}

html.is-services-mega-open .services-mega-backdrop {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--mega-duration-panel) var(--mega-ease),
    visibility 0s;
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

.services-mega {
  position: fixed;
  top: var(--mega-top);
  right: 0;
  left: 0;
  z-index: 1100;
  max-height: calc(100dvh - var(--mega-top));
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--mega-surface);
  border-bottom: 1px solid var(--mega-hairline);
  /* Nem dropdown-árnyék, csak annyi ambient mélység, hogy a panel elváljon
     a mögötte sötétedő tartalomtól. */
  box-shadow: 0 16px 28px -26px rgba(12, 11, 9, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 240ms var(--mega-ease),
    transform var(--mega-duration-panel) var(--mega-ease),
    clip-path var(--mega-duration-panel) var(--mega-ease),
    visibility 0s linear var(--mega-duration-panel);
}

html.is-services-mega-open .services-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  clip-path: inset(0 0 0 0);
  transition:
    opacity 200ms var(--mega-ease),
    transform var(--mega-duration-panel) var(--mega-ease),
    clip-path var(--mega-duration-panel) var(--mega-ease),
    visibility 0s;
}

/* A DOM-sorrend meta → kártyák → „Összes szolgáltatás” (Tab-sorrend miatt),
   a vizuális elrendezést explicit grid placement adja.
   A dobozmodell szándékosan azonos a .site-header__inner-ével (max-width +
   padding-inline), így a panel tartalma pontosan a logó és a nav kezdővonalán
   indul minden viewporton — nem csak 1440-ig. */
.services-mega__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: var(--space-xl);
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--page-margin);
  padding-block: clamp(26px, 2.2vw, 36px) clamp(40px, 3vw, 56px);
}

/* --------------------------------------------------------------------------
   Editorial meta sor
   -------------------------------------------------------------------------- */

.services-mega__meta {
  grid-area: 1 / 1 / 2 / 2;
  min-width: 0;
}

.services-mega__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--mega-ink-muted);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.services-mega__eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background-color: var(--mega-bronze);
}

.services-mega__lead {
  max-width: 46ch;
  margin: 0;
  color: var(--mega-ink);
  font-size: clamp(1rem, 0.95vw, 1.125rem);
  line-height: 1.45;
  letter-spacing: -0.005em;
}

/* Nincs állandó aláhúzás: a meta sor alatti hajszálvonaltól 13px-re futó
   második vonal zsúfolttá tenné a fejrészt. Az affordanciát a nyíl adja,
   az aláhúzás hoveren jelenik meg. */
.services-mega__all {
  grid-area: 1 / 2 / 2 / 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4a453d;
  font-size: 0.75rem;
  /* A Manrope 400/600/700/800 vágattal töltődik, 500-assal nem — a böngésző
     ezt 400-ként rajzolja. A jobb olvashatóságot itt a méret és a sötétebb
     szín adja, nem a súly. Ha egyszer betöltjük az 500-as vágatot, ez a
     deklaráció magától a valódi medium súlyt kapja. */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--mega-duration-ui) var(--mega-ease);
}

.services-mega__all-label {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--mega-duration-ui) var(--mega-ease);
}

.services-mega__all-arrow {
  display: inline-flex;
  transition: transform var(--mega-duration-ui) var(--mega-ease);
}

.services-mega__all:focus-visible {
  outline: 2px solid var(--mega-gold);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Grid — 4 oszlop, duplázott sávokkal
   --------------------------------------------------------------------------
   A 8 sáv célja kizárólag az, hogy egy hiányos utolsó sort fél kártyányi
   lépésekben középre lehessen tolni. Kártyaszélességre nincs hatása:
   8 sáv + 7 rés mellett is (container − 3 × gap) / 4 marad.
   -------------------------------------------------------------------------- */

.services-mega__grid {
  grid-area: 2 / 1 / 3 / -1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(24px, 2vw, 42px);
  row-gap: clamp(28px, 2.2vw, 46px);
  margin: clamp(22px, 1.8vw, 28px) 0 0;
  padding: clamp(30px, 2.4vw, 36px) 0 0;
  border-top: 1px solid var(--mega-hairline);
  list-style: none;
}

/* Csak a záróvonalat rögzítjük: a `grid-column: span 2` rövidítés
   `grid-column-end: auto`-t is beállítana, amit az alábbi
   `grid-column-start` felülírása 1 sávra zsugorítana. */
.services-mega__cell {
  grid-column-end: span 2;
  min-width: 0;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 240ms var(--mega-ease),
    transform 240ms var(--mega-ease);
}

/* Hiányos utolsó sor optikai középre igazítása.
   A szelektor a sor első kártyáját azonosítja (4n + 1), és azt, hogy hány
   kártya áll mögötte — ebből adódik a sorban lévő elemek száma. Így nem
   kell tudni a teljes szolgáltatásszámot: 6, 7 és 8 elemnél is helyes,
   és semmilyen szolgáltatásnévhez vagy fix indexhez nem kötődik.
     3 elem a sorban → 1 kártyányi üres hely → fél kártya = 1 sáv eltolás
     2 elem          → 2 kártyányi üres     → 2 sáv
     1 elem          → 3 kártyányi üres     → 3 sáv
   Ha a szolgáltatásszám osztható 4-gyel, egyik szabály sem illeszkedik. */
.services-mega__cell:nth-child(4n + 1):nth-last-child(3) {
  grid-column-start: 2;
}

.services-mega__cell:nth-child(4n + 1):nth-last-child(2) {
  grid-column-start: 3;
}

.services-mega__cell:nth-child(4n + 1):nth-last-child(1) {
  grid-column-start: 4;
}

/* Nyitáskor finom stagger; záráskor minden kártya együtt tűnik el. */
html.is-services-mega-open .services-mega__cell {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(60ms + var(--mega-card-index, 0) * 20ms);
}

/* --------------------------------------------------------------------------
   Mini service card
   -------------------------------------------------------------------------- */

.mega-service-card {
  display: block;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
  transition: opacity 240ms var(--mega-ease);
}

/* A thumbnail mindig kitölti az oszlopát; a magasságot kizárólag a képarány
   adja, így nincs eltérő magasság és nincs layout jump. Az overflow: hidden
   miatt a hover scale sem mozdít layoutot. */
.mega-service-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: #e7e3da;
  border-radius: 2px;
}

.mega-service-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 320ms var(--mega-ease);
}

/* Alapállapotban egy hajszálnyi tompítás egységesíti a fotókat; hoverkor
   eltűnik, így a kép „felnyílik”. Globális filtert szándékosan nem
   használunk — a képek saját karaktere marad. */
.mega-service-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.04);
  transition: background-color var(--mega-duration-ui) var(--mega-ease);
  pointer-events: none;
}

.mega-service-card__arrow {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  color: #fff;
  opacity: 0;
  transform: translate(-3px, 3px);
  /* Badge és glow helyett kétrétegű árnyék: a szoros réteg kontúrt ad a
     világos burkolatfotókon, a lágy réteg a sötétebbeken adja a mélységet. */
  filter: drop-shadow(0 0 1px rgba(12, 11, 9, 0.75))
    drop-shadow(0 1px 4px rgba(12, 11, 9, 0.5));
  transition:
    opacity var(--mega-duration-ui) var(--mega-ease),
    transform var(--mega-duration-ui) var(--mega-ease);
}

.mega-service-card__body {
  display: block;
  margin-top: 14px;
}

.mega-service-card__title {
  display: block;
  color: var(--mega-ink);
  font-size: clamp(0.9375rem, 1.18vw, 1.0625rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.22;
  letter-spacing: -0.008em;
  text-wrap: pretty;
  transition: color var(--mega-duration-ui) var(--mega-ease);
}

.mega-service-card:focus-visible {
  outline: 2px solid var(--mega-gold);
  outline-offset: 5px;
}

/* Aktuális szolgáltatásoldal — csendes jelölés, badge nélkül. */
.mega-service-card.is-current .mega-service-card__title {
  color: #0f0e0c;
}

.mega-service-card.is-current .mega-service-card__title::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 8px;
  background-color: var(--mega-gold);
}

@media (hover: hover) and (pointer: fine) {
  .services-mega__all:hover {
    color: var(--mega-ink);
  }

  .services-mega__all:hover .services-mega__all-label {
    border-bottom-color: rgba(27, 26, 23, 0.35);
  }

  .services-mega__all:hover .services-mega__all-arrow {
    transform: translate(2px, -2px);
  }

  .mega-service-card:hover .mega-service-card__media img {
    transform: scale(1.025);
  }

  .mega-service-card:hover .mega-service-card__media::after {
    background-color: rgba(0, 0, 0, 0);
  }

  .mega-service-card:hover .mega-service-card__arrow {
    opacity: 1;
    transform: translate(0, 0);
  }

  .mega-service-card:hover .mega-service-card__title {
    color: #0f0e0c;
  }

  /* A hoverelt kártya kiemelése a többi halkításával. A dimming a linken ül,
     nem a cellán — a cella opacitása a nyitási staggert viszi, késleltetéssel,
     és a kettő összeakadna. Ha a pointer elhagyja a gridet, a szabály nem
     illeszkedik többé, így minden kártya magától visszatér 1-re. */
  .services-mega__grid:has(.mega-service-card:hover)
    .mega-service-card:not(:hover) {
    opacity: 0.78;
  }

  /* A billentyűs használat nem büntetett: a fókuszált kártya sosem halkul. */
  .services-mega__grid:has(.mega-service-card:hover)
    .mega-service-card:focus-visible {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Header állapot nyitott mega menü mellett
   Tömör, világos sáv — a blur eltávolítása egyben azt is garantálja, hogy a
   header ne hozzon létre containing blockot. A scroll-állapot logikája
   érintetlen marad, záráskor magától visszaáll.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* A duplázott osztály szándékos: a szolgáltatásoldalak stíluslapja
     (css/pages/service-demolition.css) a header.css UTÁN töltődik, és saját
     `body.service-page-template .site-header.is-scrolled` szabállyal írja
     felül a header felületét. A nyitott mega menü állapota minden
     oldaltípuson nyer, új oldalstílus hozzáadása nélkül is. */
  html.is-services-mega-open .site-header.site-header,
  html.is-services-mega-open .site-header.site-header.is-scrolled {
    background-color: #f8f7f3;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  html.is-services-mega-open .site-nav__link,
  html.is-services-mega-open body.is-hero-after .site-nav__link {
    color: #3a3630;
  }

  html.is-services-mega-open .site-nav__link:hover,
  html.is-services-mega-open
    .site-nav__item--dropdown.is-mega-open
    > .site-nav__link,
  html.is-services-mega-open body.is-hero-after .site-nav__link:hover {
    color: #8a6a00;
  }

  html.is-services-mega-open .site-nav__link:focus-visible {
    outline-color: #8a6a00;
  }

  html.is-services-mega-open .site-header__hamburger {
    color: #3a3630;
  }

  html.is-services-mega-open .site-header__logo-img--on-dark {
    display: none;
  }

  html.is-services-mega-open .site-header__logo-img--on-light {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* Chevron — zárt: lefelé, nyitott: 180°. */
.site-nav__chevron {
  transition: transform var(--mega-duration-ui, 280ms)
    cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav__item--dropdown.is-mega-open .site-nav__chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   No-JS fallback
   A statikus .site-nav__dropdown lista marad az egyetlen tartalék: csak akkor
   tűnik el, ha a mega menü ténylegesen felépült. JS nélkül hover/fókusz nyitja.
   -------------------------------------------------------------------------- */

.site-header.is-mega-ready .site-nav__dropdown {
  display: none;
}

@media (min-width: 1024px) {
  .site-header:not(.is-mega-ready)
    .site-nav__item--dropdown:hover
    .site-nav__dropdown,
  .site-header:not(.is-mega-ready)
    .site-nav__item--dropdown:focus-within
    .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition:
      opacity var(--transition-base),
      transform var(--transition-base),
      visibility 0s;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion — marad a rövid áttűnés, minden más mozgás elmarad.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .services-mega {
    transform: none;
    clip-path: none;
    transition:
      opacity 100ms linear,
      visibility 0s linear 100ms;
  }

  html.is-services-mega-open .services-mega {
    transform: none;
    clip-path: none;
    transition:
      opacity 100ms linear,
      visibility 0s;
  }

  .services-mega-backdrop,
  html.is-services-mega-open .services-mega-backdrop {
    transition:
      opacity 100ms linear,
      visibility 0s;
  }

  .services-mega__cell,
  html.is-services-mega-open .services-mega__cell {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }

  /* A kártyák halkítása megmarad, de átmenet nélkül, azonnal. */
  .mega-service-card {
    transition: none;
  }

  .mega-service-card__media img,
  .mega-service-card:hover .mega-service-card__media img,
  .mega-service-card__arrow,
  .services-mega__all-arrow,
  .services-mega__all:hover .services-mega__all-arrow,
  .mega-service-card:hover .mega-service-card__arrow {
    transform: none;
    transition: none;
  }

  .mega-service-card:hover .mega-service-card__arrow {
    opacity: 1;
  }

  .site-nav__chevron,
  .site-nav__item--dropdown.is-mega-open .site-nav__chevron {
    transition: none;
  }
}