@media screen and (min-width: 800px) {
  #mast-head {
    width: 15em;
    padding-left: 1.4em;
    display: block;
    /* https://stackoverflow.com/a/11126701/227926 */
  }

  #slnt-logo {
    display: block;
    /*float: left; */
  }

  #slnt-prim-menu {
    display: inline-block;
    float: left;
  }

  #slnt-srch {
    display: inline-block;
    float: left;
  }

  #slnt-header {
    width: 100%;
    /* height: 96px; */
    height: 48px;
    /* submenu_cover_height related: main_menu_section_height and submenu_desktop_hide_position_top */

    opacity: 1.0;
    background-color: var(--solent-blue);
    position: relative;
  }

  main {
    clear: both;
    overflow: hidden;
    /* https://gemini.google.com/share/1bf7b89017b3 */
    background-color: white;
    opacity: 1.0;
  }

  /* Submenu text fade transition for switching */
  .sub-menu-container .first-link,
  .sub-menu-container .sub-menu-item-container a {
    transition: opacity 0.18s ease;
  }

  .sub-menu-container.text-hidden .first-link,
  .sub-menu-container.text-hidden .sub-menu-item-container a {
    opacity: 0;
  }

  /* Nav container height animation */
  nav[role=navigation].animation {
    transition-property: height;
    -webkit-transition-property: height;
    transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
  }

  nav[role=navigation] {
    /* height: 90px; */
    /*height: 96px;*/
    height: 48px;
  }

  /* Submenu opacity and slide animation */
  .sub-menu-container.animated {
    transition-property: opacity, top;
    -webkit-transition-property: opacity, top;
    transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
  }

  .main-menu-item-container>li {
    display: inline-block;
    white-space: nowrap;
  }

  .main-menu-item-container {
    display: inline-block;
    /*column-count: 5;*/
    /* mobile screen detection relies on this in customsolent.js */
    padding-left: calc(2em - 12px); /*includes 2em for alignment with content */
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .sub-menu-item-container {
    flex-direction: row;
    position: relative;
    width: auto;
  }

  .sub-menu-container {
    width: 100%;
    right: 0px;
    position: absolute;
    padding-top: 16px; /* submenu_padding_top in JS */
    padding-bottom: 16px; /* TODO: submenu-bottom-fill — warm-grey background extends to header border-bottom. May need further refinement. */
  }

  /* Desktop: Apply transition to submenu for slide animation */

  .sub-menu-container {
    top: -50px;
    /* Default hidden position */
    transition-property: opacity, top;
    -webkit-transition-property: opacity, top;
    transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
    transition-duration: .5s;
    -webkit-transition-duration: .5s;
  }

  /* Visible position - slides down to reveal */
  .sub-menu-container.visible-2l {
    /* top: 96px !important; */
    top: 48px !important;
  }

  /* Hidden position - slides up above the menu bar */
  .sub-menu-container.hidden-2l {
    top: -50px !important;
  }

  /* Flex layout for menu items to enable column effect */
  .main-menu-item-container {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .main-menu-item-container>li {
    height: 100%;
    display: flex;
    align-items: center;
  }

  /* Full-width background using pseudo-element */
  .sub-menu-container::before {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: -1;
  }

  /* Background color when submenu is visible */
  .sub-menu-container.visible-2l::before {
    background-color: var(--warm-grey);
  }

  /* Background color for entire li when its submenu is expanded (active item) */
  .main-menu-item-container>li:has(.sub-menu-container.visible-2l) {
    background-color: var(--warm-grey);
  }

  /* Background color for main menu button when its submenu is expanded (active item) */
  li:has(.sub-menu-container.visible-2l)>button.main_nav_link {
    background-color: var(--warm-grey);
  }

  /* Constrain submenu content to 1200px — explicit calc matches .first-link centering */
  .sub-menu-item-container {
    max-width: 1200px;
    /*
    margin-left: max(0px, calc((100% - 1200px) / 2));
    */
    margin-right: auto;
  }

  .sub-menu-container > a.first-link {
    /* display: block; */
    /* width: fit-content; */
    /* Same centering calc as ul.sub-menu-item-container, plus 2em text offset minus 0.2em hover padding */
    /*  margin-left: max(0px, calc((100% - 1200px) / 2 + 2em - 0.2em)); */
    /* padding: 0.16em 0.2em; */ /* symmetric hover highlight */ 
  }

  /* Visible position - slides down to reveal */
  .sub-menu-container.visible-2l {
    /* top: 96px; */
    top: 48px;
    z-index: 100;
  }

  /* Hidden position - slides up above the menu bar */
  .sub-menu-container.hidden-2l {
    top: -50px;
    z-index: -1;
  }

  .main-menu-wrap {
    align-items: center;
    display: flex;
    /* height: 96px; */
    height: 48px;
    /*height: 90px;*/
    /* main_menu_section_height - related: submenu_cover_height and submenu_desktop_hide_position_top*/
  }

  .sub-menu-container {
    z-index: -1;
    /* Default for all submenus */
  }

  .sub-menu-container.hidden-2l {
    z-index: -1;
    /* Explicit for hidden */
  }

  .navigation__link__down-icon {
    height: 1em;
    width: 0.9em;
  }

  /* Desktop nav link text: white on blue header */
  button.main_nav_link > span {
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.15s;
  }

  button.main_nav_link:hover > span {
    color: #fff;
  }

  /* Home link (no child span) */
  .main-menu-item-wrapper > a.main_nav_link {
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.15s;
  }

  .main-menu-item-wrapper > a.main_nav_link:hover {
    color: #fff;
  }

  /* Desktop chevrons: white on blue header */
  .navigation__link__down-icon {
    fill: rgba(255, 255, 255, 0.85);
    stroke: rgba(255, 255, 255, 0.85);
  }

  /* Desktop search icon: white on blue header */
  .search-menu-icon {
    stroke: rgba(255, 255, 255, 0.85);
  }

  button.main_nav_link:hover .search-menu-icon {
    stroke: #fff;
  }

  /* Submenu item text — display:block so padding creates layout space (no overlap) */

  .sub-menu-item-container a {
    color: var(--solent-blue);
    transition: background-color 0.15s, color 0.15s;
    padding: 0.16em 0.0em 0.16em 0.5em; /* was 0.2em left */
    display: block;
    line-height: 1.2;
  }

    .sub-menu-container .first-link {
    color: var(--solent-blue);
    transition: background-color 0.15s, color 0.15s;
    padding: 0.16em 0.0em 0.16em 0.2em; /* was 0.2em left */
    display: block;
    line-height: 1.2;
    }

  .sub-menu-container .first-link {
    text-decoration: none;
  }

  /* Submenu item hover: solent blue background, white text */
  .sub-menu-container .first-link:hover,
  .sub-menu-item-container a:hover {
    background-color: var(--solent-blue);
    color: #ffffff;
  }

  /* When hovering the span.first-link wrapper, force the child <a> text white too */
  .sub-menu-container span.first-link:hover a {
    color: #ffffff;
  }

  /* Active menu item text: solent blue, bold — after white text rules so cascade wins */
  .main-menu-item-container>li:has(.sub-menu-container.visible-2l) button.main_nav_link > span {
    color: var(--solent-blue);
  }

  /* Active chevron: solent blue */
  .main-menu-item-container>li:has(.sub-menu-container.visible-2l) .navigation__link__down-icon {
    fill: var(--solent-blue);
    stroke: var(--solent-blue);
  }

  /*ul.sub-menu-item-container { */
      /*box-sizing: border-box; */ /* so max-width:1200px includes padding — matches .first-link centering */
      /* padding-left: 0.4em;*/
      /*padding-left: calc(2em - 0.2em); */ /* align to main menu text: 2em total minus a padding-left 0.2em */
  /* } */



    .sub-menu-items-outer-container {
      box-sizing: border-box; /* so max-width:1200px includes padding — matches .first-link centering */
      /* padding-left: 0.4em;*/
      padding-left: calc(2em - 0.2em); /* align to main menu text: 2em total minus a padding-left 0.2em */
      margin-left: max(0px, calc((100% - 1200px) / 2));
  }

.sub-menu-container > a.first-link {
  /* padding now set in .sub-menu-container>.first-link rule above */
}

/*
span.sub-menu-item.first-link,
span.sub-menu-item

 {
  padding-inline-start: 0.3em;
}
  */

button.main_nav_link,
a.main_nav_link {
        font-size: 1rem;
        padding: 15px 20px;
}


}

@media screen and (min-width: 1200px) {
    .sub-menu-item-container {
      columns: 6;
  }

  span.sub-menu-item.first-link {
  width: calc(16%);
}
}

@media screen and (max-width: 1199px) {
    .sub-menu-item-container {
      columns: 4;
  }

  span.sub-menu-item.first-link {
  width: calc(23.5%);
}
}