/*
Theme Name: Flavor QA
Theme URI: https://example.com/flavor-qa
Author: Senior AI Developer
Description: Премиальная Q&A платформа. Тотальный редизайн в стиле современных SaaS и Reddit (Soft UI, CSS Grid).
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: flavor-qa
*/

/* ==========================================================================
   1. DESIGN SYSTEM (SAAS / REDDIT STYLE)
   ========================================================================== */
:root {
    /* --- Фоны (Backgrounds) --- */
    --color-bg-site: #F3F4F6;      /* Мягкий светло-серый фон всей страницы (как у Reddit) */
    --color-bg-card: #FFFFFF;      /* Идеально белый фон для карточек и контента */
    --color-bg-hover: #F8FAFC;     /* Легкое затемнение при наведении на элементы */
    --color-bg-input: #F1F5F9;     /* Фон полей ввода (input, textarea) */

    /* --- Текст (Typography Colors) --- */
    --color-text-primary: #0F172A;   /* Глубокий графитовый (почти черный) для заголовков */
    --color-text-secondary: #475569; /* Серый для основного текста */
    --color-text-muted: #94A3B8;     /* Светло-серый для дат, плейсхолдеров, мелких деталей */

    /* --- Границы (Borders) --- */
    --color-border: #E2E8F0;         /* Тонкие, светлые рамки карточек */
    --color-border-hover: #CBD5E1;   /* Рамки при наведении */

    /* --- Акценты (Accents) --- */
    --color-accent: #2563EB;         /* Яркий, сочный синий (Primary Action) */
    --color-accent-hover: #1D4ED8;
    --color-accent-soft: #DBEAFE;    /* Нежный синий фон для тегов и бейджей */

    /* --- Функциональные цвета (Soft UI) --- */
    --color-success: #059669;        /* Зеленый (Решено, Правильно) */
    --color-success-bg: #D1FAE5;     /* Мятный фон для зеленых бейджей */
    
    --color-warning: #D97706;        /* Оранжевый (Bounty, Внимание) */
    --color-warning-bg: #FEF3C7;     /* Теплый желтый фон */
    
    --color-danger: #DC2626;         /* Красный (Ошибки, Жалобы, Удаление) */
    --color-danger-bg: #FEE2E2;      /* Розовый фон */

    /* --- Голосование --- */
    --color-upvote: #EA580C;         /* Оранжево-красный плюс */
    --color-downvote: #6366F1;       /* Индиго минус */

    /* --- Типографика (System Stack для мгновенной загрузки) --- */
    --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-mono: "JetBrains Mono", "Fira Code", Consolas, Monaco, monospace;
    
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;

    /* --- Геометрия и Тени (Shapes & Shadows) --- */
    --radius-sm: 6px;
    --radius-md: 12px;               /* Современные мягкие скругления карточек */
    --radius-lg: 16px;
    --radius-full: 9999px;           /* Круглые кнопки */
    
    /* Элегантные многослойные тени для объема */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-dropdown: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Layout --- */
    --container-width: 1280px;
    --sidebar-width: 320px;
    --header-height: 64px;
}

/* ==========================================================================
   2. BULLETPROOF CSS RESET (Защита от разрушения верстки)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--font-family-base);
    font-size: 100%;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background-color: var(--color-bg-site);
}

body {
    margin: 0;
    padding: 0;
    color: var(--color-text-primary);
    background-color: var(--color-bg-site);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

img, picture, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 
 * 🚨 ФИКС "ВЗРЫВАЮЩИХСЯ" SVG ИКОНОК 
 * Жесткие ограничения размеров. flex-shrink: 0 не даст флексбоксу их раздавить,
 * а min/max width не дадут им стать огромными на весь экран.
 */
svg.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    fill: currentColor;
    flex-shrink: 0;
    vertical-align: middle;
    pointer-events: none; /* Защита от багов JS-делегирования кликов */
}

input, button, textarea, select {
    font: inherit; color: inherit; border: none; background: none; margin: 0; outline: none;
}

button { cursor: pointer; transition: all var(--transition-fast); }
button:disabled { cursor: not-allowed; opacity: 0.6; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-hover); }

/* Типографика заголовков */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 800; /* Жирные, современные заголовки */
    color: var(--color-text-primary);
    letter-spacing: -0.025em; /* Отрицательный трекинг для SaaS-стиля */
    line-height: 1.25;
}
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { margin-top: 0; margin-bottom: 1rem; padding-left: 2rem; }

/* ==========================================================================
   3. BASE FORMS (Премиальные инпуты)
   ========================================================================== */
.form-group { margin-bottom: 1.5rem; }

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
}

.form-label .required { color: var(--color-danger); }
.form-help { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 0.5rem; }

.form-control {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text-primary);
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

/* Эффект фокуса (Glow) */
.form-control:focus {
    background-color: var(--color-bg-card);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.form-control::placeholder { color: var(--color-text-muted); }
textarea.form-control { min-height: 120px; resize: vertical; }

.form-check { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
.form-check input[type="checkbox"], .form-check input[type="radio"] {
    margin-top: 0.25rem; width: 1.125rem; height: 1.125rem; accent-color: var(--color-accent); cursor: pointer;
}

hr.qa-divider { border: 0; height: 1px; background-color: var(--color-border); margin: 2rem 0; }
.screen-reader-text, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   4. GLOBAL UTILITIES (Утилиты)
   ========================================================================== */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-accent { color: var(--color-accent) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-small { font-size: var(--font-size-sm) !important; }
.font-bold { font-weight: 700 !important; }

.mt-1 { margin-top: 0.25rem !important; } .mb-1 { margin-bottom: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }  .mb-2 { margin-bottom: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }    .mb-3 { margin-bottom: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }  .mb-4 { margin-bottom: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }    .mb-5 { margin-bottom: 3rem !important; }

.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.flex-column { flex-direction: column !important; }
.w-100 { width: 100% !important; }
.d-none { display: none !important; }

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline { display: inline !important; }
    .d-md-table-cell { display: table-cell !important; }
}