/* ===== 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;
  }


  /* 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;
  }
}

/* Giv the navigation padding */
#Navigation {
  padding: 10px 0 10px 32px;
  margin: 0 !important;
}

.submenu {}

/* 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;
  }
}

@media (min-width: 992px) {
  #Navigation .navbar-brand img {
    display: block !important;
  }
}

body {
    overflow-x: hidden;
}