/* ===== menu =====
   Three items, one line, all of them bold and evenly spaced. None of them is a
   filled button: the item for the page the visitor is on carries a square green
   wash instead (js/head.js marks it with .active / aria-current).

   The menu is written deeper than the sheets that came before it: the phone and
   desktop header sheets pin their own sizes, and these have to win at every
   width. */
html body header .site-menu .nav-links{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:clamp(.5rem,1.4vw,1.6rem)!important;
}
html body header .site-menu .nav-links > li{
  flex:0 0 auto!important;
}
html body header .site-menu .nav-links > li > a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:.42rem .72rem!important;
  border:0!important;
  /* square, not a pill: the wash reads as a highlighted cell */
  border-radius:6px!important;
  background:transparent!important;
  color:#013947!important;
  font-size:clamp(.88rem,1vw,1.02rem)!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:-.005em!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  box-shadow:none!important;
  transition:background-color .18s ease,color .18s ease!important;
}
html body header .site-menu .nav-links > li > a:hover,
html body header .site-menu .nav-links > li > a:focus-visible{
  background:#e4f4f2!important;
  color:#013947!important;
  transform:none!important;
  box-shadow:none!important;
}
/* The current page: a green wash. It is the menu's own colour rather than the
   gold accent, so the highlight reads as part of the header instead of a
   second, competing call to action. */
html body header .site-menu .nav-links > li > a.active,
html body header .site-menu .nav-links > li > a[aria-current],
html body header .site-menu .nav-links > li > a[aria-current="page"],
html body header .site-menu .nav-links > li > a[aria-current="true"]{
  background:#c6e5e7!important;
  color:#013947!important;
  box-shadow:none!important;
}
/* Phones keep the three items on one line beside the icon buttons. */
@media (max-width:760px){
  html body header .site-menu .nav-links{
    gap:.4rem!important;
  }
  /* The square wash keeps its corners on a phone too. */
  html body header .site-menu .nav-links > li > a,
  html body header .site-menu .nav-links > li > a.active,
  html body header .site-menu .nav-links > li > a[aria-current]{
    border-radius:6px!important;
    padding:.36rem .55rem!important;
    font-size:clamp(.78rem,3.1vw,.92rem)!important;
  }
}

/* ===== the gold ribbon under the menu header =====
   A hairline of the site's gold runs along the foot of the header, fading out
   at both ends so it reads as a ribbon rather than a border. The header is
   already sticky and positioned, so the ribbon rides with it on every page and
   at every width. */
header.site-header::after,
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    rgba(212, 175, 55, 0) 0%,
    #d4af37 12%,
    #f3dd9a 50%,
    #d4af37 88%,
    rgba(212, 175, 55, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ===== the phone header reads in two lines =====
   Line 1: the mark, the wordmark and the four contact buttons beside it.
   Line 2: the menu, spread edge to edge across the full width.

   The buttons live inside the same wrapper as the menu, so the wrapper steps
   out of the way (display:contents) and its two children join the header row
   as siblings. The menu then asks for a whole line of its own, and its items
   share that line evenly. */
/* Two named rows instead of a wrapping flex row: the widths are then decided
   by the grid, not by whether a line happens to fit.

     [ mark + wordmark                          ] [ contact buttons ]
     [ Quote   Apply   Pay   Insurers   Hospitals                    ]  */
@media (max-width:760px){
  html body[data-mobile="true"] header .header-content{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand icons" "menu menu"!important;
    align-items:center!important;
    column-gap:.45rem!important;
    row-gap:.35rem!important;
  }

  html body[data-mobile="true"] header .header-actions{
    display:contents!important;
  }

  html body[data-mobile="true"] header .header-logo-wrapper{
    grid-area:brand!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    flex:0 1 auto!important;
    justify-content:flex-start!important;
  }

  /* The four contacts sit beside the wordmark, on the first line. */
  html body[data-mobile="true"] header .nav-cta{
    grid-area:icons!important;
    justify-self:end!important;
    margin:0!important;
    width:auto!important;
  }

  /* The menu takes the second line, edge to edge. The nav wrapper is
     display:contents on a phone, so the list itself is the grid item. */
  html body[data-mobile="true"] header .site-menu{
    display:contents!important;
  }

  html body[data-mobile="true"] header .site-menu .nav-links{
    grid-area:menu!important;
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:0!important;
    width:100%!important;
    max-width:none!important;
    overflow:visible!important;
  }

  html body[data-mobile="true"] header .site-menu .nav-links > li{
    flex:1 1 0!important;
    min-width:0!important;
    display:flex!important;
    justify-content:center!important;
  }

  /* One size for the whole row, so five items share it evenly. */
  html body[data-mobile="true"] header .site-menu .nav-links > li > a,
  html body[data-mobile="true"] header .site-menu .nav-links > li > a.active,
  html body[data-mobile="true"] header .site-menu .nav-links > li > a[aria-current]{
    width:100%!important;
    padding:.4rem .2rem!important;
    font-size:clamp(.72rem,3.4vw,.9rem)!important;
    text-align:center!important;
    white-space:nowrap!important;
  }
}

/* Narrow phones: the mark and the two lines of type step down so the four
   contact buttons still fit beside them. */
@media (max-width:412px){
  html body[data-mobile="true"] header .header-logo-img{
    width:34px!important;
    height:34px!important;
  }

  html body[data-mobile="true"] header .header-divider{
    height:26px!important;
  }

  html body[data-mobile="true"] header .header-brand .brand-name{
    font-size:13px!important;
  }

  html body[data-mobile="true"] header .header-brand .brand-tagline,
  html body[data-mobile="true"] header .header-brand .brand-tagline span{
    font-size:9px!important;
    letter-spacing:.06em!important;
  }
}

/* Very narrow phones: the tagline steps out so the wordmark and the four
   buttons still share the first line. */
@media (max-width:360px){
  html body[data-mobile="true"] header .header-brand .brand-tagline{
    display:none!important;
  }

  html body[data-mobile="true"] header .header-logo-img{
    width:30px!important;
    height:30px!important;
  }

  html body[data-mobile="true"] header .header-brand .brand-name{
    font-size:12px!important;
  }
}