/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* NAV + MOBILE MENU
   The desktop bar is fixed and inverted with mix-blend-mode: difference.
   Under 992px it is replaced by the full-screen panel. */

/* ============================================================
   7. NAV
   ============================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-top: 1.5em; color: var(--c-light);
  mix-blend-mode: difference;
  opacity: 0; transform: translateY(-2em);
}
.nav-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-col); align-items: start; }
.nav-logo-cell { grid-column: 1 / 4; }
/* Stacked wordmark, white. The navbar's difference blend flips it dark
   over light sections, exactly as the menu button behaves. */
.nav-logo {
  display: inline-block; font-family: var(--font-display);
  font-weight: 700; font-size: 1.05em; line-height: .92; letter-spacing: -.05em;
}
/* Started at 6/13 for six links. Reviews and FAQ make eight, and at the
   992px breakpoint where this bar is still on screen they collided.
   Starting a column earlier and giving space-between a floor buys the
   room without touching the logo cell, which ends at column 4. */
.nav-links { grid-column: 5 / 13; display: flex; justify-content: space-between; gap: 1em; }
.nav-link { display: flex; align-items: center; gap: .5em; }
@media (max-width: 991px) { .nav-links { display: none; } }

.menu-button {
  position: fixed; top: 1.25em; right: var(--pad-global); z-index: 101;
  color: var(--c-light); mix-blend-mode: difference;
  opacity: 0; transform: translateY(-2em); display: none;
  padding: .75em .25em;                    /* 44px tap target */
}
@media (max-width: 991px) { .menu-button { display: block; } }

/* ---- MENU OVERLAY ---- */
.menu-wrap { position: fixed; inset: 0; z-index: 150; visibility: hidden; pointer-events: none; }
.menu-wrap.is-open { visibility: visible; pointer-events: auto; }
.menu-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; }
.menu {
  position: absolute; top: 0; right: 0;
  width: min(100%, 26em); height: 100%;
  background: var(--c-light); color: var(--c-dark);
  transform-origin: 100% 0%; transform: scale(0); will-change: transform;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.25em var(--pad-global) 2em; overflow-y: auto;
}
.menu-head { display: flex; align-items: center; justify-content: space-between; }
.menu-close { width: 2.75em; height: 2.75em; display: grid; place-items: center; margin-right: -.75em; }
.menu-close svg { width: .55em; height: .55em; }
.menu-rule { height: 1px; background: rgba(0,0,0,.2); margin: 1.25em 0; }
.menu-list { display: flex; flex-direction: column; }
.menu-link {
  display: flex; align-items: center; gap: .75em;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2em; line-height: 1.15; letter-spacing: -.02em;
  padding: .15em 0;
}
.menu-link-dot { width: .18em; height: .18em; background: currentColor; flex: none; opacity: 0; transition: opacity .3s ease; }
.menu-link:hover .menu-link-dot, .menu-link:focus-visible .menu-link-dot { opacity: 1; }
.menu-social { display: flex; flex-wrap: wrap; gap: 1.25em; }
.menu-social a { padding: .5em 0; }
.menu-cta { margin-top: 1.25em; }