/* ════════════════════════════════════════════════════════════
   NAVBAR-ONLY REDESIGN — Aug 2026
   Everything in this file is scoped inside #navbar. No body
   class, no changes to any other element on any page. #navbar
   keeps its original position/top/height box model exactly —
   only what renders inside it is restyled, so no other page
   content needs to shift or compensate.

   Colors come from --navbar-bg / --navbar-text / --navbar-accent
   etc., which plug into the site's EXISTING per-theme CSS-swap
   mechanism (#themeStyleLink). theme-sage.css supplies the
   approved dark-pill look as the default; the 4 alt style
   files already define their own --navbar-bg (glass/neu/clay/
   skeuo), and now also supply --navbar-text/--navbar-text-muted.
   Result: the navbar changes with the style switcher exactly
   like the rest of the page already does.
   ════════════════════════════════════════════════════════════ */

#navbar{
  --nb-sans:'Inter',system-ui,-apple-system,sans-serif;
  background:transparent;
  backdrop-filter:none;
  border-bottom:0;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
}

#navbar .nav-inner{
  width:100%;
  max-width:1160px;
  height:auto;
  margin:0 auto;
  padding:11px 10px 11px 20px;
  background:var(--navbar-bg);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(127,127,127,.14);
  border-radius:999px;
  box-shadow:0 8px 32px rgba(15,25,20,.22);
  transition:background .35s,box-shadow .3s;
}

/* AJ logo box — uses the theme's own navbar accent color */
#navbar .n-box{
  background:var(--navbar-accent,var(--sage));
  color:#fff;
}

/* name / tagline */
#navbar .n-info strong{color:var(--navbar-text);font-family:var(--nb-sans)}
#navbar .n-info em{color:var(--navbar-text-muted);font-family:var(--nb-sans);font-style:normal}

/* top-level flat links (Home, Free Audit) — direct children only,
   so this never touches anything inside the mega-panel dropdowns */
#navbar .n-links > a{
  color:var(--navbar-text-muted);
  font-family:var(--nb-sans);
  font-weight:500;
}
#navbar .n-links > a::after{display:none}
#navbar .n-links > a:hover,
#navbar .n-links > a.act{
  color:var(--navbar-text);
  background:rgba(127,127,127,.14);
}
#navbar .n-links > a[href$="free-audit.html"]{color:var(--navbar-accent,var(--sage))}

/* mega-menu trigger buttons (Services, Work, My Creations, Blog, About) —
   the dropdown panels themselves are untouched: still var(--card) */
#navbar .mega-trigger{
  color:var(--navbar-text-muted);
  font-family:var(--nb-sans);
}
#navbar .mega-trigger:hover,
#navbar .mega-trigger.act{
  color:var(--navbar-text);
  background:rgba(127,127,127,.14);
}

/* dark/light + style-switcher toggle buttons */
#navbar .theme-toggle{
  border:1.5px solid rgba(127,127,127,.2);
  color:var(--navbar-text-muted);
  background:transparent;
}
#navbar .theme-toggle:hover{
  border-color:var(--navbar-accent,var(--sage));
  color:var(--navbar-text);
}

/* "Let's Talk" button. No !important here on purpose: under the
   default style this wins on specificity alone (matches the
   approved look); when an alt style is active, that theme's own
   !important .btn-dark rule correctly takes over instead. */
#navbar .n-right .btn-dark{
  background:var(--navbar-accent,var(--sage));
  color:#fff;
  border:none;
  box-shadow:none;
  border-radius:999px;
  font-family:var(--nb-sans);
  font-weight:600;
}
#navbar .n-right .btn-dark:hover{
  background:var(--navbar-accent2,var(--sage2));
}

/* hamburger (mobile) */
#navbar .hbg{border-color:rgba(127,127,127,.2)}
#navbar .hbg span{background:var(--navbar-text)}

@media (max-width:1140px){
  #navbar{padding:0}
  #navbar .nav-inner{border-radius:0;border-left:0;border-right:0;border-top:0;max-width:none}
}

/* ────────────────────────────────────────────────────────────
   Navbar-clearance fixes.
   #navbar's own box model (position/top/height) was deliberately
   left untouched so nothing else needed to shift — but a few
   pages have a first element with zero top spacing of its own,
   which the ORIGINAL solid navbar simply covered. This new pill
   has a transparent gutter around it, so those same elements now
   show through instead of being neatly hidden. Fixing only the
   specific colliding elements, nothing else on these pages.
   ──────────────────────────────────────────────────────────── */
.audit-top-banner{margin-top:85px} /* services.html promo banner */
.blog-hero-v2{padding-top:85px}     /* blog.html hero/eyebrow badge */
main > .ad-slot-top{margin-top:85px} /* free-audit.html ad slot (only when it's the very first element — confirmed unique to this page) */