/*
 * HelpSafe Law
 *
 * RESPONSIVE
 *
 * Общая адаптация темы:
 * - планшеты;
 * - телефоны;
 * - мобильная навигация;
 * - типографика;
 * - сетки;
 * - таблицы;
 * - служебные элементы.
 *
 * ВАЖНО:
 * Здесь не создаём основные компоненты.
 * Только изменяем их поведение на меньших экранах.
 */


/* ============================================================
   1. ПЛАНШЕТЫ
   ============================================================ */

@media (max-width: 1050px) {

    .site-header__inner {
        gap:
            24px;
    }

    .content-layout,
    .law-layout__grid {
        gap:
            38px;
    }

    .law-page-header__title {
        font-size:
            38px;
    }

}


/* ============================================================
   2. ПЕРЕХОД К МОБИЛЬНОЙ НАВИГАЦИИ
   ============================================================ */

@media (max-width: 900px) {

    .site-header__inner {
        min-height:
            76px;

        gap:
            20px;
    }


    /*
     * Десктопное меню скрываем.
     *
     * Само мобильное меню находится
     * в navigation.css.
     */

    .site-navigation {
        display:
            none;
    }


    /*
     * Кнопка мобильного меню показывается.
     */

    .menu-toggle {
        display:
            inline-flex;
    }


    /*
     * Немного уменьшаем логотип.
     */

    .site-branding__logo {
        width:
            44px;

        height:
            44px;
    }

    .site-branding__name {
        font-size:
            19px;
    }

}


/* ============================================================
   3. ПЛАНШЕТ / БОЛЬШОЙ ТЕЛЕФОН
   ============================================================ */

@media (max-width: 800px) {

    .site-header__inner {
        padding-left:
            18px;

        padding-right:
            18px;
    }


    /*
     * Основные двухколоночные
     * структуры становятся одноколоночными.
     */

    .content-layout,
    .law-layout__grid {
        grid-template-columns:
            1fr;
    }


    /*
     * Sidebar переносится вниз.
     */

    .content-layout__sidebar,
    .law-layout__sidebar {
        width:
            100%;
    }


    /*
     * Сетки.
     */

    .layout-grid--3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /*
     * Заголовки юридических страниц.
     */

    .law-page-header__title {
        font-size:
            34px;
    }


    /*
     * Основной контент.
     */

    .law-content {
        font-size:
            16px;
    }

}


/* ============================================================
   4. ТЕЛЕФОНЫ
   ============================================================ */

@media (max-width: 560px) {

    /*
     * Общая ширина контейнеров
     * задаётся layout.css.
     */


    /* --------------------------------------------------------
       HEADER
       -------------------------------------------------------- */

    .site-header__inner {
        min-height:
            68px;

        padding-left:
            14px;

        padding-right:
            14px;
    }

    .site-branding__link {
        gap:
            9px;
    }

    .site-branding__logo {
        width:
            40px;

        height:
            40px;

        border-radius:
            11px;
    }

    .site-branding__name {
        font-size:
            17px;
    }

    .site-branding__law {
        margin-top:
            3px;

        font-size:
            8px;

        letter-spacing:
            0.20em;
    }


    /* --------------------------------------------------------
       ОСНОВНОЙ КОНТЕНТ
       -------------------------------------------------------- */

    .page-layout,
    .law-layout {
        padding-top:
            36px;

        padding-bottom:
            58px;
    }


    /*
     * Секции.
     */

    .content-section {
        padding-top:
            50px;

        padding-bottom:
            50px;
    }

    .content-section--small {
        padding-top:
            36px;

        padding-bottom:
            36px;
    }

    .content-section--large {
        padding-top:
            60px;

        padding-bottom:
            60px;
    }


    /*
     * Все служебные сетки
     * становятся одноколоночными.
     */

    .layout-grid--2,
    .layout-grid--3,
    .layout-grid--4 {
        grid-template-columns:
            1fr;
    }


    /*
     * Заголовки блоков.
     */

    .section-bar {
        display:
            block;
    }

    .section-bar__action {
        margin-top:
            14px;
    }


    /* --------------------------------------------------------
       LAW CONTENT
       -------------------------------------------------------- */

    .law-page-header__title {
        font-size:
            29px;

        line-height:
            1.12;
    }

    .law-page-header__description {
        font-size:
            15px;
    }

    .law-article {
        font-size:
            15px;

        line-height:
            1.7;
    }

    .law-content h2 {
        font-size:
            23px;
    }

    .law-content h3 {
        font-size:
            19px;
    }


    /* --------------------------------------------------------
       TABLES
       -------------------------------------------------------- */

    .table-wrapper {
        margin-top:
            22px;

        margin-bottom:
            22px;

        border-radius:
            10px;
    }


    /* --------------------------------------------------------
       FOOTER
       -------------------------------------------------------- */

    .site-footer__inner {
        padding-top:
            42px;

        padding-bottom:
            42px;
    }

    .site-footer__links {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;

        margin-top:
            24px;
    }

    .site-footer__bottom-inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            10px;
    }

    .site-footer__legal {
        text-align:
            left;
    }

}


/* ============================================================
   5. МАЛЕНЬКИЕ ТЕЛЕФОНЫ
   ============================================================ */

@media (max-width: 380px) {

    .site-branding__text {
        max-width:
            150px;
    }

    .site-branding__name {
        font-size:
            16px;
    }

    .site-branding__law {
        font-size:
            7px;

        letter-spacing:
            0.16em;
    }


    .law-page-header__title {
        font-size:
            26px;
    }


    .law-content {
        font-size:
            14px;
    }

}


/* ============================================================
   6. ДОСТУПНОСТЬ
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}


/* ============================================================
   7. ПЕЧАТЬ
   ============================================================ */

@media print {

    .site-header,
    .mobile-menu,
    .site-footer,
    .sidebar {
        display:
            none !important;
    }

    .site-main {
        width:
            100%;
    }

    .container,
    .container--narrow,
    .container--wide,
    .law-layout--narrow {
        width:
            100%;

        max-width:
            none;
    }

}