/* ─────────────────────────────────────────────
   Triangledots — shared mobile nav (hamburger + slide-in menu)
   Relies on CSS variables (--navy, --pink, --pink-l, --bg2, --r1)
   declared in each page-template's own stylesheet :root block.
   ───────────────────────────────────────────── */

.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center;flex-shrink:0}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{position:fixed;top:0;right:-100%;width:min(320px,85vw);height:100vh;background:#fff;z-index:200;box-shadow:-8px 0 32px rgba(0,45,79,.18);transition:right .3s ease;display:flex;flex-direction:column;padding:1.5rem;overflow-y:auto}
.mobile-menu.open{right:0}
.mobile-menu-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem}
.mobile-menu-hdr img{height:30px}
.mobile-close{background:none;border:none;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--navy);border-radius:50%;transition:background .2s}
.mobile-close:hover{background:var(--bg2)}
.mobile-nav-links{list-style:none;display:flex;flex-direction:column;gap:.25rem;margin-bottom:2rem}
.mobile-nav-links a{display:block;padding:14px 12px;font-size:16px;font-weight:600;color:var(--navy);text-decoration:none;border-radius:var(--r1);transition:background .2s,color .2s}
.mobile-nav-links a:hover,.mobile-nav-links a.active{background:var(--pink-l);color:var(--pink)}
.mobile-menu-cta{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:1.5rem;border-top:1px solid var(--br)}
.mobile-menu-cta a{text-align:center}

.mobile-overlay{position:fixed;inset:0;background:rgba(0,45,79,.45);z-index:199;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}
.mobile-overlay.open{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}

@media(max-width:960px){
  .nav-toggle{display:flex}
  /* !important is deliberate here: every per-page stylesheet (home.css,
     about.css, etc.) also declares an unconditional ".nav-cta{display:flex}"
     rule with the same specificity, and since those files load AFTER this
     shared mobile-nav.css bundle, they'd otherwise win the cascade and
     keep "Log in" / "Get Started" visible in the header at mobile widths,
     overflowing next to the hamburger icon. This guarantees the buttons
     stay hidden here regardless of enqueue order, while the same two
     buttons remain fully visible inside the slide-in hamburger menu via
     .mobile-menu-cta below. */
  .nav-cta{display:none !important}
}

/* ── ACCESSIBILITY: skip-to-content link ──
   Visually hidden until focused (keyboard/screen-reader users tabbing
   from the very top of the page), then appears as a clear, on-brand
   button so it can be activated to jump straight past the nav. Loaded
   site-wide since header.php's skip link appears on every page. */
.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link.screen-reader-text:focus{
  position:fixed !important;
  top:10px;left:10px;
  width:auto;height:auto;
  clip:auto;
  padding:12px 22px;
  z-index:100000;
  background:#fe4060;
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:14px;
  font-weight:700;
  border-radius:8px;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}