/**
 * IPMS Seattle mobile navigation
 *
 * The menu is progressively enhanced by ipms-accessibility.js. Navigation
 * remains visible when JavaScript is unavailable; these rules only collapse
 * it after the script adds the ipms-mobile-nav-enabled class.
 */
.ipms-nav-toggle {
  display:none;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  min-height:3rem;
  padding:.65rem .85rem;
  border:2px solid #081a32;
  background:#fff;
  color:#081a32;
  font:800 .75rem "DM Sans",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer
}
.ipms-nav-toggle:hover,
.ipms-nav-toggle:focus-visible {
  border-color:#f5ba3d;
  background:#f5ba3d;
  outline:none
}
.ipms-nav-toggle-lines {
  display:grid;
  width:1.35rem;
  gap:.25rem
}
.ipms-nav-toggle-lines span {
  display:block;
  width:100%;
  height:2px;
  background:currentColor;
  transition:transform .18s ease,opacity .18s ease
}
.ipms-nav-toggle[aria-expanded="true"] .ipms-nav-toggle-lines span:first-child {
  transform:translateY(.375rem) rotate(45deg)
}
.ipms-nav-toggle[aria-expanded="true"] .ipms-nav-toggle-lines span:nth-child(2) {
  opacity:0
}
.ipms-nav-toggle[aria-expanded="true"] .ipms-nav-toggle-lines span:last-child {
  transform:translateY(-.375rem) rotate(-45deg)
}

/*
 * Switch before the full navigation becomes crowded. This wider breakpoint
 * also leaves room when a visitor has selected the 130% or 145% text size.
 */
@media(max-width:68.75rem) {
  .ipms-mobile-nav-enabled .site-header {
    flex-wrap:wrap!important
  }
  .ipms-mobile-nav-enabled .site-header>.brand {
    order:1
  }
  .ipms-mobile-nav-enabled .site-header>.header-actions {
    order:2;
    margin-left:auto
  }
  .ipms-mobile-nav-enabled .site-header>.ipms-nav-toggle {
    display:inline-flex;
    order:3;
    flex:0 0 auto
  }
  .ipms-mobile-nav-enabled .site-header>nav {
    display:none!important;
    order:4;
    flex:0 0 100%;
    width:100%;
    margin:0;
    padding:.45rem!important;
    gap:0!important;
    background:#081a32;
    border-top:4px solid #f5ba3d;
    box-shadow:0 .65rem 1.5rem rgba(8,26,50,.18)
  }
  .ipms-mobile-nav-enabled .site-header.ipms-nav-open>nav {
    display:flex!important;
    flex-direction:column;
    align-items:stretch
  }
  .ipms-mobile-nav-enabled .site-header>nav>a {
    display:block;
    width:100%;
    padding:.9rem 1rem;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.14);
    color:#fff!important;
    font-size:.9rem;
    line-height:1.25;
    text-align:left;
    text-decoration:none
  }
  .ipms-mobile-nav-enabled .site-header>nav>a:last-child {
    border-bottom:0
  }
  .ipms-mobile-nav-enabled .site-header>nav>a:hover,
  .ipms-mobile-nav-enabled .site-header>nav>a:focus-visible {
    background:#f5ba3d;
    color:#081a32!important;
    outline:none
  }
  .ipms-mobile-nav-enabled .site-header>nav>a.nav-active {
    background:rgba(245,186,61,.2);
    color:#f5ba3d!important
  }
  .ipms-mobile-nav-enabled .site-header>nav>a.nav-active:hover,
  .ipms-mobile-nav-enabled .site-header>nav>a.nav-active:focus-visible {
    background:#f5ba3d;
    color:#081a32!important
  }
}

@media(max-width:30rem) {
  .ipms-mobile-nav-enabled .site-header {
    gap:.5rem!important
  }
  .ipms-nav-toggle {
    width:3rem;
    padding:.65rem
  }
  .ipms-nav-toggle-label {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
  }
}
