/*
====================================================================================================
DONDAY.RU - MODERN CSS ARCHITECTURE 2025
====================================================================================================
Модульная структура стилей для новостного портала
Оптимизировано для производительности и масштабируемости

Автор: DonDay Team + Optimization 2025
Версия: 2.0
Дата последнего обновления: Декабрь 2025
====================================================================================================
*/

/* =============================================================================
   CSS LAYERS - Современная каскадная система приоритетов
   ============================================================================= */
@layer reset, base, layout, components, utilities, overrides;

/* =============================================================================
   ИМПОРТ МОДУЛЕЙ - Разделение кода на логические блоки
   ============================================================================= */

/* Базовые стили */
@import url('modules/_variables.css') layer(base);      /* CSS Custom Properties */
@import url('modules/_reset.css') layer(reset);         /* Современный CSS Reset */
@import url('modules/_typography.css') layer(base);     /* Типографика */

/* Структура и Layout */
@import url('modules/_layout.css') layer(layout);       /* Основная структура Grid */
@import url('modules/_header.css') layer(layout);       /* Шапка сайта */
@import url('modules/_navigation.css') layer(layout);   /* Навигация */
@import url('modules/_footer.css') layer(layout);       /* Футер */

/* Компоненты */
@import url('modules/_buttons.css') layer(components);  /* Кнопки */
@import url('modules/_cards.css') layer(components);    /* Карточки новостей */
@import url('modules/_sidebar.css') layer(components);  /* Боковая панель */
@import url('modules/_articles.css') layer(components); /* Статьи и контент */
@import url('modules/_forms.css') layer(components);    /* Формы */
@import url('modules/_comments.css') layer(components); /* Комментарии */
@import url('modules/_pagination.css') layer(components); /* Пагинация */
@import url('modules/_calendar.css') layer(components); /* Календарь */
@import url('modules/_sections.css') layer(components); /* Секции на главной */
@import url('modules/_article-page.css') layer(components); /* Стили полной новости */
@import url('modules/_three-column.css') layer(components); /* Стили страницы категории */

/* Утилиты и адаптивность */
@import url('modules/_utilities.css') layer(utilities); /* Вспомогательные классы */
@import url('modules/_responsive.css') layer(utilities); /* Медиа-запросы */

/* Переопределения (последние в каскаде) */
@import url('modules/_overrides.css') layer(overrides); /* Специфичные переопределения */

/* =============================================================================
   ГЛОБАЛЬНЫЕ СТИЛИ - Применяются ко всему документу
   ============================================================================= */

@layer base {
  /* Плавная прокрутка для всего документа */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
  }

  /* Базовые настройки body */
  body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background: url('/templates/DD2026/images/DD2026BG.webp') no-repeat top center / cover;
    background-attachment: fixed;
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* Улучшенная доступность для фокуса */
  *:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Скрытие элементов, доступных только для скринридеров */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Улучшенная читаемость для выделенного текста */
  ::selection {
    background-color: var(--color-accent);
    color: white;
    text-shadow: none;
  }
}

/* =============================================================================
   КРИТИЧЕСКИЕ СТИЛИ - Загружаются первыми для быстрого рендеринга
   ============================================================================= */

/* Предотвращение FOUC (Flash of Unstyled Content) */
.js-loading * {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}

/* Скелетон-загрузчик для изображений */
.img-loading {
  background: linear-gradient(
    90deg,
    var(--color-bg-lighter) 0%,
    var(--color-bg-darker) 50%,
    var(--color-bg-lighter) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================================
   PRINT STYLES - Стили для печати
   ============================================================================= */

@media print {
  @page {
    margin: 2cm;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  /* Скрытие элементов при печати */
  .header,
  .navigation,
  .sidebar,
  .footer,
  .page__rating,
  .page__subscribe,
  .comments,
  .no-print {
    display: none !important;
  }

  /* Принудительный разрыв страниц */
  h1, h2, h3 {
    page-break-after: avoid;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* =============================================================================
   ПОДДЕРЖКА СТАРЫХ БРАУЗЕРОВ - Fallbacks
   ============================================================================= */

/* Проверка поддержки CSS Grid */
@supports not (display: grid) {
  .cols {
    display: flex;
    flex-wrap: wrap;
  }
  
  .col-main {
    flex: 1 1 70%;
  }
  
  .col-side {
    flex: 1 1 30%;
  }
}

/* Проверка поддержки CSS Custom Properties */
@supports not (--css: variables) {
  body {
    font-family: Arial, sans-serif;
    color: #333;
    background: #fff;
  }
}

/*
====================================================================================================
КОНЕЦ ГЛАВНОГО ФАЙЛА
====================================================================================================
Все дополнительные стили находятся в модулях в папке /modules/
Для добавления новых компонентов создавайте отдельные файлы и подключайте через @import
====================================================================================================
*/