/**
 * @file
 * Topbar Styles für gavias_batiz Theme
 *
 * @author Willi da Silva Borges - WDSB-Webdesign
 * @version 2025.10.31.019000
 */

/* ============================================================================
   HEADER CONTAINER - Umgibt alle Topbar-Elemente
   ============================================================================ */

#header {
  width: 100%;
  height: calc(clamp(100px, 8.928vw, 150px) + 45px);
  position: relative;
  overflow: visible;
}

/* ============================================================================
   TOPBAR CONTAINER - Enthält nur das Logo
   ============================================================================ */

#topbar {
  width: 100%;
  height: clamp(100px, 8.928vw, 150px);
  min-height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  overflow: visible;
}

#topbar .container {
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  max-width: 100%;
  width: 100%;
}

#topbar .row {
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

/* ============================================================================
   LOGO - IMMER ZENTRIERT
   ============================================================================ */

.st-topbar-center {
  height: 100%;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.st-topbar-center * {
  pointer-events: auto;
}

#st-topbar-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  margin: 0;
  padding: 0;
  z-index: 1000;
  pointer-events: auto;
}

#st-topbar-logo a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}

#st-topbar-logo img {
  height: clamp(70px, 8.333vw, 140px);
  width: auto;
  max-width: 300px;
  margin: 0;
  padding: 0;
  display: block;
}

#block-gavias-batiz-footerheaderlogo {
  width: 100%;
  text-align: center;
}

#block-gavias-batiz-footerheaderlogo img {
  height: clamp(70px, 8.333vw, 140px);
  width: auto;
  max-width: 300px;
}

/* ============================================================================
   MAIN MENU BG - Hintergrund-Container
   ============================================================================ */

.main-menu-bg {
  width: 100%;
  position: absolute;
  display: block;
  z-index: 5;
  top: clamp(100px, 8.928vw, 150px);
  left: 0;
  height: 45px;
}

/* ============================================================================
   MAIN MENU - Hauptmenü
   ============================================================================ */

.main-menu {
  width: 100%;
  position: absolute;
  z-index: 6;
  top: calc(clamp(100px, 8.928vw, 150px) + 15.5px);
  left: 0;
  height: 45px;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.main-menu * {
  pointer-events: auto;
}

.main-menu-inner {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============================================================================
   TOPBAR LEFT & RIGHT - Eigenständige Container
   ============================================================================ */

.st-topbar-left,
.st-topbar-right {
  position: absolute;
  height: 36px;
  display: flex;
  align-items: center;
  z-index: 103 !important;
  transition: all 0.3s ease;
  pointer-events: auto !important;
}

.st-topbar-left {
  justify-content: flex-start;
}

.st-topbar-right {
  justify-content: flex-end;
}

/* ============================================================================
   CENTER ICONS CONTAINER - Suche + Social Media
   ============================================================================ */

.st-topbar-center-icons {
  position: absolute;
  display: none;
  z-index: 1001;
}

.st-topbar-icons-inner {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}

.st-topbar-icons-inner .search,
.st-topbar-icons-inner #st-socialmedia-top {
  display: flex;
  align-items: center;
}

.st-topbar-icons-inner .search {
  margin: 0;
  padding: 0;
}

#st-socialmedia-top {
  gap: 5px;
  flex-wrap: nowrap;
}

.current-date {
  margin-left: 15px;
}

/* Icon Farben */
.st-topbar-icons-inner .search a,
.st-topbar-icons-inner .search i,
.st-follow,
.st-follow i {
  color: #ff0;
  transition: color 0.3s ease;
}

.st-topbar-icons-inner .search a:hover,
.st-topbar-icons-inner .search a:hover i,
.st-follow:hover,
.st-follow:hover i {
  color: #fff;
}

/* ============================================================================
   OFFCANVAS BUTTONS
   ============================================================================ */

.toggle-sbLeft-btn,
.toggle-sbRight-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  pointer-events: auto !important;
  position: relative;
  z-index: 102 !important;
}

.menue-xs,
.toppbar-xs {
  font-size: 8px;
}

/* ============================================================================
   BLOCK STYLES
   ============================================================================ */

#block-gavias-batiz-mainleft {
  width: 41%;
}

#block-gavias-batiz-mainright {
  width: 41%;
  text-align: left;
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* === TABLET/DESKTOP: >= 768px === */
@media (min-width: 768px) {
  /* Center Icons Container über volle Breite, Icons links/rechts */
  .st-topbar-center-icons {
    display: flex !important;
    width: 100%;
    left: 0;
    right: 0;
    top: calc(clamp(100px, 8.928vw, 150px) + 22.5px);
    transform: translateY(-50%);
    z-index: 100;
  }
  
  .st-topbar-icons-inner {
    width: 100%;
    justify-content: space-between;
    padding: 0 calc(clamp(25px, 2.976vw, 50px) + 40px);
    gap: 10px;
  }
    
  .current-date {
    display: block;
    margin-left: 25px;
  }
}

/* === DESKTOP: >= 992px === */
@media (min-width: 992px) {
  /* Center Icons Container bei Desktop normal positioniert */
  .st-topbar-center-icons {
    top: calc(clamp(100px, 8.928vw, 150px) / 2);
  }
  
  /* Left & Right Container visuell in TOPBAR positionieren */
  .st-topbar-left {
    left: clamp(25px, 2.976vw, 50px);
    top: calc(clamp(100px, 8.928vw, 150px) / 2);
    transform: translateY(-50%);
    z-index: 103 !important;
    pointer-events: auto !important;
  }
  
  .st-topbar-right {
    right: clamp(25px, 2.976vw, 50px);
    top: calc(clamp(100px, 8.928vw, 150px) / 2);
    transform: translateY(-50%);
  }
  
  /* Main Menu: SICHTBAR */
  .main-menu {
    display: flex !important;
  }
}

/* === TABLET/MOBILE: < 992px === */
@media (max-width: 991px) {
  /* Left & Right Container visuell in MAIN-MENU-BG zentrieren */
  .st-topbar-left {
    left: clamp(25px, 2.976vw, 50px);
    top: calc(clamp(100px, 8.928vw, 150px) + 22.5px);
    transform: translateY(-50%);
    display: flex !important;
    visibility: visible !important;
    z-index: 103 !important;
    pointer-events: auto !important;
  }
  
  .st-topbar-right {
    right: clamp(25px, 2.976vw, 50px);
    top: calc(clamp(100px, 8.928vw, 150px) + 22.5px);
    transform: translateY(-50%);
    display: flex !important;
    visibility: visible !important;
  }
  
  /* Main Menu: AUSGEBLENDET */
  .main-menu {
    display: none !important;
  }
}

/* === MOBILE MEDIUM: < 768px === */
@media (max-width: 767px) {
  /* Current-Date ausblenden */
  .current-date {
    display: none !important;
  }
  
  /* Center Icons Container aktivieren und zentrieren */
  .st-topbar-center-icons {
    display: flex !important;
    width: auto !important;
    left: 50% !important;
    right: auto !important;
    top: calc(clamp(100px, 8.928vw, 150px) + 22.5px);
    transform: translate(-50%, -50%) !important;
    justify-content: center !important;
  }
  
  .st-topbar-icons-inner {
    width: auto !important;
    justify-content: center !important;
    padding: 0 !important;
    gap: 5px !important;
  }
  
  /* OffCanvas Buttons sichtbar */
  #myOffCanvasLeft,
  #myOffCanvasRight {
    display: flex !important;
  }
}

/* === MOBILE SMALL: < 380px === */
@media (max-width: 379px) {
  /* Center Icons Container ausblenden */
  .st-topbar-center-icons {
    display: none !important;
  }
  
  /* Current Date ausblenden */
  .current-date {
    display: none !important;
  }
  
  /* OffCanvas-Buttons explizit sichtbar */
  #myOffCanvasLeft,
  #myOffCanvasRight {
    display: flex !important;
  }
}

/* === SEHR GROSSE BILDSCHIRME: > 1538px === */
@media (min-width: 1539px) {
  #block-gavias-batiz-mainleft,
  #block-gavias-batiz-mainright {
    display: block;
  }
}

/* === GROSSE BILDSCHIRME: <= 1538px === */
@media (max-width: 1538px) {
  .gavias-blockbuilder-content .link-edit-blockbuider,
  #block-gavias-batiz-mainleft,
  #block-gavias-batiz-mainright {
    display: none;
  }
}
.topbar-xsl,
.topbar-xsr {
  font-size: 8px;
}