/* ===== 1. MOBILE HEADER STABILITY & SMOOTH SLIDE ===== */
@media (max-width: 991.98px) {
  /* Prevent the header from shifting during animation */
  #Navigation .mobile-header-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  /* FIX: Smooth slide down (The "Pop" Fix) */
  .collapsing {
    height: 0;
    overflow: hidden !important;
    transition: height 0.35s ease !important;
    display: block !important;
  }

  /* FIX: White Toggler Button & Thin Border */
  #Navigation .navbar-toggler {
    color: #ffffff !important;
    border: 1px solid #ffffff !important; /* Thin white border */
    padding: 4px 8px !important;
    margin-top: 10px !important;
    background: transparent !important;
  }

  /* Make the hamburger icon (the spans/lines) white */
  #Navigation .navbar-toggler-icon {
    filter: invert(1) brightness(100%) !important;
  }
  
  /* If your toggler uses text like "MENU", make it white */
  #Navigation .navbar-toggler {
    color: #ffffff !important;
  }
}

/* ===== 2. SUBMENU LOGIC (Expanded by Default) ===== */
@media (max-width: 991.98px) {
  /* Force submenus to be expanded and visible (from Media 1) */
  .navbar .dropdown-menu .dropdown-menu {
    display: block !important; 
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;              
    border: 0 !important;               
    box-shadow: none !important;        
    background: transparent !important; 
  }

  /* Indent the sub-items so they look nested */
  .navbar .dropdown-menu li > .dropdown-menu .dropdown-item {
    padding-left: 2.5rem !important;
    
  }
}

/* ===== 3. DESKTOP FLYOUTS (Keep these as is) ===== */
@media (min-width: 992px) {
  .navbar .dropdown-menu li { position: relative; }
  .navbar .dropdown-menu li > .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    display: none;
  }
  .navbar .dropdown-menu li:hover > .dropdown-menu {
    display: block;
  }
}


@media (max-width: 991.98px) {
  /* 1. Make the Brand Container full width */
  #Navigation .navbar-brand {
    width: 100% !important;
    display: block !important;
    margin: 0 0 10px 0 !important; /* Bottom margin to space it from the button */
    padding: 0 !important;
    text-align: center !important;
  }

  /* 2. The "img-fluid" logic: Make the image stretch to the container */
  #Navigation .navbar-brand img {
    width: 100% !important;      /* Force it to fill the width of the bar */
    height: auto !important;     /* Keep the aspect ratio so it doesn't look squished */
    max-width: 100% !important;  /* Standard img-fluid behavior */
    display: block !important;
    margin: 0 20 0 0 !important;
  }

  /* 3. Make the Menu Button match the width exactly */
  #Navigation .navbar-toggler {
    width: 100% !important;
    display: block !important;
    margin: 0 20px 0 0 !important;
    
    border: 2px solid #ffffff !important;
  }
}

/* Allow JS-toggled .show to open desktop flyouts */
@media (min-width: 992px) {
  .navbar .dropdown-menu li > .dropdown-menu.show,
  .navbar .dropdown-menu .dropdown-menu.show {
    display: block !important;
  }
}



        /* FETA — Audit → Feta-class mapping (drop-in; load last) */

/* 1) NAV CONTAINER (audit: container-fluid display:flex; width:1897px; padding:0 12px; height:40px) */
#Navigation .container-fluid {
  display: flex !important;
  width: 1897px !important;
  max-width: none !important;
  padding: 0 12px !important;
  margin: 0 !important;
  height: 40px !important;
  background-color: transparent !important;
  box-sizing: border-box !important;
}

/* 2) mobile brand (keeps hidden state per audit d-lg-none) */
#Navigation .feta-navbar-brand.d-lg-none {
  display: none !important; /* audit had display:none for .navbar-brand d-lg-none */
}

/* 3) brand image inside nav (audit: img margin-left:-10px; height:60px) */
#Navigation .feta-navbar-brand img,
#Navigation > .container-fluid .feta-navbar-brand img {
  display: block !important;
  margin: 0 0 0 -10px !important;
  padding: 0 !important;
  height: 60px !important;
  width: auto !important;
  box-sizing: border-box !important;
}

/* 4) navbar-toggler (audit: button had display:none) */
/* Keep it hidden at the sizes the audit captured; you can override later for mobile if needed */
#Navigation .feta-navbar-toggler {
  display: none !important;
  position: static !important;
  margin: 0 !important;
  padding: 4px 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
}

/* 5) collapse wrapper (audit: navbar-collapse collapse -> display:flex; width:1873px; height:40px) */
#Navigation .feta-collapse,
#Navigation .feta-navbar-collapse {
  display: flex !important;
  flex: 0 0 auto !important;
  width: 1873px !important;
  height: 40px !important;
  padding: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* 6) nav list (audit: navbar-nav ms-auto ... -> display:flex; huge left margin; width:551.641px; height:40px) */
#Navigation .feta-navbar-nav {
  display: flex !important;
  flex-wrap: nowrap !important;
  list-style: none !important;
  margin: 0 0 0 1321.36px !important; /* audit value preserved to keep visual layout */
  padding: 0 !important;
  width: 551.641px !important;
  height: 40px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* 7) nav item (list item baseline) */
#Navigation .feta-nav-item {
  display: list-item !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 40px !important;
  box-sizing: border-box !important;
}

/* 8) nav links (audit: white text, inline-block, padding:8px, height:40px) */
#Navigation .feta-nav-link {
  display: inline-block !important;
  color: rgb(255, 255, 255) !important;
  background-color: transparent !important;
  padding: 8px !important;
  height: 40px !important;
  line-height: 24px !important; /* keeps vertical balance inside 40px */
  text-decoration: none !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-sizing: border-box !important;
}

/* SVG / icon color inside links (audit showed white icons) */
#Navigation .feta-nav-link i,
#Navigation .feta-nav-link svg {
  color: rgb(255,255,255) !important;
  fill: rgb(255,255,255) !important;
  width: auto !important;
  height: 16-18px !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
}

/* 9) visually-hidden span used for accessibility — audit values */
#Navigation .feta-nav-link > span {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 10) dropdown container (audit: dropdown-menu display:none; absolute; white bg; border) */
#Navigation .feta-dropdown-menu {
  display: none !important;
  position: absolute !important;
  background-color: rgb(255,255,255) !important;
  color: rgb(33,37,41) !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  padding: 8px 0 !important;
  margin: 0 !important;
  min-width: 200px !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
}

/* 11) dropdown items inside menu (audit: dropdown-item -> display:block; padding:4px 16px; color: dark) */
#Navigation .feta-dropdown-item {
  display: block !important;
  position: relative !important;
  color: rgb(33,37,41) !important;
  background-color: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 4px 16px !important;
  width: 100% !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* 12) Sub-dropdown ("dropend") — keep position relative so nested menu positions correctly */
#Navigation .feta-dropend {
  position: relative !important;
}

/* 13) ensure any inline-block/list-item behavior matches audit */
#Navigation .feta-nav-item, 
#Navigation .feta-dropdown,
#Navigation .feta-dropend {
  vertical-align: middle !important;
}

/* 14) safety clamp — prevent outside styles shrinking nav height */
#Navigation, #Navigation * {
  -webkit-font-smoothing: inherit !important;
  -moz-osx-font-smoothing: inherit !important;
  box-sizing: border-box !important;
}

/* 15) optional: if any JS toggling will flip display, ensure default "open" appearance uses audit values */
/* (This keeps the visual identical while allowing your own JS to change display) */
#Navigation .feta-dropdown[aria-expanded="true"] > .feta-dropdown-menu,
#Navigation .feta-dropdown.open > .feta-dropdown-menu {
  display: block !important;
}

/* 16) accessibility focus / hover states — keep subtle and consistent with audit colors */
#Navigation .feta-nav-link:focus,
#Navigation .feta-nav-link:hover {
  color: rgb(255,255,255) !important;
  background-color: rgba(255,255,255,0.05) !important;
}

/* 17) small nicety: prevent Bootstrap container/row negative margins from breaking layout inside nav */
#Navigation .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}