/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* ========================================================================
   Design tokens
   Zentral gepflegte Werte für die Navigation. Wiederkehrende Komponenten
   sollen diese Variablen verwenden statt eigene Einzelwerte zu definieren.
   ======================================================================== */
:root {
  --og-white: #fff;
  --og-pink: #f78da7;
  --og-glass: rgba(22, 22, 24, .56);
  --og-glass-fallback: rgba(34, 34, 38, .94);
  --og-glass-border: rgba(255, 255, 255, .20);
  --og-glass-highlight: rgba(255, 255, 255, .085);
  --og-glass-radius: 24px;
  --og-glass-blur: 16px;
  --og-nav-height: 64px;
  --og-nav-mobile-gutter: 16px;
  --og-nav-mobile-top: 12px;
  --og-menu-gap: 8px;
}

/* ========================================================================
   Hauptnavigation / Liquid Glass
   Inhalte bleiben über WordPress-Menüs und die Betheme-Logoeinstellung
   bearbeitbar; CSS steuert ausschließlich Darstellung und Responsivität.
   ======================================================================== */
#Top_bar {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}

#Top_bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--og-glass);
  -webkit-backdrop-filter: blur(var(--og-glass-blur)) saturate(185%) brightness(1.08);
  backdrop-filter: blur(var(--og-glass-blur)) saturate(185%) brightness(1.08);
  pointer-events: none;
}

#Top_bar::before {
  z-index: 1;
}

#Top_bar > .container {
  position: relative;
  z-index: 2;
}

/* ========================================================================
   Desktop-Dropdown
   ======================================================================== */
#Top_bar .menu > li > ul.sub-menu {
  position: absolute;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--og-glass-border);
  border-radius: 18px;
  background: var(--og-glass);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 1px 0 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(var(--og-glass-blur)) saturate(185%) brightness(1.08);
  backdrop-filter: blur(var(--og-glass-blur)) saturate(185%) brightness(1.08);
  overflow: hidden;
  isolation: isolate;
}

#Top_bar .menu > li > ul.sub-menu::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--og-glass-highlight) 0%, rgba(255, 255, 255, .025) 32%, transparent 72%);
  pointer-events: none;
}

#Top_bar .menu > li > ul.sub-menu > li {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
}

#Top_bar .menu > li > ul.sub-menu > li > a {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--og-white);
  text-shadow: none;
  transition: color 180ms ease;
}

#Top_bar .menu > li > ul.sub-menu > li > a:hover,
#Top_bar .menu > li > ul.sub-menu > li.current-menu-item > a {
  background: transparent;
  color: var(--og-pink);
}

/* ========================================================================
   Mobile Navigation
   Kompakte Leiste mit sichtbarem Logo links und Menüschalter rechts.
   ======================================================================== */
@media only screen and (max-width: 959px) {
  #Top_bar {
    width: calc(100% - (2 * var(--og-nav-mobile-gutter))) !important;
    min-height: var(--og-nav-height) !important;
    margin: var(--og-nav-mobile-top) var(--og-nav-mobile-gutter) 0 !important;
    border-radius: var(--og-glass-radius) !important;
  }

  #Top_bar > .container,
  #Top_bar .column.one,
  #Top_bar .top_bar_left {
    width: 100% !important;
    max-width: none !important;
    min-height: var(--og-nav-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #Top_bar .top_bar_left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 0 10px 0 16px !important;
  }

  #Top_bar .logo {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 1 auto;
  }

  #Top_bar #logo {
    display: flex !important;
    align-items: center;
    height: 48px !important;
    line-height: 1;
    padding: 0 !important;
  }

  #Top_bar #logo img.logo-mobile,
  #Top_bar #logo img.logo-mobile-sticky {
    display: block !important;
    width: auto !important;
    max-width: min(48vw, 180px);
    max-height: 40px !important;
  }

  #Top_bar .menu_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: static !important;
    float: none !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 0 0 auto !important;
    flex: 0 0 48px !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }

  #Top_bar a.responsive-menu-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .10) !important;
    color: var(--og-white) !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10000 !important;
  }

  /* Eigenes Hamburger-Symbol: unabhängig vom Icon-Font immer klar sichtbar. */
  #Top_bar a.responsive-menu-toggle i {
    display: none !important;
  }

  #Top_bar a.responsive-menu-toggle::before {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--og-white);
    box-shadow: 0 -7px 0 var(--og-white), 0 7px 0 var(--og-white);
  }

  #Top_bar #menu {
    top: calc(100% + var(--og-menu-gap)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border: 1px solid var(--og-glass-border);
    border-radius: 18px !important;
    background: var(--og-glass-fallback);
    -webkit-backdrop-filter: blur(var(--og-glass-blur)) saturate(185%);
    backdrop-filter: blur(var(--og-glass-blur)) saturate(185%);
    overflow: hidden !important;
  }

  #Top_bar #menu ul,
  #Top_bar #menu li,
  #Top_bar #menu li a {
    background: transparent;
  }

  #Top_bar #menu li a {
    color: var(--og-white);
  }

  #Top_bar #menu li.current-menu-item > a,
  #Top_bar #menu li a:hover {
    color: var(--og-pink);
  }

  /* „Arbeiten" ist mobil beim Öffnen des Hauptmenüs immer aufgeklappt. */
  #Top_bar #menu .menu-item-has-children > ul.sub-menu,
  #Top_bar #menu li.submenu > ul.sub-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 10px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
  }

  #Top_bar #menu .menu-item-has-children > ul.sub-menu::before,
  #Top_bar #menu li.submenu > ul.sub-menu::before {
    display: none !important;
  }

  #Top_bar #menu .menu-item-has-children > .menu-toggle,
  #Top_bar #menu li.submenu > .menu-toggle {
    display: none !important;
  }

  #Top_bar #menu .menu-item-has-children > ul.sub-menu > li > a,
  #Top_bar #menu li.submenu > ul.sub-menu > li > a {
    padding: 0 20px 0 34px !important;
  }
}

/* ========================================================================
   Fallback für Browser ohne Backdrop-Filter
   ======================================================================== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #Top_bar::after,
  #Top_bar .menu > li > ul.sub-menu,
  #Top_bar #menu {
    background: var(--og-glass-fallback);
  }
}