/* repair-nav.css — the ONE shared header bar for repair.tomasetti.shop.
 *
 * Extracted from sites/repair-parts/head.html (2026-09-10) so every page
 * (homepage, mobility, about, bench, guides, fix-or-replace) renders the
 * same nav. Stamped into pages by scripts/stamp-repair-nav.py.
 *
 * Self-sufficient: every var() carries a fallback so pages that don't
 * define the full token set still render correctly; dark-mode rules carry
 * literal values so the nav is dark-correct on any page.
 *
 * If you change the nav, change it HERE and re-run:
 *   python scripts/stamp-repair-nav.py
 */

/* Kill the global smooth-scroll glide on repair pages — selection jumps must be
   instant, not a bounce (Tj 2026-09-10). Overrides tomasetti-tokens.css. */
html { scroll-behavior: auto; }

/* ---------- pride bar (rainbow top strip) ----------
   Tj 2026-09-10: "the rainbow should stay on all pages." Defined here too so
   stamped pages render it even without tomasetti-tokens/site.css loaded.
   (Same values as tomasetti-tokens.css .t-pride.) */
.t-pride {
  width: 100%;
  height: 6px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    #e40303 0%, #ff8c00 14%, #ffed00 28%,
    #008026 42%, #004dff 57%, #750787 72%,
    #d896ff 86%, #ff69b4 100%
  );
}

/* ---------- nav core ---------- */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 28px;
  min-height: 64px;
  background: var(--surface, #ffffff);
  border-bottom: 1px solid var(--line, rgba(63, 45, 88, 0.14));
  position: sticky;
  top: 0;
  z-index: 100;
}

@media (max-width: 1500px) {
  .site-nav { padding-left: 18px; padding-right: 18px; }
  .nav-links a, .nav-dropdown-toggle { padding-left: 10px; padding-right: 10px; }
}

@media (max-width: 930px) {
  .site-nav { align-items: flex-start; }
  .nav-brand { padding-top: 10px; }
  .nav-side { padding-top: 10px; }
  .nav-links { flex: 1 1 100%; order: 3; justify-content: center; margin: 0; }
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--ink, #20172c);
  text-decoration: none;
}

.nav-brand img { height: 32px; width: auto; border-radius: 6px; }

.nav-brand .repair-nav-mark {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(96, 54, 184, 0.24);
}

.nav-brand .t-brand-mark { display: none; }

.nav-brand:has(.t-brand-mark)::before {
  content: '';
  display: block;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 8px;
  background: url('/assets/repair-brand/repair-favicon-32.png') center / cover no-repeat;
  box-shadow: 0 3px 14px rgba(96, 54, 184, 0.24);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 0 auto;
}

.nav-links a {
  padding: 9px 14px;
  border-radius: var(--radius-sm, 10px);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink-soft, #44365a);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}

.nav-links a:hover { color: var(--purple, #6036b8); background: var(--purple-softer, rgba(96, 54, 184, 0.05)); }

.nav-links a.nav-active { color: var(--purple, #6036b8); background: var(--purple-softer, rgba(96, 54, 184, 0.05)); }

/* Track Status — the one standalone utility item; bordered so it stands out
   from the dropdown toggles (Tj 2026-09-10) */
.nav-links a.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong, rgba(63, 45, 88, 0.26));
  color: var(--purple, #6036b8);
  font-weight: 600;
}

.nav-links a.nav-status:hover { border-color: var(--purple, #6036b8); background: var(--purple-softer, rgba(96, 54, 184, 0.05)); color: var(--purple, #6036b8); }

.nav-links a.nav-status ion-icon { width: 15px; height: 15px; flex: none; }

/* dropdown items (Services, Pricing, About, ...) */
.nav-item { position: relative; list-style: none; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: var(--radius-sm, 10px);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink-soft, #44365a);
  transition: color 0.15s, background 0.15s;
}

.nav-dropdown-toggle:hover { color: var(--purple, #6036b8); background: var(--purple-softer, rgba(96, 54, 184, 0.05)); }

.nav-dropdown-toggle.nav-active { color: var(--purple, #6036b8); background: var(--purple-softer, rgba(96, 54, 184, 0.05)); }

.nav-dropdown-toggle ion-icon { width: 13px; height: 13px; transition: transform 0.15s; }

.nav-item.open .nav-dropdown-toggle ion-icon { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 272px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line-strong, rgba(63, 45, 88, 0.26));
  border-radius: var(--radius, 14px);
  box-shadow: 0 18px 44px rgba(63, 45, 88, 0.16), 0 2px 8px rgba(63, 45, 88, 0.08);
  padding: 6px;
  display: none;
  z-index: 120;
}

@media (min-width: 701px) {
  [data-theme="dark"] .nav-dropdown { box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3); }
}

/* connector notch pointing at the toggle */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 10px;
  height: 10px;
  background: var(--surface, #ffffff);
  border-left: 1px solid var(--line-strong, rgba(63, 45, 88, 0.26));
  border-top: 1px solid var(--line-strong, rgba(63, 45, 88, 0.26));
  transform: rotate(45deg);
}

.nav-item.open .nav-dropdown {
  display: block;
  animation: navDropIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item.open .nav-dropdown { animation: none; }
}

.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink-soft, #44365a);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.nav-dropdown a .dd-icon { width: 17px; height: 17px; flex: none; color: var(--purple-mid, #7a5cc7); }

.nav-dropdown a:hover { background: var(--purple-softer, rgba(96, 54, 184, 0.05)); color: var(--purple, #6036b8); }

.nav-dropdown a:hover .dd-icon { color: var(--purple, #6036b8); }

.nav-dropdown-label {
  display: block;
  padding: 10px 12px 6px;
  margin-top: 6px;
  border-top: 1px solid var(--line, rgba(63, 45, 88, 0.14));
  font-family: var(--mono, 'Share Tech Mono', monospace);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint, #8b7f9c);
}

.nav-dropdown-label:first-child { margin-top: 0; border-top: none; padding-top: 6px; }

/* right-aligned variant — keeps the menu on-screen near the edge */
.drop-right .nav-dropdown { left: auto; right: 0; }

.drop-right .nav-dropdown::before { left: auto; right: 24px; }

/* right side: phone action + theme toggle */
.nav-side { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 13px;
  border-radius: var(--radius-sm, 10px);
  background: var(--purple, #6036b8);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, transform 0.08s;
}

.nav-phone:hover { background: var(--purple-dark, #4d2a99); color: #fff; }

.nav-phone:active { transform: translateY(1px); }

.nav-phone ion-icon { width: 15px; height: 15px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  margin-left: 6px;
  border: 1px solid var(--line-strong, rgba(63, 45, 88, 0.26));
  border-radius: var(--radius-sm, 10px);
  background: transparent;
  cursor: pointer;
  color: var(--muted, #6f637c);
  font-family: var(--sans, 'Outfit', sans-serif);
  font-size: 0.8rem;
  transition: color 0.15s, border-color 0.15s;
}

.theme-toggle:hover { color: var(--purple, #6036b8); border-color: var(--purple, #6036b8); }

.theme-toggle .tt-icon { width: 15px; height: 15px; display: block; }

.theme-toggle .tt-icon[hidden] { display: none !important; }

.theme-toggle .tt-label { text-transform: uppercase; }

@media (max-width: 700px) {
  .site-nav { padding: 0 14px; min-height: 54px; flex-wrap: wrap; row-gap: 4px; }
  .nav-side { order: 2; width: auto; justify-content: flex-end; margin-left: auto; padding-bottom: 8px; }
  .nav-phone span { display: none; }
  .nav-phone { width: 42px; justify-content: center; padding-left: 0; padding-right: 0; }
  .nav-links { order: 3; }
  .nav-links { width: 100%; justify-content: center; margin: 0; padding-bottom: 4px; }
  .nav-links a, .nav-dropdown-toggle { font-size: 0.85rem; padding: 7px 10px; min-height: 44px; }
  .nav-links a { display: inline-flex; align-items: center; justify-content: center; }
  .nav-item { position: static; }
  /* Mobile dropdowns are an overlay sheet below the header: absolutely positioned,
     so opening one never grows the header or shifts the page. Anchors to the nav. */
  .nav-item .nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    background: var(--surface, #ffffff);
    border: none;
    border-top: 1px solid var(--line-strong, rgba(63, 45, 88, 0.26));
    border-radius: 0;
    box-shadow: 0 24px 48px rgba(63, 45, 88, 0.2);
    padding: 6px 14px 12px;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown a { display: flex; font-size: 0.85rem; min-height: 44px; align-items: center; }
  .nav-brand img { height: 26px; }
  .nav-brand .repair-nav-mark { width: 30px; height: 30px; }
  .nav-brand:has(.t-brand-mark)::before { width: 30px; height: 30px; }
}

/* ---------- shared page fix: old-design hero orb ----------
   The guide/fix-or-replace pages carry a decorative orb positioned 120px off
   the right edge (.hero::after { right: -120px }) and nothing clipped it, so
   every one of those pages had a horizontal scrollbar (found 2026-09-10 while
   stamping the nav). overflow-x: clip kills the bleed without creating a
   scroll container — sticky-safe, and the vertical bleed is preserved. */
.hero { overflow-x: clip; }

/* ---------- dark mode (literal values — self-sufficient on any page) ---------- */
[data-theme="dark"] .site-nav { background: #1e1530; border-bottom-color: rgba(168, 85, 247, 0.25); }
[data-theme="dark"] .nav-brand { color: #e2d9ee; }
[data-theme="dark"] .nav-links a,
[data-theme="dark"] .nav-dropdown-toggle { color: #cbbfdd; }
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links a.nav-active,
[data-theme="dark"] .nav-dropdown-toggle:hover,
[data-theme="dark"] .nav-dropdown-toggle.nav-active { color: #d896ff; background: rgba(216, 150, 255, 0.06); }
[data-theme="dark"] .nav-links a.nav-status { border-color: rgba(216, 150, 255, 0.35); color: #d896ff; }
[data-theme="dark"] .nav-links a.nav-status:hover { border-color: #d896ff; color: #d896ff; background: rgba(216, 150, 255, 0.06); }
[data-theme="dark"] .nav-dropdown { background: #1e1530; border-color: rgba(216, 150, 255, 0.35); }
[data-theme="dark"] .nav-dropdown::before { background: #1e1530; border-color: rgba(216, 150, 255, 0.35); }
[data-theme="dark"] .nav-dropdown a { color: #cbbfdd; }
[data-theme="dark"] .nav-dropdown a:hover { background: rgba(216, 150, 255, 0.06); color: #d896ff; }
[data-theme="dark"] .nav-dropdown a .dd-icon { color: #c084fc; }
[data-theme="dark"] .nav-dropdown-label { color: #8a7aa4; border-top-color: rgba(168, 85, 247, 0.25); }
[data-theme="dark"] .nav-item .nav-dropdown { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55); border-top-color: rgba(216, 150, 255, 0.35); }
[data-theme="dark"] .nav-phone { color: #20172c; }
[data-theme="dark"] .nav-phone:hover { color: #20172c; }
[data-theme="dark"] .theme-toggle { color: #9a88b0; border-color: rgba(216, 150, 255, 0.35); }
[data-theme="dark"] .theme-toggle:hover { color: #d896ff; border-color: #d896ff; }