/*
 * Konyhai Légtechnika – fejléc/lábléc ÁLLAPOT-stílusok.
 * Ezek a Header.tsx isCompact-függő inline style-jai, amiket a lefordított
 * kl.css NEM tartalmaz (a React inline-ban tette rájuk). CSS-osztályokra
 * bontva, hogy a header.js egyetlen .is-compact osztállyal váltson.
 * A default (nem-compact) = főoldal teteje; a .is-compact = görgetett/aloldal.
 */

/* ---- Header shell ---- */
.kl-header-shell {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background-color: var(--kl-transparent);
  transform: translateY(0);
  box-shadow: none;
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.kl-header-shell.is-compact {
  background-color: var(--kl-black);
  box-shadow: var(--kl-shadow-22);
}

/* ---- Felső sáv ---- */
.kl-header-top {
  padding-top: var(--kl-size-20);
  padding-bottom: var(--kl-size-14);
  max-height: var(--kl-size-120);
  opacity: 1;
  overflow: hidden;
  transition: max-height 300ms ease, opacity 180ms ease, padding 300ms ease;
}
.kl-header-shell.is-compact .kl-header-top {
  padding-top: var(--kl-size-0);
  padding-bottom: var(--kl-size-0);
  max-height: var(--kl-size-0);
  opacity: 0;
}

/* ---- Nav konténer ---- */
.kl-header-nav-container {
  padding-top: var(--kl-size-12);
  padding-bottom: var(--kl-size-12);
  border-top: var(--kl-size-1) solid var(--kl-header-border);
  transition: padding 300ms ease, border-color 300ms ease;
}
.kl-header-shell.is-compact .kl-header-nav-container {
  padding-top: var(--kl-size-10);
  padding-bottom: var(--kl-size-10);
  border-top: var(--kl-size-0) solid var(--kl-transparent);
}

/* ---- Nav grid ---- */
.kl-header-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--kl-size-24);
  min-height: var(--kl-size-48);
  transition: min-height 300ms ease;
}
.kl-header-shell.is-compact .kl-header-grid {
  grid-template-columns: auto minmax(0, 1fr) var(--kl-size-180);
  gap: var(--kl-size-12);
  min-height: var(--kl-size-100);
}

/* ---- Sticky logó (csak compact állapotban látszik asztali nézetben) ---- */
.kl-sticky-logo {
  display: none;
  opacity: 0;
}
.kl-header-shell.is-compact .kl-sticky-logo {
  display: block;
  opacity: 1;
  animation: kl-fade-in 300ms ease-out;
}

/* ---- Fő navigáció ---- */
.kl-main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--kl-size-28);
  flex-wrap: wrap;
}
.kl-header-shell.is-compact .kl-main-nav {
  justify-content: center;
  gap: var(--kl-size-22);
  flex-wrap: nowrap;
}

/* ---- Nav-link tipográfia (Header.tsx inline) ---- */
.kl-nav-link {
  font-family: var(--kl-font-heading);
  font-size: var(--kl-size-16);
  line-height: var(--kl-size-21);
  font-weight: 600;
  color: var(--kl-white);
}
.kl-nav-item.is-active > .kl-nav-link,
.kl-nav-item.current-menu-item > .kl-nav-link {
  color: var(--kl-primary);
}

/* ---- Fejléc CTA ---- */
.kl-header-cta {
  justify-self: end;
  min-width: auto;
  padding-left: var(--kl-size-28);
  padding-right: var(--kl-size-28);
}
.kl-header-shell.is-compact .kl-header-cta {
  min-width: var(--kl-size-180);
  padding-left: var(--kl-size-16);
  padding-right: var(--kl-size-16);
}

/* ---- Hamburger ikon-váltás (menü <-> X) ---- */
.kl-mobile-menu-toggle .kl-icon-menu,
.kl-mobile-menu-toggle .kl-icon-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kl-mobile-menu-toggle[aria-expanded="true"] .kl-icon-menu {
  display: none;
}
.kl-mobile-menu-toggle:not([aria-expanded="true"]) .kl-icon-close {
  display: none;
}

@keyframes kl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}