/* ---- MOBILE MENU OVERLAY ----
   Core's navigation stylesheet wins on specificity in several places, so these
   rules are deliberately forceful. Without them the panel renders white while the
   links are white, i.e. an apparently empty screen. */

.wp-block-navigation__responsive-container.is-menu-open{
  position:fixed!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  z-index:100000!important;
  background-color:var(--ol-stage,#1C1917)!important;
  color:#FFFFFF!important;
  padding:26px 26px 40px!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;
  align-items:stretch!important;justify-content:flex-start!important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
  max-width:none!important;width:100%!important;height:100%!important;
  display:flex!important;flex-direction:column!important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
  width:100%!important;height:100%!important;display:flex!important;flex-direction:column!important;
}

/* close button: was rendering as a tiny bare square */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  position:absolute!important;top:20px!important;right:20px!important;
  width:44px!important;height:44px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:rgba(255,255,255,.10)!important;border:0!important;border-radius:50%!important;
  color:#FFFFFF!important;cursor:pointer;padding:0!important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{
  width:22px!important;height:22px!important;fill:#FFFFFF!important;stroke:none!important;
}

/* the link list */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list{
  display:flex!important;flex-direction:column!important;
  gap:0!important;width:100%!important;margin-top:64px!important;
  align-items:stretch!important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{
  width:100%!important;border-bottom:1px solid rgba(255,255,255,.13);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child{border-bottom:0}

.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  display:block!important;width:100%!important;
  font-family:var(--ol-head,serif)!important;font-weight:500!important;
  font-size:26px!important;line-height:1.2!important;letter-spacing:-0.01em!important;
  color:#FFFFFF!important;text-decoration:none!important;
  padding:20px 0!important;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus{
  color:var(--ol-accent,#E9503A)!important;
}

/* stop the page behind from scrolling */
html:has(.wp-block-navigation__responsive-container.is-menu-open){overflow:hidden}

/* hamburger trigger */
.wp-block-navigation__responsive-container-open{
  background:transparent!important;border:0!important;padding:6px!important;
  color:var(--ol-ink,#1C1917)!important;cursor:pointer;
}
.wp-block-navigation__responsive-container-open svg{
  width:26px!important;height:26px!important;fill:currentColor!important;stroke:none!important;
}

@media(max-width:600px){
  .wp-block-navigation__responsive-container.is-menu-open a,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    font-size:23px!important;padding:18px 0!important;
  }
}