/* Offset anchor targets so they aren't obscured by the sticky header */
a[name]:not([href]) {
  display: block;
  position: relative;
  top: -300px; 
  visibility: hidden;
}
/* ==== INFO BOXES AND BORDERS ===========================================*/
/* Blue container style with black border used by AMSC */
.amsc-info-box {
background-color: #B4CFED;
border-style: solid;
border-width: 2px;
border-color: black;
}

/* Use to add a black border to a default ArmyTheme2 Container */
.border-black {
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

/* Use to add a gold border to a default ArmyTheme2 Container */
.border-gold {
  border-style: solid;
  border-width: 2px;
  border-color: #FFCC33;
}

/* ==== AU CHECKLIST =================================================*/
/* Unordered lists that use green checkmarks instead of bullet points */
ul.au-checklist {
  list-style: none;
  padding-left: 1.5em;
  margin: 0;
}

ul.au-checklist li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.4em;
}

ul.au-checklist li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: #4a7c2f;
  font-weight: bold;
}


/* ==== MOBILE HEADER OVERRIDE ===========================================*/ 
/* Override the default ArmyTheme2 mobile menu with a more compact layout */
/* Applies to Mobile only. Tablet/desktop header is untouched */
@media (max-width: 767.98px) {

  /* 1. Hide the "Army University" wordmark text */
  #main-header .brand-identity .site-name {
    display: none !important;
  }

  /* 2. Shrink the AU logo */
  #main-header .brand-identity #dnn_Header_NavBar_logo_imgLogo {
    max-height: 36px !important;
    width: auto !important;
    height: auto !important;
  }

  /* 3. Lay out the brand row as a single flex line:
        [Search]   [AU logo]   [hamburger] */
  #main-header .brand-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* The logo wrapper shrinks to just its image and sits in the middle */
  #main-header .brand-identity {
    flex: 0 0 auto !important;
    order: 2;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Search container holds both Search + hamburger. Split them:
     push Search to the far left, hamburger to the far right,
     with the logo (order:2) in between. */
  #main-header .main-search-container {
    order: 3;
    display: contents !important;
  }
  #main-header #main-search {
    order: 1;
    margin-left: 16px !important;
  }
  #main-header .navbar-toggler {
    order: 3;
    margin-right: 16px !important;
  }

  /* Remove extra vertical padding */
  #main-header .navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}