/* Cassiopeia Header: 1320px Max-Width, Zero Horizontal Padding & Far Right Menu */
@media (min-width: 992px) {

  /* 1. Header Container - 1320px Max Width & ZERO horizontal padding */
  header.header.container-header,
  .header.container-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;  /* Flushes container contents to exact left edge */
    padding-right: 0 !important; /* Flushes container contents to exact right edge */
    box-sizing: border-box !important;
  }

  /* 2. Neutralize Cassiopeia Grid Column Restrictions */
  .container-header > .grid-child,
  .container-header > * {
    grid-column: unset !important;
    grid-row: unset !important;
    grid-area: unset !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 3. Logo Container - Kept at natural width on far left */
  .container-header .navbar-brand,
  .container-header .brand,
  .container-header .grid-child:first-child {
    flex: 0 0 auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 2rem !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
  }

  /* 4. Navigation Container - Pushed directly to far right */
  .container-header .container-nav,
  .container-header .grid-child:last-child {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    justify-content: flex-end !important; /* Forces nav container content right */
    align-items: center !important;
  }

  /* 5. Menu Links - Clear default Bootstrap auto margins */
  .container-header .container-nav .navbar,
  .container-header .container-nav .mod-menu,
  .container-header .container-nav .nav,
  .container-header .container-nav .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    margin-left: auto !important; /* Right-aligns navbar inside container */
    margin-right: 0 !important;  /* Sticks rightmost menu item flush to edge */
    padding-right: 0 !important;
  }

  /* Ensure individual rightmost menu item has no trailing right margin */
  .container-header .container-nav .navbar-nav .nav-item:last-child {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  /* 6. Bold Menu Typography */
  .container-header .container-nav .nav-link,
  .container-header .container-nav .mod-menu a,
  .container-header .container-nav .navbar-nav .nav-item a {
    font-weight: 700 !important;
  }
}

/* Custom Hover and Active States for Navigation Links */
/* Default link color transition */
.container-header .container-nav .nav-link,
.container-header .container-nav .mod-menu a {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
}

/* Hover State: Light Blue */
.container-header .container-nav .nav-link:hover,
.container-header .container-nav .nav-link:focus,
.container-header .container-nav .mod-menu a:hover,
.container-header .container-nav .mod-menu a:focus {
  color: #A43959 !important; /* Sky Light Blue */
  background-transparent: transparent !important;
}

/* Active State (Current Page or Clicked Link): Slightly darker/vibrant Light Blue */
.container-header .container-nav .nav-link.active,
.container-header .container-nav .nav-item.active > .nav-link,
.container-header .container-nav .mod-menu .active > a,
.container-header .container-nav .nav-link:active {
  color: #A43959 !important; /* Active Light Blue */
}

/* ===================================================
   Mobile View (under 992px): Inline Logo & Black Burger
   =================================================== */
@media (max-width: 991.98px) {

  /* 1. Force the mobile header to align Logo and Burger on the same line */
  header.header.container-header,
  .header.container-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important; /* Allows the expanded dropdown menu to drop underneath */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* 2. Brand/Logo alignment on mobile */
  .container-header .navbar-brand,
  .container-header .brand {
    margin-right: auto !important;
    margin-bottom: 0 !important;
  }

  /* 3. Navigation container positioning */
  .container-header .container-nav {
    margin: 0 !important;
    width: auto !important;
  }

  /* 4. Color the Hamburger button & icon to Black */
  .container-header .navbar-toggler {
    color: #000000 !important;               /* Icon color */
    border-color: #000000 !important;        /* Button border color */
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Changes SVG lines inside Bootstrap's hamburger icon to black */
  .container-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }

  /* Hover / Focus state for the burger button */
  .container-header .navbar-toggler:hover,
  .container-header .navbar-toggler:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
  }

  /* 5. Ensure the mobile dropdown menu expands across full width when opened */
  .container-header .navbar-collapse {
    flex-basis: 100% !important;
    width: 100% !important;
    margin-top: 1rem !important;
  }
}

.container-banner .custom {
    background-color: #dedede;
    padding-top: 25px;
    padding-bottom: 15px;
}