/* South Facing Garden — site navigation on smaller screens (shared by every page).

   Linked from every page AFTER the page's own <style> block, so these rules take precedence
   over the navigation rules each page carries inline. Used together with site-nav.js.

   Why it exists: the full navigation bar needs about 1,100px on the Property Checks pages
   (945px on the home page, 813px on support and privacy). Each page only switched to the menu
   button at 768px or 640px, so between those widths, and on phones, the bar ran off the side
   of the screen and the whole page scrolled sideways.

   What it does: at 1,140px and below every page shows the menu button, and the links open in
   a panel under the bar. Above 1,140px the desktop navigation is exactly as before. */

/* Keyboard: the Property Checks dropdown also opens when one of its links has focus,
   not only when the mouse is over it. */
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }

@media (max-width: 1140px) {
  #topnav { gap: 12px; }
  #topnav .nav-links { display: none; }
  #topnav .hamburger { display: block; margin-left: auto; padding: 6px 8px; line-height: 1; }

  /* The open menu: a panel under the bar, one link per row, scrollable if the screen is short. */
  #topnav .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 64px; left: 0; right: 0; margin: 0;
    padding: 10px 16px 16px;
    background: var(--navy-mid); border-bottom: 1px solid var(--border);
    z-index: 999;
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  #topnav .nav-links.open a { display: block; padding: 10px 12px; font-size: 0.95rem; white-space: normal; }

  /* Property Checks: its links are listed in the panel, under the "Property Checks" link.
     Nothing depends on hovering, so every link can be reached by touch and by keyboard. */
  #topnav .nav-links.open .nav-dropdown > a::after { content: none; }
  #topnav .nav-links.open .nav-dropdown-menu {
    display: block; position: static; transform: none; padding: 0;
    background: transparent; box-shadow: none;
  }
  #topnav .nav-links.open .nav-dropdown-menu-inner {
    background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0;
    box-shadow: none; padding: 0; margin: 0 0 6px 14px; min-width: 0;
  }
  #topnav .nav-links.open .nav-dropdown-menu-inner a { padding: 8px 12px; font-size: 0.9rem; }
  #topnav .nav-links.open .nav-dropdown-divider { display: none; }
  #topnav .nav-links.open .nav-launch { margin-top: 8px; text-align: center; }
}

/* Phones: the bar holds the logo, the menu button and Comfort mode. The Comfort mode button
   shows as "Aa" so all three fit; its full name is still what a screen reader announces. */
@media (max-width: 480px) {
  #topnav { padding: 0 16px; gap: 10px; }
  #topnav .nav-logo-text { font-size: 1rem; }
  #topnav .comfort-btn { font-size: 0; padding: 6px 10px; }
  #topnav .comfort-btn::before { content: 'Aa'; font-size: 0.8rem; letter-spacing: 0.04em; }
  body.comfort #topnav .comfort-btn { border-color: var(--gold); color: var(--gold); }
}

/* ── Terms page ─────────────────────────────────────────────────────────────────────────
   Its header is built differently (logo, links, Launch App inside .nav-inner) and hid the
   links below 700px with no way to open them. It now has the same menu button there. */
.nav-inner .hamburger {
  display: block; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.3rem; line-height: 1; padding: 6px 8px; margin-left: auto; margin-right: 10px;
}
.nav-inner .nav-links.open {
  display: flex; flex-direction: column; gap: 2px;
  position: absolute; top: 58px; left: 0; right: 0;
  padding: 10px 20px 16px;
  background: var(--navy-mid, #111d33); border-bottom: 1px solid var(--border);
  max-height: calc(100vh - 58px); max-height: calc(100dvh - 58px); overflow-y: auto;
}
.nav-inner .nav-links.open a { display: block; padding: 10px 4px; font-size: 0.95rem; }
@media (min-width: 860px) {
  .nav-inner .hamburger { display: none; }
  .nav-inner .nav-links, .nav-inner .nav-links.open { display: flex; flex-direction: row; gap: 24px; position: static; padding: 0; background: none; border: 0; max-height: none; overflow: visible; }
  .nav-inner .nav-links.open a { display: inline; padding: 0; font-size: 0.8rem; }
}
@media (max-width: 859px) {
  .nav-inner .nav-links { display: none; }
}
@media (max-width: 400px) {
  .nav-inner .nav-logo-text { font-size: 0.85rem; letter-spacing: 0.06em; }
}