/* ====================================================================
   SEARCH BOX ADDITIONS
   Paste this block into mcc2.css, or keep as its own linked stylesheet
   (currently linked directly in mcc_html_head() in mcc_functions.php,
   loaded AFTER mcc2.scrunch.css -- this matters for the override below).

   IMPORTANT: there is only ONE Google search-box widget in the markup
   (one .gcse-searchbox-only div). Earlier there were two -- one for a
   wide-desktop inline box and a separate one for a medium-width modal
   -- and that broke everything everywhere, likely because Google's
   script doesn't handle two live instances on one page gracefully.
   The fix is to keep a single instance and just restyle its container
   completely differently depending on viewport width: inline-expanding
   at >=1365px, a centered modal at 701-1364px, a dropdown at mobile.
   ==================================================================== */

/* --- Compensate for a pre-existing quirk in mcc2.css, without editing
   mcc2.css itself --------------------------------------------------- */
@media only screen and (min-width: 1024px) and (max-width: 1158px) {
    #div_outer {
        width: 85% !important;
    }
}

/* --- Search: shared basics ------------------------------------------ */

#li_search {
    overflow: visible !important;   /* overrides the site's ".menu > li { overflow:hidden }" rule */
    padding-right: 10px;
    white-space: nowrap;
}

#search_toggle {
    display: none;
}

.search_icon_label {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    padding: 6px 16px;
    text-align: center;
    vertical-align: middle;
}
.search_icon_label:hover {
    background-color: #ddd;
    color: #000;
}

/* Elements only used by the medium-width modal -- hidden everywhere
   else by default. */
.search_modal_overlay,
.search_modal_intro,
.search_modal_close {
    display: none;
}

/* --- Search: wide desktop (>=1365px) -------------------------------- */
/* Inline expanding box. Left as-is -- the one range with enough room
   for Google's own widget (and its "Enhanced by Google" branding) to
   render legibly at full size. */

.search_box_wrap {
    align-items: center;
    display: inline-flex;
    height: 32px;
    max-width: 0;
    overflow: hidden;
    transition: max-width 0.3s ease;
    vertical-align: middle;
    white-space: nowrap;
}

@media (min-width: 1365px) {
    #search_toggle:checked ~ .search_box_wrap {
        max-width: 260px;
    }
}

.search_box_wrap .gsc-search-box {
    margin: 0 !important;
    max-width: none !important;
}
.search_box_wrap .gsc-control-cse {
    padding: 0 !important;
}

/* --- Search: medium widths (905px - 1364px) -------------------------- */
/* Reclaim some space on every nav item (not just search) -- Search is
   now just plain text at this width (the box becomes a modal, out of
   the row entirely), but 9 items still need a bit of breathing room
   clawed back to avoid wrapping. */
@media (min-width: 905px) and (max-width: 1364px) {
    nav > ul > li a:any-link,
    .search_icon_label {
        padding-left: 8px;
        padding-right: 8px;
    }
}
@media (min-width: 701px) and (max-width: 992px) {
    nav > ul > li a:any-link,
    .search_icon_label {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* --- Search: medium widths (701px - 1364px) -------------------------- */
/* Restyle the SAME .search_box_wrap (and its one gcse widget) into a
   centered modal, instead of expanding inline. Overlay dims the page;
   clicking it (it's a <label> too) toggles the checkbox back off,
   closing the modal with no JS needed. */
@media (min-width: 701px) and (max-width: 1364px) {

    #search_toggle:checked ~ .search_modal_overlay {
        background-color: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        display: block;
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 999;
    }

    .search_box_wrap {
        align-items: stretch;
        display: none;         /* hidden until checked */
        height: auto;
        max-width: none;
        overflow: visible;
        transition: none;
        white-space: normal;
    }
    #search_toggle:checked ~ .search_box_wrap {
        background-color: #fff;
        background-image: url(/website2/img_mcc2/background_modal.webp);
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: block;
        left: 50%;
        max-width: 480px;
        padding: 20px;
        position: fixed;
        text-align: left;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        z-index: 1000;
    }

    .search_modal_intro,
    .search_modal_close {
        display: block;
    }
    .search_modal_intro {
        margin-bottom: 10px;
        margin-top: 0;
    }
    .search_modal_close {
        cursor: pointer;
        float: right;
        font-size: 1.4em;
        line-height: 1;
    }

    /* Plenty of room here, same as wide desktop -- no need to squeeze
       Google's own widget, so its branding stays legible. */
    .search_box_wrap .gsc-search-box {
        margin: 0 auto !important;
    }
}

/* --- Mobile (<=700px) ------------------------------------------------ */
@media (width <= 700px) {
    .search_modal_overlay {
        display: none !important;
    }
    #li_search {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        padding-right: 0;
        white-space: normal;
    }
    .search_icon_label {
        display: block;
        text-align: right;
        width: 100%;
    }
    .search_box_wrap {
        background-image: none !important;
        box-shadow: none !important;
        display: flex;
        height: auto;
        left: auto;
        max-width: none;
        overflow: hidden;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
        transition: none;
        white-space: normal;
        width: 0;
    }
    #search_toggle:checked ~ .search_box_wrap {
        margin-top: 0.5em;
        overflow: visible;
        width: 100%;
    }
    .search_modal_intro,
    .search_modal_close {
        display: none !important;
    }
    #li_search,
    #li_search:hover,
    #li_search:focus-within,
    #li_search:active {
        background-color: cadetblue !important;
    }
}
/* --- Mobile menu width, 641px-700px gap ------------------------------ */
/* #div_outer (the main content column) is width:85%, max-width:1080px,
   centered via margin:auto, from 641px up (mcc2.css, unrelated to our
   nav-breakpoint change). The mobile dropdown menu itself is still
   positioned edge-to-edge (left:6px; right:6px;) though, since that's
   from mcc2.css's own mobile block, which we only shifted the trigger
   width for (700px), not its internal sizing. That leaves a 641-700px
   gap where the menu is visibly wider than the content it sits above.
   Match the menu's width/centering to #div_outer's own numbers here,
   rather than touching mcc2.css's content-width rule (which also
   controls unrelated things like the background image and breadcrumbs). */
@media (min-width: 641px) and (max-width: 700px) {
    .menu {
        left: 50%;
        max-width: 1080px;
        right: auto;
        transform: translateX(-50%);
        width: 85%;
    }
}

/* ==================================================================== */