/* ===== 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: flex-start !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 0px 10px 32px;
  margin: 0 !important;
}

/* give the last top-level toggle 32px right padding */
#Navigation .navbar-nav > .nav-item:last-child > .nav-link {
  padding-right: 32px;
}

.submenu {}

body {
    overflow-x: hidden; 
}


.nav-LPGas {
 background-color: #307bb8;   
}

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

/* NAV: text, hover, spacing, icon spacing (minimal, text-only) */
#Navigation .navbar-nav {
  display: flex;                 /* keep items on one row on desktop */
  gap: 1.5rem;                   /* spacing between nav items (like image 2) */
  margin-left: auto;             /* keep nav items to the right */
  align-items: flex-start;
}

#Navigation .navbar-nav .nav-link,
#Navigation .navbar-nav .nav-link:link,
#Navigation .navbar-nav .nav-link:visited {
  color: #ffffff;                /* visible text color on nav bar */
  padding: .35rem 0;             /* vertical padding inside links */
  line-height: 1;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .02em;
}

#Navigation .navbar-nav .nav-link:hover,
#Navigation .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.5);                /* hover / focus color */
  text-decoration: none;
  outline: none;
}



/* Icon spacing so house icon doesn't stick to text */
#Navigation .navbar-nav .nav-link i {
  margin-right: .45rem;
  vertical-align: middle;
}

/* Mobile notes: keep nav color same on mobile when stacked */
@media (max-width: 1221px) {
  #Navigation .navbar-nav .nav-link,
  #Navigation .navbar-nav .nav-link:link,
  #Navigation .navbar-nav .nav-link:visited {
    color: #ffffff;
  }
  #Navigation .navbar-nav .nav-link:hover,
  #Navigation .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.5); 
  }
}

/* FORCE submenu to fly out to the LEFT of its parent menu */
.dropdown-menu .dropdown-menu {
  position: absolute !important;
  top: 0 !important;
  right: 100% !important; /* place left of parent */
  left: auto !important;
  margin: 0 !important;
  white-space: nowrap;     /* prevent wrapping */
}