/* Legacy `header nav ul li a` rule directly targets nav links and beats
   inherited theme.json typography. Override it explicitly per menu. */
header .wp-block-navigation .wp-block-navigation-item__content {
    text-decoration: none !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

header .top-menu-nav .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--proxima-nova) !important;
    font-size: var(--wp--preset--font-size--nav-secondary) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.692 !important;
    text-transform: none !important;
}

header .main-menu-nav .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--bentonsans-comp-bold) !important;
    font-size: var(--wp--preset--font-size--nav) !important;
    font-weight: 400 !important;
    letter-spacing: 0.75px !important;
    line-height: 1.467 !important;
    text-transform: uppercase !important;
}

header .main-menu-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
header .main-menu-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
header .main-menu-nav .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--tertiary-lime) !important;
}

/* The toggle icon's path is a thin chevron outline (stroke-based), not a
   filled shape — filling it with currentColor turns the chevron into a
   solid wedge that reads as a triangle. Stroke it instead. */
header .wp-block-navigation .wp-block-navigation__submenu-icon svg {
    fill: none;
    stroke: currentColor;
}

header .wp-block-navigation .wp-block-navigation__submenu-icon svg path {
    fill: none;
    stroke: currentColor;
}

/* Submenu dropdown: cream background + dark green text per Figma. */
header .wp-block-navigation__submenu-container {
    background-color: var(--wp--preset--color--primary-light-tan) !important;
    border: none !important;
    padding: 1.5rem !important;
}

header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: var(--wp--preset--color--secondary-dark-green) !important;
    font-family: var(--wp--preset--font-family--proxima-nova) !important;
    font-weight: 400 !important;
    font-size: var(--wp--preset--font-size--nav-secondary) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Main Menu mega-nav panel: positioned relative to its own trigger (not
   full-bleed), multi-column link grid, chevron connector, and per-link
   external/internal arrow icons.

   `top: 100%; left: 0` anchors the panel directly to the trigger's own
   box with zero gap — no dead zone, no bridge pseudo-element needed,
   since the panel is simply the next box down in the trigger's own
   hover chain (WP core's native submenu positioning). Sized to fit its
   multi-column content rather than the viewport.

   `left: 0` is the resting position — the panel starts flush with its
   own trigger, which is what keeps it visually connected. A trigger
   further into the header with a wide panel can still push past the
   right edge of the viewport at that starting position; rather than
   statically right-aligning triggers by guesswork (which disconnects
   the panel from triggers that didn't actually need it), a small JS
   enhancement (mega-menu.js) measures each panel on open and nudges it
   left with an inline `left` override only by however much overflow
   there actually is — never more. */
@media (min-width: 990px) {
    header .main-menu-nav .wp-block-navigation__container {
        gap: 2.75rem;
    }

    header .main-menu-nav .wp-block-navigation-item.has-child {
        position: relative;
    }

    header .main-menu-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
        position: absolute !important;
        top: 100%;
        left: 0;
        width: max-content;
        max-width: calc(100vw - 3rem);
        margin-left: 0 !important;
        display: grid !important;
        grid-auto-flow: column;
        /* Categories with more than 4 links get a 3rd row instead of
           spreading into extra columns, keeping the panel narrower. */
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: minmax(14rem, max-content);
        column-gap: 3rem;
        row-gap: 1rem;
        padding: 2rem clamp(1.5rem, 3vw, 2.5rem) !important;
        z-index: 20;
    }

    header .main-menu-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child:has(> .wp-block-navigation__submenu-container > li:nth-child(5)) > .wp-block-navigation__submenu-container {
        grid-template-rows: repeat(3, auto);
    }
}

/* Chevron connector between the open trigger and its panel — a thin
   outline mark (matching the toggle icon's style), not a solid triangle. */
header .main-menu-nav .wp-block-navigation-item.has-child::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1.5 1L7 6.5L12.5 1' stroke='%23B89475' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease;
    z-index: 21;
}

header .main-menu-nav .wp-block-navigation-item.has-child:hover::after,
header .main-menu-nav .wp-block-navigation-item.has-child:focus-within::after {
    opacity: 1;
}

/* Active/open top-level trigger: tan label + flipped chevron. More
   specific than the generic hover-lime rule above, so it wins for items
   with a submenu while plain links keep the lime hover. */
header .main-menu-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation-item__content,
header .main-menu-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--primary-tan) !important;
}

header .main-menu-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation-submenu__toggle,
header .main-menu-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation-submenu__toggle {
    color: var(--wp--preset--color--primary-tan);
    transform: rotate(180deg);
}

/* Submenu items inside the open panel: dark green hover/active state
   (darker than their default dark green base, for a clear interactive
   distinction against the tan panel background). */
header .main-menu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
header .main-menu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    color: var(--wp--preset--color--primary-green) !important;
}

header .main-menu-nav .wp-block-navigation-submenu__toggle {
    transition: transform 0.15s ease;
}

/* Per-link arrow icons inside the mega-nav panel: yellow diagonal-style
   arrow for links that open in a new tab (external), dark green arrow for
   everything else (internal). */
header .main-menu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

header .main-menu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 0.65em;
    height: 0.65em;
    background-image: url("../images/icons/icon-arrow-right.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

header .main-menu-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content[target="_blank"]::after {
    background-image: url("../images/icons/icon-external-arrow-yellow.svg");
}

/* A link inside the mega-nav grid can itself have a child (e.g. "Locates
   Overview" > "How-To Videos"). WP core's default nested-flyout CSS
   positions that child at `left:100%` of its parent's own box, which
   assumes a normal single-column list — inside a multi-column grid it
   lands in the gap *between* columns instead, floating disconnected
   from its parent (with its toggle icon, rotated -90deg for flyouts,
   showing as a stray "‹"/"›"). Flatten it into a always-visible,
   indented line directly under its parent instead of a positioned
   flyout — simplest fix for what's typically just one or two links. */
header .main-menu-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child {
    display: block;
}

header .main-menu-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
    display: none;
}

header .main-menu-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0.35rem 0 0 1.1rem !important;
    margin: 0 !important;
}

header .main-menu-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 0.75rem !important;
}

/* Footer Menu: single dynamic nav block, laid out as a 2-column x 2-row
   grid (column-first) to match the Figma "Footer Column" pairs. */
footer .footer-menu-nav .wp-block-navigation__container {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    column-gap: 2.5rem;
    row-gap: 1.7rem;
}

footer .footer-menu-nav .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--proxima-nova) !important;
    font-size: var(--wp--preset--font-size--body) !important;
    font-weight: 700 !important;
    color: var(--wp--preset--color--primary-green);
    letter-spacing: 0.14px !important;
    text-transform: none !important;
}