/*
 * Responsive layer for the mirrored site.
 *
 * The site was captured from the old platform's desktop rendering only, which
 * assumes a 768px+ viewport. These rules adapt that markup for tablets and
 * phones. Selectors start with #dm and use !important because the platform
 * stylesheets do the same.
 */

/* ---------- Phone menu toggle (button is added by assets/js/mobile-nav.js) ---------- */
#dm .phw-menu-toggle {
    display: none;
}

/*
 * Per-device visibility. The platform marked elements hide-for-small / -medium /
 * -large, but the captured desktop runtime always applies the "large" rules.
 */
@media (min-width: 768px) and (max-width: 1024px) {
    #dmRoot #dm .hide-for-medium { display: none !important; }
    #dmRoot #dm .hide-for-large:not(.hide-for-medium) { display: block !important; }
}

@media (max-width: 767px) {
    #dmRoot #dm .hide-for-small { display: none !important; }
    #dmRoot #dm .hide-for-large:not(.hide-for-small) { display: block !important; }
}

/* ---------- Tablet and below: header navigation ---------- */
@media (max-width: 1024px) {
    #dm #hcontainer nav.main-navigation {
        flex-wrap: wrap !important;
        justify-content: center !important;
        row-gap: 0 !important;
    }

    #dm #hcontainer nav.main-navigation .middleLogoLink {
        order: -1;
        flex: 0 0 100% !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    #dm #hcontainer nav.main-navigation .middleLogoLink img {
        width: 240px !important;
        height: auto !important;
    }

    #dm #hcontainer nav.main-navigation .unifiednav__container {
        flex: 0 0 auto !important;
        width: auto !important;
        justify-content: center !important;
    }
}

/* ---------- Phones ---------- */
@media (max-width: 767px) {

    /* The desktop layout enforces a 768px minimum width */
    #dm .dmInner,
    #dm .dmHeaderContainer,
    #dm .dmHeader,
    #dm .dmHeaderResp {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Stack every multi-column row */
    #dm .dmRespRow .dmRespColsWrapper {
        flex-wrap: wrap !important;
    }

    /* Columns go full width unless the platform gave them a phone width (small-6) */
    #dmRoot #dm .dmRespRow .dmRespCol:not(.small-6) {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #dmRoot #dm .dmRespRow .dmRespCol.small-6 {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Rows (body and footer): trim the large desktop side padding; nested rows get none */
    #dmRoot #dm .dmBody .dmRespRow,
    #dmRoot #dm .dmFooter .dmRespRow {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    #dmRoot #dm .dmBody .dmRespCol .dmRespRow,
    #dmRoot #dm .dmFooter .dmRespCol .dmRespRow,
    #dmRoot #dm .dmBody .dmRespRow.fullBleedMode {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #dmRoot #dm .dmBody .dmRespRow.fullBleedMode > .dmRespColsWrapper > .dmRespCol {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Images never wider than the screen */
    #dm img {
        max-width: 100% !important;
        height: auto;
    }

    /* ----- Header ----- */

    /* Scrolls with the page on phones; a fixed header would cover too much of the screen */
    html:not(.ios-preview) #dm .hasStickyHeader .dmInner div.dmHeaderContainer.fHeader,
    #dm .dmHeaderContainer {
        position: relative !important;
        top: auto !important;
    }

    #dm .stickyHeaderSpacer {
        display: none !important;
    }

    /* the "mini header" shrink-on-scroll hides the phone row; keep it on phones */
    #dmRoot #dm .dmHeader .dmRespRow.mini-header-hide-row {
        display: block !important;
    }

    #dm #hcontainer .u_1278431039 .text-align-right {
        text-align: center !important;
    }

    #dm #hcontainer .u_1278431039 a {
        white-space: nowrap;
    }

    #dm #hcontainer nav.main-navigation .middleLogoLink img {
        width: 200px !important;
    }

    #dm .phw-menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 4px auto 10px;
        padding: 10px 22px;
        border: 2px solid #00205b;
        border-radius: 4px;
        background: #fff;
        color: #00205b;
        font: 700 16px/1 'Open Sans', sans-serif;
        letter-spacing: .5px;
        text-transform: uppercase;
        cursor: pointer;
    }

    #dm .phw-menu-icon,
    #dm .phw-menu-icon::before,
    #dm .phw-menu-icon::after {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        position: relative;
        transition: transform .2s, background .2s;
    }

    #dm .phw-menu-icon::before,
    #dm .phw-menu-icon::after {
        content: '';
        position: absolute;
        left: 0;
    }

    #dm .phw-menu-icon::before { top: -6px; }
    #dm .phw-menu-icon::after { top: 6px; }

    #dm .phw-nav-open .phw-menu-icon { background: transparent; }
    #dm .phw-nav-open .phw-menu-icon::before { transform: translateY(6px) rotate(45deg); }
    #dm .phw-nav-open .phw-menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

    #dm #hcontainer nav.main-navigation .phw-menu-toggle {
        order: 0;
    }

    /* Links are hidden until the menu is opened, then stack full width */
    #dm #hcontainer nav.main-navigation .unifiednav__container {
        display: none !important;
        order: 1;
        flex: 0 0 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #dm #hcontainer nav.main-navigation.phw-nav-open .unifiednav__container {
        display: flex !important;
    }

    #dm #hcontainer nav.main-navigation .unifiednav__item-wrap {
        width: 100% !important;
        justify-content: center !important;
        border-top: 1px solid rgba(0, 32, 91, .15);
    }

    #dm #hcontainer nav.main-navigation .unifiednav__item {
        display: block !important;
        width: 100% !important;
        padding: 14px 0 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* ----- Hero (home page cover) ----- */
    #dm .dmBody div.u_1988368786.hasBackgroundOverlay {
        padding: 90px 16px 70px !important;
    }

    /* the desktop design pulls the headline up into the hero's 532px top padding */
    #dmRoot #dm .dmBody .u_1282625111 {
        margin-top: 0 !important;
    }

    /* ----- Contact page: the two blue info boxes stack, so space them apart ----- */
    #dmRoot #dm .dmBody .dmRespCol:has(> .dmRespRow.u_1724688878) {
        padding-bottom: 16px !important;
    }

    /* ----- Buttons: some desktop widths are calc(100% - Npx), which collapses on phones ----- */
    #dmRoot #dm .dmBody a.dmButtonLink {
        width: 100% !important;
        max-width: 300px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* ----- Forms ----- */
    #dmRoot #dm .dmBody .dmform {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* one field per line */
    #dmRoot #dm .dmform .dmforminput {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #dmRoot #dm .dmform .dmforminput input,
    #dmRoot #dm .dmform .dmforminput textarea {
        width: 100% !important;
        font-size: 16px !important; /* below 16px, iOS zooms the page on focus */
    }

    #dmRoot #dm .dmform .dmformsubmit {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #dmRoot #dm .dmform .dmformsubmit input[type="submit"] {
        width: 100% !important;
    }

    #dmRoot #dm .dmform .g-recaptcha {
        float: none !important;
        display: flex !important;
        justify-content: center;
    }

    /* ----- Footer ----- */
    #dmRoot #dm .dmFooter .u_1134805831 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* email line: the envelope is a background image on the left */
    #dmRoot #dm .dmFooter .u_1905239817 p {
        text-align: left !important;
        padding-left: 48px !important;
    }

    #dm .dmFooter .open-hours-data dd {
        white-space: nowrap;
    }

    /* ----- Typography: apply the mobile sizes the platform stored in m-* classes ----- */
    #dm .m-size-13, #dm .m-font-size-13 { font-size: 13px !important; }
    #dm .m-size-16, #dm .m-font-size-16 { font-size: 16px !important; }
    #dm .m-size-18, #dm .m-font-size-18 { font-size: 18px !important; }
    #dm .m-size-19, #dm .m-font-size-19 { font-size: 19px !important; }
    #dm .m-size-23, #dm .m-font-size-23 { font-size: 23px !important; }
    #dm .m-size-30, #dm .m-font-size-30 { font-size: 30px !important; }
    #dm .m-size-32, #dm .m-font-size-32 { font-size: 32px !important; }

    #dm .m-text-align-left { text-align: left !important; }
    #dm .m-text-align-center { text-align: center !important; }

    /* two-up icon grids read better centered */
    #dmRoot #dm .dmRespCol.small-6 p { text-align: center !important; }

    /* Headings without stored mobile sizes */
    #dm .dmBody h1:not([class*="m-size-"]) { font-size: 30px !important; }
    #dm .dmBody h2:not([class*="m-size-"]) { font-size: 26px !important; }
    #dm .dmBody h3:not([class*="m-size-"]) { font-size: 21px !important; }

    /* Long words (e.g. in headings) wrap instead of overflowing */
    #dm .dmBody h1, #dm .dmBody h2, #dm .dmBody h3, #dm .dmBody p {
        overflow-wrap: break-word;
    }
}