/**
 * Chevron Navigation Enhancement - Updated
 * This CSS works alongside your existing navigation styles
 * File: css/navigation-chevrons.css
 * 
 * Changes:
 * - Parent menu items now use downward-pointing green triangle instead of UIKit chevron
 * - Submenu background is now transparent
 * - Submenu items have right-pointing triangles aligned with main menu items
 */

/* ==========================================================================
   MAIN MENU ITEMS (Non-parent items) - Right-pointing triangle
   ========================================================================== */

/* Enhance existing navigation with triangles - works with your current styles */
.main-navigation .uk-nav > li:not(.menu-item-has-children) > a,
.secondary-navigation .uk-nav > li:not(.menu-item-has-children) > a {
    position: relative;
    padding-right: 30px; /* Add space for triangle */
}

/* Triangle styling for non-parent menu items */
.main-navigation .uk-nav > li:not(.menu-item-has-children) > a::after,
.secondary-navigation .uk-nav > li:not(.menu-item-has-children) > a::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--accent-color, #128379);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

/* Show triangle on hover - works with your existing transform */
.main-navigation .uk-nav > li:not(.menu-item-has-children) > a:hover::after,
.secondary-navigation .uk-nav > li:not(.menu-item-has-children) > a:hover::after {
    opacity: 1;
    right: 4px;
}

/* Show triangle on active states - works with your existing active styles */
.main-navigation .uk-nav > li.current-menu-item:not(.menu-item-has-children) > a::after,
.main-navigation .uk-nav > li.current_page_item:not(.menu-item-has-children) > a::after,
.secondary-navigation .uk-nav > li.current-menu-item:not(.menu-item-has-children) > a::after,
.secondary-navigation .uk-nav > li.current_page_item:not(.menu-item-has-children) > a::after {
    opacity: 1;
    right: 4px;
    border-left-color: var(--accent-color, #128379);
}

/* ==========================================================================
   PARENT MENU ITEMS - Downward-pointing triangle (replaces UIKit chevron)
   ========================================================================== */

/* Hide the UIKit chevron icon on parent menu items */
.main-navigation .menu-item-has-children > a [uk-icon],
.secondary-navigation .menu-item-has-children > a [uk-icon],
.mobile-navigation .menu-item-has-children > a [uk-icon],
.secondary-mobile-navigation .menu-item-has-children > a [uk-icon] {
    display: none !important;
}

/* Parent menu items styling */
.main-navigation .uk-nav > li.menu-item-has-children > a,
.secondary-navigation .uk-nav > li.menu-item-has-children > a {
    position: relative;
    padding-right: 30px; /* Same spacing as regular items */
}

/* Downward-pointing triangle for parent menu items */
.main-navigation .uk-nav > li.menu-item-has-children > a::after,
.secondary-navigation .uk-nav > li.menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    /* Right-pointing triangle by default */
    border-left: 6px solid var(--accent-color, #128379);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

/* Show and rotate triangle on hover for parent items */
.main-navigation .uk-nav > li.menu-item-has-children > a:hover::after,
.secondary-navigation .uk-nav > li.menu-item-has-children > a:hover::after {
    opacity: 1;
    right: 4px;
    /* Rotate to point downward */
    transform: translateY(-50%) rotate(90deg);
}

/* Keep triangle rotated when submenu is open */
.main-navigation .uk-nav > li.menu-item-has-children.uk-open > a::after,
.secondary-navigation .uk-nav > li.menu-item-has-children.uk-open > a::after {
    opacity: 1;
    right: 4px;
    /* Point downward when open */
    transform: translateY(-50%) rotate(90deg);
}

/* Active parent menu items */
.main-navigation .uk-nav > li.menu-item-has-children.current-menu-item > a::after,
.main-navigation .uk-nav > li.menu-item-has-children.current-menu-ancestor > a::after,
.main-navigation .uk-nav > li.menu-item-has-children.current_page_item > a::after,
.main-navigation .uk-nav > li.menu-item-has-children.current_page_ancestor > a::after,
.secondary-navigation .uk-nav > li.menu-item-has-children.current-menu-item > a::after,
.secondary-navigation .uk-nav > li.menu-item-has-children.current-menu-ancestor > a::after,
.secondary-navigation .uk-nav > li.menu-item-has-children.current_page_item > a::after,
.secondary-navigation .uk-nav > li.menu-item-has-children.current_page_ancestor > a::after {
    opacity: 1;
    right: 4px;
    transform: translateY(-50%) rotate(90deg);
    border-left-color: var(--accent-color, #128379);
}

/* ==========================================================================
   SUBMENU STYLING - Transparent background and aligned triangles
   ========================================================================== */

/* Make submenu background transparent */
.main-navigation .uk-nav-sub,
.secondary-navigation .uk-nav-sub {
    background: transparent !important;
    margin: 0;
    padding: 10px 0;
    border-radius: 0;
    text-align: right;
}

/* Submenu item links - ensure proper spacing for triangle */
.main-navigation .uk-nav-sub li > a,
.secondary-navigation .uk-nav-sub li > a {
    position: relative;
    padding-right: 30px !important; /* Same spacing as main menu items */
    display: block;
}

/* Re-enable triangles for submenu items (overriding the previous rule that hid them) */
.main-navigation .uk-nav-sub li > a::after,
.secondary-navigation .uk-nav-sub li > a::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--accent-color, #128379);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

/* Show triangle on hover for submenu items */
.main-navigation .uk-nav-sub li > a:hover::after,
.secondary-navigation .uk-nav-sub li > a:hover::after {
    opacity: 1;
    right: 4px;
}

/* Active submenu items */
.main-navigation .uk-nav-sub li.current-menu-item > a::after,
.main-navigation .uk-nav-sub li.current_page_item > a::after,
.secondary-navigation .uk-nav-sub li.current-menu-item > a::after,
.secondary-navigation .uk-nav-sub li.current_page_item > a::after {
    opacity: 1;
    right: 4px;
    border-left-color: var(--accent-color, #128379);
}

/* ==========================================================================
   MOBILE NAVIGATION
   ========================================================================== */

/* Mobile navigation triangles - works with your existing mobile styles */
.mobile-navigation .uk-nav > li:not(.menu-item-has-children) > a,
.secondary-mobile-navigation .uk-nav > li:not(.menu-item-has-children) > a {
    position: relative;
    padding-right: 30px;
}

.mobile-navigation .uk-nav > li:not(.menu-item-has-children) > a::after,
.secondary-mobile-navigation .uk-nav > li:not(.menu-item-has-children) > a::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--accent-color, #128379);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

/* Mobile hover/active states - works with your existing mobile transform */
.mobile-navigation .uk-nav > li:not(.menu-item-has-children) > a:hover::after,
.secondary-mobile-navigation .uk-nav > li:not(.menu-item-has-children) > a:hover::after {
    opacity: 1;
    right: 4px;
}

.mobile-navigation .uk-nav > li.current-menu-item:not(.menu-item-has-children) > a::after,
.mobile-navigation .uk-nav > li.current_page_item:not(.menu-item-has-children) > a::after,
.secondary-mobile-navigation .uk-nav > li.current-menu-item:not(.menu-item-has-children) > a::after,
.secondary-mobile-navigation .uk-nav > li.current_page_item:not(.menu-item-has-children) > a::after {
    opacity: 1;
    right: 4px;
    border-left-color: var(--accent-color, #128379);
}

/* Mobile parent menu items - downward triangle */
.mobile-navigation .uk-nav > li.menu-item-has-children > a,
.secondary-mobile-navigation .uk-nav > li.menu-item-has-children > a {
    position: relative;
    padding-right: 30px;
}

.mobile-navigation .uk-nav > li.menu-item-has-children > a::after,
.secondary-mobile-navigation .uk-nav > li.menu-item-has-children > a::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--accent-color, #128379);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.mobile-navigation .uk-nav > li.menu-item-has-children > a:hover::after,
.secondary-mobile-navigation .uk-nav > li.menu-item-has-children > a:hover::after {
    opacity: 1;
    right: 4px;
    transform: translateY(-50%) rotate(90deg);
}

.mobile-navigation .uk-nav > li.menu-item-has-children.uk-open > a::after,
.secondary-mobile-navigation .uk-nav > li.menu-item-has-children.uk-open > a::after {
    opacity: 1;
    right: 4px;
    transform: translateY(-50%) rotate(90deg);
}

/* Mobile submenu - transparent background */
.mobile-navigation .uk-nav-sub,
.secondary-mobile-navigation .uk-nav-sub {
    background: transparent !important;
}

/* Mobile submenu items with triangles */
.mobile-navigation .uk-nav-sub li > a,
.secondary-mobile-navigation .uk-nav-sub li > a {
    position: relative;
    padding-right: 30px !important;
}

.mobile-navigation .uk-nav-sub li > a::after,
.secondary-mobile-navigation .uk-nav-sub li > a::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--accent-color, #128379);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1;
}

.mobile-navigation .uk-nav-sub li > a:hover::after,
.secondary-mobile-navigation .uk-nav-sub li > a:hover::after {
    opacity: 1;
    right: 4px;
}

.mobile-navigation .uk-nav-sub li.current-menu-item > a::after,
.mobile-navigation .uk-nav-sub li.current_page_item > a::after,
.secondary-mobile-navigation .uk-nav-sub li.current-menu-item > a::after,
.secondary-mobile-navigation .uk-nav-sub li.current_page_item > a::after {
    opacity: 1;
    right: 4px;
    border-left-color: var(--accent-color, #128379);
}

/* ==========================================================================
   FOCUS & ACCESSIBILITY
   ========================================================================== */

/* Focus states for accessibility - works with your existing focus management */
.main-navigation .uk-nav > li > a:focus::after,
.secondary-navigation .uk-nav > li > a:focus::after {
    opacity: 1;
    right: 4px;
}

.mobile-navigation .uk-nav > li > a:focus::after,
.secondary-mobile-navigation .uk-nav > li > a:focus::after {
    opacity: 1;
    right: 4px;
}

/* Submenu focus states */
.main-navigation .uk-nav-sub li > a:focus::after,
.secondary-navigation .uk-nav-sub li > a:focus::after,
.mobile-navigation .uk-nav-sub li > a:focus::after,
.secondary-mobile-navigation .uk-nav-sub li > a:focus::after {
    opacity: 1;
    right: 4px;
}

/* ==========================================================================
   REDUCED MOTION & HIGH CONTRAST SUPPORT
   ========================================================================== */

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .main-navigation .uk-nav li > a::after,
    .secondary-navigation .uk-nav li > a::after,
    .mobile-navigation .uk-nav li > a::after,
    .secondary-mobile-navigation .uk-nav li > a::after,
    .main-navigation .uk-nav-sub li > a::after,
    .secondary-navigation .uk-nav-sub li > a::after,
    .mobile-navigation .uk-nav-sub li > a::after,
    .secondary-mobile-navigation .uk-nav-sub li > a::after {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .main-navigation .uk-nav li > a::after,
    .secondary-navigation .uk-nav li > a::after,
    .mobile-navigation .uk-nav li > a::after,
    .secondary-mobile-navigation .uk-nav li > a::after,
    .main-navigation .uk-nav-sub li > a::after,
    .secondary-navigation .uk-nav-sub li > a::after,
    .mobile-navigation .uk-nav-sub li > a::after,
    .secondary-mobile-navigation .uk-nav-sub li > a::after {
        border-left-color: currentColor;
    }
}

/* Dark mode compatibility - works with your existing dark theme */
@media (prefers-color-scheme: dark) {
    .main-navigation .uk-nav li > a::after,
    .secondary-navigation .uk-nav li > a::after,
    .mobile-navigation .uk-nav li > a::after,
    .secondary-mobile-navigation .uk-nav li > a::after,
    .main-navigation .uk-nav-sub li > a::after,
    .secondary-navigation .uk-nav-sub li > a::after,
    .mobile-navigation .uk-nav-sub li > a::after,
    .secondary-mobile-navigation .uk-nav-sub li > a::after {
        border-left-color: var(--accent-color, #128379);
    }
}