/* ============================================================
   Smith Dobrowsky — Navigation
   Single source of truth. Loaded after styles.css.
   Uses !important throughout to neutralise conflicting base rules.
   ============================================================ */

/* ── Font stack ─────────────────────────────────────────────── */
.nav,
.nav__link,
.nav__contact,
.nav__cta--phone,
.nav__cta--email,
.nav__toggle,
.nav__mobile-menu a,
.nav__mobile-menu button {
  font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif) !important;
}

/* ── Shell ───────────────────────────────────────────────────── */
.nav {
  position: fixed !important;
  inset: 0 0 auto !important;          /* top:0, left:0, right:0 */
  z-index: 9000 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto auto !important;
  align-items: center !important;
  column-gap: 0 !important;
  height: 88px !important;
  padding: 0 clamp(28px, 4.5vw, 72px) !important;
  /* Quiet glass — not heavy */
  background: rgba(6, 10, 18, 0.48) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(140%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(16px) !important;
  transform: translateZ(0) !important;
  transition:
    height 0.28s ease,
    background 0.28s ease,
    border-color 0.28s ease !important;
}

/* Scrolled — slightly more opaque */
.nav.nav--scrolled {
  height: 70px !important;
  background: rgba(6, 10, 18, 0.82) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

/* ── Logo ────────────────────────────────────────────────────── */
.nav__logo {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  justify-self: start !important;
}

.nav__logo-img {
  display: block !important;
  width: auto !important;
  height: 55px !important;
  max-width: 272px !important;
  object-fit: contain !important;
  object-position: left center !important;
  opacity: 0.95 !important;
  transform: translateZ(0) !important; /* GPU layer — avoids sub-pixel blur */
  transition: opacity 0.22s ease !important;
}

.nav__logo-img:hover {
  opacity: 1 !important;
}

.nav.nav--scrolled .nav__logo-img {
  height: 46px !important;
  max-width: 228px !important;
}

/* ── Desktop links ───────────────────────────────────────────── */
.nav__links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
  gap: clamp(22px, 2.6vw, 42px) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav__link {
  position: relative !important;
  display: inline-block !important;
  padding: 7px 0 !important;
  font-size: var(--type-meta, var(--eyebrow-size, 10.5px)) !important;
  font-weight: var(--weight-eyebrow, var(--eyebrow-weight, 600)) !important;
  letter-spacing: var(--tracking-eyebrow, var(--eyebrow-tracking, 0.24em)) !important;
  line-height: var(--leading-meta, 1.45) !important;
  text-transform: uppercase !important;
  color: var(--text-inverse-muted, rgba(255, 255, 255, 0.58)) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.22s ease !important;
}

/* Underline — scales in from left */
.nav__link::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(180, 168, 150, 0.72) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav__link:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}

.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1) !important;
}

.nav__link.is-active {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 600 !important;
}

/* Override the styles.css inverse / scrolled variants */
.nav--inverse .nav__link,
.nav.nav--scrolled .nav__link {
  color: var(--text-inverse-muted, rgba(255, 255, 255, 0.58)) !important;
  font-size: var(--type-meta, var(--eyebrow-size, 10.5px)) !important;
  font-weight: var(--weight-eyebrow, var(--eyebrow-weight, 600)) !important;
  letter-spacing: var(--tracking-eyebrow, var(--eyebrow-tracking, 0.24em)) !important;
  line-height: var(--leading-meta, 1.45) !important;
  text-transform: uppercase !important;
  border-bottom: none !important;
  padding: 7px 0 !important;
  transform: none !important;
}

.nav--inverse .nav__link:hover,
.nav--inverse .nav__link.is-active,
.nav.nav--scrolled .nav__link:hover,
.nav.nav--scrolled .nav__link.is-active {
  color: rgba(255, 255, 255, 0.95) !important;
  border-bottom-color: transparent !important;
}

/* ── Contact CTA ─────────────────────────────────────────────── */
.nav__contact,
.nav.nav--scrolled .nav__contact {
  position: relative !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  justify-self: end !important;
  gap: 6px !important;
  min-height: 58px !important;
  height: auto !important;
  margin-left: clamp(24px, 2.8vw, 42px) !important;
  padding: 0 0 0 clamp(22px, 2.2vw, 32px) !important;
  text-align: right !important;
  white-space: nowrap !important;
  background: transparent !important;
  border-left: 1px solid rgba(180, 168, 150, 0.36) !important;
  transition: border-color 0.22s ease !important;
}

.nav__cta--phone,
.nav.nav--scrolled .nav__cta--phone,
.nav__cta--email,
.nav.nav--scrolled .nav__cta--email {
  position: relative !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  white-space: nowrap !important;
  color: rgba(250, 248, 244, 0.84) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-variant-numeric: tabular-nums !important;
  transition:
    color 0.22s ease,
    border-color 0.22s ease !important;
}

.nav__cta--phone,
.nav.nav--scrolled .nav__cta--phone {
  min-height: 26px !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.05 !important;
}

.nav__cta--email,
.nav.nav--scrolled .nav__cta--email {
  min-height: 20px !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.05 !important;
  color: rgba(250, 248, 244, 0.68) !important;
}

/* Quiet labels keep each contact action obvious without returning to a boxed CTA. */
.nav__cta--phone::before,
.nav.nav--scrolled .nav__cta--phone::before {
  content: 'Call' !important;
  display: inline-block !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  color: rgba(180, 168, 150, 0.76) !important;
  transform: translateY(0.5px) !important;
  transition: color 0.22s ease !important;
}

.nav__cta--email::before,
.nav.nav--scrolled .nav__cta--email::before {
  content: 'Email' !important;
  display: inline-block !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
  color: rgba(180, 168, 150, 0.72) !important;
  transform: translateY(-0.5px) !important;
  transition: color 0.22s ease !important;
}

.nav__contact::after,
.nav.nav--scrolled .nav__contact::after {
  content: '' !important;
  position: absolute !important;
  left: clamp(22px, 2.2vw, 32px) !important;
  right: 0 !important;
  bottom: 5px !important;
  height: 1px !important;
  background: rgba(180, 168, 150, 0.78) !important;
  opacity: 0.72 !important;
  transform: scaleX(0.26) !important;
  transform-origin: right center !important;
  transition:
    opacity 0.24s ease,
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.nav__cta--phone:hover,
.nav.nav--scrolled .nav__cta--phone:hover,
.nav__cta--email:hover,
.nav.nav--scrolled .nav__cta--email:hover {
  color: rgba(255, 255, 255, 0.98) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav__contact:hover,
.nav.nav--scrolled .nav__contact:hover {
  border-left-color: rgba(180, 168, 150, 0.68) !important;
}

.nav__cta--phone:hover::before,
.nav.nav--scrolled .nav__cta--phone:hover::before,
.nav__cta--email:hover::before,
.nav.nav--scrolled .nav__cta--email:hover::before {
  color: rgba(250, 248, 244, 0.82) !important;
}

.nav__contact:hover::after,
.nav.nav--scrolled .nav__contact:hover::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.nav__cta--phone:focus-visible,
.nav.nav--scrolled .nav__cta--phone:focus-visible,
.nav__cta--email:focus-visible,
.nav.nav--scrolled .nav__cta--email:focus-visible {
  outline: 1px solid rgba(180, 168, 150, 0.74) !important;
  outline-offset: 4px !important;
}

/* ── Hamburger toggle ────────────────────────────────────────── */
/* Override ALL conflicting rules from styles.css — including the
   ::before pseudo-element approach and hardcoded left: 330px values. */

.nav .nav__toggle,
.nav__toggle,
.nav.nav--scrolled .nav__toggle {
  display: none !important;         /* hidden on desktop */
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 5.5px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  /* Kill the absolute/fixed positioning from styles.css */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: auto !important;
}

/* Kill the CSS ::before "hamburger" lines used in styles.css */
.nav .nav__toggle::before,
.nav__toggle::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Spans — use these for bars and animation */
.nav .nav__toggle span,
.nav__toggle span {
  display: block !important;
  height: 1.5px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  transform: none !important;
  transform-origin: center !important;
  opacity: 1 !important;
  transition:
    transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.22s ease,
    width     0.22s ease !important;
}

/* Slightly varied widths — more refined than uniform bars */
.nav__toggle span:nth-child(1) { width: 22px !important; }
.nav__toggle span:nth-child(2) { width: 14px !important; }
.nav__toggle span:nth-child(3) { width: 22px !important; }

/* X state — spans 1 & 3 translate to center and rotate */
/* Math: container 32px, gap 5.5px → spans at 9/16/23px; center = 16px
   Span 1 needs +7px, Span 3 needs -7px to meet at center */
.nav .nav__toggle.is-open span:nth-child(1),
.nav__toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
  width: 22px !important;
}
.nav .nav__toggle.is-open span:nth-child(2),
.nav__toggle.is-open span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}
.nav .nav__toggle.is-open span:nth-child(3),
.nav__toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
  width: 22px !important;
}

/* ── Mobile menu ─────────────────────────────────────────────── */
/* Always display:block — visibility controlled by opacity/pointer-events.
   This enables CSS transitions instead of the hard display:none/block jump. */
.nav__mobile-menu {
  position: fixed !important;
  top: 88px !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 8998 !important;
  display: block !important;
  padding: 6px 0 20px !important;
  background: rgba(6, 11, 20, 0.97) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.46) !important;
  backdrop-filter: saturate(140%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(18px) !important;
  /* Default: hidden — opacity + visibility (allows transitions) */
  opacity: 0 !important;
  transform: translateY(-6px) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  /* Delay visibility hide until after fade completes */
  transition:
    opacity    0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform  0.28s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.28s !important;
}

/* Open state — instant visibility, then fade/slide in */
.nav__mobile-menu.is-open {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  /* No visibility delay when opening */
  transition:
    opacity   0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Menu links */
.nav__mobile-menu a,
.nav__mobile-menu button {
  display: block !important;
  width: 100% !important;
  padding: 17px clamp(20px, 5.5vw, 40px) !important;
  font-size: var(--type-meta, var(--eyebrow-size, 10.5px)) !important;
  font-weight: var(--weight-eyebrow, var(--eyebrow-weight, 600)) !important;
  letter-spacing: var(--tracking-eyebrow, var(--eyebrow-tracking, 0.24em)) !important;
  line-height: var(--leading-meta, 1.45) !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.62) !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  text-align: left !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055) !important;
  cursor: pointer !important;
  transition: color 0.2s ease, background 0.2s ease !important;
}

.nav__mobile-menu a:last-child {
  border-bottom: none !important;
}

.nav__mobile-menu a:hover,
.nav__mobile-menu button:hover {
  color: rgba(255, 255, 255, 0.96) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

/* Contact rows — premium mobile tap targets */
.nav__mobile-menu .nav__mobile-phone,
.nav__mobile-menu .nav__mobile-email,
.nav__mobile-menu a[href^="tel"],
.nav__mobile-menu a[href^="mailto"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  min-height: 58px !important;
  font-size: 1.06rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  color: rgba(250, 248, 244, 0.9) !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(180, 168, 150, 0.22) !important;
  border-bottom: none !important;
  font-variant-numeric: tabular-nums !important;
}

.nav__mobile-menu .nav__mobile-email,
.nav__mobile-menu a[href^="mailto"] {
  min-height: 54px !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  color: rgba(250, 248, 244, 0.78) !important;
}

.nav__mobile-menu .nav__mobile-phone::before,
.nav__mobile-menu .nav__mobile-email::before,
.nav__mobile-menu a[href^="tel"]::before,
.nav__mobile-menu a[href^="mailto"]::before {
  flex: 0 0 auto !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: rgba(180, 168, 150, 0.78) !important;
}

.nav__mobile-menu .nav__mobile-phone::before,
.nav__mobile-menu a[href^="tel"]::before {
  content: 'Call' !important;
}

.nav__mobile-menu .nav__mobile-email::before,
.nav__mobile-menu a[href^="mailto"]::before {
  content: 'Email' !important;
}

.nav__mobile-menu .nav__mobile-phone::after,
.nav__mobile-menu .nav__mobile-email::after,
.nav__mobile-menu a[href^="tel"]::after,
.nav__mobile-menu a[href^="mailto"]::after {
  content: '' !important;
  flex: 0 0 20px !important;
  width: 20px !important;
  height: 1px !important;
  background: rgba(180, 168, 150, 0.68) !important;
  transition: background 0.2s ease !important;
}

.nav__mobile-menu .nav__mobile-phone:hover,
.nav__mobile-menu .nav__mobile-email:hover,
.nav__mobile-menu a[href^="tel"]:hover,
.nav__mobile-menu a[href^="mailto"]:hover {
  color: rgba(255, 255, 255, 0.96) !important;
  background: none !important;
}

.nav__mobile-menu .nav__mobile-phone:hover::before,
.nav__mobile-menu .nav__mobile-email:hover::before,
.nav__mobile-menu a[href^="tel"]:hover::before,
.nav__mobile-menu a[href^="mailto"]:hover::before {
  color: rgba(250, 248, 244, 0.82) !important;
}

.nav__mobile-menu .nav__mobile-phone:hover::after,
.nav__mobile-menu .nav__mobile-email:hover::after,
.nav__mobile-menu a[href^="tel"]:hover::after,
.nav__mobile-menu a[href^="mailto"]:hover::after {
  background: rgba(250, 248, 244, 0.88) !important;
}

.nav__mobile-menu .nav__mobile-phone:focus-visible,
.nav__mobile-menu .nav__mobile-email:focus-visible,
.nav__mobile-menu a[href^="tel"]:focus-visible,
.nav__mobile-menu a[href^="mailto"]:focus-visible {
  outline: 1px solid rgba(180, 168, 150, 0.7) !important;
  outline-offset: -8px !important;
}

/* ── Responsive ──────────────────────────────────────────────── */

/* Tablet / compact laptop: show toggle, hide desktop links */
@media (max-width: 1100px) {
  .nav,
  .nav.nav--scrolled {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    column-gap: 16px !important;
    height: 76px !important;
    padding: 0 clamp(18px, 3vw, 32px) !important;
  }

  .nav.nav--scrolled {
    height: 65px !important;
  }

  .nav__links {
    display: none !important;
  }

  .nav__logo-img,
  .nav.nav--scrolled .nav__logo-img {
    height: 44px !important;
    max-width: 224px !important;
  }

  .nav__contact,
  .nav.nav--scrolled .nav__contact {
    min-height: 50px !important;
    margin-left: 0 !important;
    padding-left: 16px !important;
    gap: 5px !important;
  }

  .nav__cta--phone,
  .nav.nav--scrolled .nav__cta--phone {
    min-height: 22px !important;
    font-size: 0.82rem !important;
    letter-spacing: 0 !important;
  }

  .nav__cta--email,
  .nav.nav--scrolled .nav__cta--email {
    min-height: 18px !important;
    font-size: 0.66rem !important;
    letter-spacing: 0 !important;
  }

  .nav__contact::after,
  .nav.nav--scrolled .nav__contact::after {
    left: 16px !important;
  }

  /* Show toggle — kill ALL positioning overrides from styles.css */
  .nav .nav__toggle,
  .nav__toggle,
  .nav.nav--scrolled .nav__toggle {
    display: flex !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: auto !important;
    width: 44px !important;
    height: 44px !important;
  }

  .nav__mobile-menu {
    top: 76px !important;
  }
}

/* Mobile: hide phone CTA */
@media (max-width: 600px) {
  .nav,
  .nav.nav--scrolled {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    height: 60px !important;
    padding: 0 16px !important;
  }

  .nav.nav--scrolled {
    height: 56px !important;
  }

  .nav > .nav__contact,
  .nav.nav--scrolled > .nav__contact {
    display: none !important;
  }

  .nav__logo-img,
  .nav.nav--scrolled .nav__logo-img {
    height: 33px !important;
    max-width: 166px !important;
  }

  .nav .nav__toggle,
  .nav__toggle,
  .nav.nav--scrolled .nav__toggle {
    width: 44px !important;
    height: 44px !important;
    gap: 5px !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }

  .nav__mobile-menu {
    top: 60px !important;
  }
}

@media (max-width: 374px) {
  .nav,
  .nav.nav--scrolled {
    padding: 0 13px !important;
  }

  .nav__logo-img,
  .nav.nav--scrolled .nav__logo-img {
    height: 29px !important;
    max-width: 146px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__cta--phone,
  .nav__cta--email,
  .nav__contact,
  .nav__cta--phone::before,
  .nav__cta--email::before,
  .nav__contact::after,
  .nav__mobile-menu .nav__mobile-phone::after,
  .nav__mobile-menu .nav__mobile-email::after,
  .nav__mobile-menu a[href^="tel"]::after,
  .nav__mobile-menu a[href^="mailto"]::after {
    transition: none !important;
  }
}