/* public/brand/nav-menu.css
 *
 * The phone "Menu" button on the public pages (landing, FAQ, About, Privacy, Terms). Mic picked
 * Option 1 of the phone-menu mockup, 2026-10-26 (PHONE-MENU). WHY: under 900px wide the header
 * hides its links, so a phone visitor saw only the logo and "Try the Demo" and could not reach
 * About, FAQ or Privacy. Built on <details>, so it opens and closes without any script; the small
 * nav-menu.js only closes it after a tap. Flat colours only (no gradients, CLAUDE.md).
 */
.nav-menu { display: none; position: static; }
.nav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border: 1px solid #dce7f4; border-radius: 7px; background: #fff; color: #08245d; font-size: 13px; font-weight: 800; white-space: nowrap; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.nav-menu .bars { display: inline-block; position: relative; width: 14px; height: 10px; border-top: 2px solid #08245d; border-bottom: 2px solid #08245d; }
.nav-menu .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid #08245d; }
.nav-menu .when-open { display: none; }
.nav-menu[open] .when-open { display: inline; }
.nav-menu[open] .when-closed { display: none; }
.nav-menu[open] .bars { border: 0; height: 12px; }
.nav-menu[open] .bars::before, .nav-menu[open] .bars::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 2px solid #08245d; transform: rotate(45deg); }
.nav-menu[open] .bars::after { transform: rotate(-45deg); }

/* The drop-down: full width under the sticky header, big tap targets. */
.nav-drop { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid #dce7f4; box-shadow: 0 10px 20px rgba(8, 36, 93, .10); z-index: 30; }
.nav-drop a { display: block; padding: 14px 18px; border-top: 1px solid #eef3f9; color: #08245d; font-size: 16px; font-weight: 700; text-decoration: none; }
.nav-drop a:hover, .nav-drop a[aria-current="page"] { color: #0d6efd; }

/* Logo, demo button and menu share one header row: tighter gaps, the button never wraps. */
@media (max-width: 900px) { .nav-menu { display: block; } .header-inner { gap: 10px; } .header-inner nav a.cta { white-space: nowrap; } }
/* Phones: the menu icon alone, so the name stays on one line beside the demo button (qa-css VIS-1). */
@media (max-width: 420px) {
  .brand-text small { display: none; }
  .nav-menu .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-menu > summary { padding: 0 10px; }
}
/* Narrow phones: tighter still. */
@media (max-width: 374px) {
  .header-inner { gap: 6px; }
  .header-inner nav a.cta { padding: 9px 10px; font-size: 12px; }
  .brand-text strong { font-size: 15px; }
}
@media (max-width: 345px) {
  .brand { gap: 6px; }
  .brand img { width: 28px; height: 28px; }
  .brand-text strong { font-size: 14px; white-space: nowrap; }
  .header-inner nav a.cta { padding: 8px 8px; }
}
@media print { .nav-menu { display: none; } }