/* ==========================================================================
   1. Shared Layout Fixes (All Screens)
   ========================================================================== */

/* Make header transparent and scroll naturally */ 
.container-header { 
  background-color: transparent !important; 
  background-image: none !important; 
  position: relative !important; /* Overrides fixed/sticky positioning */ 
  z-index: 1030; 
} 

/* Reset content padding since header is no longer floating */ 
.site-interface, .container-component, main { 
  padding-top: 0 !important; 
}

/* ==========================================================================
   2. Mobile & Tablet Only Code (Applies up to 991px wide)
   ========================================================================== */
@media (max-width: 991.98px) {

  /* Change the mobile burger button text/font color property to blue */
  .navbar-toggler {
    color: #007bff !important;
    border-color: #007bff !important;
    margin-left: auto !important; /* Forces button to the right */
  }

  /* Clear the default bootstrap white background SVG icon */
  .navbar-toggler-icon {
    background-image: none !important;
    position: relative;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
  }

  /* Construct brand new clean blue burger lines using CSS shadows */
  .navbar-toggler-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 100%;
    height: 2px;
    background-color: #007bff !important;
    box-shadow: 0 0.45em 0 0 #007bff, 0 0.9em 0 0 #007bff !important;
  }

  /* Force the header container to maintain correct alignment only on mobile */
  .navbar, .container-header .navbar {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   3. Desktop Only Menu Code (Applies to screens 992px and wider)
   ========================================================================= */
@media (min-width: 992px) {
  /* Inject a solid, permanent edge-to-edge blue line under the desktop menu wrapper */
  .container-header {
    border-bottom: 1px solid #01579b !important;
    padding-bottom: 10px !important; /* Optional: Adds vertical breathing room above the line */
  }
}