/*
 * NYC Luxury Club service-page nav (NLC-DEV-20260831-19).
 *
 * Live MU-plugin nav asset, packaged for WordPress delivery. Adapted from
 * the local-preview-only prototype at shared/nav-harness.css (which
 * remains local-preview-only and unedited by this task) -- selectors,
 * breakpoints, and visual values are unchanged from that accepted
 * pattern, so this is a packaging copy, not a redesign. Injected only on
 * marker-matched pages whose page template is on the nav-less allowlist
 * in nlc-service-pages.php (see that file's
 * nlc_service_pages_current_template_lacks_nav() and
 * nlc_service_pages_should_inject_nav()); every other page is completely
 * unaffected by this file, since it is only enqueued when nav injection
 * is active for the current request.
 *
 * Scope: every selector here is scoped to `.nlc-service-nav` and its
 * descendants, plus the one adjacent-sibling spacing rule at the bottom.
 * Do not add a global reset, Homepage-only class names (`.nlc-nav`,
 * `.nlc-nav-bg`, `.nlc-theme-toggle`, `.cur`, `.cur-ring`, `.btn-gold`,
 * `.btn-outline`, `.btn-ghost`), custom-cursor rules, or any rule outside
 * this nav's own scope.
 *
 * Stable hooks (same as the local prototype, reused verbatim so the two
 * stay visually identical):
 *   #nlcServiceNav, .nlc-service-nav,
 *   .nlc-service-nav__brand, .nlc-service-nav__links,
 *   .nlc-service-nav__link, .nlc-service-nav__phone,
 *   .nlc-service-nav__theme-toggle, .nlc-service-nav__theme-toggle-thumb,
 *   .nlc-service-nav__book
 */

/*
 * Scoped token context for the nav. #nlcServiceNav is injected as a
 * sibling immediately before <main class="nlc-service ...">, not as a
 * descendant of it (see the the_content filter in nlc-service-pages.php).
 * CSS custom properties only cascade to descendants, so the
 * .nlc-service-scoped tokens in shared/site-foundation.css and
 * shared/service-page.css never reach the nav -- this block re-declares,
 * at the same literal values, only the tokens this file actually uses,
 * scoped to the nav's own selector so it resolves correctly regardless of
 * its position relative to .nlc-service. Do not add a global :root block.
 */
#nlcServiceNav {
  --nlc-ink: #0a0a0a;
  --nlc-surface: #111010;
  --nlc-cream: #f2ebd9;
  --nlc-cream-dim: #b8ae9c;
  --nlc-cream-ghost: #a19587;
  --nlc-accent: #076ec6;
  --nlc-accent-bright: #69b5f5;
  --nlc-accent-deep: #055aa4;
  --nlc-on-accent-alt: #ffffff;
  --nlc-focus: #69b5f5;
  --nlc-rule: rgba(255, 255, 255, 0.08);
  --nlc-rule-strong: rgba(7, 110, 198, 0.55);
  --nlc-heading: "Syne", "Helvetica Neue", Arial, sans-serif;
}

/*
 * --nlc-surface (dark) and --nlc-card plus a corrected --nlc-rule (light)
 * so the dropdown panel can be visually distinct from the page in both
 * themes.
 */
[data-theme="light"] #nlcServiceNav {
  --nlc-ink: #f5f0e6;
  --nlc-card: #e4ddd0;
  --nlc-cream: #1a1612;
  --nlc-cream-dim: #1c1915;
  --nlc-cream-ghost: #6e6258;
  --nlc-rule: rgba(26, 22, 18, 0.1);
}

/*
 * Always-on smoked-glass surface, present from page load. Restrained
 * "tinted luxury glass / black car window tint" values only: a plain
 * near-black translucent background, a plain blur (no saturate/brightness
 * boost), and the existing quiet --nlc-rule hairline -- no box-shadow, no
 * gradient, no glow. Applies with no transition, so readability is
 * present the instant the element paints, in both themes.
 */
#nlcServiceNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2.25rem;
  max-width: 1920px;
  margin: 0 auto;
  background: rgba(10, 10, 10, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nlc-rule);
}

[data-theme="light"] #nlcServiceNav {
  background: rgba(228, 221, 208, 0.86);
}

@supports not (backdrop-filter: blur(1px)) {
  #nlcServiceNav {
    background: rgba(10, 10, 10, 0.94);
  }

  [data-theme="light"] #nlcServiceNav {
    background: rgba(228, 221, 208, 0.94);
  }
}

.nlc-service-nav__brand {
  font-family: var(--nlc-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--nlc-cream);
  text-decoration: none;
}

.nlc-service-nav__brand span {
  color: var(--nlc-accent);
}

.nlc-service-nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-left: auto;
}

.nlc-service-nav__link {
  font-family: var(--nlc-heading);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nlc-cream-dim);
  text-decoration: none;
  transition: color 0.25s;
}

.nlc-service-nav__link:hover {
  color: var(--nlc-accent-bright);
}

[data-theme="light"] .nlc-service-nav__menu .nlc-service-nav__link:hover,
[data-theme="light"] .nlc-service-nav__menu .nlc-service-nav__link:focus-visible {
  color: var(--nlc-accent-deep);
}

.nlc-service-nav__link:focus-visible,
.nlc-service-nav__phone:focus-visible,
.nlc-service-nav__book:focus-visible {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 3px;
}

.nlc-service-nav__phone {
  font-family: var(--nlc-heading);
  font-size: 0.68rem;
  font-weight: 500;
  flex-shrink: 0;
  letter-spacing: 0.08em;
  color: var(--nlc-cream-ghost);
  text-decoration: none;
  transition: color 0.25s;
  white-space: nowrap;
}

.nlc-service-nav__phone:hover {
  color: var(--nlc-cream);
}

.nlc-service-nav__theme-field {
  align-items: center;
  display: flex;
  gap: 0.6rem;
}

.nlc-service-nav__theme-label {
  color: var(--nlc-cream-ghost);
  display: none;
  font-family: var(--nlc-heading);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nlc-service-nav__theme-toggle {
  width: 36px;
  height: 20px;
  background: var(--nlc-rule);
  border: 1px solid var(--nlc-rule);
  border-radius: 20px;
  position: relative;
  flex-shrink: 0;
  padding: 0;
  appearance: none;
  cursor: pointer;
}

.nlc-service-nav__theme-toggle:hover {
  background: rgba(7, 110, 198, 0.15);
  border-color: var(--nlc-rule-strong);
}

.nlc-service-nav__theme-toggle:focus-visible {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 3px;
}

.nlc-service-nav__theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nlc-accent);
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), background 0.3s;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nlc-service-nav__theme-toggle-thumb svg {
  width: 8px;
  height: 8px;
  fill: var(--nlc-ink);
  transition: opacity 0.2s;
}

.nlc-service-nav__theme-toggle.is-light .nlc-service-nav__theme-toggle-thumb {
  transform: translateX(16px);
}

.nlc-service-nav__theme-toggle .icon-moon {
  opacity: 1;
}

.nlc-service-nav__theme-toggle .icon-sun {
  opacity: 0;
  position: absolute;
}

.nlc-service-nav__theme-toggle.is-light .icon-moon {
  opacity: 0;
}

.nlc-service-nav__theme-toggle.is-light .icon-sun {
  opacity: 1;
}

.nlc-service-nav__book {
  font-family: var(--nlc-heading);
  font-size: 0.6rem;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nlc-on-accent-alt);
  background: var(--nlc-accent);
  padding: 0.55rem 1.3rem;
  text-decoration: none;
  transition: background 0.25s;
  white-space: nowrap;
}

.nlc-service-nav__book-icon {
  display: none;
}

.nlc-service-nav__book:hover {
  background: var(--nlc-accent-deep);
}

/*
 * Mobile menu-toggle button and dropdown panel. Hidden/inert by default
 * (desktop/tablet); active only inside the compact breakpoint below.
 */
.nlc-service-nav__menu-toggle {
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  gap: 5px;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.nlc-service-nav__menu-toggle-bar {
  background: var(--nlc-cream);
  display: block;
  height: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  width: 20px;
}

.nlc-service-nav__menu-toggle:focus-visible {
  outline: 2px solid var(--nlc-focus);
  outline-offset: 3px;
}

#nlcServiceNav.nlc-service-nav--menu-open .nlc-service-nav__menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#nlcServiceNav.nlc-service-nav--menu-open .nlc-service-nav__menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

#nlcServiceNav.nlc-service-nav--menu-open .nlc-service-nav__menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nlc-service-nav__menu {
  display: contents;
}

@media (max-width: 1099px) {
  #nlcServiceNav {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    padding: 1.25rem 1.5rem;
  }

  .nlc-service-nav__menu-toggle {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .nlc-service-nav__brand {
    font-size: clamp(0.42rem, 1.6vw, 0.68rem);
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    letter-spacing: clamp(0.1em, 0.4vw, 0.26em);
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }

  .nlc-service-nav__book {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .nlc-service-nav__links {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-left: 0;
  }

  .nlc-service-nav__menu {
    background: var(--nlc-surface);
    border-bottom: 1px solid var(--nlc-rule);
    border-top: 1px solid var(--nlc-rule);
    box-shadow: 0 12px 28px rgba(26, 22, 18, 0.18);
    display: none;
    flex-direction: column;
    left: 0;
    padding-block: 0.5rem 1.25rem;
    padding-inline: 0;
    position: absolute;
    right: 0;
    top: 100%;
  }

  [data-theme="light"] .nlc-service-nav__menu {
    background: var(--nlc-card);
  }

  #nlcServiceNav.nlc-service-nav--menu-open .nlc-service-nav__menu {
    display: flex;
  }

  .nlc-service-nav__menu .nlc-service-nav__link,
  .nlc-service-nav__menu .nlc-service-nav__phone {
    border-bottom: 1px solid var(--nlc-rule);
    font-size: 0.85rem;
    line-height: 1.4;
    padding-block: 1.15rem;
    padding-inline: 1.5rem;
  }

  .nlc-service-nav__menu .nlc-service-nav__link {
    color: var(--nlc-cream);
  }

  .nlc-service-nav__menu .nlc-service-nav__link:hover,
  .nlc-service-nav__menu .nlc-service-nav__link:focus-visible,
  .nlc-service-nav__menu .nlc-service-nav__phone:hover,
  .nlc-service-nav__menu .nlc-service-nav__phone:focus-visible {
    background: var(--nlc-rule);
  }

  .nlc-service-nav__theme-label {
    display: block;
  }

  .nlc-service-nav__menu .nlc-service-nav__theme-field {
    align-self: stretch;
    justify-content: space-between;
    margin-top: 0;
    padding-block: 1.15rem;
    padding-inline: 1.5rem;
  }
}

/* Optical-centering nudge for the wordmark in the compact hamburger range. */
@media (min-width: 431px) and (max-width: 1099px) {
  .nlc-service-nav__brand {
    transform: translateX(-16px);
  }
}

/* Icon-only Book Now control at narrow phone widths. */
@media (max-width: 430px) {
  .nlc-service-nav__book {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
  }

  .nlc-service-nav__book-label {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .nlc-service-nav__book-icon {
    display: block;
    height: 20px;
    width: 20px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #nlcServiceNav {
    gap: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .nlc-service-nav__links {
    gap: 1.1rem;
  }
}

/*
 * NLC-DEV-20260831-19: adjacent-sibling spacing rule, replacing the local
 * prototype's .nlc-service-nav-space utility class (which required adding
 * a class to <main> -- not possible here, since nav is injected via the
 * the_content filter and page HTML artifacts must not carry nav-specific
 * markup). Because the the_content filter prepends #nlcServiceNav
 * immediately before <main class="nlc-service ...">, the two are genuine
 * adjacent siblings in the rendered DOM (confirmed against the page-shell
 * structure documented in NLC-DEV-20260831-17/-18), so this selector only
 * ever matches on pages where this plugin actually injected the nav --
 * it is a no-op everywhere else, including every already-nav-having page
 * this plugin does not inject on. Value (5.5rem) matches the local
 * prototype's own .nlc-service-nav-space value exactly.
 */
#nlcServiceNav + .nlc-service {
  padding-top: 5.5rem;
}