/* =========================================================
   KRANATU – HEADER
   Header, Navigation, mobile Off-Canvas-Navigation
   und Header-Icons.

   Responsive Regeln innerhalb dieser Header-Komponente
   bleiben hier, weil sie unmittelbar zur Funktionsweise
   von Navigation und Off-Canvas gehören.
========================================================= */

/* ================================
   Header Basis
================================== */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  z-index: 9999;
  background-color: var(--ast-global-color-4);
  box-shadow: none !important;
}
/* ================================
   Header Höhe & vertikale Ausrichtung gelöscht
================================== */

/* ================================
   Header Höhe & Ausrichtung
================================== */

.site-header .ast-primary-header-bar,
.site-header .site-primary-header-wrap,
.site-header .ast-builder-grid-row {
  min-height: 64px;
}

.site-header .ast-builder-grid-row {
  align-items: center;
}

.site-header .site-header-section,
.site-header .ast-builder-layout-element,
.site-header .ast-builder-layout-element > div {
  display: flex;
  align-items: center;
}

/* ================================
   Logo im Header
================================== */
.kranatu-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 1rem 1rem;
}

.kranatu-logo {
  height: auto;
  width: 100px;
  max-height: 180px;
  transition: all 0.3s ease;
}

.site-header .kranatu-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-header .kranatu-logo {
  transform: translateY(-2px);
}

/* HTML-Logo im Header (Customizer-Modul) */
.kr-header-logo-html {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.kr-header-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
}

.kr-header-logo-img {
  display: block;
  width: 180px;
  height: auto;
  transform: translateY(-2px);
}
/* ================================
   Desktop-Menü
================================== */
@media (min-width: 1025px) {
  .ast-desktop .main-header-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .ast-desktop .main-header-menu > .menu-item {
    position: relative;
  }

  .ast-desktop .main-header-menu > .menu-item > .menu-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background: transparent !important;
    width: auto !important;
    color: inherit;
  }

  .ast-desktop .main-header-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10000;
    min-width: 220px;
    background: var(--ast-global-color-4);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
  }

  .ast-desktop .main-header-menu .sub-menu .menu-item {
    width: 100%;
  }

  .ast-desktop .main-header-menu .sub-menu .menu-link {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    background: transparent !important;
    color: inherit;
  }

  .ast-desktop .main-header-menu .sub-menu .menu-link:hover {
    background: var(--ast-global-color-7) !important;
  }
}

/* ================================
   Astra Off-Canvas wirklich begrenzen
   Mobile + Tablet bis 1024px
================================== */
@media (max-width: 1024px) {
  .ast-mobile-popup-drawer,
  .ast-mobile-popup-inner,
  .ast-mobile-popup-content,
  .ast-popup-nav-wrap,
  .ast-builder-menu-mobile,
  .ast-header-break-point .main-header-bar-navigation,
  .ast-builder-menu-mobile .main-navigation {
    width: min(360px, calc(100vw - 2rem)) !important;
    max-width: min(360px, calc(100vw - 2rem)) !important;
    box-sizing: border-box !important;
  }

  .ast-mobile-popup-drawer,
  .ast-popup-nav-wrap,
  .ast-header-break-point .main-header-bar-navigation {
    left: 1rem !important;
    right: auto !important;
    top: 0 !important;
    transform: none !important;
  }

  .ast-mobile-popup-content {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }

  /* Menüstruktur im Drawer */
  .ast-mobile-popup-content .main-header-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .ast-mobile-popup-content .main-header-menu .menu-item {
    width: 100%;
    margin: 0;
  }

  /* Hauptpunkte: Farben aus Astra übernehmen */
  .ast-mobile-popup-content .main-header-menu .menu-link {
    display: block;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--ast-global-color-1);
    color: var(--ast-global-color-3);
    border-bottom: 1px solid var(--ast-border-color);
    text-align: left;
  }

  /* Unterpunkte immer sichtbar */
  .ast-mobile-popup-content .sub-menu {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100% !important;
    box-shadow: none !important;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .ast-mobile-popup-content .sub-menu .menu-item {
    width: 100%;
  }

  /* Unterpunkte: Farben aus Astra übernehmen */
  .ast-mobile-popup-content .sub-menu .menu-link {
    width: 100%;
    padding-left: 2rem;
    background: var(--ast-global-color-4);
    color: var(--ast-global-color-3);
    border-bottom: 1px solid var(--ast-border-color);
  }

  /* Optionales Hover im Off-Canvas */
  .ast-mobile-popup-content .main-header-menu .menu-link:hover,
  .ast-mobile-popup-content .sub-menu .menu-link:hover {
    background: var(--ast-global-color-7);
    color: var(--ast-global-color-3);
  }
}

/* ================================
   Kranatu Icon System
================================== */

.kr-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.kr-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ================================
   Search Icon ersetzen
================================== */

/* Klickbares Such-Element stabil aufbauen */
.ast-search-icon .astra-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  position: relative;
  cursor: pointer;
  line-height: 1;
}

/* Original-SVG unsichtbar machen, aber nicht hart entfernen */
.ast-search-icon .astra-search-icon svg {
  opacity: 0 !important;
  width: 20px;
  height: 20px;
  display: block;
}

/* Eigenes Icon darüberlegen */
.ast-search-icon .astra-search-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  display: block;
  background-color: var(--kr-header-icon-color);
  pointer-events: none;
  -webkit-mask-image: url('https://kranatu.com/wp-content/uploads/2026/04/kr-icon-search.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('https://kranatu.com/wp-content/uploads/2026/04/kr-icon-search.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* ================================
   Menü- und Close-Icon ersetzen
================================== */

/* Alle Astra-Standardicons im Toggle ausblenden */
.main-header-menu-toggle .ast-menu-svg,
.main-header-menu-toggle .ast-close-svg,
.main-header-menu-toggle .ahfb-svg-iconset {
  display: none !important;
}

/* Button sauber ausrichten */
.main-header-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
  line-height: 1;
}

/* Eigenes Menü-Icon */
.main-header-menu-toggle::before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background-color: var(--kr-header-icon-color);
  pointer-events: none;

  -webkit-mask: url('https://kranatu.com/wp-content/uploads/2026/04/kr-icon-menu2-1.svg') no-repeat center / contain;
  mask: url('https://kranatu.com/wp-content/uploads/2026/04/kr-icon-menu2-1.svg') no-repeat center / contain;
}

/* Wenn Menü geöffnet ist: Close-Icon zeigen */
.main-header-menu-toggle[aria-expanded="true"]::before {
  -webkit-mask: url('https://kranatu.com/wp-content/uploads/2026/03/kr-icon-close.svg') no-repeat center / contain;
  mask: url('https://kranatu.com/wp-content/uploads/2026/03/kr-icon-close.svg') no-repeat center / contain;
}

/* ================================
   Cart Icon ersetzen
================================== */

/* Nur das eigentliche Cart-Linkelement vorbereiten */
.ast-site-header-cart a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  line-height: 1;
}

/* Nur das originale Cart-SVG ausblenden */
.ast-site-header-cart a svg {
  opacity: 0 !important;
}

/* Eigenes Cart-Icon */
.ast-site-header-cart a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  display: block;
  background-color: var(--kr-header-icon-color);
  pointer-events: none;

  -webkit-mask-image: url('https://kranatu.com/wp-content/uploads/2026/04/kr-icon-cart1.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('https://kranatu.com/wp-content/uploads/2026/04/kr-icon-cart1.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
/* ================================
   Cart Badge im Header feinjustieren
================================== */

.ast-site-header-cart .count,
.ast-site-header-cart .cart-badge,
.ast-site-header-cart .count.ast-header-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  transform: none;
  z-index: 2;
}

/* ================================
   Account / User Icon ersetzen
================================== */

/* Nur den eigentlichen Account-Link vorbereiten */
.ast-header-account-wrap a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  line-height: 1;
}

/* Original-Account-Icon unsichtbar machen */
.ast-header-account-wrap a svg,
.ast-header-account-wrap a i,
.ast-header-account-wrap a .avatar,
.ast-header-account-wrap a .ast-icon {
  opacity: 0 !important;
}

/* Eigenes User-Icon */
.ast-header-account-wrap a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  display: block;
  background-color: var(--kr-header-icon-color);
  pointer-events: none;

  -webkit-mask-image: url('https://kranatu.com/wp-content/uploads/2026/04/kr-icon-user1.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('https://kranatu.com/wp-content/uploads/2026/04/kr-icon-user1.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}