/* ============================================================
   SHARED SITE LAYER  (loaded on every page BEFORE the page's own
   stylesheet, so pages that define their own nav/mobile styles —
   index, blog — keep their exact look, while pages that don't —
   about, services, software, process, work, contact — inherit a
   consistent, accessible mobile menu here.)
   ============================================================ */

/* ---- Prevent stray horizontal scroll on small screens ----------------- */
/* (decorative marquees/tickers can be wider than the viewport; clip at the
   root so the page never scrolls sideways on mobile). */
html { overflow-x: hidden; overflow-x: clip; }

/* Long words / URLs shouldn't force the page wider than the screen. */
#main { overflow-wrap: break-word; word-wrap: break-word; }

@media (max-width: 768px) {
  /* Wide data tables scroll inside their own box instead of being clipped. */
  #main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Media never overflows the viewport. */
  #main img,
  #main pre,
  #main video,
  #main iframe,
  #main svg { max-width: 100%; }
  /* Grid/flex children default to min-width:auto and can overrun their track;
     let them shrink so two-column sections collapse cleanly on phones. */
  #main [class$="-inner"] > *,
  #main [class$="-grid"] > *,
  #main [class*="-copy"],
  #main [class*="-visual"] { min-width: 0; }
}

/* ---- Accessibility helpers -------------------------------------------- */
.skip-nav {
  position: absolute; top: -100%; left: 0; z-index: 9999;
  padding: 12px 20px; background: var(--accent); color: var(--bg);
  font-weight: 600; font-size: 14px; text-decoration: none;
  border-radius: 0 0 4px 0; transition: top 0.2s;
}
.skip-nav:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-links a[aria-current="page"] { color: var(--ink); }

/* ---- Logo link: keep brand colour in all states ----------------------- */
/* The shared header renders the logo as <a class="logo">, so force the
   link/visited colours (otherwise the browser's default purple "visited"
   colour leaks through on pages that only styled a nested <a>). */
#nav a.logo,
#nav a.logo:link,
#nav a.logo:visited,
#nav a.logo:hover,
#nav a.logo:active {
  color: inherit;
  text-decoration: none;
}

/* ---- Nav right cluster + hamburger ------------------------------------ */
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius-card, 4px);
  color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center; flex-shrink: 0;
  padding: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---- Mobile menu drawer ----------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(11, 11, 12, 0.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px; gap: 28px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu-links { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.mobile-menu-links a {
  display: block; padding: 10px 0;
  font-family: var(--display, serif);
  font-size: clamp(28px, 8vw, 44px);
  font-weight: 400; line-height: 1.1;
  color: var(--ink); text-decoration: none;
  transition: color 0.2s;
}
.mobile-menu-links a:hover,
.mobile-menu-links a:focus-visible { color: var(--accent); }
.mobile-menu-cta { align-self: flex-start; }

/* ---- Mobile breakpoint: swap inline nav for the hamburger ------------- */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }
  #nav .nav-links { display: none; }
  #nav .nav-right .nav-cta { display: none; }
}
@media (min-width: 769px) {
  .mobile-menu { display: none; }
}

/* ---- Respect users who prefer reduced motion -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}