/* SAS Hospital Search - class names match the C# version and NAHAD sas-directory so existing theme styles carry over */

.sas-hs .formWrapper {
    margin-bottom: 2em;
}

.sas-hs .fieldWrapper {
    margin-bottom: 1em;
}

.sas-hs .fieldWrapper label {
    font-weight: bold;
}

.sas-hs .fieldWrapper input[type="text"],
.sas-hs .fieldWrapper select {
    max-width: 400px;
}

/* instructions on their own line under the label, like the previous C# page */
.sas-hs .instructionText {
    display: block;
    font-size: .85em;
    font-style: normal;
    line-height: 1.4;
    margin: .25em 0 .5em;
}

.sas-hs .fieldZip,
.sas-hs .fieldRadius {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5em;
}

.sas-hs .frmButtons {
    display: flex;
    gap: 1em;
    margin-top: 1em;
}

/* error messages in the same red as the buttons (site accent color) */
.sas-hs .mssgError,
.sas-hs-mini .mssgError {
    color: var(--e-global-color-accent, #9D2235);
    font-weight: bold;
    margin: .5em 0;
}

.sas-hs .searchResult {
    display: flex;
    gap: 1.5em;
    padding: 1.5em 0;
    border-bottom: 1px solid #ddd;
}

.sas-hs .searchResult {
    align-items: flex-start;
}

/* each result in its own box - same values as the previous C# page (portal2 /Content/sitePatient.css) */
.sas-hs .paj-items .searchResult {
    gap: 30px;
    border: 1px solid #999;
    border-radius: 0;
    padding: 20px;
    margin: 30px 0;
}

/* logo takes 1/4 of the box, info 3/4 (C#: flex 1 / flex 3) */
.sas-hs .paj-items .searchResult .search-result-img {
    flex: 1 1 0;
    min-width: 0;
}

.sas-hs .paj-items .searchResult .search-result-img img {
    max-width: 100%;
}

.sas-hs .paj-items .searchResult .search-result-info {
    flex: 3 1 0;
    min-width: 0;
    overflow-wrap: break-word;
}

/* long website addresses (and any other unbroken text) wrap instead of running off the card - also in map info boxes */
.sas-hs .paj-items .searchResult {
    min-width: 0;
    max-width: 100%;
}

.sas-hs .search-result-info,
.sas-hs .search-result-info a,
#sas-hs-map .infoText,
#sas-hs-map .infoText a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* logo (centered) stacks above the info at 767px and below, same point the form stacks above the results */
@media (max-width: 767px) {
    .sas-hs .paj-items .searchResult {
        flex-direction: column;
        gap: 1.25em; /* space between the logo and the hospital name */
    }

    .sas-hs .paj-items .searchResult .search-result-img {
        flex: none;
        width: 100%;
        text-align: center;
    }
}

/* hospital name flush with the top of the result (theme headings add a top margin) */
.sas-hs .search-result-info > :first-child {
    margin-top: 0;
    padding-top: 0;
}

.sas-hs .search-result-img {
    flex: 0 0 150px;
}

/* search form beside the map/results (same layout as the previous C# page); stacks on small screens */
.sas-hs.search-page-cont {
    display: flex;
    gap: 2.5em;
    align-items: flex-start;
}

.sas-hs.search-page-cont .formWrapper {
    flex: 0 0 280px;
    min-width: 0; /* keep the column at its set width - wide content (e.g. long specialty names) can't stretch it */
    margin-bottom: 0;
}

.sas-hs.search-page-cont .formWrapper select,
.sas-hs.search-page-cont .formWrapper input[type="text"] {
    max-width: 100%;
    min-width: 0;
}

.sas-hs.search-page-cont .resultWrapper {
    flex: 1 1 auto;
    min-width: 0;
}

.sas-hs.search-page-cont .fieldWrapper input[type="text"],
.sas-hs.search-page-cont .fieldWrapper select {
    width: 100%;
}

/* zip box and "within [radius] miles" on one line, like the previous C# page; the zip box shrinks to fit the column
   (the column width is locked on .formWrapper, so this can't push the form wider) */
.sas-hs.search-page-cont .fieldZip {
    flex-wrap: nowrap;
}

.sas-hs.search-page-cont .fieldZip input[type="text"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.sas-hs.search-page-cont .fieldRadius {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.sas-hs.search-page-cont .fieldRadius select {
    width: auto;
}

/* center the Search/Clear buttons */
.sas-hs.search-page-cont .frmButtons {
    justify-content: center;
}

@media (max-width: 767px) {
    /* stacked: stretch the form and results to the full width (flex-start alignment is only for side-by-side) */
    .sas-hs.search-page-cont {
        flex-direction: column;
        align-items: stretch;
    }

    .sas-hs.search-page-cont .formWrapper {
        flex-basis: auto;
        width: 100%;
    }

    .sas-hs.search-page-cont .resultWrapper {
        flex: none;
        width: 100%;
    }

    .sas-hs.search-page-cont #sas-hs-map,
    .sas-hs.search-page-cont .pajinationWrapper,
    .sas-hs.search-page-cont .paj-items .searchResult {
        width: 100%;
        box-sizing: border-box;
    }
}

.sas-hs .search-result-img img {
    max-width: 150px;
    height: auto;
}

.sas-hs .search-result-social a {
    margin-right: .5em;
    font-size: 1.4em;
}

.sas-hs .search-result-map-link {
    margin-top: .5em;
}

/* pagination - same look as the congressional search / amrpa.org/podcast/: plain red page numbers, current page is a
   grey circle with white text, red circle outline on hover; << < > >> arrows are plain text. adjust colors here if needed */
.sas-hs .alt_page_navigation {
    --sas-hs-page-accent: var(--e-global-color-accent, #9D2235);
    --sas-hs-page-current-bg: #e2e2e2; /* same grey as the current page on amrpa.org/podcast/ */
    --sas-hs-page-current-text: #fff;
    text-align: center;
    margin: 1.5em 0;
    font-size: 1rem;
}

/* no !important on display - pajinate hides out-of-range page links with inline styles */
.sas-hs .alt_page_navigation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 2.5em;
    min-width: 2.5em;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: 100%;
    background: none;
    color: var(--sas-hs-page-accent);
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
}

.sas-hs .alt_page_navigation a.page_link:hover {
    border-color: var(--sas-hs-page-accent);
}

.sas-hs .alt_page_navigation a.page_link.active_page,
.sas-hs .alt_page_navigation a.page_link.active_page:hover {
    border-color: transparent;
    background: var(--sas-hs-page-current-bg);
    color: var(--sas-hs-page-current-text);
    font-weight: normal;
    text-decoration: none;
}

/* << < > >> arrows are plain text, no circle */
.sas-hs .alt_page_navigation a.first_link,
.sas-hs .alt_page_navigation a.previous_link,
.sas-hs .alt_page_navigation a.next_link,
.sas-hs .alt_page_navigation a.last_link {
    min-width: 0;
    padding: 0 .5em;
    border: none;
    border-radius: 0;
}

/* hide arrows when there's no page in that direction (same as the congressional search) - pajinate only uses no_more on the arrows */
.sas-hs .alt_page_navigation a.no_more {
    display: none !important;
}

.sas-hs .alt_page_navigation .ellipse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5em;
    height: 2.5em;
}

/* map info windows - header/height rules from the previous C# page (portal2 /Content/sitePatient.css), plus a minimum
   width so long hospital names don't wrap in a narrow box (Google sizes the box from its first measurement of the content) */
#sas-hs-map .gm-style .gm-style-iw-c {
    max-height: 300px !important;
}

#sas-hs-map .gm-style-iw-chr {
    height: 12px !important;
}

#sas-hs-map .gm-style-iw-ch,
#sas-hs-map .gm-style-iw-chr button {
    height: 2em !important;
    width: auto !important;
}

#sas-hs-map .gm-style-iw-chr button span {
    height: 1em !important;
    width: 1em !important;
}

#sas-hs-map .infoText {
    margin-right: 1.5em;
    min-width: 260px;
    max-width: 340px;
}

@media (max-width: 480px) {
    #sas-hs-map .infoText {
        min-width: 0;
    }
}

/* mini search: show the zip error on its own centered line below the search fields and above the button,
   same as the old kco version (patient.amrpa.org custom CSS uses #dlMssgError for this) */
.sas-hs-mini form {
    flex-wrap: wrap;
}

.sas-hs-mini .sas-hs-mini-error {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    text-align: center;
}

@media (max-width: 600px) {
    .sas-hs .searchResult {
        flex-direction: column;
    }
}