/* Smooth logo swap and consistent sizing/centering */

/* Mantener el mismo tamaño en ambos estados */
.site-header .header-header .custom-logo-link img {
  width: 50px !important;
  height: auto !important;
  position: relative;
  top: 0;
}
@media (max-width: 768px){
  .site-header .header-header .custom-logo-link img { width: 33px !important; }
}

/* Evitar reducción de tamaño cuando el header es fijo */
.site-header.site-header--fixed .header-header .custom-logo-link.logo-green img {
  width: 50px !important;
}

/* Suavizar transición entre logos */
@keyframes logoFade {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.site-header.site-header--fixed .header-header .custom-logo-link.logo-green img { animation: logoFade .25s ease both; }
.site-header:not(.site-header--fixed) .header-header .custom-logo-link.logo-white img { animation: logoFade .25s ease both; }

/* Igualar tamaño del logo en modo transparente y blanco */
.site-header:not(.site-header--fixed) .header-header .custom-logo-link img {
  width: 50px !important;
  height: auto !important;
}

/* Left burger popover */
.left-burger { position: relative; }
.left-burger .burger-menu-trigger { cursor: pointer; margin-right: 10px; display: inline-flex; align-items: center; }
.left-burger .burger-menu-trigger svg { width: 26px; height: 26px; fill: currentColor; }

/* Fix burger button colors - using path selector to override main CSS */
.site-header.site-header--white .left-burger .burger-menu-trigger svg path { fill: #ffffff !important; }
.site-header.site-header--fixed .left-burger .burger-menu-trigger svg path { fill: #333333 !important; }
.left-burger .burger-menu-trigger:hover svg path { fill: #00c9cc !important; }

/* Extended hover area - prevents menu from closing */
.left-burger:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -50px;
  bottom: -10px;
  z-index: 1;
}

.left-burger-popover { 
  position: absolute; 
  left: -5px; 
  top: 38px; 
  background: #ffffff; 
  padding: 0;
  margin: 0;
  border-radius: 4px; 
  box-shadow: 0 0 15px rgb(150 150 150 / 10%);
  display: none; 
  min-width: 220px; 
  z-index: 9999;
  overflow: hidden;
}

/* Show menu on hover with extended hover area */
.left-burger:hover .left-burger-popover { 
  display: block; 
  animation: menuFade .18s ease; 
}
.left-burger-popover.open { 
  display: block; 
  animation: menuFade .18s ease; 
}

/* Menu styling matching area-privada */
.left-burger-popover .menu { 
  display: block !important; 
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.left-burger-popover .menu li { 
  list-style: none !important;
  padding: 15px 20px !important;
  border-bottom: 1px solid rgb(45 45 45 / 6%) !important;
  margin: 0 !important;
  display: block !important;
  text-indent: 0 !important;
  position: relative !important;
  left: 0 !important;
  transform: translateX(0) !important;
}

.left-burger-popover .menu li:last-child {
  border-bottom: 0 !important;
}

.left-burger-popover .menu a { 
  color: #2d2d2d !important; 
  display: block !important;
  text-decoration: none !important;
  font-size: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  text-indent: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

/* Force remove any inherited spacing from WordPress menu system and site-navigation */
.left-burger-popover .site-navigation {
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Override any specific margin rules from main CSS */
.left-burger-popover .site-navigation.justify-content-start {
  margin-left: 0 !important;
}

.left-burger-popover .menu,
.left-burger-popover .menu *,
.left-burger-popover .site-navigation,
.left-burger-popover .site-navigation * {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.left-burger-popover .menu a:hover { 
  color: #00c9cc !important; 
  background: none !important;
}

.left-burger-popover .menu li.current-menu-item a {
  font-weight: bold !important;
  color: #00c9cc !important;
}

@keyframes menuFade { 
  from { opacity: 0; transform: translateY(-4px);} 
  to { opacity: 1; transform: translateY(0);} 
}

/* Ultra-specific override for any remaining margins */
#left-burger-popover .site-navigation,
#left-burger-popover .site-navigation ul,
#left-burger-popover .site-navigation ul.menu,
#left-burger-popover .site-navigation ul.menu li {
  margin: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}

#left-burger-popover .site-navigation ul.menu li {
  padding: 15px 20px !important;
}

/* Responsive behavior - hide new burger menu on tablets and mobile */
@media (max-width: 991px) {
  .left-burger {
    display: none !important;
  }
  
  /* Override inline CSS padding from header.php */
  .site-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Additional override for smaller screens (575px breakpoint from inline CSS) */
@media (max-width: 575px) {
  .site-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Ensure original mobile burger menu works correctly */
@media (max-width: 991px) {
  .burger-menu-trigger {
    display: block !important;
  }
  
  /* Fix any potential conflicts with our new styles */
  .site-header .header-header .burger-menu-trigger svg path {
    fill: #08798b !important;
  }
  
  .site-header:not(.site-header--fixed).site-header--white .header-header .burger-menu-trigger svg path {
    fill: #fff !important;
  }
  
  .site-header.site-header--fixed .header-header .burger-menu-trigger svg path {
    fill: #333333 !important;
  }
  
  .site-header .header-header .burger-menu-trigger:hover svg path {
    fill: #00c9cc !important;
  }
  
  /* Hide our new left-burger column in mobile */
  .site-header .header-header .row > div:nth-child(1) {
    order: 4 !important;
    display: none !important;
  }
}

/* OVERRIDE THE MAIN THEME CSS - Use 992px breakpoint to match main theme */
@media (max-width: 992px) {
  /* Override main theme order - BURGER LEFT, LOGO CENTER, AREA-PRIVADA RIGHT */
  .site-header .burguer-column {
    order: 1 !important;
    justify-content: flex-start !important;
  }
  
  .site-header .logo-column-container {
    order: 2 !important;
    justify-content: center !important;
  }
  
  .site-header .menu-column {
    order: 3 !important;
    justify-content: flex-end !important;
  }
  
  /* FORCE the correct alignment - override main theme CSS with higher specificity */
  .site-header .burguer-column {
    order: 1 !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  
  .site-header .menu-column {
    order: 3 !important;
    justify-content: flex-end !important;
    text-align: right !important;
  }
  
  .site-header .menu-column > nav {
    justify-content: flex-end !important;
  }
  
  /* Use even higher specificity to override main theme */
  header.site-header .menu-column {
    justify-content: flex-end !important;
  }
  
  header.site-header .menu-column > nav {
    justify-content: flex-end !important;
  }
  
  header.site-header .burguer-column {
    justify-content: flex-start !important;
  }
}

/* Add comfortable margins for mobile */
@media (max-width: 767px) {
  /* Add small margins to prevent elements from being too close to edges */
  .site-header .header-header.container-fluid {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  
  /* Fine-tune individual element spacing */
  .site-header.site-header--front_page .header-header .burger-menu-trigger {
    margin-left: 5px !important;
  }
  
  .menu-global-menu-principal-zona-derecha-container {
    margin-right: 5px !important;
  }
  
  .logo-column-container > a {
    margin-left: 0 !important;
  }
}