/* ===========================================================
   WP Nav Underline — BoardingCafe Brown palette
   Applies to common WP navs: classic, block, custom header navs
   =========================================================== */

/* --- Brown palette (same as your menu tokens) --- */
:root {
  --nav-text: #3a2a21;          /* base text */
  --nav-primary: #5B3A29;       /* underline + focus */
  --nav-primary-600: #4B2F22;   /* hover text */
  --nav-accent: #8B6B4A;        /* subtle accent if needed */
  --nav-underline-height: 2px;
  --nav-underline-radius: 999px;
  --nav-anim: 260ms cubic-bezier(.22,.61,.36,1);
}

/* --------- TARGETS (covers most themes) --------- */
/* Classic menus */
.menu a,
.menu-item a,
.menu > .menu-item > a,
.nav-menu a,
/* Block theme navigation */
.wp-block-navigation__container a,
.wp-block-navigation-item__content,
/* Your header */
.site-header .nav a,
.site-header .nav-links a,
nav[aria-label*="Main" i] a,
nav[aria-label*="Navigation" i] a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--nav-text);
  transition: color var(--nav-anim);
  outline: none;
}

/* The animated underline "loading bar" */
.menu a::after,
.menu-item a::after,
.nav-menu a::after,
.wp-block-navigation__container a::after,
.wp-block-navigation-item__content::after,
.site-header .nav a::after,
.site-header .nav-links a::after,
nav[aria-label*="Main" i] a::after,
nav[aria-label*="Navigation" i] a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  height: var(--nav-underline-height);
  width: 100%;
  background: var(--nav-primary);
  border-radius: var(--nav-underline-radius);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--nav-anim);
}

/* Hover/focus: run underline left -> right, change text color */
.menu a:hover,
.menu a:focus-visible,
.nav-menu a:hover,
.nav-menu a:focus-visible,
.wp-block-navigation__container a:hover,
.wp-block-navigation__container a:focus-visible,
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus-visible,
.site-header .nav a:hover,
.site-header .nav a:focus-visible,
.site-header .nav-links a:hover,
.site-header .nav-links a:focus-visible,
nav[aria-label*="Main" i] a:hover,
nav[aria-label*="Main" i] a:focus-visible,
nav[aria-label*="Navigation" i] a:hover,
nav[aria-label*="Navigation" i] a:focus-visible {
  color: var(--nav-primary-600);
}
.menu a:hover::after,
.menu a:focus-visible::after,
.nav-menu a:hover::after,
.nav-menu a:focus-visible::after,
.wp-block-navigation__container a:hover::after,
.wp-block-navigation__container a:focus-visible::after,
.wp-block-navigation-item__content:hover::after,
.wp-block-navigation-item__content:focus-visible::after,
.site-header .nav a:hover::after,
.site-header .nav a:focus-visible::after,
.site-header .nav-links a:hover::after,
.site-header .nav-links a:focus-visible::after,
nav[aria-label*="Main" i] a:hover::after,
nav[aria-label*="Main" i] a:focus-visible::after,
nav[aria-label*="Navigation" i] a:hover::after,
nav[aria-label*="Navigation" i] a:focus-visible::after {
  transform: scaleX(1);
}

/* Persist underline when "current" */
/* WordPress adds these automatically to current menu items */
.current-menu-item > a,
.current-menu-ancestor > a,
.current_page_item > a,
.current_page_parent > a,
/* Block theme uses aria-current */
.wp-block-navigation__container a[aria-current="page"],
.wp-block-navigation-item__content[aria-current="page"],
/* Our JS adds [data-exact-current="true"] as a fallback */
a[data-exact-current="true"] {
  color: var(--nav-primary-600);
}
.current-menu-item > a::after,
.current-menu-ancestor > a::after,
.current_page_item > a::after,
.current_page_parent > a::after,
.wp-block-navigation__container a[aria-current="page"]::after,
.wp-block-navigation-item__content[aria-current="page"]::after,
a[data-exact-current="true"]::after {
  transform: scaleX(1);
}

/* Spacing nicety: make sure underline isn’t clipped in tight rows */
.menu a, .nav-menu a, .site-header .nav a, .site-header .nav-links a,
.wp-block-navigation__container a, .wp-block-navigation-item__content {
  padding-bottom: 3px; /* room for underline */
}