/* ══════════════════════════════════════════════════════════
   AUDITS SITE NAV — Shared across all pages
   Transparent on dark hero, dark bg on scroll or non-hero pages.
   No Tailwind dependency. Self-contained.
   ══════════════════════════════════════════════════════════ */

.audits-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.35s ease, box-shadow 0.35s ease;
  background: transparent;
}

/* Dark state — on scroll or non-hero pages */
.audits-nav.scrolled {
  background: #1A1918;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* Light state — for bright FORGE pages (cream bg, dark nav text).
   Apply as `class="audits-nav scrolled audits-nav--light"` on any bright
   page. The scrolled class keeps the solid-bg behavior; --light inverts
   the color palette so logo + links read on a cream page. */
.audits-nav--light,
.audits-nav.scrolled.audits-nav--light {
  background: rgba(250, 247, 243, 0.96);  /* near-white cream */
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.audits-nav--light .anl-mark { color: #1A1918; }
.audits-nav--light .anl-dot { color: #E84A3D; }  /* Addason Digital red */
.audits-nav--light .audits-nav-links a { color: #1A1918; opacity: 0.75; }
.audits-nav--light .audits-nav-links a:hover { opacity: 1; color: #E84A3D; }
.audits-nav--light .audits-nav-cta {
  background: #E84A3D !important;
  color: #fff !important;
  border-color: #E84A3D !important;
}
.audits-nav--light .audits-nav-cta:hover {
  background: #C43A2E !important;
  border-color: #C43A2E !important;
}
.audits-nav--light .audits-hamburger span { background: #1A1918; }

/* Logo — the wordmark (Casey approved 2026-08-05).
   "Addason" set in Fraunces with a red period after it. Replaces the
   two-line AD monogram + rule + mono wordmark that ran until 2026-08-05.
   opsz 40 is the wordmark tier of the optical-size axis: enough contrast
   to read as a serif at 23px without going display-thin. */
.audits-nav-logo {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  transition: opacity 0.3s;
  line-height: 1;
}

.audits-nav-logo:hover { opacity: 0.75; }

.anl-mark {
  font-family: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  font-size: 23px;
  font-weight: 500;
  font-variation-settings: 'opsz' 40, 'wght' 500;
  font-style: normal;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #F5F0EB;
}

/* The period is the mark. Same cut, accent colour — never bolder. */
.anl-dot {
  color: #E84A3D;
  font-weight: inherit;
  font-variation-settings: inherit;
}

/* Desktop links */
.audits-nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.audits-nav-links a {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #F5F0EB;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.audits-nav-links a:hover { opacity: 1; }

/* CTA button */
.audits-nav-cta {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1A1918 !important;
  background: #C5A572;
  padding: 12px 24px;
  opacity: 1 !important;
  transition: opacity 0.3s;
}

.audits-nav-cta:hover { opacity: 0.85 !important; }

/* Mobile hamburger */
.audits-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}

.audits-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #F5F0EB;
  transition: transform 0.3s, opacity 0.3s;
}

.audits-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.audits-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.audits-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu — luddite-mode sectioned. Top section is the primary
   CTAs (Home, Daylight, Pricing, Get Your Audit), then "Learn more"
   and "About" sections divided by labeled headers. The top section
   has bigger, more confident type so a luddite eye lands on it first.
   Top-aligned + scrollable so it fits on every phone size including
   iPhone SE. The nav bar covers the top 52px so we pad-top 72px. */
.audits-mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1A1918;
  z-index: 9999;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 72px 24px 32px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  .audits-mobile-menu.open {
    display: flex;
  }
}

/* Section wrapper — creates breathing room between Top / Learn / About.
   Scoped under .audits-mobile-menu so an orphan .audits-mobile-section (from
   a buggy injector run that leaks the block outside its parent) stays
   invisible instead of rendering at the top of the page and pushing the hero
   below the fold. Sitewide safety net for the 2026-04-22 incident. */
.audits-mobile-section { display: none; }
.audits-mobile-menu .audits-mobile-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}

.audits-mobile-section.primary {
  margin-bottom: 32px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(245, 240, 235, 0.12);
}

/* Section labels — small uppercase mono headers. The Top section
   has no label (its prominence speaks for itself). */
.audits-mobile-section-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(197, 165, 114, 0.8);
  padding: 6px 4px;
  margin-bottom: 4px;
}

.audits-mobile-menu a {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  color: #F5F0EB;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity 0.3s;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(245, 240, 235, 0.06);
  text-align: left;
}

/* Primary section gets bigger, more confident type — these are the
   ones the luddite eye should land on first. */
.audits-mobile-section.primary a {
  font-size: 19px;
  padding: 14px 4px;
  font-weight: 500;
}

/* Learn more + About sections get slightly smaller, more breathable */
.audits-mobile-section:not(.primary) a {
  font-size: 16px;
  padding: 11px 4px;
  opacity: 0.78;
}

.audits-mobile-menu a:last-child,
.audits-mobile-menu a.audits-nav-cta {
  border-bottom: none;
}

.audits-mobile-menu a:hover,
.audits-mobile-menu a:active { opacity: 1; }

.audits-mobile-menu .audits-nav-cta {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 28px !important;
  margin-top: 14px;
  text-align: center;
  background: #C5A572;
  color: #1A1918 !important;
  opacity: 1 !important;
  border: none !important;
  align-self: stretch;
  font-weight: 600;
}

@media (max-width: 768px) {
  .audits-nav { padding: 12px 16px; }
  .audits-nav-links { display: none; }
  .audits-hamburger { display: flex; }
  .anl-mark { font-size: 21px; }
}

/* Spacer — push page content below fixed nav */
.audits-nav-spacer {
  height: 72px;
}