/* Mobile layout.  The desktop layout (styles.css) is a fixed 855px column; below 900px this file turns it into a
   single fluid column and keeps the same palette, fonts and images.  Loaded after styles.css (see church/assets.py). */

/* the menu toggle exists in the markup only for the mobile layout */
.nav-check {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; overflow: hidden;}
.nav-toggle, .nav .nav-support {display: none;}

@media (max-width: 900px) {
    html, body {height: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
    body, td, th, select, cite {font-size: 14px; line-height: 1.5em;}
    img {max-width: 100%; height: auto;}
    iframe, video, object, embed {max-width: 100%;}
    p {padding-right: 0;}
    h1 {font-size: 26px; margin-bottom: 14px;}
    h2 {font-size: 20px;}
    h3 {font-size: 15px;}
    .big1 {font-size: 20px;}
    .big2 {font-size: 22px;}
    .clear10, .clear20 {height: 10px;}

    /* page: the paper sheet of the desktop design becomes a plain white panel on the textured background */
    body {display: flex; flex-direction: column; min-height: 100vh;}
    .wrapper {flex: 1 0 auto; background: none; min-width: 0;}
    .footer {flex-shrink: 0;}
    .content {display: flow-root; width: auto; margin: 0 10px; padding: 18px 16px 24px; background: #fff; box-shadow: 0 0 8px rgba(64, 30, 0, .18);}
    .clear-foot {height: 20px;}

    /* columns stack */
    .col-l, .col-r, .col-wrap, .col, .col-n, .col-m-wrap, .col-m {float: none; width: auto; margin-right: 0;}
    .col-wrap .dash {margin-right: 0;}
    .col, .col-n {margin-bottom: 10px;}
    .news, .news-main, .article {float: none; width: auto; margin-right: 0;}

    /* header */
    .header {padding-top: 10px; background-position: 50% -36px;}
    .header-content {width: auto; min-height: 0; padding: 0 16px;}
    .logo {float: none; margin: 0; padding: 0 0 0 112px; min-height: 66px; font-size: 22px; line-height: 20px; background-size: 100px auto; background-position: 0 8px;}
    .logo .mission {margin-top: 8px; font-size: 12px; line-height: 14px;}
    .logo .mission br {display: none;}
    .bible {display: none;}
    .org-line {position: static; width: auto; margin: 8px 0 0; line-height: 13px;}
    .cite {display: none;}

    /* menu: a "Меню" bar that opens a list */
    .nav {width: auto; height: auto; margin: 10px 0 0; z-index: 2;}
    .nav-bg {display: none;}
    .nav-toggle, .nav-width {margin: 0 10px; background: #f7d086; border-radius: 6px; box-shadow: 0 1px 3px rgba(64, 30, 0, .3);}
    .nav-toggle {display: block; padding: 12px 16px; font: bold 14px/20px "Trebuchet MS", Arial, Tahoma, Verdana, sans-serif; text-transform: uppercase; text-shadow: 0 1px 0 #fef5dd; color: #401e00; cursor: pointer; -webkit-tap-highlight-color: transparent;}
    .nav-toggle:before {content: ""; display: inline-block; width: 18px; height: 2px; margin: 0 12px 4px 0; vertical-align: middle; background: #401e00; box-shadow: 0 6px #401e00, 0 -6px #401e00;}
    .nav-check:focus + .nav-toggle {outline: 2px solid #e56e06; outline-offset: -2px;}
    /* "Поддержать" (the /contribute link) sits on the right of the menu bar; on desktop it is the take-bible button */
    .nav .nav-support {display: block; position: absolute; top: 6px; right: 16px; box-sizing: border-box; height: 32px; padding: 0 12px; border: 1px solid #d9b25f; border-radius: 4px; background: #fdeec4; font: bold 12px/30px "Trebuchet MS", Arial, Tahoma, Verdana, sans-serif; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px 0 #fff; color: #401e00; box-shadow: 0 1px 1px rgba(64, 30, 0, .15);}
    .nav .nav-support:hover, .nav .nav-support:active {background: #fff7de; color: #401e00;}
    .nav .nav-support:before {content: ""; display: inline-block; width: 14px; height: 13px; margin: 0 6px 2px 0; vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23401e00' d='M12 21.5 2.6 12.2C-.3 9.3-.2 4.8 2.7 2.4 5.2.3 8.8.8 11 3.3L12 4.5l1-1.2C15.2.8 18.8.3 21.3 2.4c2.9 2.4 3 6.9.1 9.8z'/%3E%3C/svg%3E") no-repeat center / contain;}
    div.take-bible {display: none;}
    .nav-width {display: none; margin-top: 4px;}
    .nav-check:checked ~ .nav-width {display: block;}
    .nav-check:checked + .nav-toggle:before {content: "\00d7"; width: auto; height: auto; margin: 0 12px 0 3px; background: none; box-shadow: none; font-size: 28px; line-height: 14px;}
    .nav table, .nav tbody, .nav tr, .nav td {display: block; width: auto;}
    .nav td {padding: 0; font-size: 14px; line-height: 20px; border-bottom: 1px dashed rgba(64, 30, 0, .25);}
    .nav tr:last-child td:last-child {border-bottom: 0;}
    .nav a {padding: 12px 16px; text-align: left;}
    td.sel {padding: 0;}
    td.sel div {padding: 0; background: none; border-left: 4px solid #f5a208;}
    td.sel a {padding: 12px 12px; color: #e56e06;}
    .nav-l, .nav-r {display: none;}

    /* footer */
    .footer {height: auto; width: auto; min-width: 0; margin: 0; background: #f9dc9c; border-top: 1px dashed #c89b4d;}
    .footer-bg {display: none;}
    .footer-content {width: auto; padding: 16px;}
    .footer .col-l, .footer .col-r {float: none; width: auto; padding-top: 0; text-align: left;}
    .footer .col-r {margin-top: 12px;}
    .footer-copy, .footer-copy-note {position: static !important; margin: 0 !important; padding: 0 0 8px !important; font-size: 12px !important; line-height: 17px;}
    .footer-copy {display: block;}
    .footer-copy span {font-size: 11px !important;}

    /* news and articles */
    .news, .news-main, .article {display: flow-root;}
    .news-main {margin: 14px 0 10px;}
    .news-main.important {padding: 10px;}
    .news-main.important h3.news-title {margin-right: 24px;}
    .news-main.important .imp-sign {left: auto; right: 8px; top: 10px;}
    img.news-img {max-width: 100%; margin: 3px 0 0 -14px;}

    /* video: the category menu does not float over the page (church.video.js pins it on scroll) */
    #videoMenu, #videoMenu.fixed-position {position: static !important; left: auto !important; width: auto;}
    iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"], iframe[src*="rutube"], iframe[src*="vk.com"] {width: 100%; height: auto; aspect-ratio: 16 / 9;}

    /* gallery: photos in two scaling columns, albums centered */
    #gallery-container {display: flex; flex-wrap: wrap; justify-content: space-between;}
    #gallery-container > .clear20 {width: 100%;}
    .gallery-thumb {float: none; width: calc(50% - 6px); box-sizing: border-box; margin: 0 0 12px; padding: 0; background: none;}
    .gallery-thumb img {display: block; width: 100%; height: auto; box-shadow: 0 1px 4px rgba(64, 30, 0, .35);}
    ul.albums {margin: 15px 0 0; text-align: center;}
    ul.albums li {margin: 4px 4px 22px;}

    /* home page: the dashed separator (/i/dash.gif, as .dash) between sections */
    .home-articles, .col-r .random-videos, div.latest-photos, div.yandex-search, div.friends {margin-top: 24px; padding-top: 22px; background: url(/i/dash.gif) repeat-x 0 0;}

    /* home page side column */
    div.latest-photos {height: auto; overflow: hidden;}
    ul.thumbs {width: auto; float: none; margin: 3px 0 0 -7px;}
    div.friends img {max-width: 100%;}

    /* schedule and answers: the side by side cells stack (the framed table.r keeps its corner cells) */
    table.w100, table.w100 > tbody, table.w100 > tbody > tr, table.w100 > tbody > tr > td {display: block; width: auto;}
    table.w100 > tbody > tr > td.separator {display: none;}
    td.day {padding: 0 0 6px; font-size: 28px; text-align: left;}
    td.day div {padding: 0;}
    td.day img {margin: 4px 0 0;}
    td.org-info {padding-bottom: 12px;}

    /* /contribute: the content table with the QR code stacks, the QR code first and large, the bank details below */
    .content table:has(img[alt*="QR"]), .content table:has(img[alt*="QR"]) > tbody, .content table:has(img[alt*="QR"]) > tbody > tr, .content table:has(img[alt*="QR"]) > tbody > tr > td {display: block; width: auto;}
    .content table:has(img[alt*="QR"]) img {display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 10px !important;}

    /* schedule: the quick links (Богослужение → ПН … ВС) fit in one line; the "Быстрый переход:" label is a bare text
       node, so it is hidden with a zero font size on the container */
    div.schedule-days {display: flex; align-items: baseline; font-size: 0; margin-bottom: 14px; white-space: nowrap;}
    div.schedule-days a, div.schedule-days span {flex: 1 1 auto; margin-left: 0; font-size: 12px; text-align: center;}
    div.schedule-days > :first-child {text-align: left;}
    div.schedule-days > :last-child {text-align: right;}

    /* contacts plate */
    div.plate {display: flex; align-items: center; width: auto; max-width: 410px; height: auto; min-height: 237px; background-size: 100% 100%;}
    div.plate table {height: auto;}

    /* home page: only the latest news item and article (the rest are on /news and /articles) */
    .home-news .news-main ~ .news-main, .home-articles .article ~ .article {display: none;}

    /* forms */
    table.form, table.form tbody, table.form tr, table.form th, table.form td {display: block; width: auto;}
    table.form th {padding-bottom: 4px;}
    div.field, div.textarea, .qForm, #bibleForm div.textar200pxea {width: auto; max-width: 100%;}
    div.field input, div.textarea textarea {width: 100%; box-sizing: border-box; font-size: 16px;}
    div.textarea, div.field {-webkit-box-sizing: border-box; box-sizing: border-box;}
}