/* ============================================================
   AK CUSTOM HOMES — MIRRORED GLASS NAVIGATION (SITEWIDE)

   The bar from the parked 2.0 B design, promoted to every page:
   a dark, blurred, saturated panel with a lit top edge and
   hairline cells, so it reads as mirrored glass over whatever
   sits behind it rather than as a solid strip.

   It is dark glass in BOTH states, which is the whole point of
   the treatment. Two consequences worth knowing:

     1. The wordmark is always the WHITE cut. The light/dark logo
        swap the 2.0 pages do on scroll is disabled here, because
        there is no longer a light state to swap into.
     2. Link colour never inverts, so pages no longer need to know
        whether their hero is light or dark.

   Load AFTER style.css and after style-v2.css where that is used.
   ============================================================ */

#navbar,
#navbar.nav-transparent,
#navbar.nav-scrolled,
.v2 #navbar,
.v2 #navbar.nav-transparent,
.v2 #navbar.nav-scrolled {
  background: rgba(18,20,22,0.34);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  border-bottom: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 12px 40px rgba(0,0,0,0.18);
}

/* Once scrolled the panel densifies so type stays legible over
   whatever has scrolled under it. */
#navbar.nav-scrolled,
.v2 #navbar.nav-scrolled {
  background: rgba(18,20,22,0.72);
}

/* ─── Hairline cells ─── */
.nav-inner { height: 100%; }
#navbar .nav-logo,
.v2 #navbar .nav-logo {
  height: 100%; display: flex; align-items: center;
  padding-right: clamp(20px, 2.6vw, 40px);
  border-right: 1px solid rgba(255,255,255,0.14);
}
#navbar .nav-logo img,
.v2 #navbar .nav-logo img {
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.45));
}

/* ─── Links ─── */
#navbar .nav-links a,
#navbar.nav-transparent .nav-links a,
#navbar.nav-scrolled .nav-links a,
.v2 #navbar .nav-links a,
.v2 #navbar.nav-transparent .nav-links a,
.v2 #navbar.nav-scrolled .nav-links a {
  color: rgba(255,255,255,0.82);
}
#navbar .nav-links a:hover,
#navbar .nav-links a.active,
.v2 #navbar .nav-links a:hover,
.v2 #navbar .nav-links a.active,
.v2 #navbar.nav-scrolled .nav-links a:hover,
.v2 #navbar.nav-scrolled .nav-links a.active {
  color: #fff;
}
#navbar .nav-links a.active { border-bottom-color: #C53B2A; }

#navbar .nav-contact,
#navbar.nav-transparent .nav-contact,
#navbar.nav-scrolled .nav-contact,
.v2 #navbar .nav-contact,
.v2 #navbar.nav-transparent .nav-contact,
.v2 #navbar.nav-scrolled .nav-contact {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.45) !important;
}
#navbar .nav-contact:hover,
.v2 #navbar .nav-contact:hover,
.v2 .nav-contact:hover {
  background: #C53B2A !important;
  border-color: #C53B2A !important;
  color: #fff !important;
}

#navbar .nav-toggle span,
.v2 #navbar .nav-toggle span,
.v2 #navbar.nav-scrolled .nav-toggle span { background: #fff; }

/* The bar is dark in every state, so the wordmark is always the
   white cut. This switches off the 2.0 pages' scroll swap. */
.v2 #navbar .logo-dark { display: none !important; }
.v2 #navbar .logo-light { display: block !important; }

/* ─── Mobile drawer drops out of dark glass, so it matches ─── */
.nav-mobile,
.v2 .nav-mobile {
  background: rgba(18,20,22,0.92);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  border-top: 1px solid rgba(255,255,255,0.13);
}
.nav-mobile a,
.v2 .nav-mobile a { color: rgba(255,255,255,0.82); }
.nav-mobile a:hover,
.v2 .nav-mobile a:hover { color: #fff; }