/* ---------------------------------------------------------------
   Mobile / tablet navigation.

   NOT in the site-2 mockup -- below 960px the mockup hides the five
   links and offers nothing in their place. New chrome lives here, not
   in the generated stylesheet (rebuilt from the mockup) nor in
   wp-adapt.css (only for reconciling Elementor). Tokens are the
   mockup's own; no new values invented.

   Selectors repeat .mewaio.mewaio.mewaio to match the generated sheet's specificity;
   this file loads after it, so ties resolve here.

   Every selector uses .mewaio three times to match the generated sheet's
   weight -- its own bare `a` rule outranks a single .mewaio otherwise.

   ORDER MATTERS: base rules first, media queries last. An earlier draft
   put the base `.nav-burger{display:none}` after the breakpoint that
   shows it, and the button never appeared.
   --------------------------------------------------------------- */

/* ---- 1. The trigger (hidden until a breakpoint asks for it) ---- */
.mewaio.mewaio.mewaio .nav-burger{
  display:none;align-items:center;justify-content:center;flex-direction:column;
  width:42px;height:42px;margin-right:-8px;padding:0;
  background:none;border:0;border-radius:10px;cursor:pointer;color:var(--ink);
}
.mewaio.mewaio.mewaio .nav-burger:hover{background:var(--tint)}
.mewaio.mewaio.mewaio .nav-burger:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.mewaio.mewaio.mewaio .nav-burger span{display:block;width:21px;height:2px;border-radius:2px;background:currentColor}
.mewaio.mewaio.mewaio .nav-burger span + span{margin-top:5px}

/* ---- 2. The overlay ---- */
.mewaio.mewaio.mewaio .nav-overlay{
  position:fixed;inset:0;z-index:200;background:var(--navy);
  opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s;
  overflow-y:auto;overscroll-behavior:contain;
}
.mewaio.mewaio.mewaio .nav-overlay.open{opacity:1;visibility:visible}
.mewaio.mewaio.mewaio .nav-overlay-in{
  max-width:var(--maxw);margin:0 auto;padding:26px var(--gutter) 56px;
  min-height:100%;display:flex;flex-direction:column;
}
.mewaio.mewaio.mewaio .nav-overlay-top{display:flex;align-items:center;justify-content:space-between;height:44px}
.mewaio.mewaio.mewaio .nav-overlay-top img{height:30px;width:auto}
/* the overlay logo was a bare <img>; the desktop nav wraps its logo in a link
   home and this one did not. The anchor needs to be a flex box or it sits on
   the text baseline inside the 44px row. */
.mewaio.mewaio.mewaio .nav-overlay-brand{display:flex;align-items:center;height:44px}
.mewaio.mewaio.mewaio .nav-close{
  width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;
  border-radius:10px;cursor:pointer;color:#fff;font-size:26px;line-height:1;
}
.mewaio.mewaio.mewaio .nav-close:hover{background:rgba(255,255,255,.1)}
.mewaio.mewaio.mewaio .nav-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.mewaio.mewaio.mewaio .nav-overlay-links{display:flex;flex-direction:column;margin-top:38px}
.mewaio.mewaio.mewaio .nav-overlay-links a{
  display:block;text-decoration:none;color:#fff;font-weight:600;
  font-size:clamp(25px,6.4vw,34px);letter-spacing:-.02em;line-height:1.2;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.13);
}
.mewaio.mewaio.mewaio .nav-overlay-links a:first-child{border-top:1px solid rgba(255,255,255,.13)}
.mewaio.mewaio.mewaio .nav-overlay-links a.on,.mewaio.mewaio.mewaio .nav-overlay-links a:hover{color:var(--cyan-soft)}

/* Two stacked, full-width actions. As a bare text link "Sign in" was a 26px
   tap target against the 44px minimum -- the only item in the menu with no
   padding at all -- and read as a leftover beside the filled CTA. */
.mewaio.mewaio.mewaio .nav-overlay-foot{margin-top:auto;padding-top:40px;display:flex;
  flex-direction:column;align-items:stretch;gap:12px}
.mewaio.mewaio.mewaio .nav-overlay-foot .nav-util{color:#fff;font-size:15px;font-weight:600;
  text-decoration:none;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:12px 20px;text-align:center}
.mewaio.mewaio.mewaio .nav-overlay-foot .nav-util:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.mewaio.mewaio.mewaio .nav-overlay-foot .nav-cta{font-size:15px;padding:13px 20px;text-align:center}

/* The CTA wraps to two lines in a 70px bar around 360px. Hold one line. */
.mewaio.mewaio.mewaio .nav-cta{white-space:nowrap}

/* ---- 3. Breakpoints ---- */

/* 841-960: keep the five links, buy room by tightening */
@media (min-width:841px) and (max-width:960px){
  .mewaio.mewaio.mewaio .nav-links a:not(.nav-cta):not(.nav-util){display:block}
  .mewaio.mewaio.mewaio .nav-sep{display:block}
  .mewaio.mewaio.mewaio .nav-in{gap:16px}
  .mewaio.mewaio.mewaio .nav-links{gap:17px}
  .mewaio.mewaio.mewaio .nav-links a{font-size:13.5px}
  .mewaio.mewaio.mewaio .nav-cta{padding:8px 13px;font-size:13px}
}

/* 840 and below: links move into the overlay */
@media (max-width:840px){
  .mewaio.mewaio.mewaio .nav-links a:not(.nav-cta):not(.nav-util){display:none}
  .mewaio.mewaio.mewaio .nav-sep{display:none}
  .mewaio.mewaio.mewaio .nav-burger{display:inline-flex}
}

/* .nav-cta is nowrap but .nav-util never was, so "Sign in" was the only item
   in the bar allowed to break -- squeezed to a 40px box it wrapped to two
   lines and made the whole bar look over-full. It fits on one line down to
   320px; nothing needs to be dropped. */
.mewaio.mewaio.mewaio .nav-util{white-space:nowrap}

/* The brand is a flex item with shrink:1 and the mark carries max-width:100%
   over a fixed height:30px, so a tight bar compressed its WIDTH only -- the
   wordmark rendered at 63% of its proper proportions at 337px and 53% at 320.
   A logo must never distort: take it out of the shrink entirely. The bar then
   has no room for "Sign in" below 400px, which is fine -- it is in the overlay
   menu footer and on the employer and broker pages as a portal button. */
.mewaio.mewaio.mewaio .brand{flex:0 0 auto}
.mewaio.mewaio.mewaio .brand img.logo{flex:0 0 auto;width:auto;max-width:none}
@media (max-width:400px){
  /* top bar only -- the overlay menu's Sign in is also .nav-util, and an
     unscoped rule here removed it from the menu as well. */
  .mewaio.mewaio.mewaio .nav-links .nav-util,
  .mewaio.mewaio.mewaio .nav-in > .nav-util,
  .mewaio.mewaio.mewaio .nav-in .nav-sep{display:none}
}

/* narrowest phones */
@media (max-width:400px){
  .mewaio.mewaio.mewaio .nav-cta{padding:8px 14px;font-size:13px}
  .mewaio.mewaio.mewaio .nav-util{font-size:13px}
  .mewaio.mewaio.mewaio .nav-in{gap:12px;padding:0 18px}
}

@media (min-width:841px){ .mewaio.mewaio.mewaio .nav-overlay{display:none} }
@media (prefers-reduced-motion:reduce){ .mewaio.mewaio.mewaio .nav-overlay{transition:none} }

/* ---- 4. Logged-in only: keep the overlay clear of the WP admin bar.
   (.admin-bar and .mewaio are both on <body>, so they chain without a space.) */
body.admin-bar.mewaio.mewaio.mewaio .nav-overlay{top:32px}
@media (max-width:782px){
  body.admin-bar.mewaio.mewaio.mewaio .nav-overlay{top:46px}
}