/* ==========================================================================
   Мобільна адаптивність для теми Toyzine Fleximag
   Цей файл підключається ПІСЛЯ style.css і лише додає/перекриває правила
   для вузьких екранів. Оригінальний style.css не змінювався.
   ========================================================================== */

/* Не даємо сторінці ширшати за екран через фіксовані елементи */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}

/* --------------------------------------------------------------------
   Планшети та менше (≤ 900px)
   -------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Прибираємо фіксовану ширину 970px з усіх основних контейнерів */
  #art-main,
  .art-sheet,
  .art-sheet-body,
  div.art-header,
  div.art-header-png,
  div.art-header-jpeg,
  .art-content-layout,
  .art-content-layout .art-content-layout,
  .art-footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Банер із заголовком сайту: фонові картинки лишаються невисокими
     (це декорація), а сам блок .art-header НЕ обрізаємо — усередині нього
     лежить меню .art-nav, і якщо кнопки не влазять в один ряд, їм потрібно
     більше висоти, інакше зайві рядки просто зникають. */
  div.art-header {
    height: auto !important;
    min-height: 150px;
  }
  div.art-header-png,
  div.art-header-jpeg {
    height: 150px !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  /* Назва сайту й опис: менші, з відступами у відсотках замість пікселів */
  .art-logo {
    left: 4% !important;
    top: 8% !important;
    width: 92% !important;
  }
  h1.art-logo-name {
    font-size: 24px !important;
  }
  .art-logo-text {
    font-size: 14px !important;
  }

  /* Верхнє меню: менший шрифт і відступи, щоб кнопки влазили по кілька в ряд */
  .art-menu a {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  /* Три колонки (сайдбар-контент-сайдбар) стають одна під одною */
  .art-content-layout-row {
    display: block !important;
  }
  .art-layout-cell {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .art-content-layout .art-sidebar1,
  .art-content-layout .art-sidebar2,
  .art-content-layout .art-content,
  .art-content-layout .art-content-sidebar1,
  .art-content-layout .art-content-sidebar2,
  .art-content-layout .art-content-wide {
    width: 100% !important;
    background-image: none !important;
  }

  /* Картинки й вбудовані елементи не вилазять за межі екрана */
  img,
  iframe,
  embed,
  object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* У старих статтях картинки мають інлайн-стиль float:left/right
     (обтікання текстом), що на вузькому екрані стискає текст у вузьку
     смужку збоку. На мобільних прибираємо обтікання — картинка йде
     окремим рядком над текстом. */
  .art-postcontent img,
  .entry-content img {
    float: none !important;
    display: block !important;
    margin: 0 auto 12px auto !important;
    width: auto !important;
  }

  /* Форма пошуку — щоб поле не було ширшим за екран */
  #searchform input[type="text"] {
    width: 90% !important;
  }

  /* Базовий розмір тексту трохи більший для зручного читання */
  body {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------
   Телефони (≤ 480px) — додаткові уточнення
   -------------------------------------------------------------------- */
@media (max-width: 480px) {

  div.art-header {
    height: auto !important;
    min-height: 110px;
  }
  div.art-header-png,
  div.art-header-jpeg {
    height: 110px !important;
  }

  h1.art-logo-name {
    font-size: 19px !important;
  }
  .art-logo-text {
    font-size: 12px !important;
  }

  .art-menu a {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  /* Підвал: дрібніший текст, посилання переносяться нормально */
  .art-footer,
  .art-footer a {
    font-size: 12px !important;
    word-wrap: break-word;
  }
}
@media (max-width: 767px) {
  #art-page-background-gradient,
  #art-page-background-glare,
  #art-page-background-glare-image,
  #art-main,
  .art-sheet,
  .art-sheet-body,
  .art-footer,
  .art-footer-background {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
  }

  div.r, span.r {
    max-width: 100%;
    white-space: normal;
  }

  /* Декоративні "підкладки" меню (.r) мають фіксовану ширину 970-996px
     на кожній сторінці сайту — саме вони і тягли за собою горизонтальний
     скрол. Обрізаємо їх шириною батьківського блоку. */
  .art-nav .r,
  .art-menu a .r,
  .art-menu ul.art-vmenu a .r,
  ul.art-vmenu a .r {
    width: 100% !important;
    max-width: 100% !important;
    clip: auto !important;
  }

  /* .art-header НЕ обрізаємо через overflow: усередині нього лежить
     .art-nav з реальними кнопками меню, і обрізання ховає рядки кнопок,
     які не влізли в один ряд на вузькому екрані. */
  .art-nav {
    height: auto !important;
    min-height: 37px;
    padding-bottom: 4px;
  }
  .art-menu {
    overflow: visible !important;
  }

  /* Таблиці в тексті сторінок (наприклад, список казок у 2 колонки)
     раніше вилазили за екран і давали горизонтальний скрол. Замість
     обрізання — перетворюємо таблицю в один стовпчик, як список. */
  .art-postcontent table,
  .entry-content table,
  #art-main table {
    width: 100% !important;
  }
  .art-postcontent table, .art-postcontent tbody,
  .art-postcontent tr, .art-postcontent td, .art-postcontent th,
  .entry-content table, .entry-content tbody,
  .entry-content tr, .entry-content td, .entry-content th,
  #art-main table, #art-main tbody,
  #art-main tr, #art-main td, #art-main th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .art-postcontent td, .entry-content td, #art-main td,
  .art-postcontent th, .entry-content th, #art-main th {
    border: none;
    padding: 6px 0;
  }

  /* У деяких старих статтях весь текст обгорнутий у <caption> замість
     звичайного абзацу — за замовчуванням браузер може рендерити caption
     вужчим за саму таблицю. Примусово розтягуємо на всю ширину. */
  .art-postcontent caption,
  .entry-content caption,
  #art-main caption {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    caption-side: top !important;
  }
}