/*
 * marketing-chrome.css — the marketing site's shared chrome: base reset, the
 * sticky nav (desktop links + mobile menu), the footer and the two buttons.
 *
 * COPIED VERBATIM from the <style> block in aquaflow.html, which still carries
 * its own inline copy (moving the homepage onto this file is a separate,
 * Lighthouse-measured change). tests/guides.test.js fails the build if any
 * rule here stops matching aquaflow.html's declaration for the same selector,
 * so the two cannot drift apart silently. Edit both or neither.
 *
 * Used by every /guides/ page via guides/_layout.html.
 */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root { --blue: #0ea5e9; --purple: #7c3aed; --grad: linear-gradient(135deg, #0ea5e9, #7c3aed); }
  body { font-family: 'Nunito', -apple-system, sans-serif; background: white; color: #0f172a; }

  /* Nav */
  nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid #e2e8f0; }
  .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
  /* The gradient clip lives on the TEXT, never on the flex row. -webkit-background-clip:text
     on an element containing an <img> renders the image invisible — the mark would
     silently vanish while the wordmark kept working. */
  .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
  .nav-logo-mark { width: 36px; height: 36px; display: block; flex-shrink: 0; }
  .nav-logo-text { font-size: 18px; font-weight: 900; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  /* Measured, not guessed: mark + wordmark + nav links need 349px, so the pair
     fits every common phone (360/375/390/414/430). Only below 360px does the row
     compress to exactly the viewport, so that is where the wordmark drops and
     the mark carries the branding alone. The link keeps its aria-label, so its
     accessible name survives the text being hidden. */
  @media(max-width:359px) { .nav-logo-text { display: none; } }
  .nav-links { display: flex; align-items: center; gap: 24px; }
  .nav-links a { font-size: 14px; color: #64748b; text-decoration: none; font-weight: 600; }
  .nav-links a:hover { color: var(--blue); }
  .nav-cta { background: var(--grad); color: white !important; padding: 8px 20px; border-radius: 8px; font-weight: 700 !important; }
  .nav-cta:hover { opacity: 0.9; }
  .nav-signin { background: transparent; color: #0ea5e9 !important; padding: 7px 18px; border-radius: 8px; font-weight: 700 !important; border: 1.5px solid #0ea5e9; cursor: pointer; font-size: 14px; font-family: inherit; transition: all 0.15s; }
  .nav-signin:hover { background: #0ea5e9; color: white !important; }
  @media(max-width:600px) { .nav-links .hide-mobile { display: none; } }

  /* ── Mobile nav menu ──────────────────────────────────────────────────────
     `.hide-mobile` removes Features, Pricing, Reviews AND Sign In below 600px,
     leaving only the Start Free Trial CTA. That is fine for the three section
     links — they scroll to content the visitor can reach anyway — but Sign In
     is the only route into the app for a technician or a pool customer, and on
     a phone it simply vanished. The "Manage your account" banner above the nav
     is NOT a substitute: it links straight to /account, the OWNER portal, so a
     tech or customer following it lands in the wrong place entirely.

     So the hamburger exists to carry Sign In. The section links ride along
     because a menu holding one item looks broken. */
  .nav-toggle {
    display: none; background: transparent; border: 1.5px solid #cbd5e1; border-radius: 8px;
    width: 38px; height: 38px; cursor: pointer; padding: 0; flex-shrink: 0;
    align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  }
  .nav-toggle span { display: block; width: 17px; height: 2px; background: #475569; border-radius: 2px; transition: transform .18s ease, opacity .18s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 16px; left: 16px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,23,42,.14); padding: 8px; z-index: 60;
  }
  .nav-menu.open { display: block; }
  .nav-menu a, .nav-menu button {
    display: block; width: 100%; text-align: left; box-sizing: border-box;
    padding: 12px 14px; border-radius: 9px; font-size: 15px; font-weight: 700;
    color: #334155; text-decoration: none; background: transparent; border: none;
    font-family: inherit; cursor: pointer;
  }
  .nav-menu a:active, .nav-menu button:active { background: #f1f5f9; }
  .nav-menu .nav-menu-signin { color: #0ea5e9; border-top: 1px solid #eef2f6; margin-top: 4px; padding-top: 13px; }

  @media(max-width:600px) {
    nav .nav-inner { position: relative; }
    .nav-toggle { display: flex; }
    /* The row was measured to fit mark + wordmark + CTA in 349px, which is why
       the wordmark only drops below 360px. The hamburger adds ~48px to that
       budget and pushed both the wordmark and the CTA onto second lines at
       390px. Reclaimed rather than paid for: the 24px link gap is dead space
       once the links themselves are hidden, the CTA sheds the word "Start"
       (see the span in the markup), and neither may wrap. */
    .nav-links { gap: 10px; }
    .nav-cta { padding: 8px 14px; white-space: nowrap; }
    .nav-logo-text { white-space: nowrap; }
  }
  /* Above the breakpoint the real links are back, so the menu must never be
     left hanging open by a resize mid-session. */
  @media(min-width:601px) { .nav-menu, .nav-menu.open { display: none; } }

  .btn-primary { background: var(--grad); color: white; padding: 16px 32px; border-radius: 10px; font-size: 16px; font-weight: 800; text-decoration: none; transition: all 0.15s; display: inline-block; }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(14,165,233,0.35); }
  .btn-secondary { background: white; color: #0f172a; padding: 16px 32px; border-radius: 10px; font-size: 16px; font-weight: 700; text-decoration: none; border: 1.5px solid #e2e8f0; transition: all 0.15s; display: inline-block; }
  .btn-secondary:hover { border-color: var(--blue); color: var(--blue); }

  /* Footer */
  footer { background: #0f172a; color: #94a3b8; padding: 40px 20px; text-align: center; font-size: 14px; }
  footer a { color: #64748b; text-decoration: none; }
  footer a:hover { color: white; }
  .footer-links { display: flex; gap: 20px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
  .footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
  .footer-brand img { width: 28px; height: 28px; display: block; flex-shrink: 0; }