/* ─── Nav Dropdown Fixes ────────────────────────────────────────────────────
   Override file — intentionally separate from the webpack build.
   Addresses three issues on the desktop navigation (≥1024px):
     1. Dropdown arrow is white (invisible on white header)
     2. Negative margin-left pushes the arrow behind the nav text
     3. Dropdown is inaccessible because closing is deferred by nav-fixes.js
   ─────────────────────────────────────────────────────────────────────────── */

/* Fix 1 & 2 — dark arrow + correct spacing + correct rotation direction.
   Build CSS uses rotate(-180deg) closed / rotate(0deg) open (backwards convention).
   We override both transform values so closed=↓ and open=↑. */
@media screen and (min-width: 1024px) {
    .site-header .site-nav__primary__item.has-children::after {
        content: url('/wp-content/themes/velvers/static/images/down-arrow-dark.svg') !important;
        margin-left: 0.5rem !important;
        transform: rotate(0deg) !important;   /* closed: arrow points down ↓ */
    }
    .site-header .site-nav__primary__item.has-children.active::after {
        content: url('/wp-content/themes/velvers/static/images/down-arrow-dark.svg') !important;
        transform: rotate(-180deg) !important; /* open: arrow points up ↑ */
    }
}

/* Fix 3 — dropdown anchored below its own nav item, sized to content.
   Build CSS: sub is position:absolute relative to .site-header (left:0, width:100vw).
   We make each has-children item the positioning context instead, then shrink
   the sub to fit its content so it sits neatly under the hovered label.
   Media query starts at 1024px (not 1200px) so it also covers narrower desktop
   viewports (e.g. with DevTools open). */
@media screen and (min-width: 1024px) {
    .site-header .site-nav__primary__item.has-children {
        position: relative;
    }

    .site-header .site-nav__primary__sub.active {
        top: 100% !important;
        left: 0;
        width: auto !important;
        min-width: max-content;
        justify-content: flex-start;
        padding: 0 30px 20px 30px;
    }

    .site-header .site-nav__primary__sub__list__item:first-child {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .site-header a.site-nav__primary__sub__list__item__text:hover {
        text-decoration: underline;
    }
}