/* ============================================================
   psiholocator.ru — mobile layer
   Подключается только на узких экранах:
   <link rel="stylesheet" href="/css/mobile.css" media="screen and (max-width: 900px)">
   Десктопный style.css не трогаем.
   ============================================================ */

@media screen and (max-width: 900px) {

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        font: 16px/1.5 Verdana, sans-serif;
        overflow-x: hidden;
    }

    /* --- сетка: 1042px → резина ---------------------------------- */
    .container {
        width: auto;
        max-width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    iframe, embed, object, video {
        max-width: 100%;
    }

    /* --- верхняя полоса (Регистрация / Вход) --------------------- */
    #top-header {
        padding: 6px 0;
    }

    .login-holder {
        float: none;
        margin: 0;
        text-align: center;
    }

    .login-holder a {
        margin: 0 8px;
        font-size: 13px;
    }

    /* --- шапка: логотип + меню в столбик ------------------------- */
    #main-header {
        padding: 10px 0;
    }

    .wraplogo {
        width: auto;
        float: none;
        display: block;
        margin: 0;
        text-align: center;
    }

    #logo {
        float: none;
        display: inline-block;
    }

    #logo img {
        max-width: 240px;
        height: auto;
        display: block;
    }

    .primarynav {
        float: none;
        display: block;
        margin-top: 10px;
    }

    .up-menu {
        float: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
    }

    .up-menu > li {
        float: none;
        margin: 0;
    }

    .up-menu > li > a {
        font-size: 14px;
        line-height: 1.4;
        padding: 8px 10px;
    }

    /* выпадающие подменю на тач не открываются — не мешаем */
    .up-menu li > ul {
        display: none;
    }

    .sf-sub-indicator {
        display: none;
    }

    /* --- синяя полоса с заголовком ------------------------------- */
    #unheader {
        height: auto;
        padding-bottom: 14px;
        background-size: auto 100%;
    }

    .bigheader {
        width: auto;
        float: none;
        margin: 0;
        padding: 22px 0 0;
    }

    #unheader .bigheader h1 {
        font-size: 21px;
        line-height: 1.2;
        word-spacing: normal;
    }

    .breadcrumbs {
        padding: 10px 0 0;
    }

    .broad {
        width: auto;
        text-align: left;
    }

    .breadcrumbs li {
        float: none;
        display: inline;
        font-size: 13px;
        margin: 0 6px 0 0;
        padding: 0 0 0 12px;
        line-height: 1.6;
    }

    /* .bigpromo пустой, но занимает 400px и ломает высоту полосы */
    .bigpromo {
        display: none;
    }

    /* --- контент + сайдбар -------------------------------------- */
    #content-wrapper .indent {
        padding: 18px 0;
    }

    #content {
        width: auto;
        float: none;
        margin: 0;
        display: block;
    }

    #sidebar {
        width: auto;
        float: none;
        display: block;
        margin: 18px 0 0;
        padding: 2px 14px 10px;
        box-sizing: border-box;
    }

    #sidebar .widget {
        margin-bottom: 26px;
    }

    #sidebar .widget h4 {
        font-size: 19px;
        letter-spacing: 0;
        margin: 14px 0 10px;
    }

    #sidebar .widget ul li a {
        font-size: 16px;
        line-height: 1.5;
    }

    /* --- записи -------------------------------------------------- */
    .post {
        padding-bottom: 24px;
    }

    .post h2 {
        font-size: 21px;
        line-height: 1.25;
    }

    .post h2 a {
        word-wrap: break-word;
    }

    .featured-thumbnail {
        float: none;
        display: inline-block;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .entry-footer {
        width: auto;
        font-size: 13px;
    }

    .entry-footer .author-link,
    .entry-footer .time-link,
    .entry-footer .view-link,
    .entry-footer .comment-link {
        margin-right: 14px;
    }

    .alignleft, .alignright {
        float: none;
        display: block;
        margin: 0 0 14px;
    }

    /* --- тесты: формы, варианты ответов -------------------------- */
    .testirovanie {
        padding: 14px 12px;
        box-sizing: border-box;
    }

    .testirovanie input[type="submit"],
    .box input[type="submit"] {
        padding: 12px 22px;
        font-size: 19px;
    }

    .testirovanie textarea,
    textarea[name="podelitsa"] {
        width: 100% !important;
        height: 110px;
        box-sizing: border-box;
    }

    input[type="text"], input[type="email"], input[type="url"], select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* «Пройти тест» / «Ответить»: при 24px и padding 35px кнопка
       шире экрана 320px */
    input[type="submit"], input[type="button"], button {
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
    }

    .wrpvop {
        display: block;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 17px;
        padding: 14px;
        margin: 8px 0;
    }

    .wrpvop input[type="radio"] {
        margin: 2px 8px 0 0;
    }

    .conrek,
    .rekallert {
        width: auto;
        font-size: 17px;
    }

    .box {
        padding: 18px 14px;
    }

    .plussize {
        font-size: 24px;
    }

    /* Равен: варианты стоят absolute-радиокнопками */
    .ravenotv {
        width: calc(50% - 12px);
        min-width: 0;
        vertical-align: top;
    }

    .ravenotv input {
        left: 0;
        top: 2px;
    }

    .ravenotvvoz {
        width: auto;
        box-sizing: border-box;
    }

    .varpsi {
        width: auto;
        min-height: 0;
        float: none;
        margin: 8px 0;
    }

    /* матрица Пифагора и прочие таблицы */
    .pifagor table {
        width: 100%;
    }

    .pifagor table tr td {
        width: auto;
        height: auto;
        padding: 10px 4px;
        font-size: 14px;
    }

    table.you_rez {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- сетки категорий / футер --------------------------------- */
    .testsgrid {
        width: auto;
        float: none;
        display: block;
        margin: 0 0 14px;
    }

    .testsgrid h2 {
        font-size: 20px;
        margin: 14px 10px;
    }

    .rowrow {
        min-width: 0;
        float: none;
        display: block;
    }

    #widgets .indent {
        padding: 22px 0 8px;
    }

    .gridpages {
        width: auto;
        float: none;
        display: block;
        margin: 0 0 16px;
        padding: 0;
    }

    .gridpages h4 {
        margin-bottom: 8px;
    }

    .gridfooter {
        width: auto;
        float: none;
        display: block;
        margin: 0;
    }

    #footer {
        padding: 14px 0 22px;
    }

    /* --- комментарии -------------------------------------------- */
    .comment-form input[type="text"] {
        float: none;
        width: 100%;
        margin: 0 0 10px;
        box-sizing: border-box;
    }

    .commentlist .children {
        padding-left: 16px;
        background: none;
    }

    .commentlist li .comment-wrapper {
        padding: 10px;
    }

    /* --- постраничная навигация --------------------------------- */
    .wp-pagenavi a.previouspostslink {
        margin-right: 12px;
    }

    .wp-pagenavi a.nextpostslink {
        margin-left: 12px;
    }

    /* --- шеры / реклама ----------------------------------------- */
    .share42init {
        overflow: hidden;
    }

    /* рекламные контейнеры вставлены с инлайновым width:670px —
       без !important они растягивают страницу на телефоне */
    .rkmod,
    [id^="yandex_rtb"],
    .rekallert {
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    .rkmod {
        min-height: 0 !important;
        margin: 12px 0 !important;
    }

    /* одиночная ссылка на тёмной полосе #widgets: глобальный зелёный
       нечитаем на #3A3B3C */
    #widgets a {
        color: #B8D6E8;
    }

    #widgets a:hover {
        color: #66B9E3;
        text-decoration: none;
    }

    .myr img {
        width: 100%;
        height: auto;
    }
}

@media screen and (min-width: 561px) and (max-width: 900px) {
    /* планшет: не растягиваем текст на 750px в одну колонку */
    .container {
        max-width: 720px;
    }
}

@media screen and (max-width: 560px) {

    .container {
        padding: 0 10px;
    }

    #unheader .bigheader h1 {
        font-size: 19px;
    }

    .post h2 {
        font-size: 19px;
    }

    .up-menu > li > a {
        font-size: 13px;
        padding: 7px 7px;
    }

    #logo img {
        max-width: 240px;
        height: auto;
    }

    .ravenotv {
        width: 100%;
        margin: 6px 0;
    }
}