/* ============================================================
   SHARED SITE NAVIGATION
   Used on /, /orders-deliveries, /spec-builder
   ============================================================ */

/* Visually hidden, but read by screen readers and parsed by search engines —
   lets a stylized brand H1 still carry the descriptive keywords Google needs. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Masthead (top bar) ─── */
.masthead {
  padding: 22px 60px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.masthead-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: .14em;
  color: #fff;
  text-decoration: none;
}
.masthead-star { color: var(--accent-gold); }
.masthead-dot  { color: var(--accent-primary); }
.masthead-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.masthead-issue {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #9099AA;
  letter-spacing: .2em;
}
.masthead-tel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-primary);
  color: #fff;
  text-decoration: none;
  padding: 11px 18px;
  font-family: var(--font-condensed);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background .15s ease;
}
.masthead-tel:hover { background: var(--accent-press); }

/* ─── Primary nav row ─── */
.primary-nav {
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 2px solid var(--accent-primary);
  background: var(--color-dark-950);
  display: flex;
  align-items: stretch;
  padding: 0 60px;
}
.primary-nav .nav-item {
  position: relative;
  padding: 18px 22px;
  font-family: var(--font-condensed);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #B0B8C4;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: color .15s ease, background .15s ease;
  white-space: nowrap;
}
.primary-nav .nav-item:first-child { border-left: 1px solid rgba(255,255,255,.06); }
.primary-nav .nav-item:hover { color: var(--accent-gold); background: rgba(232,184,75,.05); }
.primary-nav .nav-item.is-active { color: #fff; background: var(--color-dark-800); }
.primary-nav .nav-item.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent-gold);
}
.primary-nav .nav-item .nav-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-primary);
  letter-spacing: .2em;
  font-weight: 700;
}
.primary-nav .nav-item.is-active .nav-num { color: var(--accent-gold); }
.primary-nav .nav-spacer { flex: 1; border-right: none; }
.primary-nav .nav-cta {
  color: var(--accent-gold) !important;
  border-right: 1px solid rgba(255,255,255,.06);
}
.primary-nav .nav-cta:hover {
  color: #fff !important;
  background: var(--accent-primary) !important;
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .masthead { padding: 16px 28px 14px; gap: 16px; flex-wrap: wrap; }
  .masthead-issue { display: none; }
  .primary-nav { padding: 0 28px; overflow-x: auto; }
  .primary-nav .nav-item { padding: 14px 18px; font-size: 12px; letter-spacing: .18em; }
}