/**
 * base.css — Фундамент темы RegionTrade
 *
 * Содержит:
 * 1. @font-face — подключение локальных шрифтов
 * 2. CSS Custom Properties — цвета, размеры, тени
 * 3. CSS Reset — сброс браузерных стилей
 * 4. Типографика — базовые стили текста
 * 5. Утилиты — переиспользуемые классы
 * 6. Prose — читаемые текстовые блоки
 * 7. Хлебные крошки
 * 8. CTA-карточка (каталог + single)
 *
 * Грузится на ВСЕХ страницах.
 */


/* ===================================================
   1. ШРИФТЫ
   =================================================== */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ===================================================
   2. CSS CUSTOM PROPERTIES
   =================================================== */

:root {
    /* === Цвета === */
    --c-primary:       #FFD600;
    --c-primary-hover: #FFC107;
    --c-primary-dark:  #E5BE00;
    --c-dark:          #1A1A1A;
    --c-dark-soft:     #2D2D2D;
    --c-gray:          #6B7280;
    --c-gray-light:    #9CA3AF;
    --c-light:         #F5F5F5;
    --c-light-warm:    #FAFAFA;
    --c-white:         #FFFFFF;
    --c-danger:        #EF4444;
    --c-success:       #22C55E;
    --c-border:        #E5E7EB;

    /* === Типографика === */
    --font-main:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:       'JetBrains Mono', 'Courier New', monospace;

    --fs-xs:           0.75rem;    /* 12px */
    --fs-sm:           0.875rem;   /* 14px */
    --fs-base:         1rem;       /* 16px */
    --fs-md:           1.125rem;   /* 18px */
    --fs-lg:           1.25rem;    /* 20px */
    --fs-xl:           1.5rem;     /* 24px */
    --fs-2xl:          2rem;       /* 32px */
    --fs-3xl:          2.5rem;     /* 40px */

    --fw-normal:       400;
    --fw-bold:         700;

    --lh-tight:        1.2;
    --lh-normal:       1.6;
    --lh-relaxed:      1.75;

    /* === Отступы === */
    --gap-xs:          0.25rem;
    --gap-sm:          0.5rem;
    --gap-md:          1rem;
    --gap-lg:          1.5rem;
    --gap-xl:          2rem;
    --gap-2xl:         3rem;
    --gap-3xl:         4rem;

    /* === Контейнер === */
    --container-max:   1280px;
    --container-pad:   1rem;

    /* === Prose === */
    --prose-max:       75ch;

    /* === Скругления === */
    --radius-sm:       4px;
    --radius-md:       8px;
    --radius-lg:       12px;
    --radius-xl:       16px;
    --radius-full:     9999px;

    /* === Тени === */
    --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:       0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg:       0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-xl:       0 20px 50px rgba(0, 0, 0, 0.15);

    /* === Анимации === */
    --transition:      0.25s ease;
    --transition-slow: 0.4s ease;

    /* === Z-index === */
    --z-dropdown:      100;
    --z-header:        200;
    --z-modal:         300;
    --z-toast:         400;
}


/* ===================================================
   3. CSS RESET
   =================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-y: scroll;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-main);
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    color: var(--c-dark);
    background-color: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-wrap: break-word;
}

ul, ol {
    list-style: none;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}


/* ===================================================
   4. ТИПОГРАФИКА
   =================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    color: var(--c-dark);
}

h1 { font-size: var(--fs-3xl); margin-bottom: var(--gap-lg); }
h2 { font-size: var(--fs-2xl); margin-bottom: var(--gap-md); }
h3 { font-size: var(--fs-xl);  margin-bottom: var(--gap-md); }
h4 { font-size: var(--fs-lg);  margin-bottom: var(--gap-sm); }

p {
    margin-bottom: var(--gap-md);
    color: var(--c-dark-soft);
}

p:last-child {
    margin-bottom: 0;
}

strong, b {
    font-weight: var(--fw-bold);
}


/* ===================================================
   5. УТИЛИТЫ
   =================================================== */

/* --- Контейнер --- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}

/* --- Секция --- */
.section {
    padding-top: var(--gap-3xl);
    padding-bottom: var(--gap-3xl);
}

/* --- Кнопки (BEM: btn--modifier) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    padding: 0.75rem 1.5rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1;
    border-radius: var(--radius-md);
    transition: all var(--transition);
    cursor: pointer;
    border: 2px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* Основная — жёлтая */
.btn--primary {
    background-color: var(--c-primary);
    color: var(--c-dark);
    border-color: var(--c-primary);
}

.btn--primary:hover {
    background-color: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

/* Контур — чёрная рамка */
.btn--outline {
    background-color: transparent;
    color: var(--c-dark);
    border-color: var(--c-border);
}

.btn--outline:hover {
    background-color: var(--c-dark);
    color: var(--c-white);
    border-color: var(--c-dark);
}

/* Тёмная */
.btn--dark {
    background-color: var(--c-dark);
    color: var(--c-white);
    border-color: var(--c-dark);
}

.btn--dark:hover {
    background-color: var(--c-dark-soft);
    border-color: var(--c-dark-soft);
}

/* Размеры */
.btn--sm {
    padding: 0.5rem 1rem;
    font-size: var(--fs-xs);
}

.btn--lg {
    padding: 1rem 2rem;
    font-size: var(--fs-base);
}

/* Полная ширина */
.btn--full {
    width: 100%;
}

/* --- Скрытие --- */
.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;
}

/* --- Текст --- */
.text-center  { text-align: center; }
.text-primary { color: var(--c-primary); }
.text-gray    { color: var(--c-gray); }
.text-sm      { font-size: var(--fs-sm); }

/* --- Бейдж --- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--c-dark);
    background-color: var(--c-primary);
    border-radius: var(--radius-full);
}

/* --- Разделитель --- */
.divider,
.sp-divider {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: var(--gap-lg) 0;
}

/* --- Сетка --- */
.grid {
    display: grid;
    gap: var(--gap-lg);
}

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

/* --- Модалка --- */
body.modal-open {
    overflow: hidden;
}


/* ===================================================
   6. PROSE — читаемые текстовые блоки
   =================================================== */

/**
 * .prose ограничивает ширину текста для комфортного чтения.
 * Используется для SEO-текстов в каталоге и описаний товаров.
 * Внутри .prose действуют стили для всех текстовых элементов.
 */

.prose {
    max-width: var(--prose-max);
    line-height: var(--lh-relaxed);
    color: var(--c-dark-soft);
    font-size: var(--fs-base);
}

.prose > * + * {
    margin-top: var(--gap-md);
}

.prose h2 {
    font-size: var(--fs-xl);
    color: var(--c-dark);
    margin-top: var(--gap-2xl);
    margin-bottom: var(--gap-md);
}

.prose h3 {
    font-size: var(--fs-lg);
    color: var(--c-dark);
    margin-top: var(--gap-xl);
    margin-bottom: var(--gap-sm);
}

.prose h4 {
    font-size: var(--fs-md);
    color: var(--c-dark);
    margin-top: var(--gap-lg);
    margin-bottom: var(--gap-sm);
}

.prose p {
    margin-bottom: var(--gap-md);
    color: var(--c-dark-soft);
}

.prose ul,
.prose ol {
    padding-left: var(--gap-xl);
    margin-bottom: var(--gap-md);
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin-bottom: var(--gap-xs);
    line-height: var(--lh-relaxed);
}

.prose li::marker {
    color: var(--c-primary);
}

.prose a {
    color: var(--c-primary-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

.prose a:hover {
    color: var(--c-dark);
}

.prose strong {
    color: var(--c-dark);
    font-weight: var(--fw-bold);
}

.prose blockquote {
    border-left: 4px solid var(--c-primary);
    padding: var(--gap-md) var(--gap-lg);
    margin: var(--gap-lg) 0;
    background-color: var(--c-light-warm);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--c-gray);
}

.prose img {
    border-radius: var(--radius-md);
    margin: var(--gap-lg) 0;
}

.prose table {
    margin: var(--gap-lg) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.prose table th,
.prose table td {
    padding: var(--gap-sm) var(--gap-md);
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}

.prose table th {
    background-color: var(--c-light);
    font-weight: var(--fw-bold);
    color: var(--c-dark);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.prose table tr:last-child td {
    border-bottom: none;
}

.prose table tr:hover td {
    background-color: var(--c-light-warm);
}

.prose hr {
    border: none;
    border-top: 1px solid var(--c-border);
    margin: var(--gap-xl) 0;
}

.prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 2px 6px;
    background-color: var(--c-light);
    border-radius: var(--radius-sm);
    color: var(--c-dark);
}

.prose pre {
    background-color: var(--c-dark);
    color: var(--c-light);
    padding: var(--gap-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--gap-lg) 0;
}

.prose pre code {
    background: none;
    padding: 0;
    color: inherit;
}


/* ===================================================
   7. ХЛЕБНЫЕ КРОШКИ
   =================================================== */

.breadcrumbs-section {
    padding: var(--gap-md) 0;
    background-color: var(--c-light-warm);
    border-bottom: 1px solid var(--c-border);
}

.breadcrumbs {
    font-size: var(--fs-sm);
    color: var(--c-gray);
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-xs);
}

.breadcrumbs__item {
    display: inline-flex;
    align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin-left: var(--gap-xs);
    color: var(--c-gray-light);
}

.breadcrumbs__item a {
    color: var(--c-gray);
    transition: color var(--transition);
}

.breadcrumbs__item a:hover {
    color: var(--c-primary-dark);
}

.breadcrumbs__item:last-child span {
    color: var(--c-dark);
    font-weight: var(--fw-bold);
}


/* ===================================================
   8. CTA-КАРТОЧКА (каталог + single)
   =================================================== */

/**
 * Блок «Не нашли товар?» / «Нужна консультация?»
 * Используется в archive.php и single.php.
 */

.catalog-cta {
    padding: var(--gap-3xl) 0;
}

.catalog-cta__card {
    background: linear-gradient(135deg, var(--c-dark) 0%, var(--c-dark-soft) 100%);
    border-radius: var(--radius-xl);
    padding: var(--gap-2xl) var(--gap-xl);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-2xl);
    align-items: center;
    box-shadow: var(--shadow-lg);
}

.catalog-cta__body {
    display: flex;
    gap: var(--gap-lg);
    align-items: flex-start;
}

.catalog-cta__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--c-primary);
    border-radius: var(--radius-lg);
    color: var(--c-dark);
}

.catalog-cta__icon svg {
    width: 32px;
    height: 32px;
}

.catalog-cta__title {
    font-size: var(--fs-xl);
    color: var(--c-white);
    margin-bottom: var(--gap-sm);
}

.catalog-cta__desc {
    color: var(--c-gray-light);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    margin-bottom: 0;
}

.catalog-cta__form {
    background-color: var(--c-white);
    border-radius: var(--radius-lg);
    padding: var(--gap-xl);
}

/* Адаптив CTA */
@media (max-width: 768px) {
    .catalog-cta__card {
        grid-template-columns: 1fr;
        padding: var(--gap-xl) var(--gap-lg);
    }

    .catalog-cta__body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .catalog-cta__icon {
        width: 56px;
        height: 56px;
    }
}


/* ===================================================
   9. STOCK BADGE
   =================================================== */

.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: 4px 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stock-badge--in {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--c-success);
}

.stock-badge--out {
    background-color: rgba(107, 114, 128, 0.1);
    color: var(--c-gray);
}


/* ===================================================
   10. SEARCH FORM
   =================================================== */

.search-form__inner {
    display: flex;
    gap: 0;
}

.search-form__input {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    border-right: none;
    min-width: 220px;
}

.search-form__input:focus {
    z-index: 1;
}

.search-form__btn {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 12px 16px;
    flex-shrink: 0;
}

.catalog-empty__actions {
    display: flex;
    justify-content: center;
    gap: var(--gap-md);
    margin-top: var(--gap-lg);
    flex-wrap: wrap;
}


/* ===================================================
   11. PAGINATION
   =================================================== */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-xs);
    padding-top: var(--gap-2xl);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--gap-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    border-radius: var(--radius-md);
    border: 1px solid var(--c-border);
    color: var(--c-dark);
    transition: all var(--transition);
}

.pagination a:hover {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-dark);
}

.pagination .current {
    background-color: var(--c-dark);
    border-color: var(--c-dark);
    color: var(--c-white);
}

.pagination .dots {
    border: none;
    color: var(--c-gray-light);
}