/*
Theme Name: Divi Child - dev.musicz.lu
Theme URI: https://dev.musicz.lu
Description: Transparenter Header + Logo-Style Menue + Hover-Underline
Author: musicz.lu
Template: Divi
Version: 1.4.0
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* === Transparenter Header === */
html body #main-header,
html body.home #main-header,
html body.et_fixed_nav #main-header,
html body #page-container #main-header {
  background-color: rgba(255, 255, 255, 0) !important;
  background: rgba(255, 255, 255, 0) !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

html body #main-header.et-fixed-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* === Menue im Logo-Stil === */
html body #main-header #top-menu li a,
html body #main-header.et-fixed-header #top-menu li a {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif !important;
  color: #76C5C1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  position: relative !important;
  padding-bottom: 8px !important;
  transition: color 0.3s ease !important;
}

/* === HOVER-EFFEKT: Underline slidet von links nach rechts === */
html body #main-header #top-menu li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background-color: #76C5C1 !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html body #main-header #top-menu li a:hover::after {
  width: 100% !important;
}

/* Hover-Text leicht heller */
html body #main-header #top-menu li a:hover {
  color: #5DADA9 !important;
  opacity: 1 !important;
}

/* Aktive Seite hat immer einen Unterstrich */
html body #main-header #top-menu li.current-menu-item > a::after,
html body #main-header #top-menu li.current_page_item > a::after,
html body #main-header #top-menu li.current-menu-ancestor > a::after {
  width: 100% !important;
}

html body #main-header #top-menu li.current-menu-item > a,
html body #main-header #top-menu li.current_page_item > a {
  color: #76C5C1 !important;
  font-weight: 700 !important;
}

/* Such-Icon und Hamburger in Brand-Farbe */
html body #main-header #et_top_search .et_top_search_icon:before,
html body #main-header.et-fixed-header #et_top_search .et_top_search_icon:before,
html body #main-header .mobile_menu_bar:before {
  color: #76C5C1 !important;
  transition: transform 0.3s ease !important;
}

html body #main-header #et_top_search .et_top_search_icon:hover:before {
  transform: scale(1.2) !important;
}

/* Mobile Menue Texte */
html body #main-header .et_mobile_menu li a {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif !important;
  color: #76C5C1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: padding-left 0.3s ease !important;
}

html body #main-header .et_mobile_menu li a:hover {
  padding-left: 25px !important;
  background-color: rgba(118, 197, 193, 0.1) !important;
}

html body.home #page-container {
  padding-top: 0 !important;
}