/* ============================================================================
   nav-core.css — the ONE stylesheet for the Castle site header.

   Extracted verbatim from the homepage's inline <style> so the homepage stays
   pixel-identical, then linked from every template. Before this file existed
   the site shipped FIVE different navbars: the homepage and service pages had
   the full glass rail, About/Locations had a stripped copy, and the two Pest
   Library templates had a plain white sticky bar with no hamburger at all —
   meaning phone visitors on those pages had no navigation whatsoever.

   Pair with nav-core.js (behaviour) and nav-spatial.css (the glass layer).
   ========================================================================= */

/* ---------------------------------------------------------------------------
   TOP MENU — minimal animations + Services slide-out mega dropdown
   --------------------------------------------------------------------------- */

#site-header {
  transition: background-color .3s ease,
              box-shadow .3s ease,
              backdrop-filter .3s ease,
              border-color .3s ease;
}

/* Scroll-aware shadow + tint — stronger, more premium */
#site-header.nav-scrolled {
  background-color: rgba(251,248,241,.94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 8px 28px -12px rgba(30,42,36,.22),
              0 1px 0 0 rgba(31,111,74,.08);
  border-bottom-color: transparent;
}

/* Logo — subtle scale on hover, never overdone */
.nav-logo img {
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.nav-logo:hover img { transform: scale(1.04); }

/* ─── Open-now status pill ─────────────────────────────────────── */
.nav-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  background: rgba(31,111,74,.08);
  color: #155538;
  border: 1px solid rgba(31,111,74,.18);
  white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease;
}
.nav-status:hover {
  background: rgba(31,111,74,.12);
  border-color: rgba(31,111,74,.28);
}
/* When closed — soft terracotta, communicates "call/email instead" */
.nav-status.is-closed {
  background: rgba(194,102,59,.08);
  color: #8a3f15;
  border-color: rgba(194,102,59,.20);
}
.nav-status.is-closed .nav-status-dot {
  background: #C2663B;
  box-shadow: 0 0 0 0 rgba(194,102,59,.45);
  animation: none;
}
.nav-status-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: #2E9B6A;
  box-shadow: 0 0 0 0 rgba(46,155,106,.55);
  animation: nav-status-pulse 2.2s cubic-bezier(.4,0,.6,1) infinite;
  flex-shrink: 0;
}
@keyframes nav-status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,155,106,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(46,155,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,155,106,0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-status-dot { animation: none; }
}

/* CTA button — phone-led, with subtle ring animation on hover */
.nav-cta {
  position: relative;
  transition: transform .3s cubic-bezier(.22,1,.36,1),
              box-shadow .3s ease,
              background-color .25s ease;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(194,102,59,.45);
}
.nav-cta .nav-cta-icon {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.nav-cta:hover .nav-cta-icon {
  transform: rotate(-8deg) scale(1.1);
}

/* Top-level links — simple color + subtle underline on hover */
.nav-link {
  position: relative;
  padding: .35rem 0;
  transition: color .25s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: #1F6F4A;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .35s cubic-bezier(.65,.05,.36,1);
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active { color: #1F6F4A; }
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.active::after { transform: scaleX(1); }

/* ---- Services mega-dropdown ---- */
.nav-services {
  /* the trigger <li> — hover anywhere here keeps the panel open */
  position: static;
}
.nav-services .nav-link i.fa-chevron-down {
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.nav-services[data-open="true"] .nav-link i.fa-chevron-down {
  transform: rotate(180deg);
}

#services-dropdown {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: #FBF8F1;
  border-top: 1px solid rgba(31,111,74,.10);
  box-shadow: 0 22px 40px -18px rgba(30,42,36,.22);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              opacity .3s ease,
              visibility 0s linear .3s;
}
.nav-services[data-open="true"] #services-dropdown,
#services-dropdown[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              opacity .3s ease,
              visibility 0s linear 0s;
}

.nav-service-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1),
              border-color .25s ease, background-color .25s ease;
}
.nav-services[data-open="true"] .nav-service-card,
#services-dropdown[data-open="true"] .nav-service-card {
  opacity: 1;
  transform: translateY(0);
}
.nav-service-card:nth-child(1) { transition-delay: .05s; }
.nav-service-card:nth-child(2) { transition-delay: .10s; }
.nav-service-card:nth-child(3) { transition-delay: .15s; }
.nav-service-card:nth-child(4) { transition-delay: .20s; }
.nav-service-card:nth-child(5) { transition-delay: .25s; }
.nav-service-card:nth-child(6) { transition-delay: .30s; }
.nav-service-card:nth-child(7) { transition-delay: .35s; }

.nav-service-card:hover {
  background: #F7F2E7;
  border-color: rgba(31,111,74,.4);
}
.nav-service-card .nav-service-icon {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              background-color .25s ease, color .25s ease;
}
.nav-service-card:hover .nav-service-icon {
  background: #1F6F4A;
  color: #fff;
  transform: rotate(-6deg) scale(1.08);
}
.nav-service-card .nav-service-arrow {
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .25s ease;
  opacity: 0;
  transform: translateX(-4px);
}
.nav-service-card:hover .nav-service-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile hamburger — hidden on desktop, flex on mobile */
.nav-burger {
  position: relative;
  width: 26px; height: 20px;
  display: none;  /* hidden by default (desktop) */
  flex-direction: column; justify-content: space-between;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
@media (max-width: 1023px) {
  .nav-burger { display: flex; }
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2.5px;
  background: #1E2A24;
  border-radius: 4px;
  transition: transform .35s cubic-bezier(.65,.05,.36,1),
              opacity .25s ease,
              background-color .25s ease;
}
.nav-burger:hover span { background: #1F6F4A; }
.nav-burger.open span:nth-child(1) { transform: translateY(8.75px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-8.75px) rotate(-45deg); }

/* Mobile dropdown panel */
#nav-mobile {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
#nav-mobile.open {
  /* Headroom for the longest localisation. The Spanish nav stacks 16 items
     (~700-790px at 320px width once labels wrap); 720px clipped the last
     item. TODO: replace with grid-template-rows: 0fr/1fr to drop the magic
     number — must be scoped inside a max-width query so the ID selector
     does not override Tailwind's md:hidden on desktop. */
  max-height: 1000px;
  opacity: 1;
}

/* Mobile services sub-list slides open */
#nav-mobile-services-list {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.22,1,.36,1);
}
#nav-mobile-services-toggle[aria-expanded="true"] + #nav-mobile-services-list {
  max-height: 600px;
}
#nav-mobile-services-toggle i.fa-chevron-down {
  transition: transform .35s ease;
}
#nav-mobile-services-toggle[aria-expanded="true"] i.fa-chevron-down {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Phone link — used by the header's secondary call affordance. Lived only in
   the service-page template before unification.
   --------------------------------------------------------------------------- */
.nav-phone { transition: color .25s ease; }
.nav-phone:hover { color: #1F6F4A; }
.nav-phone .nav-phone-icon { transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.nav-phone:hover .nav-phone-icon { transform: rotate(-8deg) scale(1.1); }

/* CTA trailing arrow nudge */
.nav-cta .nav-cta-arrow { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .nav-phone .nav-phone-icon,
  .nav-cta .nav-cta-icon,
  .nav-cta .nav-cta-arrow { transition: none; transform: none !important; }
}