/* Phone and tablet fixes for the portal. Loaded last by MainAsset and LandingAsset. */

/* decorative background images never widen the page */
#main_image_back_top, #main_image_back_right {
    max-width: 100%;
    pointer-events: none;
}

/* left section menu: collapsed behind a button on phones (index.js adds the button) */
.left-main-toggle {
    display: none;
}

@media screen and (max-width: 800px) {
    html, body {
        overflow-x: clip;
    }

    /* iOS zooms into form fields with text under 16px */
    input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
        font-size: 16px !important;
    }

    /* header: smaller logos so the bar is one row and does not cover the page */
    #logo_head_tsuul {
        height: 48px;
        margin-right: 8px;
    }
    header .navbar .container {
        width: 100%;
        padding: 0 12px;
        flex-wrap: nowrap;
    }
    header .navbar .container .navbar-collapse.show {
        flex-basis: 100%;
    }
    header .navbar .container:has(.navbar-collapse.show) {
        flex-wrap: wrap;
    }
    .navbar-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        width: auto;
        flex: 1 1 auto;
        margin-right: 8px;
        overflow: hidden;
    }
    header #logo_head {
        width: auto;
        max-width: calc(100% - 56px);
        max-height: 40px;
    }
    .navbar .navbar-toggler,
    header .navbar button.navbar-toggler,
    header.not_fixed .navbar .container .navbar-toggler {
        width: 48px;
        height: 44px;
        flex: 0 0 auto;
        padding: 0;
        border: 1px solid #959C6D;
        border-radius: 10px;
        background-color: #292929 !important; /* login/signup pages set white */
    }
    .navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(149, 156, 109, .5);
    }
    .navbar .navbar-toggler .navbar-toggler-icon {
        display: inline-block;
        width: 26px;
        height: 26px;
        vertical-align: middle;
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") center / 100% no-repeat !important;
    }
    header .container .navbar-collapse.show,
    header .container .navbar-collapse.collapsing {
        align-items: stretch !important;
        margin-top: 8px;
        background-color: #1C1C1C !important;
        border: 1px solid #3a3a3a;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
        max-height: calc(100vh - 90px);
        overflow-y: auto;
    }
    header .container .navbar-collapse.show > *,
    header .container .navbar-collapse.show .d-flex {
        justify-content: center;
        width: 100%;
    }
    header .container .navbar-collapse.show .login-button,
    header .container .navbar-collapse.show .logout {
        width: 100%;
        border: 1px solid #959C6D;
    }
    header .navbar-collapse.show .nav-link,
    header .navbar-collapse.show .dropdown-item,
    header .navbar-collapse.show .logout,
    header .navbar-collapse.show .profile-link,
    header .navbar-collapse.show select#lang-switcher {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    header .navbar-collapse.show .dropdown-menu {
        max-height: 60vh;
        overflow-y: auto;
    }

    .js-left-collapse .left_main {
        display: none;
    }
    .js-left-collapse .left_main.open {
        display: flex;
        margin-bottom: 24px;
    }
    .left-main-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        margin-bottom: 16px;
        padding: 0 20px;
        border: 1px solid var(--ua-line-strong, rgba(255, 255, 255, .18));
        border-radius: var(--ua-radius-pill, 999px);
        background: var(--ua-glass, rgba(255, 255, 255, .04));
        color: #ffffff;
        font-size: 17px;
        font-weight: 600;
        font-family: var(--ua-font, 'Gilroy-Regular', sans-serif);
    }
    .left-main-toggle[aria-expanded=true] {
        border-color: var(--ua-accent, #959C6D);
        background: var(--ua-accent-soft, rgba(149, 156, 109, .14));
    }
    .left-main-toggle::after {
        content: '';
        width: 9px;
        height: 9px;
        margin-top: -4px;
        border-right: 2px solid var(--ua-accent-light, #C4C8A2);
        border-bottom: 2px solid var(--ua-accent-light, #C4C8A2);
        transform: rotate(45deg);
        transition: transform .2s;
    }
    .left-main-toggle[aria-expanded=true]::after {
        margin-top: 4px;
        transform: rotate(-135deg);
    }

    #main_page_title {
        overflow-wrap: anywhere;
    }

    /* article text: media and tables stay inside the screen */
    .article-view img, .article-view video, .article-view iframe,
    .learning-content-view img, .learning-content-view video, .learning-content-view iframe {
        max-width: 100%;
        height: auto;
    }
    .article-view iframe,
    .learning-content-view iframe {
        aspect-ratio: 16 / 9;
    }
    .article-view table,
    .learning-content-view table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }
    .article-view {
        overflow-wrap: anywhere;
    }
}

/* tablets: the expanded menu squeezed the logo to a sliver */
@media screen and (min-width: 801px) and (max-width: 1199px) {
    header .navbar .container {
        width: 100%;
    }
    header .navbar-brand {
        flex: 0 0 auto;
    }
    header #logo_head {
        display: none;
    }
    #logo_head_tsuul {
        height: 56px;
    }
    header .navbar-nav .nav-link {
        font-size: 16px;
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* phones and tablets: links and buttons big enough for a finger */
@media screen and (max-width: 1199px) {
    .full-background-image-card-btn {
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* footer: content decides the height, links are easy to tap */
    footer {
        height: auto !important;
        padding-bottom: 24px;
    }
    .footer-menu .row div {
        margin-bottom: 0;
    }
    .footer-menu .row div a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
    .footer-social-links .social-icons a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}

/* landing sliders: the arrows are images used as buttons */
@media screen and (max-width: 1199px) {
    #hv1_slider, #hv2_slider {
        width: auto;
        gap: 8px;
        align-items: center;
    }
    #hv1_slider img, #hv2_slider img {
        box-sizing: border-box;
        width: 44px;
        height: 44px;
        padding: 12px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .35);
        cursor: pointer;
    }
}

@media screen and (max-width: 1199px) {
    #forgot-password, #invite-registration a {
        display: inline-block;
        padding: 10px 0;
    }
}