/*
Theme Name: Doc Theme WP
Theme URI: https://doc.co.ua
Author: WordPress Developer
Author URI: https://doc.co.ua
Description: Тема для медицинского сайта о врачах первичного звена (семейные врачи, терапевты, педиатры)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: doc-theme-wp
Tags: medical, doctors, responsive, mobile-first
*/

/* Импорт шрифтов Google Fonts с display=swap для быстрой загрузки */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@400;600;700&display=swap');

/* Сброс стилей */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset для старых браузеров */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1.6;
    font-family: 'Open Sans', sans-serif;
    color: #333;
    background-color: #f8f8f8;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Основные стили */
body {
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
    color: #2b5797;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

p {
    margin-bottom: 1.5rem;
}

a {
    color: #2b5797;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #1a365d;
    text-decoration: underline;
}

strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

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

/* Основные стили будут дополнены в assets/css/main.css */

/* Улучшения для десктопа */
@media (min-width: 1600px) {
    :root {
        --container-width: 1600px;
        --content-width: 1180px;
    }
    
    .container {
        padding: 0 30px;
    }
}

/* Исправления для доступности */
:focus {
    outline: 2px solid #2b5797;
    outline-offset: 2px;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@400;600;700&display=swap');


/* Структура шапки сайта для десктопной версии */
@media screen and (min-width: 768px) {
  /* Принудительно разбиваем шапку на логотип и меню в отдельных строках */
  .header-container {
    display: block; /* Важно: меняем на блочное отображение вместо flex */
  }

  /* Стилизуем блок с логотипом */
  .site-branding {
    width: 100%;
    text-align: center;
    margin-bottom: 20px; /* Увеличиваем отступ между логотипом и меню */
    display: block;
  }

  /* Четкое размещение навигационного меню на новой строке */
  .main-navigation {
    width: 100%;
    display: block;
    clear: both; /* Гарантирует, что меню будет ниже предыдущих элементов */
    text-align: center;
    margin-top: 10px; /* Дополнительный отступ сверху */
  }

  /* Стилизация меню для отображения в одну линию */
  #primary-menu {
    display: inline-flex; /* Лучше работает для центрирования */
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  /* Убедимся, что пункты меню не переносятся на новую строку */
  #primary-menu li {
    white-space: nowrap;
    display: inline-block;
  }

  /* Добавляем отступы между пунктами меню */
  #primary-menu li:not(:last-child) {
    margin-right: 20px;
  }

  /* Стилизация ссылок меню */
  #primary-menu a {
    padding: 10px 12px;
    display: block;
    text-decoration: none;
  }
}

/* Исправление порядка сайдбара и контента в мобильной версии */

@media screen and (max-width: 767px) {
  /* Применяем flexbox для контейнера с контентом и сайдбаром */
  .site-content .container {
    display: flex;
    flex-direction: column;
  }
  
  /* Основной контент перемещаем наверх (все возможные селекторы) */
  #primary,
  .content-area,
  .site-main-container,
  main.site-main,
  .main-content,
  #main-content {
    order: 1 !important;
    width: 100% !important;
    float: none !important;
  }
  
  /* Сайдбар перемещаем вниз (все возможные селекторы) */
  #secondary,
  .widget-area,
  .sidebar,
  #sidebar,
  .sidebar-primary,
  aside.widget-area {
    order: 2 !important;
    width: 100% !important;
    float: none !important;
    margin-top: 30px !important;
  }
  
  /* Сброс всех возможных float-свойств, которые могут влиять на отображение */
  .content-area,
  .widget-area,
  .sidebar,
  #primary,
  #secondary {
    float: none !important;
    clear: both !important;
  }
  
  /* Если в теме используется grid вместо flexbox, переопределяем и его */
  .site-content .container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: 
      "content"
      "sidebar" !important;
  }
  
  /* Назначаем области для grid */
  #primary, .content-area, main.site-main {
    grid-area: content !important;
  }
  
  #secondary, .widget-area, aside {
    grid-area: sidebar !important;
  }
  
  /* Дополнительно обрабатываем другие возможные контейнеры */
  .row, .site-content-row {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Обработка случая с использованием bootstrap-колонок */
  .col-md-8, .col-md-4, .col-lg-8, .col-lg-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Исправление проблемы с рекламными блоками, перекрывающими контент */

/* Общие исправления для всех рекламных блоков */
.ad-container {
  width: 100%;
  margin: 2rem 0;
  text-align: center;
  overflow: visible !important; /* Изменено с hidden на visible */
  position: relative;
  box-sizing: border-box;
  display: block;
  clear: both !important; /* Обеспечивает, что реклама не будет перекрывать другой контент */
  z-index: 1; /* Устанавливаем базовый z-index */
}

/* Обеспечиваем правильные отступы для контента вокруг рекламы */
.ad-container + * {
  margin-top: 2rem !important; /* Гарантирует отступ после рекламы */
}

* + .ad-container {
  margin-top: 2rem !important; /* Гарантирует отступ перед рекламой */
}

/* Исправления для контейнера внутри рекламного блока */
.ad-container-inner {
  position: relative !important; /* Важно для корректного отображения */
  display: inline-block;
  width: 100%;
  height: 100%;
  z-index: 1; /* Устанавливаем z-index */
  text-align: center;
}

/* Исправления для рекламных блоков на десктопе */
@media (min-width: 768px) {
  /* Обновленные высоты с запасом */
  .ad-container-header {
    min-height: 110px !important; /* Увеличиваем с 90px до 110px */
    height: auto !important; /* Позволяем высоте адаптироваться */
    max-height: none !important; /* Убираем ограничение максимальной высоты */
  }

  .ad-container-content {
    min-height: 300px !important; /* Увеличиваем с 280px до 300px */
    height: auto !important;
    max-height: none !important;
  }
  
  /* Обеспечиваем, что реклама не перекрывает контент */
  .ad-container-header::after,
  .ad-container-content::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* Исправления для мобильных устройств */
@media (max-width: 767px) {
  .ad-container-header {
    min-height: 70px !important; /* Увеличиваем с 50px до 70px */
    height: auto !important;
    max-height: none !important;
  }

  .ad-container-content {
    min-height: 270px !important; /* Увеличиваем с 250px до 270px */
    height: auto !important;
    max-height: none !important;
  }
  
  /* Обеспечиваем отступы на мобильных устройствах */
  .entry-content {
    overflow: visible !important;
  }
  
  /* Исправление для отображения в контейнере */
  .container .ad-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Исправляем проблему, когда реклама внутри .content-inner */
.content-inner .ad-container {
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
}

/* Дополнительное исправление для header */
header .ad-container {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Дополнительное исправление для Google AdSense */
ins.adsbygoogle {
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Доработка для особо сложных тем - инъекция стилей через JavaScript */
/* Для использования с этим JavaScript-кодом:

document.addEventListener('DOMContentLoaded', function() {
  if (window.innerWidth <= 767) {
    const primary = document.querySelector('#primary, .content-area');
    const secondary = document.querySelector('#secondary, .widget-area, .sidebar');
    
    if (primary && secondary && primary.parentNode === secondary.parentNode) {
      primary.style.order = '1';
      secondary.style.order = '2';
      
      // Если родительский контейнер не имеет flex
      const parent = primary.parentNode;
      parent.style.display = 'flex';
      parent.style.flexDirection = 'column';
    }
  }
});

*/