/* ================================================================= */
/* PRIMARY NAVIGATION (navigation.css)                               */
/* The menu bar below the banner and its cascading dropdowns.        */
/* Markup in template-parts/header/primary-nav.php; touch and        */
/* keyboard behavior in assets/js/navigation.js.                     */
/* ================================================================= */

/* Navigation landmark wrapping the primary menu. It has its own bar directly below the placeholder */
/* banner (markup in template-parts/header/primary-nav.php). */
.rsn-primary-nav {
    max-width: 1100px; /* Same width as the banner above and the homepage sections below, so all the edges line up */
    margin: 20px auto 0; /* Space between the banner and the menu bar, centered; the next section adds its own top margin */
    padding: 0 20px; /* Left/right breathing room on smaller screens, matching the banner and sections */
    position: relative; /* Needed for z-index below to take effect */
    z-index: 10; /* Keeps the dropdown panels above the slider's arrow buttons (z-index 2) that sit just below the bar */
}

/* The bar itself: the menu list gets the background, so the bar is exactly as wide as the banner box above */
.rsn-primary-nav .rsn-menu {
    background-color: var(--rsn-depth); /* Depth — the secondary surface, so the bar stands apart from the Deep page base */
    padding: 10px 20px; /* Room above/below the links and in from the bar's left/right ends */
    border-radius: 6px; /* Same rounded corners as the banner box above */
}

/* The <ul> menu list output by wp_nav_menu() */
.rsn-menu {
    display: flex; /* Lay menu items out horizontally instead of the default stacked list */
    list-style: none; /* Remove default bullet points from the list */
    gap: 20px; /* Space between each menu item */
    flex-wrap: wrap; /* Allow menu items to wrap onto a new line on narrow screens */
    position: relative; /* Establishes a positioning context so top-level submenus anchor correctly */
}

/* Every menu item (top-level and nested) becomes a positioning anchor for its own submenu */
.rsn-menu li {
    position: relative; /* Lets a child .sub-menu position itself absolutely against THIS li, not the whole menu */
}

/* Individual menu item links */
.rsn-menu a {
    color: var(--rsn-ice); /* Ice — nav items are explicitly called out as an Ice text use case */
    font-family: var(--rsn-font-dm-sans); /* Body role: DM Sans, since "navigation" is explicitly listed under Body's use case */
    font-weight: var(--rsn-type-body-weight); /* 400 weight, per the Body row of the type spec */
    text-decoration: none; /* Remove the default underline from menu links */
    font-size: var(--rsn-type-body-size); /* 15px, the middle of the Body role's 14–16px range */
    padding: 6px 0; /* Small vertical padding to increase the clickable area */
    border-bottom: 2px solid transparent; /* Invisible border reserved for the hover/active state below */
    transition: border-color 0.2s ease, color 0.2s ease; /* Smoothly animate underline + color changes */
}

/* Underline + recolor menu links on hover/focus, using Signal to mark the "active state" */
.rsn-menu a:hover,
.rsn-menu a:focus {
    color: var(--rsn-signal); /* Signal — explicitly covers "active states" for key UI elements like nav links */
    border-bottom: 2px solid var(--rsn-signal); /* Signal underline reinforces the active/hovered nav item */
}

/* Small caret indicator appended to any top-level menu item that has children, */
/* signaling to the user that hovering/tapping it reveals a dropdown below it. */
.rsn-menu > li.menu-item-has-children > a::after {
    content: '\25BE'; /* Unicode down-pointing triangle (▾) */
    display: inline-block; /* Allows margin to apply correctly next to the text */
    margin-left: 6px; /* Small gap between the link text and the caret */
    font-size: 0.7em; /* Smaller than the surrounding link text so it reads as an icon, not a word */
    color: var(--rsn-signal); /* Signal — ties the indicator back to the brand accent color */
}

/* Nested submenu items get a right-pointing caret instead, since THEIR children flyout sideways */
.rsn-menu .sub-menu li.menu-item-has-children > a::after {
    content: '\25B8'; /* Unicode right-pointing triangle (▸) */
    display: inline-block; /* Allows margin to apply correctly next to the text */
    margin-left: 6px; /* Small gap between the link text and the caret */
    font-size: 0.7em; /* Smaller than the surrounding link text so it reads as an icon, not a word */
    color: var(--rsn-ice); /* Ice, not Signal: a Signal caret would blend into the Signal-colored panel background */
}

/* Every submenu panel (top-level dropdown AND nested flyouts) shares this base styling. */
/* It's hidden by default via opacity/visibility (not display:none) so the reveal can animate smoothly. */
.rsn-menu .sub-menu {
    position: absolute; /* Removes it from normal flow so it floats above page content */
    top: 100%; /* Positions it directly below its parent <li> by default (top-level dropdown behavior) */
    left: 0; /* Aligns its left edge with its parent <li>'s left edge by default */
    min-width: 220px; /* Wide enough for typical menu label lengths without wrapping awkwardly */
    margin: 0; /* Remove default <ul> margin so positioning math above is exact */
    padding: 8px 0; /* Small vertical breathing room inside the panel, no horizontal padding (links handle that) */
    list-style: none; /* Remove default bullet points from the nested list */
    background-color: var(--rsn-signal); /* Signal — brand accent shade used as the dropdown panel background */
    border: 1px solid var(--rsn-carbon); /* Carbon — subtle dark border to define the panel's edge */
    border-radius: 6px; /* Rounded corners, consistent with the rest of the theme's card styling */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Deep shadow so the flyout clearly "lifts" above the page */
    opacity: 0; /* Fully transparent when closed... */
    visibility: hidden; /* ...and removed from the accessibility tree / click-through when closed */
    transform: translateY(-6px); /* Starts slightly higher, so revealing it also slides it gently into place */
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; /* Animate all three properties smoothly */
    z-index: 100; /* Ensures the flyout renders above regular page content underneath it */
}

/* Submenus nested INSIDE another submenu cascade sideways instead of downward — this is what makes */
/* the menu "cascading": each deeper level flies out to the right of its own parent item, not below it. */
.rsn-menu .sub-menu .sub-menu {
    top: -9px; /* Nudges it up slightly so it lines up with the top of the parent item it's flying out from */
    left: 100%; /* Positions it to the right of its parent submenu panel instead of underneath */
    transform: translateX(-6px); /* Starts slightly to the left, so revealing it slides it gently rightward */
}

/* Reveal a submenu on mouse hover over its parent <li> — the core desktop interaction */
.rsn-menu li:hover > .sub-menu,
/* Reveal a submenu when keyboard focus lands anywhere inside its parent <li> (tabbing through links) */
.rsn-menu li:focus-within > .sub-menu,
/* Reveal a submenu when JavaScript adds this class (used for tap/click support on touch devices) */
.rsn-menu li.rsn-submenu-open > .sub-menu {
    opacity: 1; /* Fully visible when open */
    visibility: visible; /* Restored to the accessibility tree / clickable when open */
    transform: translateX(0) translateY(0); /* Slides fully into its resting position, whichever axis applies */
}

/* Links inside submenu panels are styled slightly differently than top-level nav links, */
/* since they sit inside a Signal-colored panel rather than directly on the dark menu bar. */
.rsn-menu .sub-menu a {
    display: block; /* Makes the entire row clickable, not just the text itself */
    padding: 8px 16px; /* Comfortable click/tap target with breathing room on all sides */
    border-bottom: none; /* Remove the top-level underline-on-hover style; we'll use a background highlight instead */
    white-space: nowrap; /* Prevent long labels from wrapping and breaking the panel's fixed width */
}

/* Submenu link hover/focus state uses a background highlight instead of an underline, */
/* since underlines read oddly on a full-width dropdown row. */
.rsn-menu .sub-menu a:hover,
.rsn-menu .sub-menu a:focus {
    background-color: var(--rsn-drive); /* Drive — the panel itself is Signal-colored, so the slightly darker */
    /* Drive gives clear contrast as the hover highlight */
    color: var(--rsn-ice); /* Ice text stays legible against the Drive highlight background */
}

/* Responsive rule: center the menu items on narrow/mobile screens */
@media (max-width: 768px) {
    .rsn-menu {
        justify-content: center; /* Center the menu items inside the menu bar; any that don't fit wrap onto a second centered row */
    }
}