/* ============================================================
   Mobile hamburger nav
   Loaded by every page. Overrides inline nav styles at ≤900px.
   ============================================================ */

/* Burger button — hidden by default */
nav.top .nav-burger {
  display: none;
  background: none;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 9px 11px;
  cursor: pointer;
  color: #1a1a1a;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
nav.top .nav-burger .bar {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
nav.top.nav-open .nav-burger .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
nav.top.nav-open .nav-burger .bar:nth-child(2) { opacity: 0; }
nav.top.nav-open .nav-burger .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* nav-right layout — for inner pages that don't inherit base.css */
nav.top .nav-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
nav.top .nav-cta {
  font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px;
  white-space: nowrap; background: #1a1a1a; color: #f1ece2;
  border: 1px solid #1a1a1a; transition: background .2s, border-color .2s;
  text-decoration: none; display: inline-block;
}
nav.top .nav-cta:hover { background: #ca561d; border-color: #ca561d; }

/* ---- Mobile breakpoint ---- */
@media (max-width: 900px) {
  nav.top { grid-template-columns: 1fr auto !important; }
  nav.top .links { display: none !important; }
  nav.top .nav-right { justify-self: end; display: flex !important; align-items: center; gap: 8px; }
  nav.top .nav-cta { display: none !important; }
  nav.top .nav-burger { display: flex !important; }

  /* open state: drop links below the nav bar.
     nav.top is display:grid, so .links is a GRID ITEM. The desktop base
     rule sets `justify-self: center` on it. For a position:fixed grid
     item, justify-self overrides left/right — `center` shrink-wraps the
     panel to its content and centres it (the narrow strip bug). Reset to
     `stretch` so left:0/right:0 actually fill the viewport width. */
  nav.top.nav-open .links {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    /* base.css sets `align-items: center` for the desktop horizontal row.
       In a vertical column that horizontally centres each plain link
       (Work/Pricing/About/Contact) while the width:100% Services block
       stays left — the mismatched-alignment bug. Reset to stretch. */
    align-items: stretch !important;
    position: fixed !important;
    justify-self: stretch !important;
    top: 57px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    background: #f1ece2 !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border-bottom: 1px solid rgba(0,0,0,0.1) !important;
    padding: 10px 20px 22px !important;
    gap: 4px !important;
    z-index: 79 !important;
  }
  nav.top.nav-open .links a {
    width: 100% !important;
    text-align: left !important;
    border-radius: 10px !important;
    padding: 13px 16px !important;
    font-size: 16px !important;
    color: rgba(26,26,26,0.8) !important;
    border: 1px solid transparent !important;
    transition: background .15s, border-color .15s, color .15s !important;
  }
  nav.top.nav-open .links a:hover,
  nav.top.nav-open .links a.current {
    background: rgba(202,86,29,.09) !important;
    border-color: rgba(202,86,29,.22) !important;
    color: #1a1a1a !important;
  }
}

/* ============================================================
   Services dropdown (best-practice grouping of offerings)
   ============================================================ */
nav.top .nav-group { position: relative; display: inline-flex; }
nav.top .nav-group-btn { font: inherit; background: none; border: 1px solid transparent; color: rgba(26,26,26,.75); padding: 10px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; line-height: 1; transition: background .18s ease, border-color .18s ease, color .18s ease; }
nav.top .nav-group-btn .caret { font-size: 10px; transition: transform .2s ease; }
nav.top .nav-group:hover > .nav-group-btn, nav.top .nav-group:focus-within > .nav-group-btn, nav.top .nav-group-btn.current { background: rgba(202,86,29,.08); border-color: rgba(202,86,29,.24); color: #1a1a1a; }
nav.top .nav-group:hover .caret, nav.top .nav-group:focus-within .caret, nav.top .nav-group.open .caret { transform: rotate(180deg); }
nav.top .nav-group::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
nav.top .nav-drop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); display: flex; flex-direction: column; gap: 2px; min-width: 200px; padding: 8px; background: rgba(241,236,226,.98); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(0,0,0,.10); border-radius: 14px; box-shadow: 0 18px 44px rgba(0,0,0,.12); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s ease; z-index: 60; }
nav.top .nav-group:hover .nav-drop, nav.top .nav-group:focus-within .nav-drop, nav.top .nav-group.open .nav-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
nav.top .nav-drop a { white-space: nowrap; padding: 9px 14px; border-radius: 9px; font-size: 14px; color: rgba(26,26,26,.8); border: 1px solid transparent; }
nav.top .nav-drop a:hover, nav.top .nav-drop a.current { background: rgba(202,86,29,.10); border-color: rgba(202,86,29,.22); color: #1a1a1a; }
/* Guard: pages with a dark hero whiten `.links a` (incl. these dropdown links) until
   the nav goes cream on scroll. The dropdown panel is always cream, so keep its links
   dark regardless of hero state. .nav-group prefix lifts specificity above the page rule. */
nav.top:not(.scrolled):not(.nav-open) .nav-group .nav-drop a { color: rgba(26,26,26,.8); }
nav.top:not(.scrolled):not(.nav-open) .nav-group .nav-drop a:hover { color: #1a1a1a; }
@media (max-width: 1080px) and (min-width: 901px) { nav.top .nav-group-btn { padding: 8px 12px; font-size: 13px; } }
@media (max-width: 900px) {
  nav.top.nav-open .nav-group { display: block; width: 100%; }
  nav.top.nav-open .nav-group-btn { width: 100%; justify-content: flex-start; gap: 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: rgba(26,26,26,.5); padding: 14px 16px 6px; }
  nav.top.nav-open .nav-group-btn .caret { display: none; }
  nav.top.nav-open .nav-drop { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; padding: 0; min-width: 0; }
  /* Keep the dropdown static when a child link is hovered/focused/open.
     The desktop rules (nav-group:hover/:focus-within/.open .nav-drop) set
     position:absolute + transform:translate(-50%,0) and outrank the plain
     .nav-open reset above, so tapping a Services item on mobile briefly
     shifted the panel half off the left edge. Re-assert static positioning
     with higher specificity so it can never slide. */
  nav.top.nav-open .nav-group:hover .nav-drop,
  nav.top.nav-open .nav-group:focus-within .nav-drop,
  nav.top.nav-open .nav-group.open .nav-drop {
    position: static; transform: none; left: auto; right: auto;
  }
  nav.top.nav-open .nav-drop a { font-size: 16px; padding: 13px 16px 13px 28px; }
  nav.top .nav-group::after { display: none; }
}