/*
 * Mobile / tablet layer for the `dec` theme (dec.gov.ua).
 * Loaded after every other stylesheet. Every rule that touches existing markup lives inside a max-width media
 * query, so the desktop layout (>= 992px) is not touched.
 */

/* hints added by js/responsive.js are meaningless once the window is wide again (tablet rotated) */
@media (min-width: 992px) {
    .dec-table-hint {
        display: none;
    }
}

/* ===== Phones + tablets (< 992px) ===== */
@media (max-width: 991.98px) {
    /* long unbreakable strings (URLs, file names, words joined by U+2011) wrap instead of widening the page;
       break-word does not shrink the min-content width, so wide tables still scroll instead of squashing */
    #content,
    #content h1, #content h2, #content h3, #content h4, #content h5,
    .modal-body {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* embedded media never wider than the column */
    #content img,
    #content video {
        max-width: 100%;
        height: auto;
    }
    #content iframe,
    #content embed,
    #content object {
        max-width: 100%;
    }
    #content iframe[src*="youtube.com"],
    #content iframe[src*="youtu.be"],
    #content iframe[src*="facebook.com/plugins/video"],
    #content iframe[src*="player.vimeo.com"] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* tables: js/responsive.js wraps them in .dec-table-scroll; Gutenberg table blocks scroll on their own */
    .dec-table-scroll,
    #content .wp-block-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 1rem;
    }
    .dec-table-scroll > table,
    #content .wp-block-table > table {
        margin-bottom: 0;
    }
    .dec-table-scroll > table {
        min-width: 100%;
    }
    .dec-table-hint {
        color: #6c757d;
        font-size: 13px;
        margin: 0 0 .35rem;
    }
    .dec-table-hint .fa {
        margin-left: .25rem;
    }

    /* [su_file_block] cards: the text column may shrink below its longest word */
    #content .card .media-body {
        min-width: 0;
    }

    /* resume upload (single vacancy): the invisible file input sat half outside the column */
    .input__wrapper .input__file {
        left: 0;
        top: 0;
        width: 1px;
        height: 1px;
    }

    /* --- collapsed main menu (navbar-expand-lg): labelled toggler, roomier links, menu fits the screen --- */
    #nav-menu {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    #nav-menu .navbar-toggler,
    .dec-menu-slot .navbar-toggler {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 8px 4px 4px;
        color: #2b2b2b;
    }
    #nav-menu .navbar-toggler::after,
    .dec-menu-slot .navbar-toggler::after {
        content: "Меню";
        margin-left: 10px;
        font-family: 'Akrobat', sans-serif;
        font-weight: 700;
        font-size: 16px;
        letter-spacing: .5px;
        text-transform: uppercase;
    }
    #nav-menu .navbar-nav .nav-link,
    #nav-menu .navbar-nav .dropdown-item {
        padding-top: .6rem;
        padding-bottom: .6rem;
        white-space: normal;
    }
    #nav-menu .navbar-collapse {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #nav-menu .lang {
        padding: 6px 0 10px;
    }
    /* home carousel: every slide keeps the photos' proportions (730x380) at any width — a fixed 380px height
       squeezed the photos between 576 and 991px; slides with a video have the same height as the others */
    .home-carusel.owl-carousel .item {
        height: auto;
        aspect-ratio: 730 / 380;
    }

    /* MTD register: its menu now collapses behind the same toggler (header.php) */
    #nav-menu #navbarNavMtd .navbar-nav {
        margin-left: 0 !important;
    }

    /* main header: the menu button sits in the header row (header.php .dec-menu-slot). Until the page scrolls, the
       bar below only holds the opened menu; then custome.js adds .sticky-top and it shows at the top of the screen
       with the small logo and its own button, as before. Fixed rather than sticky, so the page does not jump when
       the bar appears. */
    #nav-menu.dec-nav-main:not(.sticky-top) {
        padding-top: 0;
        padding-bottom: 0;
    }
    #nav-menu.dec-nav-main:not(.sticky-top) .navbar-toggler {
        display: none;
    }
    #nav-menu.dec-nav-main.sticky-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    .dec-menu-slot .navbar-toggler {
        border: 0;
    }
    .dec-menu-slot .navbar-toggler-icon {
        /* the icon of .navbar-light, which this button is outside of */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
}

/* ===== Tablets (768-991px) ===== */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* the menu button in the top right corner of the header */
    body > header > .container {
        position: relative;
    }
    .dec-menu-slot {
        position: absolute;
        top: 12px;
        right: 15px;
    }
    /* BPR and vacancies under the header on the right, as before; the header keeps its own two buttons */
    .dec-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 14px;
    }
    .dec-actions .btn:nth-child(-n+2) {
        display: none;
    }
}

/* ===== Phones (< 768px) ===== */
@media (max-width: 767.98px) {
    /* --- header: logo + the menu button in one row, search below (the action buttons: .dec-actions) --- */
    body > header {
        display: block;
        min-height: 0;
        padding: 10px 0 12px;
    }
    body > header > .container > .row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "logo actions" "search search";
        align-items: center;
        column-gap: 14px;
        row-gap: 10px;
        margin: 0;
    }
    body > header > .container > .row > div {
        flex: none;
        max-width: none;
        width: auto;
        margin: 0;
        padding: 0;
    }
    body > header > .container > .row > div:nth-child(1) { grid-area: logo; }
    body > header > .container > .row > div:nth-child(2) { grid-area: search; }
    /* MTD register header has no buttons: search goes next to the logo */
    body > header > .container > .row > div:nth-child(2):last-child { grid-area: actions; }
    body > header > .container > .row > .dec-menu-slot { grid-area: actions; justify-self: end; }
    body > header .logo {
        width: 118px;
        margin: 0;
        padding: 0;
    }
    body > header .search .input-group {
        margin-bottom: 0 !important;
        flex-wrap: nowrap;
    }
    body > header .search .form-control {
        height: 40px;
        font-size: 16px; /* < 16px makes iOS zoom the page on focus */
    }
    body > header .search .btn {
        height: 40px;
        width: 44px;
    }
    /* the header's two buttons are in .dec-actions on phones */
    body > header .header_button {
        display: none !important;
    }

    /* --- the four action buttons (header.php .dec-actions): one 2x2 block under the header --- */
    .dec-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 6px;
        margin-bottom: 12px;
    }
    .dec-actions .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin: 0;
        padding: 6px 8px;
        font-size: 13px;
        line-height: 1.15;
        white-space: normal;
        text-align: center;
    }
    #headerDSNS {
        margin-bottom: 12px !important;
    }
    #content .breadcrumb {
        margin-top: .5rem !important;
        margin-bottom: .5rem;
        padding-top: .25rem;
        padding-bottom: .25rem;
    }
    main > .container > .row.mt-4 {
        margin-top: .5rem !important;
    }

    /* --- bottom bar: four labelled actions (header.php): section menu, search, consultation, accessibility --- */
    .nav-bottom {
        padding: 4px 6px;
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
    }
    .nav-bottom .container {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        padding: 0;
    }
    .nav-bottom .container > span {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: 50px;
        font-size: 21px;
        color: #fff !important;
        cursor: pointer;
    }
    .nav-bottom .dec-label {
        font-family: 'Akrobat', sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .3px;
        text-transform: uppercase;
    }
    body.modal-open .nav-bottom {
        display: none !important;
    }
    /* reCAPTCHA badge: waits above the bottom bar instead of covering its right end
       (behind an open modal, as before) */
    .grecaptcha-badge {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1098;
    }
    /* ...so the «up» button (libs/scroll, 50px) moves above the badge */
    .scrollup {
        bottom: calc(134px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* accessibility modes (header.php .view-mode-toggler, hidden below 1200px by mode-toggler.css): the bottom bar
       button «Доступність» opens them as a panel above the bar, with their names written out */
    body.dec-a11y-open .view-mode-toggler {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        top: auto !important;
        left: auto !important;
        right: 12px;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        z-index: 1101;
        padding: 8px;
        background: #fff;
        border-radius: 14px 0 14px 0;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
    }
    body.dec-a11y-open .view-mode-toggler .btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100% !important;
        min-height: 44px;
        margin: 0 !important;
        text-align: left;
    }
    body.dec-a11y-open .view-mode-toggler .btn::after {
        content: attr(data-content);
        position: static;
        height: auto;
        padding: 0;
        background: none;
        opacity: 1;
        white-space: nowrap;
        font-size: 14px;
    }

    /* --- footer: the link lists fold up under their titles (footer.php .dec-acc, js/responsive.js);
           the contacts stay open --- */
    .footer .dec-acc > .footer_title {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        min-height: 44px;
        margin-bottom: 0 !important;
        cursor: pointer;
    }
    .footer .dec-acc > .footer_title::after {
        content: "\f107";
        font-family: FontAwesome;
        font-size: 22px;
        margin-left: 12px;
    }
    .footer .dec-acc:not(.is-closed) > .footer_title::after {
        content: "\f106";
    }
    .footer .dec-acc.is-closed > ul {
        display: none;
    }

    /* --- home page (main.dec-home) --- */
    /* carousel caption: two lines, the photo stays visible */
    .home-carusel.owl-carousel .item .bg-img {
        padding: 8px 12px;
    }
    .home-carusel.owl-carousel .item .bg-img > h3 {
        font-size: 14px;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .home-carusel.owl-carousel .item .bg-img > p {
        display: none;
    }
    /* announcements: title, date and views; the excerpt is one tap away */
    .dec-home .announcement .cart .card-body {
        padding: 14px 16px 44px;
    }
    .dec-home .announcement .cart .card-title {
        font-size: 17px;
        line-height: 1.25;
        margin-bottom: 8px;
    }
    .dec-home .announcement .card-text {
        display: none;
    }
    /* events: a swipeable strip like the news, all five */
    .dec-events__row {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .dec-events .news-sidebar,
    .dec-events .news-sidebar:nth-child(n+4) {
        display: block;
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
    body.modal-open .grecaptcha-badge {
        z-index: 1;
    }

    /* --- content --- */
    /* nested lists (e.g. the department tree on /contact-page/) indent less, so deep levels keep some width */
    #content article ul ul,
    #content article ol ol,
    #content article ul ol,
    #content article ol ul {
        padding-left: 1.1rem;
    }
    /* /contact-page/: the phone-book button is a bare flex item of .row and touched the screen edge */
    #content .contact > .row > a.btn {
        margin: 0 15px;
        white-space: normal;
    }

    /* [su_file_block] cards */
    #content .card .card-body {
        padding: .9rem;
    }
    #content .card .media > img[alt="File Icon"] {
        width: 40px !important;
        margin-right: .75rem !important;
    }
    #content .card .media-body h5 {
        font-size: 1.05rem;
        line-height: 1.3;
    }

    /* contact cards (/cart_contact/...): the round action button stuck out of the screen */
    .material-card .mc-btn-action {
        right: -10px;
    }

    /* home: latest-news strip scrolls card by card */
    .rowBlockNews {
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .rowBlockNews > * {
        scroll-snap-align: start;
    }

    /* forms: 16px inputs (iOS zooms the page into smaller ones) */
    #content input[type="text"],
    #content input[type="email"],
    #content input[type="tel"],
    #content input[type="search"],
    #content input[type="url"],
    #content input[type="number"],
    #content input[type="password"],
    #content select,
    #content textarea,
    .modal input[type="text"],
    .modal input[type="email"],
    .modal input[type="tel"],
    .modal select,
    .modal textarea,
    div.asl_w .probox .proinput input {
        font-size: 16px !important;
    }
}