/* =============================================================
   WEBRAKÉTA — HEADER  ·  v5 (TOKEN-ALAPÚ)
   -------------------------------------------------------------
   Ez a fájl SEMMILYEN nyers px / hex értéket nem tartalmaz.
   Minden méret, szín, súly, line-height, padding a
   design-system.css 8. blokkjából (HEADER / NAVIGATION TOKENEK)
   olvasódik. Ha bármit módosítani szeretnél a headerben, ott
   állítsd a megfelelő --wr-header-* / --wr-nav-* / --wr-svc-* /
   --wr-cta-* / --wr-burger-* / --wr-mob-* tokent.
   ============================================================= */

#wr-header,
#wr-header * {
  box-sizing: border-box;
}

#wr-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--wr-header-z);
  width: 100%;
  font-family: var(--wr-font-sans);
  background: var(--wr-header-bg);
  border-bottom: var(--wr-header-border-width) solid var(--wr-header-border);
  transition: var(--wr-header-transition);
}

#wr-header.wr-scrolled {
  box-shadow: var(--wr-header-shadow-scrolled);
}

#wr-header-spacer {
  display: block;
  width: 100%;
  height: var(--wr-header-height-desktop);
}

#wr-header a {
  text-decoration: none;
}

#wr-header ul,
#wr-header ol,
#wr-header li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#wr-header button {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* ----------- Belső sáv ----------- */
#wr-header .wr-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wr-header-inner-gap);
  max-width: var(--container-max);
  width: 100%;
  min-height: var(--wr-header-height-desktop);
  margin: 0 auto;
  padding: var(--wr-header-pad-y-desktop) var(--wr-header-pad-x-mobile);
}

@media (min-width: 1024px) {
  #wr-header .wr-inner {
    padding-left: var(--wr-header-pad-x-desktop);
    padding-right: var(--wr-header-pad-x-desktop);
  }
}

/* ----------- Logo ----------- */
#wr-header .wr-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  line-height: 1;
}

#wr-header .wr-logo img {
  display: block;
  width: auto;
  max-height: var(--wr-logo-height-desktop);
  object-fit: contain;
  transition: transform 0.25s ease;
}

#wr-header .wr-logo img:hover {
  transform: translateY(var(--wr-logo-hover-lift));
}

/* ----------- Asztali nav ----------- */
#wr-header .wr-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#wr-header .wr-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--wr-nav-link-gap);
  padding: var(--wr-nav-link-padding);
  border-radius: var(--wr-nav-link-radius);
  font-family: var(--wr-nav-link-font-family);
  font-size: var(--wr-nav-link-font-size);
  font-weight: var(--wr-nav-link-weight);
  line-height: var(--wr-nav-link-line-height);
  color: var(--wr-nav-link-color);
  white-space: nowrap;
  transition: color 0.2s ease;
}

#wr-header .wr-nav-link:hover,
#wr-header .wr-nav-link.wr-active,
#wr-header .wr-nav-link.current-menu-item,
#wr-header .wr-nav-link.current-menu-ancestor {
  color: var(--wr-nav-link-color-hover);
}

#wr-header .wr-nav-link.wr-active::after,
#wr-header .wr-nav-link.current-menu-item::after,
#wr-header .wr-nav-link.current-menu-ancestor::after {
  content: "";
  position: absolute;
  left: var(--wr-nav-link-underline-inset);
  right: var(--wr-nav-link-underline-inset);
  bottom: var(--wr-nav-link-underline-offset);
  height: var(--wr-nav-link-underline-h);
  background: var(--wr-nav-link-underline);
  border-radius: var(--radius-pill);
}

/* ----------- Chevron ----------- */
#wr-header .wr-chevron {
  display: block;
  width: var(--wr-nav-chevron-size);
  height: var(--wr-nav-chevron-size);
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

#wr-header .wr-drop-wrap {
  position: relative;
}

#wr-header .wr-drop-wrap:hover .wr-chevron {
  transform: rotate(180deg);
}

/* ----------- Dropdown ----------- */
#wr-header .wr-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: calc(var(--wr-header-z) + 1);
  width: var(--wr-dropdown-width);
  padding-top: var(--wr-dropdown-offset-top);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

#wr-header .wr-drop-wrap:hover .wr-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

#wr-header .wr-dropdown-card {
  display: grid;
  grid-template-columns: var(--wr-dropdown-columns);
  gap: var(--wr-dropdown-gap);
  padding: var(--wr-dropdown-padding);
  background: var(--wr-dropdown-bg);
  border: 1px solid var(--wr-dropdown-border);
  border-radius: var(--wr-dropdown-radius);
  box-shadow: var(--wr-dropdown-shadow);
}

/* ----------- Szolgáltatás tétel (dropdownban) ----------- */
#wr-header .wr-svc {
  display: flex;
  align-items: flex-start;
  gap: var(--wr-svc-gap);
  min-width: 0;
  padding: var(--wr-svc-padding);
  border-radius: var(--wr-svc-radius);
  color: var(--wr-svc-color);
  overflow: hidden;
  transition: background 0.15s ease;
}

#wr-header .wr-svc:hover {
  background: var(--wr-svc-bg-hover);
}

#wr-header .wr-svc-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--wr-svc-icon-size);
  height: var(--wr-svc-icon-size);
  margin-top: var(--wr-svc-icon-mt);
  border-radius: var(--radius-pill);
  background: var(--wr-svc-icon-bg);
  transition: background 0.2s ease;
}

#wr-header .wr-svc:hover .wr-svc-icon {
  background: var(--wr-svc-icon-bg-hover);
}

#wr-header .wr-svc-icon svg {
  display: block;
  width: var(--wr-svc-icon-svg-size);
  height: var(--wr-svc-icon-svg-size);
  stroke: var(--wr-svc-icon-svg-color);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wr-header .wr-svc-texts {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

#wr-header .wr-svc-title {
  display: block;
  margin: 0;
  font-family: var(--wr-svc-title-font-family);
  font-size: var(--wr-svc-title-font-size);
  font-weight: var(--wr-svc-title-weight);
  line-height: var(--wr-svc-title-line-height);
  color: var(--wr-svc-title-color);
}

#wr-header .wr-svc-tag {
  display: block;
  margin-top: var(--wr-svc-tag-mt);
  font-family: var(--wr-svc-tag-font-family);
  font-size: var(--wr-svc-tag-font-size);
  line-height: var(--wr-svc-tag-line-height);
  color: var(--wr-svc-tag-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------- CTA gomb (asztali) ----------- */
#wr-header .wr-cta-wrap {
  display: block;
  flex-shrink: 0;
}

#wr-header .wr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--wr-cta-gap);
  padding: var(--wr-cta-padding-desktop);
  border-radius: var(--wr-cta-radius);
  background: var(--wr-cta-bg);
  color: var(--wr-cta-color);
  font-family: var(--wr-cta-font-family);
  font-size: var(--wr-cta-font-size-desktop);
  font-weight: var(--wr-cta-weight);
  line-height: var(--wr-cta-line-height);
  white-space: nowrap;
  box-shadow: var(--wr-cta-shadow);
  transition: transform 0.25s ease, background 0.25s ease;
}

#wr-header .wr-btn:hover {
  background: var(--wr-cta-bg-hover);
  color: var(--wr-cta-color);
  transform: translateY(var(--wr-cta-hover-lift));
}

#wr-header .wr-btn svg {
  display: block;
  width: var(--wr-cta-icon-size);
  height: var(--wr-cta-icon-size);
  flex-shrink: 0;
  stroke: var(--wr-cta-color);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------- Burger (mobil trigger) ----------- */
#wr-header .wr-burger {
  display: none;
  position: absolute;
  right: var(--wr-burger-offset-right);
  top: 50%;
  z-index: calc(var(--wr-header-z) + 2);
  align-items: center;
  justify-content: center;
  width: var(--wr-burger-size);
  height: var(--wr-burger-size);
  padding: 0;
  border: 1px solid var(--wr-burger-border);
  border-radius: var(--wr-burger-radius);
  background: var(--wr-burger-bg);
  transform: translateY(-50%);
  transition: background 0.15s ease;
}

#wr-header .wr-burger:hover {
  background: var(--wr-burger-bg-hover);
}

#wr-header .wr-burger svg {
  display: block;
  width: var(--wr-burger-icon-size);
  height: var(--wr-burger-icon-size);
  flex-shrink: 0;
  stroke: var(--wr-burger-icon-color);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------- Mobil menü panel ----------- */
#wr-header .wr-mob {
  display: none;
  max-height: calc(100svh - var(--wr-mob-max-h-offset));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--wr-mob-border-top);
  background: var(--wr-mob-bg);
}

#wr-header .wr-mob.wr-open {
  display: block;
}

#wr-header .wr-mob-nav {
  display: flex;
  flex-direction: column;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--wr-mob-pad-top) var(--wr-mob-pad-x) var(--wr-mob-pad-bottom);
}

#wr-header .wr-mob-link {
  display: block;
  padding: var(--wr-mob-link-padding);
  border-radius: var(--wr-mob-link-radius);
  font-family: var(--wr-mob-link-font-family);
  font-size: var(--wr-mob-link-font-size);
  font-weight: var(--wr-mob-link-weight);
  line-height: var(--wr-mob-link-line-height);
  color: var(--wr-mob-link-color);
  transition: background 0.15s ease;
}

#wr-header .wr-mob-link:hover {
  background: var(--wr-mob-link-bg-hover);
  color: var(--wr-mob-link-color-hover);
}

#wr-header .wr-mob-sub {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2px 0 6px var(--wr-mob-sub-indent);
  padding: 2px 0 4px var(--wr-mob-sub-pad-left);
  border-left: var(--wr-mob-sub-border-w) solid var(--wr-mob-sub-border);
}

#wr-header .wr-mob-sub-link {
  display: block;
  padding: var(--wr-mob-sub-padding);
  border-radius: var(--wr-mob-sub-radius);
  font-family: var(--wr-mob-sub-font-family);
  font-size: var(--wr-mob-sub-font-size);
  font-weight: var(--wr-mob-sub-weight);
  line-height: var(--wr-mob-sub-line-height);
  color: var(--wr-mob-sub-color);
  transition: color 0.15s ease;
}

#wr-header .wr-mob-sub-link:hover {
  color: var(--wr-mob-sub-color-hover);
}

#wr-header .wr-mob-cta {
  margin-top: var(--wr-mob-cta-mt);
}

#wr-header .wr-mob-cta .wr-btn {
  width: 100%;
  justify-content: center;
  padding: var(--wr-cta-padding-mobile);
  font-size: var(--wr-cta-font-size-mobile);
}

/* ----------- Breakpointok ----------- */
@media (max-width: 1024px) {
  #wr-header-spacer {
    height: var(--wr-header-height-mobile);
  }

  #wr-header .wr-inner {
    min-height: var(--wr-header-height-mobile);
    padding: var(--wr-header-pad-y-mobile) var(--wr-header-pad-x-mobile);
  }

  #wr-header .wr-logo img {
    max-height: var(--wr-logo-height-mobile);
  }

  #wr-header .wr-nav,
  #wr-header .wr-cta-wrap {
    display: none;
  }

  #wr-header .wr-burger {
    display: flex;
  }
}

@media (max-width: 640px) {
  #wr-header .wr-inner {
    min-height: var(--wr-header-height-mobile);
    padding: var(--wr-header-pad-y-xs) 58px var(--wr-header-pad-y-xs) var(--wr-header-pad-x-mobile);
  }

  #wr-header .wr-logo img {
    max-height: var(--wr-logo-height-xs);
    max-width: calc(100vw - 92px);
  }
}

@media (min-width: 1025px) {
  #wr-header .wr-mob {
    display: none;
  }
}