/*
Theme Name: Gambling Theme/GoldenTiger Casino
Theme URI: https://goldentiger.com
Author: GoldenTiger Team
Author URI: https://goldentiger.com
Description: Профессиональная модульная тема для казино с передовой архитектурой CSS переменных. Оптимизирована для производительности, полностью адаптивна, соответствует стандартам WordPress.
Version: 0.0.1
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gambling-theme
Tags: casino, gambling, entertainment, responsive, accessibility-ready

Архитектура темы:
- theme-vars.css: Единая система переменных (Single Source of Truth)
- main.css: Базовые универсальные стили
- style.css: WordPress специфичные + уникальные стили темы
- modules/*.css: Компонентные модульные стили

Changelog v5.2.0:
- ✅ Полная интеграция с theme-vars.css
- ✅ Удалены все жёсткие значения и дубли
- ✅ Адаптированы Layout Grid, Header, Footer, Navigation
- ✅ Оптимизированы стили сайдбара
- ✅ Добавлены все обязательные WordPress классы
- ✅ Улучшена accessibility с .screen-reader-text
- ✅ Профессиональная структура комментариев
*/

/* ========================================================================
   ТАБЛИЦА СОДЕРЖАНИЯ
   ========================================================================
   1. WordPress Required Classes (обязательные классы)
   2. Layout Grid System (адаптивная сетка)
   3. Site Header (шапка сайта)
   4. Site Footer (подвал сайта)
   5. Primary Navigation (главное меню)
   6. Sidebar Widgets (виджеты сайдбара)
   7. Responsive Adjustments (адаптивность)
   ======================================================================== */


/* ========================================================================
   1. WORDPRESS REQUIRED CLASSES
   Обязательные классы для соответствия стандартам WordPress
   ======================================================================== */

/**
 * Accessibility: Screen Reader Text
 * Скрывает текст визуально, но оставляет доступным для screen readers
 */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    clip: auto !important;
    color: var(--color-text);
    display: block;
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: var(--z-modal);
}

/**
 * WordPress Alignment Classes
 * Выравнивание изображений и контента в редакторе
 */
.alignnone {
    margin: var(--spacing-md) 0;
    max-width: 100%;
}

.alignleft {
    display: inline;
    float: left;
    margin-right: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.alignright {
    display: inline;
    float: right;
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--spacing-md);
}

/**
 * WordPress Caption
 * Подписи к медиа-контенту
 */
.wp-caption {
    margin-bottom: var(--spacing-lg);
    max-width: 100%;
}

.wp-caption img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    margin-top: var(--spacing-xs);
    text-align: center;
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
    font-style: italic;
}

/**
 * WordPress Gallery
 * Стили для встроенных галерей
 */
.gallery {
    margin: var(--spacing-xl) auto;
    display: grid;
    grid-gap: var(--spacing-md);
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

.gallery-caption {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-sm);
    color: var(--color-text-secondary);
}

/**
 * WordPress Embeds & iframes
 * Адаптивные видео и embed контент
 */
.embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin-bottom: var(--spacing-lg);
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/**
 * WordPress Sticky Post
 */
.sticky {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--spacing-md);
}

/**
 * WordPress Comment Author
 * Обязательный класс для комментариев автора поста
 */
.bypostauthor {
    display: block;
}

/**
 * WordPress Pagination
 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-2xl) 0;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: all var(--transition-normal);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.pagination .page-numbers.dots {
    border: none;
    background: transparent;
    cursor: default;
}

.pagination .page-numbers.dots:hover {
    transform: none;
    box-shadow: none;
}


/* ========================================================================
   2. LAYOUT GRID SYSTEM
   Адаптивная двухколоночная система с sidebar
   ======================================================================== */

/**
 * Main Row Container
 * Базовый контейнер для колоночной раскладки
 */
.row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    margin: 0 auto;
    max-width: var(--container-max-width, 1200px);
    padding: 0 var(--spacing-lg);
}

/**
 * Two Column Layout (Main Content + Sidebar)
 * Desktop: 70% контент + 30% сайдбар
 */
@media (min-width: 992px) {
    .row.has-sidebar {
        grid-template-columns: 2.33fr 1fr; /* ~70% : ~30% */
    }
}

/**
 * Column Elements
 */
.col-main {
    grid-column: 1;
}

.col-sidebar {
    grid-column: 1;
}

@media (min-width: 992px) {
    .row.has-sidebar .col-main {
        grid-column: 1;
    }

    .row.has-sidebar .col-sidebar {
        grid-column: 2;
    }
}


/* ========================================================================
   3. SITE HEADER
   Главная шапка сайта с логотипом и навигацией
   ======================================================================== */

.site-header {
    background: rgba(13, 13, 13, 0.95);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-lg) 0;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    backdrop-filter: blur(10px);
}

.site-header .header-inner {
    max-width: var(--container-max-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
}

/**
 * Logo Styles
 */
.site-header .site-logo {
    flex-shrink: 0;
}

.site-header .site-logo a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-size: var(--h3-size);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    transition: all var(--transition-normal);
}

.site-header .site-logo a:hover {
    color: var(--color-primary-light);
    transform: scale(1.05);
}

.site-header .site-logo img {
    max-height: 50px;
    width: auto;
    transition: transform var(--transition-normal);
}

.site-header .site-logo a:hover img {
    transform: scale(1.05);
}

/**
 * Mobile Menu Toggle
 */
.mobile-menu-toggle {
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text);
    font-size: var(--font-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.mobile-menu-toggle:hover {
    background: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
}

@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: block;
    }
}


/* ========================================================================
   4. SITE FOOTER
   Подвал сайта с виджетами и копирайтом
   ======================================================================== */

.site-footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-3xl) 0 var(--spacing-xl);
}

.site-footer .footer-inner {
    max-width: var(--container-max-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/**
 * Footer Widgets Area
 * Адаптивная сетка для виджетов футера
 */
.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.footer-widget {
    color: var(--color-text-secondary);
}

.footer-widget h3 {
    color: var(--color-primary);
    font-size: var(--h4-size);
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-bold);
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-widget ul li a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-widget ul li a:hover {
    color: var(--color-primary);
}

/**
 * Footer Copyright
 */
.footer-copyright {
    text-align: center;
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-sm);
}

.footer-copyright a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-copyright a:hover {
    color: var(--color-primary-light);
}


/* ========================================================================
   5. PRIMARY NAVIGATION
   Главное меню сайта
   ======================================================================== */

.primary-navigation {
    flex-grow: 1;
}

.primary-navigation ul {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-navigation ul li a {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative;
}

.primary-navigation ul li a:hover,
.primary-navigation ul li a.active {
    color: var(--color-primary);
    background: var(--color-surface);
}

.primary-navigation ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 80%;
    height: 2px;
    background: var(--color-primary);
    transition: transform var(--transition-fast);
}

.primary-navigation ul li a:hover::after,
.primary-navigation ul li a.active::after {
    transform: translateX(-50%) scaleX(1);
}

/**
 * Dropdown Submenu
 */
.primary-navigation ul li {
    position: relative;
}

.primary-navigation ul li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    padding: var(--spacing-sm) 0;
    flex-direction: column;
    gap: 0;
    z-index: var(--z-dropdown);
}

.primary-navigation ul li:hover > ul {
    display: flex;
}

.primary-navigation ul li ul li a {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 0;
}

.primary-navigation ul li ul li a::after {
    display: none;
}

/**
 * Mobile Navigation
 */
@media (max-width: 991px) {
    .primary-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
    }

    .primary-navigation.is-active {
        display: block;
    }

    .primary-navigation ul {
        flex-direction: column;
        padding: var(--spacing-md);
        gap: 0;
    }

    .primary-navigation ul li {
        width: 100%;
    }

    .primary-navigation ul li a {
        width: 100%;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-border);
    }

    .primary-navigation ul li:last-child a {
        border-bottom: none;
    }
}


/* ========================================================================
   6. SIDEBAR WIDGETS
   Стили для виджетов в сайдбаре
   ======================================================================== */

/**
 * Widget Container
 */
.widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    transition: all var(--transition-normal);
}

.widget:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/**
 * Widget Title
 */
.widget-title {
    font-size: var(--h4-size);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.widget-title::before {
    content: '◆';
    color: var(--color-primary);
    font-size: var(--font-sm);
}

/**
 * Widget Lists (Recent Posts, Categories, etc.)
 */
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li a {
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-fast);
    font-weight: var(--font-medium);
}

.widget ul li a:hover {
    color: var(--color-primary);
    padding-left: var(--spacing-xs);
}

.widget ul li a::before {
    content: '›';
    color: var(--color-primary);
    font-size: var(--font-lg);
    font-weight: var(--font-bold);
    transition: transform var(--transition-fast);
}

.widget ul li a:hover::before {
    transform: translateX(4px);
}

/**
 * Widget Count/Meta (категории, архив)
 */
.widget ul li .count {
    margin-left: auto;
    background: var(--color-primary);
    color: var(--color-bg);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    min-width: 24px;
    text-align: center;
}

/**
 * Search Widget
 */
.widget_search form {
    display: flex;
    gap: var(--spacing-sm);
}

.widget_search input[type="search"] {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--font-base);
}

.widget_search input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.widget_search button {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-primary);
    color: var(--color-bg);
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.widget_search button:hover {
    background: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/**
 * Tag Cloud Widget
 */
.widget_tag_cloud .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.widget_tag_cloud .tagcloud a {
    display: inline-flex;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-bg);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--font-sm) !important; /* Override inline styles */
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

.widget_tag_cloud .tagcloud a:hover {
    background: var(--color-primary);
    color: var(--color-bg);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/**
 * Calendar Widget
 */
.widget_calendar table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.widget_calendar caption {
    padding: var(--spacing-sm);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    background: var(--color-surface);
}

.widget_calendar th,
.widget_calendar td {
    padding: var(--spacing-xs);
    text-align: center;
    border: 1px solid var(--color-border);
}

.widget_calendar th {
    background: var(--color-surface);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
}

.widget_calendar td a {
    display: block;
    padding: var(--spacing-2xs);
    background: var(--color-primary);
    color: var(--color-bg);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: var(--font-semibold);
    transition: all var(--transition-fast);
}

.widget_calendar td a:hover {
    background: var(--color-primary-light);
    transform: scale(1.1);
}

/**
 * Text Widget
 */
.widget_text .textwidget {
    line-height: var(--line-height-relaxed);
}

.widget_text .textwidget p:last-child {
    margin-bottom: 0;
}

/**
 * RSS Widget
 */
.widget_rss ul li {
    padding: var(--spacing-md) 0;
}

.widget_rss .rsswidget {
    font-weight: var(--font-semibold);
    color: var(--color-primary);
}

.widget_rss .rss-date {
    display: block;
    font-size: var(--font-sm);
    color: var(--color-text-muted);
    margin-top: var(--spacing-xs);
}

.widget_rss .rssSummary {
    margin-top: var(--spacing-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}


/* ========================================================================
   7. RESPONSIVE ADJUSTMENTS
   Адаптивность для различных устройств
   ======================================================================== */

/**
 * Tablet (768px - 991px)
 */
@media (max-width: 991px) {
    .row {
        padding: 0 var(--spacing-md);
        gap: var(--spacing-xl);
    }

    .site-header .header-inner {
        padding: 0 var(--spacing-md);
    }

    .site-footer .footer-inner {
        padding: 0 var(--spacing-md);
    }

    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }

    .widget {
        padding: var(--spacing-lg);
    }
}

/**
 * Mobile (max-width: 767px)
 */
@media (max-width: 767px) {
    .row {
        padding: 0 var(--spacing-sm);
        gap: var(--spacing-lg);
    }

    .site-header {
        padding: var(--spacing-md) 0;
    }

    .site-header .header-inner {
        padding: 0 var(--spacing-sm);
        gap: var(--spacing-md);
    }

    .site-footer {
        padding: var(--spacing-2xl) 0 var(--spacing-lg);
    }

    .site-footer .footer-inner {
        padding: 0 var(--spacing-sm);
    }

    .footer-widgets {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .widget {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    .widget-title {
        font-size: var(--h5-size);
    }

    /* Упрощённая галерея на мобильных */
    .gallery-columns-3,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Пагинация на мобильных */
    .pagination {
        gap: var(--spacing-xs);
    }

    .pagination .page-numbers {
        min-width: 40px;
        height: 40px;
        font-size: var(--font-sm);
    }
}

/**
 * Small Mobile (max-width: 480px)
 */
@media (max-width: 480px) {
    .alignnone,
    .alignleft,
    .alignright {
        float: none;
        display: block;
        margin: var(--spacing-md) auto;
    }

    .site-header .site-logo img {
        max-height: 40px;
    }

    .widget ul li a {
        font-size: var(--font-sm);
    }

    /* Одноколоночная галерея */
    .gallery-columns-1,
    .gallery-columns-2,
    .gallery-columns-3,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6 {
        grid-template-columns: 1fr;
    }
}


/* ========================================================================
   END OF style.css v5.2.0
   ======================================================================== */