/* ============================================================================
   NAV-002 — the drop-down primary navigation.

   Loaded by includes/header.php AFTER style.css or style-v3.css, whichever the page
   asked for. Those two sheets define .navbar, .nav-links, .nav-cta and the mobile
   slide-out identically; everything here is the drop-down layer on top, so the bar
   does not need the same rules pasted into both and then kept in step by hand.

   Structure (includes/header.php, rendered from site_nav()):
     li.nav-item.has-menu > a.nav-top + button.nav-caret + ul.nav-menu
     li.nav-item.has-menu > button.nav-top.nav-top-btn   + ul.nav-menu
     li.nav-item          > a.nav-top | span.nav-top.is-soon
============================================================================ */

/* ── Top level ───────────────────────────────────────────────────────────── */
/* .navbar is capped at min(1180px, 100%), so the bar has a hard ceiling no viewport
   can lift: at the base sheets' 26px gap the five labels, their carets, the language
   selector and two buttons measured 1211px and the brand was overrun at EVERY width.
   The gap comes down to make the contents fit the ceiling rather than the window. */
.nav-links { gap: 20px; }
.nav-links .nav-item { position: relative; display: flex; align-items: center; gap: 2px; }

/* The brand must not be the thing that gives when the bar is tight — it was being
   squeezed to 83px and printing "Caminho.DEV" straight over the first nav label. */
.navbar .brand { flex-shrink: 0; }

.nav-links .nav-top {
  display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; color: #586796;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  font-family: inherit; line-height: 1;
  transition: color 0.2s ease;
}
.nav-links a.nav-top:hover { color: #4b6eb7; }

/* The label-as-toggle (Websites, Insights): a button that has to look like the
   anchors beside it, so every UA button default is unwound explicitly. */
.nav-links .nav-top-btn {
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.nav-links .nav-top-btn:hover { color: #4b6eb7; }

/* The caret beside a label that navigates on its own (Development, About). */
.nav-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; margin: 0;
  background: none; border: 0; border-radius: 6px;
  color: #98a2c4; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-caret:hover { color: #4b6eb7; background: rgba(240,243,255,0.9); }
.nav-caret-icon { transition: transform 0.2s ease; }
.nav-item.open .nav-caret-icon { transform: rotate(180deg); }

/* Keyboard focus has to stay visible on controls whose chrome was removed above. */
.nav-links .nav-top-btn:focus-visible,
.nav-caret:focus-visible,
.nav-links .nav-menu-link:focus-visible,
.nav-ghost:focus-visible {
  outline: 2px solid #6272e4; outline-offset: 3px; border-radius: 6px;
}

/* ── The menu ─────────────────────────────────────────────────────────────── */
.nav-menu {
  position: absolute; top: calc(100% + 14px); left: -14px;
  /* Sized to the longest label plus its badge rather than to a guess: "API
     Integrations · Coming soon" broke onto two lines at a fixed 226px, and a wrapped
     label with a pill hanging off it reads as a layout accident. */
  width: max-content; min-width: 226px; max-width: 340px;
  margin: 0; padding: 7px;
  list-style: none;
  /* Opaque, and deliberately without the `backdrop-filter` the rest of the chrome
     uses. Two reasons. This panel covers running body copy rather than empty page —
     a heading behind a frosted surface stays readable, and a menu has to obscure what
     it covers. And .navbar above already declares `backdrop-filter: blur(16px)`:
     nesting a second filtered element inside the first makes the inner one sample the
     outer element's backdrop root, which is not something to rely on for the one
     surface that must be solid. */
  background: #fdfdff;
  border: 1px solid rgba(218,226,244,0.90);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(95,107,165,0.16);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 120;
}
/* The gap between the bar and the panel would drop the hover halfway across it, so
   the panel carries an invisible bridge back up over its own offset. */
.nav-menu::before {
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.nav-item.open > .nav-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.nav-menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 13px; border-radius: 11px;
  font-size: 14px; font-weight: 500; color: #4a5578;
  text-decoration: none; white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
a.nav-menu-link:hover { background: rgba(240,243,255,0.95); color: #304077; }

/* ── Not ready yet ────────────────────────────────────────────────────────── */
/* Dimmed, no href, no pointer: it reads as a signpost rather than a dead link.
   pointer-events is belt and braces — the markup is a <span>, so there is nothing
   to click even if this rule never arrives. */
.nav-links .is-soon,
.mobile-nav-link.is-soon,
.mobile-sub-link.is-soon {
  color: #a6adc6; cursor: default; pointer-events: none;
}
.nav-soon {
  display: inline-flex; align-items: center;
  margin-left: 8px; padding: 2px 7px;
  border-radius: 999px;
  background: rgba(98,114,228,0.09);
  border: 1px solid rgba(98,114,228,0.16);
  color: #7b85b8;
  font-size: 9.5px; font-weight: 600; font-style: normal;
  letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
/* In the bar itself the badge competes with five labels for a fixed width, so it is
   smaller there than in the roomier drop-down panels. */
.nav-links .nav-top .nav-soon {
  margin-left: 6px; padding: 2px 5px; font-size: 8.5px; letter-spacing: 0.03em;
}

/* ── Right-hand actions ───────────────────────────────────────────────────── */
/* Client Login is the quiet one; Start a Website keeps .nav-cta's gradient. */
.nav-ghost {
  height: 44px; padding: 0 14px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #586796;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-ghost:hover { background: rgba(240,243,255,0.95); color: #304077; }
/* Signed in: the Dashboard button sits beside the greeting. With both in the bar, the
   greeting drops to its avatar a little earlier so the row still fits. */
.nav-dash { gap: 7px; color: #3a52c4; background: rgba(240,243,255,0.75); }
.nav-dash svg { flex: none; }
@media (max-width: 1600px) {
  .nav-dash ~ .nav-portal-user .nav-portal-greeting,
  .nav-dash ~ .nav-portal-user .nav-portal-name { display: none; }
  .nav-dash ~ .nav-portal-user .nav-portal-toggle { padding: 6px; gap: 4px; }
}
/* Laptop widths, before the burger takes over at 1240px: icon only, the label kept for
   screen readers (and as the title tooltip). */
@media (max-width: 1480px) {
  .nav-dash { width: 44px; padding: 0; }
  .nav-dash-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── Mobile slide-out ─────────────────────────────────────────────────────── */
/* 270px was enough for eight flat links. It is not enough for a two-level tree with
   a badge on the right of some rows: "Managed websites" was clipped mid-word and the
   Coming soon pills sat off the edge of the panel entirely. Capped against the
   viewport so it still fits a 320px phone. */
.mobile-menu { width: min(330px, 88vw); }

.mobile-nav-group { display: block; }
.mobile-nav-row   { display: flex; align-items: center; }
.mobile-nav-row .mobile-nav-link {
  flex: 1 1 auto; min-width: 0;
  text-align: left; font-family: inherit;
  background: none; border: 0; cursor: pointer;
}
.mobile-nav-caret {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  background: none; border: 0; border-radius: 10px;
  color: #98a2c4; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.mobile-nav-caret:hover { background: rgba(240,243,255,0.9); color: #4b6eb7; }
.mobile-nav-group.open .nav-caret-icon { transform: rotate(180deg); }
/* A section with no page of its own: the whole row is the button, its chevron drawn
   where the caret button sits on the other rows, so every row reads the same. */
.mobile-nav-row .mobile-nav-disclose { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mobile-nav-disclose .nav-caret-icon { flex: none; width: 11px; height: 11px; margin-right: -2px; color: #98a2c4; transition: transform .2s; }

.mobile-sub-list {
  list-style: none; margin: 2px 0 6px; padding: 0 0 0 10px;
  margin-left: 5px;
  border-left: 1px solid rgba(200,210,235,0.65);
}
.mobile-sub-link {
  /* Wraps, unlike its desktop counterpart: there is no room to widen a phone, so a
     long label takes a second line and the badge follows it rather than being pushed
     past the edge of the panel. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  padding: 10px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 500; color: #5a6486;
  text-decoration: none;
}
a.mobile-sub-link:hover { background: rgba(240,243,255,0.9); color: #304077; }

/* Two stacked buttons at the foot of the slide-out: the quiet one, then the loud one. */
.mobile-cta-btn + .mobile-cta-btn { margin-top: 10px; }
.mobile-cta-ghost {
  background: rgba(240,243,255,0.95); color: #4a5578;
  border: 1px solid rgba(210,220,242,0.9); box-shadow: none;
}

/* ── Hover opens the menu, but only where hovering is a real gesture ──────── */
/* On a touch screen :hover sticks after a tap, which would leave a panel open over
   the page with no obvious way to dismiss it. There, the caret button is the way in. */
@media (hover: hover) and (pointer: fine) {
  .nav-links .nav-item.has-menu:hover > .nav-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }
  .nav-links .nav-item.has-menu:hover .nav-caret-icon { transform: rotate(180deg); }
}

/* ── Where the bar gives up and becomes a burger ──────────────────────────── */
/* Both base sheets collapse .nav-links at 980px. That was the right width for six
   plain links and one button; this bar carries five labels with carets, a language
   selector and TWO buttons, and at 1100px "Websites" was printing on top of the
   brand. Collapsing at 1180px instead — the width at which the base sheets already
   start tightening the bar — so the overlap band never exists.

   1240 is measured, not chosen: the contents come to 1094px, the navbar adds 44px of
   padding, and .wrap takes 63px off the viewport, so the bar needs a 1201px window
   just to break even. 1240 leaves ~40px of slack at the moment it appears, which is
   what stops a slightly wider logo or a longer translation from reintroducing the
   overlap. Re-measure this if anything is added to the bar.

   Source order is what makes this work: nav.css is loaded after style.css and
   style-v3.css, so this beats their plain `.nav-burger { display: none }` without
   needing to out-specify it. Both halves of the switch stay together here, for the
   reason the comment beside that rule in style-v3.css gives. */
@media (max-width: 1240px) {
  .nav-links  { display: none; }
  .nav-burger { display: flex; }
}

/* At 640px the base sheets push .nav-right onto its own line. Two buttons plus the
   language selector do not fit there on a 375px phone, so the quiet one drops —
   Client Login is the first thing in the slide-out, which the burger opens. */
@media (max-width: 640px) {
  .nav-ghost { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-caret-icon, .nav-links .nav-top, .nav-caret { transition: none; }
}

/* The drawer's own close button — the drawer covers the hamburger on a phone. */
.mobile-menu-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff; color: #0f172a; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); z-index: 2; }
.mobile-menu-close:hover { background: #f1f5f9; }
.mobile-menu-close:focus-visible { outline: 3px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; }