/* ============================================
   FIX 10 - Navigation Menu Redesign
   Desktop horizontal nav + mobile hamburger
   ============================================ */


/* ── DESKTOP NAVIGATION ────────────────────────────────────── */

/* Container: hidden on mobile, flex on desktop */
.site-header__desktop-nav {
  display: none;
}

@media (min-width: 1024px) {
  .site-header__desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Nav list: flexbox row of links */
.desktop-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  flex-wrap: nowrap;
}

/* Individual nav links */
.desktop-nav__list li a {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #5C4A3A;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease;
  white-space: nowrap;
  position: relative;
}

.desktop-nav__list li a:hover,
.desktop-nav__list li a:focus-visible {
  color: #B8956A;
}

/* Active page indicator */
.desktop-nav__list li.current-menu-item > a,
.desktop-nav__list li.current_page_item > a,
.desktop-nav__list li.current-menu-ancestor > a {
  color: #B8956A;
  border-bottom-color: #B8956A;
}


/* ── HEADER LAYOUT OVERRIDE FOR DESKTOP ────────────────────── */

@media (min-width: 1024px) {

  /* Equidistant layout: logo and CTA each get equal flex space,
     centred within their column so the gap from the viewport edge
     matches the gap to the nearest nav link.
     IMPORTANT: padding and column-gap must be EQUAL so that
     edge → logo centre === logo centre → first-nav-link.          */
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    padding-right: clamp(1.5rem, 3vw, 2.5rem);
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }

  /* Logo centred in its 1fr column → equidistant left edge ↔ logo ↔ nav */
  .site-header__logo {
    justify-content: center;
  }

  /* CTA centred in its 1fr column → equidistant nav ↔ CTA ↔ right edge */
  .site-header__right {
    justify-content: center;
  }

  /* Hide hamburger on desktop */
  .site-header__hamburger {
    display: none !important;
  }

  /* Left column (hamburger) takes no space when hidden */
  .site-header__left {
    display: none;
  }
}


/* ── HERO OVERLAY MODE - Desktop nav links turn white ──────── */

@media (min-width: 1024px) {
  .header--hero-overlay .desktop-nav__list li a {
    color: rgba(255, 255, 255, 0.9);
  }

  .header--hero-overlay .desktop-nav__list li a:hover,
  .header--hero-overlay .desktop-nav__list li a:focus-visible {
    color: #B8956A;
  }

  .header--hero-overlay .desktop-nav__list li.current-menu-item > a,
  .header--hero-overlay .desktop-nav__list li.current_page_item > a,
  .header--hero-overlay .desktop-nav__list li.current-menu-ancestor > a {
    color: #B8956A;
    border-bottom-color: #B8956A;
  }

  /* When scrolled on hero page, revert to normal colors */
  .header--scrolled.header--hero-overlay .desktop-nav__list li a {
    color: #5C4A3A;
  }

  .header--scrolled.header--hero-overlay .desktop-nav__list li a:hover,
  .header--scrolled.header--hero-overlay .desktop-nav__list li a:focus-visible {
    color: #B8956A;
  }

  .header--scrolled.header--hero-overlay .desktop-nav__list li.current-menu-item > a,
  .header--scrolled.header--hero-overlay .desktop-nav__list li.current_page_item > a,
  .header--scrolled.header--hero-overlay .desktop-nav__list li.current-menu-ancestor > a {
    color: #B8956A;
    border-bottom-color: #B8956A;
  }
}


/* ── STICKY HEADER REFINEMENTS ─────────────────────────────── */

.header--scrolled {
  background-color: rgba(245, 240, 235, 0.96);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(44, 36, 32, 0.08);
}


/* ── MOBILE NAVIGATION REFINEMENTS (< 1024px) ─────────────── */

@media (max-width: 1023px) {

  /* Show hamburger on mobile */
  .site-header__hamburger {
    display: flex;
    cursor: pointer;
  }

  /* Show the left column on mobile */
  .site-header__left {
    display: flex;
  }

  /* Keep original 3-column layout on mobile */
  .site-header__inner {
    grid-template-columns: 1fr auto 1fr;
  }

  /* Logo centered on mobile */
  .site-header__logo {
    justify-content: center;
  }
}

/* ── HAMBURGER-TO-X ANIMATION ────────────────────────────────── */

/* Hamburger lines: base transition */
.hamburger__line {
  display: block;
  transition: transform 400ms ease-out, opacity 300ms ease-out;
  transform-origin: center center;
}

/* When nav is open: top line rotates 45deg to form X */
body.nav-open .hamburger__line--top {
  transform: translateY(var(--hamburger-offset, 7px)) rotate(45deg);
}

/* When nav is open: middle line disappears */
body.nav-open .hamburger__line--middle {
  opacity: 0;
}

/* When nav is open: bottom line rotates -45deg to form X */
body.nav-open .hamburger__line--bottom {
  transform: translateY(var(--hamburger-offset-neg, -7px)) rotate(-45deg);
}


/* ── HAMBURGER Z-INDEX (above overlay) ───────────────────────── */

.site-header__hamburger {
  position: relative;
  z-index: 350;
}


/* ── FULL-SCREEN OVERLAY ─────────────────────────────────────── */

/* Full-screen overlay: warm brown background */
.fullscreen-nav {
  background-color: #3D2E1E;
  transition: visibility 400ms ease-out, opacity 400ms ease-out;
}

/* Hide the separate close button - hamburger X now serves as close */
.fullscreen-nav__close {
  display: none;
}

/* Smooth slide-in animation - 400ms ease-out */
.fullscreen-nav__panel {
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 400ms ease-out, opacity 400ms ease-out;
}

.fullscreen-nav[aria-hidden="false"] .fullscreen-nav__panel {
  transform: translateY(0);
  opacity: 1;
}


/* ── STAGGERED FADE-IN FOR MENU ITEMS ────────────────────────── */

/* Menu items: hidden by default, slide up + fade in when overlay is open */
.nav-menu--fullscreen .menu-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* When overlay is visible, animate items in */
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for each menu item */
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(1) { transition-delay: 80ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(2) { transition-delay: 140ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(3) { transition-delay: 200ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(4) { transition-delay: 260ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(5) { transition-delay: 320ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(6) { transition-delay: 380ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(7) { transition-delay: 440ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(8) { transition-delay: 500ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(9) { transition-delay: 560ms; }
.fullscreen-nav[aria-hidden="false"] .nav-menu--fullscreen .menu-item:nth-child(10) { transition-delay: 620ms; }

/* Reset delays on close so items disappear immediately */
.fullscreen-nav[aria-hidden="true"] .nav-menu--fullscreen .menu-item {
  transition-delay: 0ms;
}


/* Mobile menu links cursor */
.nav-menu--fullscreen .menu-item > a {
  cursor: pointer;
}

/* Social and phone links cursor */
.fullscreen-nav__social-link,
.fullscreen-nav__phone {
  cursor: pointer;
}


/* ── CURSOR POINTER ON ALL CLICKABLE ELEMENTS ──────────────── */

.site-header__logo a,
.site-header__cta,
.desktop-nav__list li a,
.fullscreen-nav__close,
.site-header__hamburger {
  cursor: pointer;
}


/* ── FOCUS STYLES FOR ACCESSIBILITY ────────────────────────── */

.desktop-nav__list li a:focus-visible {
  outline: 2px solid #B8956A;
  outline-offset: 4px;
  border-radius: 2px;
}

.site-header__hamburger:focus-visible,
.fullscreen-nav__close:focus-visible {
  outline: 2px solid #B8956A;
  outline-offset: 2px;
  border-radius: 2px;
}


/* ── RESPONSIVE FINE-TUNING ────────────────────────────────── */

/* Large desktop: more spacing between nav items */
@media (min-width: 1400px) {
  .desktop-nav__list {
    gap: 2.25rem;
  }
}

/* Between 1024px and 1200px: tighten nav spacing */
@media (min-width: 1024px) and (max-width: 1199px) {
  .desktop-nav__list {
    gap: 0.75rem;
  }

  .desktop-nav__list li a {
    font-size: 11px;
    letter-spacing: 1.5px;
  }
}

/* Tablet range: smaller CTA */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header__cta {
    font-size: 0.7rem;
    padding: 0.5rem 1rem;
  }
}

/* Small mobile */
@media (max-width: 479px) {
  .site-header__cta {
    font-size: 0.6rem;
    padding: 0.4rem 0.75rem;
    letter-spacing: 0.1em;
  }
}


/* ── DESKTOP DROPDOWN MENUS ─────────────────────────────────── */

/* Parent list items with dropdowns need relative positioning */
.desktop-nav__list > li.menu-item-has-children {
  position: relative;
}

/* Dropdown hidden by default */
.desktop-nav__list .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  margin: 0;
  padding: 0.75rem 0;
  list-style: none;
  background: #1A1A1A;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: translateX(-50%) translateY(4px);
}

/* Invisible bridge to prevent hover gap from closing dropdown */
.desktop-nav__list > li.menu-item-has-children::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 12px;
  display: none;
}

/* Show dropdown on parent hover (desktop only) */
@media (min-width: 1024px) {
  .desktop-nav__list > li.menu-item-has-children:hover > .dropdown-menu,
  .desktop-nav__list > li.menu-item-has-children:focus-within > .dropdown-menu {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .desktop-nav__list > li.menu-item-has-children:hover::after {
    display: block;
  }
}

/* Hide dropdowns on mobile */
@media (max-width: 1023px) {
  .desktop-nav__list .dropdown-menu {
    display: none !important;
  }
}

/* Dropdown link styles */
.desktop-nav__list .dropdown-menu li a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: none;
  color: rgba(242, 238, 235, 0.85);
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}

.desktop-nav__list .dropdown-menu li a:hover,
.desktop-nav__list .dropdown-menu li a:focus-visible {
  color: #FFBC7D;
  background-color: rgba(255, 188, 125, 0.08);
  padding-left: 1.5rem;
}

/* Subtle top accent line on the dropdown */
.desktop-nav__list .dropdown-menu::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: #FFBC7D;
  margin: 0 auto 0.5rem;
  border-radius: 1px;
}

/* Dropdown link separator */
.desktop-nav__list .dropdown-menu li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Override hero-overlay colors for dropdown - always dark bg */
.header--hero-overlay .desktop-nav__list .dropdown-menu li a {
  color: rgba(242, 238, 235, 0.85);
}

.header--hero-overlay .desktop-nav__list .dropdown-menu li a:hover,
.header--hero-overlay .desktop-nav__list .dropdown-menu li a:focus-visible {
  color: #FFBC7D;
}

/* Scrolled state - same dark dropdown */
.header--scrolled .desktop-nav__list .dropdown-menu li a {
  color: rgba(242, 238, 235, 0.85);
}

.header--scrolled .desktop-nav__list .dropdown-menu li a:hover,
.header--scrolled .desktop-nav__list .dropdown-menu li a:focus-visible {
  color: #FFBC7D;
}

/* Chevron indicator on parent items with dropdowns */
.desktop-nav__list > li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 5px;
  transition: transform 0.2s ease;
}

.desktop-nav__list > li.menu-item-has-children:hover > a::after {
  transform: rotate(-135deg) translateY(-1px);
}


/* ── BEAUTIFUL LINK HOVER EFFECTS ──────────────────────────── */

/*
 * Animated underline that grows from left to right on hover.
 * Applied to text links across the site (not buttons).
 */

/* --- Navigation links (desktop) --- */
.desktop-nav__list > li > a {
  position: relative;
  border-bottom: none !important;
}

.desktop-nav__list > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #B8956A;
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Don't apply underline ::after to dropdown-parent chevron pseudo-element
   -- the chevron uses its own ::after, so we target only direct > li > a */
.desktop-nav__list > li.menu-item-has-children > a::after {
  /* This is the chevron - leave it as-is (overridden above) */
}

/* For non-dropdown nav items, grow underline on hover */
.desktop-nav__list > li:not(.menu-item-has-children) > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #B8956A;
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.desktop-nav__list > li:not(.menu-item-has-children) > a:hover::after,
.desktop-nav__list > li:not(.menu-item-has-children) > a:focus-visible::after {
  width: 100%;
}

/* Active page - full underline */
.desktop-nav__list > li.current-menu-item:not(.menu-item-has-children) > a::after {
  width: 100%;
}

/* --- Service card title links --- */
.service-card__title a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-card__title a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: #FFBC7D;
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.service-card__title a:hover {
  color: #B8956A;
}

.service-card__title a:hover::after {
  width: 100%;
}

/* --- Footer links --- */
.site-footer a:not(.btn) {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: #FFBC7D;
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.site-footer a:not(.btn):hover {
  color: #FFBC7D;
}

.site-footer a:not(.btn):hover::after {
  width: 100%;
}

/* --- General content links (articles, pages) --- */
.site-main .entry-content a:not(.btn):not(.wp-block-button__link),
.site-main .blog-post__content a:not(.btn),
.site-main .page-content a:not(.btn),
.pillar-article__body a:not(.btn) {
  position: relative;
  color: #B8956A;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-main .entry-content a:not(.btn):not(.wp-block-button__link)::after,
.site-main .blog-post__content a:not(.btn)::after,
.site-main .page-content a:not(.btn)::after,
.pillar-article__body a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1.5px;
  background: #FFBC7D;
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.site-main .entry-content a:not(.btn):not(.wp-block-button__link):hover,
.site-main .blog-post__content a:not(.btn):hover,
.site-main .page-content a:not(.btn):hover,
.pillar-article__body a:not(.btn):hover {
  color: #FFBC7D;
}

.site-main .entry-content a:not(.btn):not(.wp-block-button__link):hover::after,
.site-main .blog-post__content a:not(.btn):hover::after,
.site-main .page-content a:not(.btn):hover::after,
.pillar-article__body a:not(.btn):hover::after {
  width: 100%;
}

/* --- Mobile fullscreen nav link hover --- */
.nav-menu--fullscreen .menu-item > a {
  transition: color 0.3s ease;
}

.nav-menu--fullscreen .menu-item > a:hover {
  color: #FFBC7D;
}

/* --- Breadcrumb links --- */
.breadcrumbs a {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumbs a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.breadcrumbs a:hover::after {
  width: 100%;
}

/* --- Reduced motion: disable animated underlines --- */
@media (prefers-reduced-motion: reduce) {
  .desktop-nav__list > li > a::after,
  .service-card__title a::after,
  .site-footer a:not(.btn)::after,
  .site-main .entry-content a:not(.btn):not(.wp-block-button__link)::after,
  .site-main .blog-post__content a:not(.btn)::after,
  .site-main .page-content a:not(.btn)::after,
  .pillar-article__body a:not(.btn)::after,
  .breadcrumbs a::after {
    transition: none;
  }

  .desktop-nav__list .dropdown-menu {
    transition: none;
  }
}


/* ── PRINT STYLES ──────────────────────────────────────────── */

@media print {
  .site-header__desktop-nav,
  .site-header__hamburger,
  .fullscreen-nav {
    display: none !important;
  }
}