/* =========================================================
   SOCIALFOOD – HEADER + OFFCANVAS
   CORE SYSTEM (ELEMENTOR)
   Version: 1.0.3
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{
  --header-height: 87px;

  /* Z-INDEX SYSTEM */
  --z-header: 900;
  --z-offcanvas: 9999;
}


/* =========================================================
   ELEMENTOR HEADER ROOT (STICKY)
========================================================= */

.elementor-location-header{
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.header-inner{
  background-color: #ffffff;
}


/* =========================================================
   HEADER INNER (ANIMATED LAYER)
========================================================= */

.header-inner{
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;

  transition:
    transform .35s cubic-bezier(.2,.8,.35,1),
    box-shadow .25s ease,
    background-color .25s ease;

  will-change: transform;
}


/* =========================================================
   LOGO
========================================================= */

.logo{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.logo img{
  height: 40px;
  width: auto;
  max-height: 40px;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.header-right{
  display: flex;
  align-items: center;
  gap: 27px;
}

@media (max-width:1024px){
  .header-right{
    gap: 15px;
  }
}


/* =========================================================
   NAVIGATION (DESKTOP)
========================================================= */

.nav-wrapper{
  display: flex;
}

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


/* =========================================================
   HEADER NAV – ACCENT TYPOGRAPHY
========================================================= */

.header-nav{
  display: block;
}

.header-nav .menu{
  display: flex;
  align-items: center;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-nav .menu a{
  display: inline-flex;
  align-items: center;
  padding: 12px 0 13px;
  position: relative;
  text-decoration: none;
  white-space: nowrap;

  font-family: var(--e-global-typography-accent-font-family);
  font-weight: var(--e-global-typography-accent-font-weight);
  letter-spacing: var(--e-global-typography-accent-letter-spacing);
  line-height: var(--e-global-typography-accent-line-height);

  color: var(--e-global-color-primary);
}


/* =========================================================
   HEADER NAV – HOVER UNDERLINE (DESKTOP ONLY)
========================================================= */

@media (min-width:1025px){
  .elementor-location-header .header-nav .menu a:hover{
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }
}


/* =========================================================
   LANGUAGE SWITCHER – ACCENT TYPOGRAPHY
========================================================= */

.lang{
  display: flex;
  align-items: center;
  gap: 6px;

  /* EINE Farbquelle – identisch zur Header-Navigation */
  color: var(--e-global-color-primary);
}


/* ICON */
.lang-icon{
  width: 21px;
  height: 21px;
  display: block;
  flex-shrink: 0;

  color: currentColor;
}

/* SVG übernimmt die Farbe sauber */
.lang-icon svg{
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}


/* TEXT / LINKS */
.lang a,
.lang-sep{
  display: inline-flex;
  align-items: center;

  font-family: var(--e-global-typography-accent-font-family);
  font-weight: var(--e-global-typography-accent-font-weight);
  letter-spacing: var(--e-global-typography-accent-letter-spacing);
  line-height: var(--e-global-typography-accent-line-height);

  color: currentColor;
  text-decoration: none;
}


/* =========================================================
   ACTION SLOT
========================================================= */

.hamburger-wrapper,
.offcanvas-close{
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}


/* =========================================================
   HAMBURGER ICON
========================================================= */

.custom-hamburger{
  width: 40px;
  height: 25px;
  position: relative;
  display: block;
}

.custom-hamburger span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--e-global-color-primary);
  border-radius: 2px;
  transition: transform .3s ease, top .3s ease, opacity .2s ease;
}

.custom-hamburger span:nth-child(1){ top: 0; }
.custom-hamburger span:nth-child(2){ top: 50%; transform: translateY(-50%); }
.custom-hamburger span:nth-child(3){ bottom: 0; }

.custom-hamburger.open span:nth-child(1){
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.custom-hamburger.open span:nth-child(2){
  opacity: 0;
}

.custom-hamburger.open span:nth-child(3){
  top: 50%;
  bottom: auto;
  transform: translateY(-50%) rotate(-45deg);
}


/* =========================================================
   OFFCANVAS CLOSE – X ICON (STATIC)
========================================================= */

.close-x{
  width: 40px;
  height: 25px;
  position: relative;
  display: block;
}

.close-x span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--e-global-color-primary);
  border-radius: 2px;
}

.close-x span:nth-child(1){
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.close-x span:nth-child(2){
  display: none;
}

.close-x span:nth-child(3){
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}


/* =========================================================
   RESPONSIVE VISIBILITY
========================================================= */

@media (min-width:1025px){
  .hamburger-wrapper{
    display: none;
  }
}

@media (max-width:1024px){
  .hamburger-wrapper{
    display: flex;
  }
}


/* =========================================================
   OFFCANVAS PANEL
========================================================= */

.offcanvas{
  position: fixed;
  inset: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-offcanvas);

  transition:
    left .28s cubic-bezier(.2,.8,.35,1),
    opacity .22s ease .06s;

  will-change: left, opacity;
}

body.offcanvas-open .offcanvas{
  left: 0;
  opacity: 1;
  pointer-events: auto;
}


/* =========================================================
   OFFCANVAS CONTENT
========================================================= */

.offcanvas-content{
  padding-left: 15px;
  padding-right: 15px;
}


/* =========================================================
   OFFCANVAS NAVIGATION
========================================================= */

.offcanvas-nav{
  width: 100%;
  margin-top: 0 !important;
}

.offcanvas-nav .offcanvas-menu{
  list-style: none;
  margin: 0;
  padding: 0;
}

.offcanvas-nav .offcanvas-menu li{
  margin: 0;
  padding: 0;
}

.offcanvas-nav .offcanvas-menu a{
  display: flex;
  align-items: center;
  height: 69px;
  width: 100%;
  padding: 0 15px;
  border-bottom: 1px solid #bfbfbf;
  text-decoration: none;

  font-family: var(--e-global-typography-accent-font-family);
  font-weight: var(--e-global-typography-accent-font-weight);
  letter-spacing: var(--e-global-typography-accent-letter-spacing);

  font-size: 20px;
  line-height: 26px;

  color: var(--e-global-color-primary);
  background: none;
}


/* =========================================================
   OFFCANVAS – REMOVE ELEMENTOR CONTAINER GAP
========================================================= */

.offcanvas-content,
.offcanvas-body,
.offcanvas-content > .e-con-inner,
.offcanvas-body > .e-con-inner{
  gap: 0 !important;
  row-gap: 0 !important;
  --gap: 0 !important;
  --row-gap: 0 !important;
}


/* =========================================================
   OFFCANVAS HEADER
========================================================= */

.offcanvas-header{
  height: var(--header-height);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.offcanvas-header .header-inner{
  height: 100%;
  padding-left: 0;
  padding-right: 0;
}


/* =========================================================
   SCROLL STATES
========================================================= */

body.header-scrolled
.elementor-location-header
.header-inner{
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

body.header-hidden
.elementor-location-header
.header-inner{
  transform: translateY(-120%);
}

body.header-visible
.elementor-location-header
.header-inner{
  transform: translateY(0);
}


/* =========================================================
   ELEMENTOR EDITOR – OFFCANVAS VISIBLE
========================================================= */

@media (max-width:1024px){
  body.elementor-editor-active .offcanvas{
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}