/* ==========================================================================
   site-header.css
   Additions to the SITE-WIDE header (NavigationView.Horizontal.cshtml).
   Currently: the search icon's look and its desktop/mobile visibility.

   The rest of this header is styled by the Bootstrap5 resource package's
   compiled CSS — don't edit that by hand; put new header styles here.
   ========================================================================== */

.menu-bar .sp-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    margin-left: 8px;
    padding: 0;
    color: #23395B;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .2s ease;
}

    .menu-bar .sp-search-toggle:hover {
        background: #F2F3F5;
    }

    .menu-bar .sp-search-toggle svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
    }

.mobile-header-right .sp-search-toggle {
    margin-left: 0;
}

@media (min-width: 768px) {
    .menu-bar .sp-search-toggle--mobile {
        display: none;
    }
}