/* Grand Strand shared nav for subpages. Copied from the homepage, which carries the
   template nav (handyman-template, MSW-NAVICONS/NAVFILL/NAVFADE 2026-09-20).
   Keep in sync with index.html. */
    /* ─── NAV ─── */
    #nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 1.4rem 2rem; gap: 1rem;
      display: flex; align-items: center; justify-content: space-between;
      transition: padding 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
    }
    #nav.scrolled {
      padding: 0.85rem 2rem;
      background: rgba(240,235,225,0.92);
      backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 rgba(26,23,20,0.08);
    }
    #nav-logo { white-space: nowrap; flex: 0 0 auto; font-family: 'DM Serif Display', serif; font-size: 1.1rem; color: var(--warmblack); text-decoration: none; letter-spacing: -0.01em; -webkit-text-stroke: 0.3px var(--warmblack); transition: color 0.35s ease; display: flex; align-items: center; gap: 0.55rem; }
    #nav-links { display: none; gap: clamp(1rem, 2.4vw, 2.5rem); list-style: none; flex-wrap: nowrap; }
    #nav-links a { white-space: nowrap; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); text-decoration: none; transition: color 0.2s ease; }
    #nav-links a:hover { color: var(--gold); }
    #nav-cta { white-space: nowrap; flex: 0 0 auto; display: none; padding: 0.65rem 1.5rem; background: var(--warmblack); color: var(--cream); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-radius: 2px; border: 1.5px solid transparent; transition: transform 0.2s ease, background 0.35s ease, color 0.35s ease, border-color 0.35s ease; min-height: 44px; align-items: center; }
    #nav-cta:hover { transform: translateY(-2px); }
    #hamburger { width: 44px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 10px; background: none; border: none; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
    #hamburger span { display: block; height: 1.5px; background: var(--warmblack); border-radius: 2px; transform-origin: center; transition: transform 0.3s ease, opacity 0.3s ease, background 0.35s ease; }
    #hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    #hamburger.open span:nth-child(2) { opacity: 0; }
    #hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
    #mobile-menu {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99;
      background: var(--cream); display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 2rem;
      transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    #mobile-menu.open { transform: translateX(0); }
    #mobile-menu a { font-family: 'DM Serif Display', serif; font-size: 2.2rem; color: var(--warmblack); text-decoration: none; }


    /* Nav quick-action icons */
    #nav-icons { display: flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; }
    #nav-icons a {
      width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
      color: var(--slate); text-decoration: none; border-radius: 50%;
      transition: color 0.2s ease, background 0.2s ease;
    }
    #nav-icons a:hover { color: var(--gold); background: rgba(143,163,176,0.1); }
    #nav:not(.scrolled) #nav-icons a { color: rgba(250,248,245,0.75); }
    #nav:not(.scrolled) #nav-icons a:hover { color: var(--warmwhite); background: rgba(250,248,245,0.1); }
    /* Nav over dark hero (unscrolled) */
    #nav:not(.scrolled) #nav-logo { color: var(--warmwhite); -webkit-text-stroke: 0.3px var(--warmwhite); }
    #nav:not(.scrolled) #nav-links a { color: rgba(250,248,245,0.72); }
    #nav:not(.scrolled) #nav-links a:hover { color: var(--goldlight); }
    #nav:not(.scrolled) #nav-cta {
      background: transparent; color: var(--warmwhite);
      border: 1.5px solid rgba(250,248,245,0.38);
    }
    #nav:not(.scrolled) #hamburger span { background: var(--warmwhite); }
    /* Mobile menu OPEN: nav sits over the cream overlay -> invert logo/icons/X to dark */
    #nav.menu-open #nav-logo { color: var(--warmblack); -webkit-text-stroke: 0.3px var(--warmblack); }
    #nav.menu-open #nav-icons a { color: var(--slate); }
    #nav.menu-open #hamburger span { background: var(--warmblack); }
    @media (min-width: 960px) {
      #nav-links { display: flex; }
      #nav-cta { display: inline-flex; }
      #hamburger { display: none; }
    }



#nav-links a[aria-current] { color: var(--warmblack); text-decoration: underline; text-decoration-color: #2f8bff; text-decoration-thickness: 2px; text-underline-offset: 7px; }
#nav:not(.scrolled) #nav-links a[aria-current] { color: var(--warmwhite); }
body.menu-lock { overflow: hidden; }
/* ─── MSW-NAV-2026-09-14d ─── iOS notch band + nav proportions.
   The band fix is upstream of this: the fullscreen grain overlay (body::after, fixed,
   inset:0, z-index:1000, own compositor layer via translateZ) has been DELETED. It sat
   above the nav and covered the notch strip. Ray A/B'd four ablations of this exact
   template on a real iPhone and that was the one that fixed it. Do not reintroduce a
   fullscreen fixed layer above the nav.

   Below: .scrolled is pinned on in the markup so the bar always carries its designed
   solid background (and so the seven #nav:not(.scrolled) rules, which paint the logo and
   hamburger WHITE for a dark hero, never apply). This block then slims the bar and, on
   mobile, groups the icons and hamburger hard right instead of letting space-between
   strand them mid-bar, which is what squeezed the business name onto two lines. */
#nav, #nav.scrolled {
  padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.55rem;
  padding-left:  max(2rem, env(safe-area-inset-left, 0px));
  padding-right: max(2rem, env(safe-area-inset-right, 0px));
}
@media (max-width: 899px) {
  #nav, #nav.scrolled {
    justify-content: flex-start;
    gap: 0.35rem;
    padding-left:  max(1.1rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.55rem, env(safe-area-inset-right, 0px));
  }
  /* the name takes the whole remaining line and truncates rather than wrapping */
  #nav-logo { flex: 1 1 auto; min-width: 0; font-size: clamp(0.88rem, 3.7vw, 1.05rem); }
  #nav-logo span { display: block; min-width: 0; white-space: nowrap;
                   overflow: hidden; text-overflow: ellipsis; }
  #nav-icons { margin-left: auto; flex: 0 0 auto; gap: 0; }
  #nav-icons a { width: 40px; height: 40px; }
  #hamburger { flex: 0 0 auto; width: 40px; height: 40px; padding: 9px; }
}

    /* ─── MSW-NAVICONS-2026-09-20 ─── phone green, directions red. Ray's call.
       Both icons are inline svg with stroke="currentColor", so setting color on the link is
       all that is needed. Deliberately NOT tied to the trade accent: these two read as
       universal wayfinding colours, so they stay identical on every template.
       Scoped through #nav so they outrank the older #nav:not(.scrolled) rules, which still
       sit earlier in the sheet even though .scrolled is now pinned on. */
    #nav #nav-icons a[href^="tel:"] { color: #2b762f; }
    #nav #nav-icons a[href^="tel:"]:hover { color: #23611f; background: rgba(43,118,47,.10); }
    #nav #nav-icons a[aria-label="Get directions"] { color: #bc382a; }
    #nav #nav-icons a[aria-label="Get directions"]:hover { color: #9d2d21; background: rgba(188,56,42,.10); }

    /* ─── MSW-NAVFILL-2026-09-20 ─── solid nav icons instead of outlines.
       The svgs ship with fill="none" stroke="currentColor". A presentation attribute loses to
       a stylesheet rule, so filling them needs no markup edits. The pin's inner circle is
       filled with the bar colour so it still reads as a hole rather than disappearing into
       the solid teardrop. */
    #nav #nav-icons a svg { fill: currentColor; }
    #nav #nav-icons a[aria-label="Get directions"] svg circle { fill: var(--cream); stroke: none; }

    /* ─── MSW-NAVFADE-2026-09-20 ─── the bar fades in as you leave the hero.
       At the very top it is 5% and barely there over the photo; by 80px of scroll it is the
       full frosted bar. The alpha is driven continuously from JS through --nav-a rather than
       snapping at a threshold.

       The ramp is deliberately SHORT. While the bar is semi-transparent the strip beside the
       notch is semi-transparent too, and watching the page move through it is the exact thing
       that was wrong before. 80px of scroll keeps that window to a fraction of a second.

       Text has to swap as well: dark copy is unreadable at 5% over a dark hero. The template's
       own :not(.scrolled) rules already handle the logo, links and burger, and the two rules
       here cover the phone and pin, which are tuned for cream and would go muddy on the photo. */
    #nav, #nav.scrolled { background-color: rgba(240,235,225, var(--nav-a, .92)); }
    #nav { transition: background-color .18s linear, padding .35s ease, box-shadow .35s ease; }
    #nav #nav-logo, #nav #nav-icons a, #nav #hamburger span { transition: color .3s ease, background .3s ease; }
    #nav:not(.scrolled) { box-shadow: none; }
    #nav:not(.scrolled) #nav-icons a[href^="tel:"] { color: #6ee089; }
    #nav:not(.scrolled) #nav-icons a[aria-label="Get directions"] { color: #ff7a68; }
    #nav:not(.scrolled) #nav-icons a[aria-label="Get directions"] svg circle { fill: transparent; }