/* ════════════════════════════════════════════════════════════════════════════
   Celembi public nav
   Single source of truth for the top navigation on index.html, calculator.html,
   privacy.html and docs/index.html. Tokens mirror the site's brand-gold palette.
   Mobile breakpoint (≤640 px) collapses the link row into a hamburger panel.
   ════════════════════════════════════════════════════════════════════════════ */

/* Belt-and-suspenders: stop rare sub-pixel horizontal overflow (e.g. grid-gap
   rounding) from showing a stray horizontal scrollbar on mobile. Genuinely wide
   content (tables, code blocks) uses its own overflow-x:auto containers. */
body { overflow-x: hidden; }

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--brand-gold);
  color: #0d1b2a;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 600;
  z-index: 9999;
  border-radius: 0 0 6px 0;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: -2px; }

:root {
  --brand-gold: #c5985e;
  --brand-gold-soft: #e0b87e;
  --bg-deep: #0d1b2a;
  --bg-nav: #0b1826;
  --bg-card: #111f30;
  --border-card: #1f3246;
  --border-nav: #1d2a3d;
  --text-primary: #ffffff;
  --text-body: #e0e0e0;
  --text-muted: #b0c0d0;
  --text-dim: #7a8a9c;
  --status-ok: #4ade80;
  --status-down: #f87171;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border-nav);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 0.92rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.site-nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  padding: 4px 6px 4px 4px;
  border-radius: 6px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* Full light wordmark (built for dark headers) instead of the navy mark that
   vanished on the navy bar. Path is relative to this stylesheet, so it resolves
   the same on every page (including blog/). */
.site-nav .brand img { content: url('../../logo-light.png'); width: auto; height: 30px; object-fit: contain; display: block; }
.site-nav .brand:hover { background: transparent; opacity: 0.9; }
.site-nav .brand-text { display: none; }

.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav .nav-links a {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  font-weight: 500;
}
.site-nav .nav-links a:hover { background: #132238; color: var(--text-primary); }
.site-nav .nav-links a.is-active,
.site-nav .nav-links a.active {
  color: var(--text-primary);
  background: rgba(197, 152, 94, 0.10);
}
.site-nav .nav-links a.primary {
  background: var(--brand-gold);
  color: var(--bg-deep);
  font-weight: 600;
}
.site-nav .nav-links a.primary:hover { background: #d4a86a; color: var(--bg-deep); }

/* Subtle "internal" link - visible to staff/pitch, low-key for prospects */
.site-nav .nav-links a.internal {
  border: 1px solid rgba(176, 192, 208, 0.25);
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 5px 10px;
}
.site-nav .nav-links a.internal::before {
  content: "→";
  display: inline-block;
  margin-right: 6px;
  color: var(--brand-gold);
  font-weight: 700;
}
.site-nav .nav-links a.internal:hover {
  border-color: var(--brand-gold);
  color: var(--text-primary);
  background: transparent;
}

/* Login/signup is the conversion CTA - when an internal link is ALSO primary,
   restore full contrast (the .internal muted color would otherwise win on
   equal specificity and leave gray text on the gold background). */
.site-nav .nav-links a.internal.primary {
  background: var(--brand-gold);
  border: none;
  color: var(--bg-deep);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 7px 14px;
}
.site-nav .nav-links a.internal.primary::before { content: none; }
.site-nav .nav-links a.internal.primary:hover {
  background: #d4a86a;
  color: var(--bg-deep);
}

/* Locale toggle (DA | EN) - segmented control in the nav */
.locale-toggle {
  display: inline-flex;
  border: 1px solid rgba(176, 192, 208, 0.20);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 4px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  background: transparent;
}
.locale-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 5px 10px;
  color: var(--text-muted);
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
/* Touch devices: most Celembi clicks are mobile - give the language
   toggle a real thumb target (was ~27 px tall). */
@media (pointer: coarse) {
  .locale-toggle button { padding: 11px 14px; }
}
.locale-toggle button:hover { color: var(--text-primary); }
.locale-toggle button.is-active {
  background: rgba(197, 152, 94, 0.15);
  color: var(--brand-gold);
}

.site-nav .status {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-left: 4px;
  padding: 4px 10px;
  border-left: 1px solid var(--border-nav);
}
.site-nav .status[hidden] { display: none; }
.site-nav .status .pill { display: inline-flex; align-items: center; gap: 4px; }
.site-nav .status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #555;
  transition: background 0.3s, box-shadow 0.3s;
}
.site-nav .status .dot.ok { background: var(--status-ok); box-shadow: 0 0 4px var(--status-ok); }
.site-nav .status .dot.down { background: var(--status-down); }

/* Hamburger toggle - hidden on desktop, visible ≤640 px */
.site-nav .nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-nav);
  border-radius: 6px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
}
.site-nav .nav-toggle:hover { color: var(--text-primary); border-color: var(--brand-gold); }
.site-nav .nav-toggle svg { width: 18px; height: 18px; }
.site-nav .nav-toggle .bar-close { display: none; }
.site-nav.is-open .nav-toggle .bar-open { display: none; }
.site-nav.is-open .nav-toggle .bar-close { display: block; }

@media (max-width: 640px) {
  .site-nav { padding: 10px 16px; gap: 12px; flex-wrap: nowrap; }
  .site-nav .brand-text { display: none; }
  .site-nav .nav-toggle { display: inline-flex; }

  .site-nav .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 16px;
    background: var(--bg-nav);
    border-bottom: 1px solid var(--border-nav);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    transform: translateY(-4px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
  }
  .site-nav.is-open .nav-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav .nav-links a {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 8px;
  }
  .site-nav .nav-links a.primary { justify-content: center; margin-top: 6px; }

  .site-nav .status {
    margin-left: 0;
    padding: 4px 0 0;
    border-left: none;
  }
}