/* Navigation gold hover and active styles */

/* Ensure the gold variable exists if not defined by the theme */
:root {
    --vm-gold: #d4a017;
}

.wp-block-navigation .wp-block-navigation-item a {
    position: relative;
    transition: color 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--vm-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover indicator */
.wp-block-navigation .wp-block-navigation-item a:hover {
    color: var(--vm-gold) !important;
}
.wp-block-navigation .wp-block-navigation-item a:hover::after {
    transform: scaleX(1);
}

/* ---------------------------------------------------------------
   Active / current page indicator.
   The Gutenberg Block Navigation uses aria-current="page" on the
   <a> tag for the currently active page. WordPress classic menus
   use current-menu-item / current_page_item classes on the <li>.
   Both are targeted here so either nav type works.
--------------------------------------------------------------- */

/* JS-injected class (primary): set by nav-active.js when aria-current is absent */
.wp-block-navigation .wp-block-navigation-item__content.vm-nav-active {
    color: var(--vm-gold) !important;
}
.wp-block-navigation .wp-block-navigation-item__content.vm-nav-active::after {
    transform: scaleX(1);
}

/* Gutenberg Block Navigation: aria-current="page" on the <a> */
.wp-block-navigation .wp-block-navigation-item a[aria-current="page"] {
    color: var(--vm-gold) !important;
}
.wp-block-navigation .wp-block-navigation-item a[aria-current="page"]::after {
    transform: scaleX(1);
}

/* Classic menu fallback: class-based active states */
.wp-block-navigation .wp-block-navigation-item.current-menu-item a,
.wp-block-navigation .wp-block-navigation-item.current_page_item a,
.wp-block-navigation .wp-block-navigation-item.active a {
    color: var(--vm-gold) !important;
}
.wp-block-navigation .wp-block-navigation-item.current-menu-item a::after,
.wp-block-navigation .wp-block-navigation-item.current_page_item a::after,
.wp-block-navigation .wp-block-navigation-item.active a::after {
    transform: scaleX(1);
}