/* Bidwin-AI shared navigation — desktop bar + mobile menu.
 *
 * Loaded by every page that has a nav. This is the single place the nav
 * breakpoint and mobile panel are defined; do not copy these rules back into a
 * page's own <style> block.
 *
 * The menu is CSS-only: a visually hidden checkbox drives the panel, so it works
 * with JavaScript disabled. nav.js only layers on aria state and close-on-outside.
 *
 * Markup contract, in this DOM order inside <nav>:
 *   <input type="checkbox" id="nav-toggle" class="nav-toggle" aria-label="Main menu">
 *   <label class="nav-burger" for="nav-toggle" aria-hidden="true"><span></span></label>
 *   <div class="nav-links" id="nav-links"> ...links, then the CTA last... </div>
 *
 * Never put `display` on .nav-links as an inline style. An inline display:flex
 * beats the media query below and the panel would never hide on mobile. That is
 * exactly how the nav lost its links on phones in the first place.
 *
 * Breakpoint is 700px on every page. Keep it that way.
 */

nav { position: relative; }

.nav-links { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }

.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }

.nav-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; flex-shrink: 0; }
.nav-burger span,
.nav-burger span::before,
.nav-burger span::after { display: block; width: 22px; height: 2px; background: #E8F1FB; border-radius: 2px; }
.nav-burger span { position: relative; transition: background-color .18s ease; }
.nav-burger span::before,
.nav-burger span::after { content: ""; position: absolute; left: 0; transition: transform .18s ease; }
.nav-burger span::before { top: -7px; }
.nav-burger span::after { top: 7px; }

.nav-toggle:checked ~ .nav-burger span { background: transparent; }
.nav-toggle:checked ~ .nav-burger span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); }

.nav-toggle:focus-visible ~ .nav-burger,
.nav-burger:focus-visible { outline: 2px solid #5DCAA5; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after { transition: none; }
}

@media (max-width: 700px) {
  /* Normalised here so the bar and the panel below it share one gutter on every
     page. licence.html used to switch gutters at 640px and drift out of step. */
  nav { padding-left: 22px; padding-right: 22px; }
  .nav-burger { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 22px 16px;
    background: #0D2B52;
    border-top: 1px solid rgba(232,241,251,0.12);
    box-shadow: 0 14px 26px rgba(0,0,0,0.28);
    z-index: 30;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links > a:not(.btn-teal) {
    display: block; width: 100%;
    padding: 13px 2px; font-size: 16px;
    border-bottom: 1px solid rgba(232,241,251,0.08);
  }
  .nav-links > .btn-teal,
  .nav-links > button {
    width: 100%; margin-top: 14px; text-align: center;
    font-size: 16px !important; padding: 12px 20px !important;
  }
}