/* ============================================================
   File: header.css
   Project: Bering.si
   Purpose: Header layout, header menu, row-2 behaviors
   Author: Aco Vidovič
   ============================================================ */

/* GLOBAL ROW WIDTH CLAMP – header & footer bands */
/* .header-row-inner,
.footer-row-inner {
  width: 100%;
  max-width: 1440px !important;  
  margin: 0 auto;
  box-sizing: border-box;
} */

/* ========================================= */
/* HEADER ROW 2 BASE – no lift / no shadow   */
/* ========================================= */

#header-row-2 a,
#header-row-2 .elementor-container,
#header-row-2 .elementor-widget-container {
  transform: none !important;
  box-shadow: none !important;
  /* transition: none !important; */
}

/* HEADER MENU – hover + NEWS highlight */

#header-row-2 a:hover {
  color: white !important;
}

body.single-post li#menu-item-8727 > a.hfe-menu-item {
  background-color: var(--bering-accent-hover) !important;
  color: #ffffff !important;
  border-radius: 3px !important;
}

/* HEADER ROW 2 – remove extra vertical padding/margins */
#header-row-2,
#header-row-2 .header-row-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ========================================= */
/* HEADER ROW 2 – center nav + search        */
/* ========================================= */

@media (min-width: 768px) {
  /* Make row-2 a flex row and center its children as a group */
  #header-row-2.e-con {
    display: flex;
    justify-content: center !important;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Let the inner band shrink to its content instead of 100% width */
  #header-row-2 .header-row-inner {
    width: auto !important;
    max-width: none; /* we already clamp the overall header via the outer container */
    display: flex;
    justify-content: center !important;
  }

  /* Kill any “push to the right” margins on the two children of row 2 */
  #header-row-2 > .header-row-inner,
  #header-row-2 > .elementor-widget-hfe-search-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Optional: small gap between menu and search icon */
  #header-row-2 > .elementor-widget-hfe-search-button {
    margin-left: 32px !important; /* adjust to taste */
  }

  /* Just in case: force the UL to behave like a centered flex row */
  #header-row-2 .hfe-nav-menu {
    display: flex;
    justify-content: center !important;
    margin: 0 auto !important;
  }
}

/* Submenu items: make the clickable <a> fill the entire dropdown row */
#header-row-2 .hfe-nav-menu ul.sub-menu > li > a.hfe-sub-menu-item {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Optional: remove default padding on the dropdown UL so the hover feels full-bleed */
#header-row-2 .hfe-nav-menu ul.sub-menu {
  padding: 0 !important;
}

/* Reserve space for the arrow at all times (no layout shift) */
#header-row-2 a.hfe-menu-item .hfe-menu-toggle.sub-arrow {
  display: inline-flex !important;   /* never allow display:none */
  width: 18px;                       /* reserves horizontal space */
  height: 18px;
  margin-left: 6px;

  align-items: center;
  justify-content: center;

  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 180ms ease !important;
}

/* Fade it out on hover instead of removing it */
#header-row-2 li.menu-item-has-children:hover > .hfe-has-submenu-container a.hfe-menu-item .hfe-menu-toggle.sub-arrow {
  opacity: 0;
  visibility: hidden; /* keeps space */
}

/* Safety net if UAE/HFE tries to set display:none on hover */
#header-row-2 li.menu-item-has-children:hover .hfe-menu-toggle.sub-arrow {
  display: inline-flex !important;
}

/* End of header.css */