/**
 * Advantmed Primary Nav — replaces WP Mega Menu.
 * Markup: advantmed-primary-nav.php   Behaviour: assets/primary-nav.js
 *
 * Shared header styles live in the theme's style.css (.main-menu a, the hover
 * "pill" on #menu-primary-menu > li > a, the connector line on
 * .menu-item-has-children, .header-button-new, etc.); this file only adds the
 * dropdown structure, layout and arrow.
 */

/* ---------- Top level ---------- */

.adv-nav {
    position: relative;
    z-index: 99999;
}
.adv-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.adv-nav__menu {
    position: relative; /* panels are positioned against the whole menu row */
}
.adv-nav__menu > li {
    display: inline-block;
    position: static;
}
.adv-nav__menu > li > a {
    display: inline-block;
    margin: 0;
    padding: 15px 30px;
    transition: color 400ms;
}
.main-menu .adv-nav__menu > li > a:hover {
    color: #2f4629 !important;
}
.page-id-11 .main-menu .adv-nav__menu > li > a:hover {
    color: #fff !important;
}

/* Dropdown arrow (the zero-size span anchors the absolutely positioned icon right after the label) */
.main-menu .adv-nav__arrow {
    display: inline-block;
}
.main-menu .adv-nav__arrow::before {
    content: '';
    position: absolute;
    top: 17px;
    width: 15px;
    height: 15px;
    background: url('img/dropdown-arrow.svg') no-repeat center;
}
.page-id-11 .main-menu .adv-nav__arrow::before {
    background-image: url('img/white-arrow.svg');
}

/* ---------- Dropdown panel ---------- */

.adv-nav__panel {
    position: absolute;
    left: 0;
    top: auto;            /* sits directly under the hovered item */
    width: 100%;
    padding-top: 20px;    /* gap under the header; also keeps hover alive while moving down */
    box-sizing: border-box;
    text-align: left;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.adv-nav__menu > li:hover > .adv-nav__panel,
.adv-nav__menu > li:focus-within > .adv-nav__panel,
.adv-nav__menu > li.is-open > .adv-nav__panel {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.adv-nav__menu > li.is-suppressed > .adv-nav__panel {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Green band; the box-shadow + clip-path bleed it to the full viewport width */
.adv-nav__panel-inner {
    background: #2f4629;
    box-shadow: 0 0 0 100vmax #2f4629;
    clip-path: inset(0 -100vmax);
    padding: 10px 0;
}
.adv-nav__menu > li:hover > .adv-nav__panel > .adv-nav__panel-inner,
.adv-nav__menu > li:focus-within > .adv-nav__panel > .adv-nav__panel-inner,
.adv-nav__menu > li.is-open > .adv-nav__panel > .adv-nav__panel-inner {
    animation: advNavFadeInDown 700ms both;
}
@keyframes advNavFadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .adv-nav__panel-inner {
        animation: none !important;
    }
}

/* ---------- Columns (child links) ---------- */

.adv-nav__columns {
    display: flex;
    flex-wrap: wrap;
}
.adv-nav__columns > li {
    flex: 0 0 25%;        /* four per row, wraps if there are more */
    padding: 10px 15px;
    box-sizing: border-box;
}
.main-menu .adv-nav__panel a,
.main-menu .adv-nav__panel a:focus:not(.wp-block-button__link):not(.wp-block-file__button) {
    display: block;
    margin-bottom: 5px;
    color: #fff !important;
}

/* Grandchildren and deeper: listed under their parent link, indented */
.adv-nav__nested {
    padding-left: 15px !important;
}
.main-menu .adv-nav__nested a {
    opacity: 0.85;
}
.main-menu .adv-nav__nested a:hover {
    opacity: 1;
}

/* The theme's style.css draws the hover connector line on every .menu-item-has-children; keep it to the top row */
.main-menu .adv-nav__panel .menu-item-has-children:hover::before {
    content: none;
}

/* ---------- Responsive (mirrors the old breakpoints; menu is hidden ≤1024px) ---------- */

@media screen and (max-width: 1400px) and (min-width: 1301px) {
    .adv-nav__menu > li > a {
        padding: 14px 17px;
    }
}

@media screen and (max-width: 1300px) and (min-width: 1150px) {
    .adv-nav__menu > li > a {
        padding: 10px 15px;
    }
    .main-menu .adv-nav__arrow {
        position: relative;
        bottom: 30px;
    }
}

@media screen and (max-width: 1149px) and (min-width: 992px) {
    .adv-nav__menu > li > a {
        padding: 15px 24px;
    }
    .main-menu .adv-nav__arrow {
        position: absolute;
        bottom: 48px;
        right: 16px;
    }
}