/* accessible-bootstrap-header-search.css */
/* Search header fixes for boot-4, boot-5, boot-18 */
/* Requires: <li> search container moved outside <ul> in velocity template */

/*Desktop on pc and safari remove border from button*/
button#navbarDropdownSearch {
    border: 0px;
}


/* ─── Search UL wrapper: remove default list box so <li> is the flex child ── */
ul.search-nav-wrapper {
    display: contents;
}


/* ─── Mobile (≤ 992px): force search form visible and in normal flow ─────── */
/* Original accessible-helper-bootstrap.css only had border-radius and background here.   */
/* The search <li> is now outside .navbar-nav, so Bootstrap's built-in              */
/* position:static / float:none for navbar dropdowns no longer applies.              */
/* These overrides restore that behavior and ensure the form is always shown mobile. */
@media only screen and (max-width: 992px) {
    #navbarDropdownSearch+.dropdown-menu {
        display: block !important;
        position: static !important;
        float: none !important;
        width: 100%;
        margin-bottom: 22px !important;
    }
}


/* ─── Icon toggle: magnifying glass ↔ X ─────────────────────────────────── */
/* Matches the logic in modern-business.css but uses !important to override   */
/* it cleanly now that the container is <li> (not <div>) outside the <ul>.    */

/* Default: show magnifying glass, hide X */
li.nav-item.dropdown.search .fa-x {
    display: none !important;
}
li.nav-item.dropdown.search .fa-magnifying-glass {
    display: inline-block !important;
    color: white;
}

/* Expanded: hide magnifying glass, show X */
li.nav-item.dropdown.search.show .fa-magnifying-glass {
    display: none !important;
}
li.nav-item.dropdown.search.show .fa-x {
    display: inline-block !important;
    color: white;
    position: relative;
    top: -2px;
}


/* ─── Decorative triangle connector under X when expanded ───────────────── */
/* Replicates modern-business.css rule which may be absent on the test server */
li.nav-item.dropdown.search.show:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #ddd transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -6px;
}