/*
Theme Name: Хомут-Оптом (СПК Прайм)
Theme URI: https://xn----wtbbfcagvdft.xn--p1ai
Author: Prom Digital
Author URI: https://prom-digital.ru
Description: Кастомная тема магазина хомутов «СПК Прайм»: собственная вёрстка без конструкторов страниц, каталог WooCommerce, разделы «Статьи», «Новости», «Вакансии», формы заявок и соответствие 152-ФЗ.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Requires Plugins: woocommerce
WC requires at least: 7.0
WC tested up to: 10.9
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homut-opt
Tags: e-commerce, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =====================================================================
 * ОГЛАВЛЕНИЕ
 *  1. Токены дизайна
 *  2. Сброс и базовая типографика
 *  3. Ссылки и кнопки
 *  4. Формы
 *  5. Сетка и служебные классы
 * Остальные стили подключаются файлами из assets/css/
 * ===================================================================== */

/* ----------------------------- 1. ТОКЕНЫ ---------------------------- */

:root {
    /* Фирменные цвета (взяты с оригинала) */
    --ho-accent: #ee591f;
    --ho-accent-dark: #cf4814;
    --ho-accent-hover: #b63a0b;
    /* Фон кнопок: чуть глубже фирменного — белый текст даёт 4,9:1 (WCAG AA),
       на ярком #ee591f было 3,45:1 */
    --ho-accent-strong: #c9420d;
    --ho-accent-soft: #fff1ea;
    --ho-blue: #013f8d;
    --ho-blue-bright: #4514ff;
    --ho-dark: #1d1d1b;
    --ho-black: #000000;
    --ho-text: #1d1d1b;
    --ho-muted: #6b6b6b;
    --ho-muted-light: #727272;
    --ho-border: #dedede;
    --ho-border-light: #f0f0f0;
    --ho-bg: #ffffff;
    --ho-bg-soft: #f8f8f8;
    --ho-bg-dark: #1d1d1b;
    --ho-link-legal: #013f8d;
    --ho-success: #0dc267;
    --ho-danger: #d92c2c;

    /* Типографика */
    --ho-font: 'Play', 'Segoe UI', Roboto, Arial, sans-serif;
    --ho-fs-xs: 12px;
    --ho-fs-sm: 14px;
    --ho-fs-base: 16px;
    --ho-fs-md: 18px;
    --ho-fs-lg: 22px;
    --ho-fs-xl: clamp(22px, 2vw, 28px);
    --ho-fs-2xl: clamp(24px, 2.4vw, 30px);
    --ho-fs-3xl: clamp(28px, 3.2vw, 40px);
    --ho-lh-tight: 1.15;
    --ho-lh-base: 1.55;

    /* Скругления и тени */
    --ho-radius-sm: 4px;
    --ho-radius: 8px;
    --ho-radius-lg: 16px;
    --ho-radius-pill: 999px;
    --ho-shadow-xs: 0 1px 2px rgba(29, 29, 27, .06);
    --ho-shadow-sm: 0 4px 12px rgba(29, 29, 27, .08);
    --ho-shadow-md: 0 12px 32px rgba(29, 29, 27, .12);
    --ho-shadow-accent: 0 10px 28px rgba(238, 89, 31, .28);

    /* Размеры и отступы */
    --ho-container: 1320px;
    --ho-gutter: 24px;
    --ho-section: clamp(40px, 5vw, 80px);
    --ho-header-h: 72px;

    /* Анимации */
    --ho-transition: .25s ease;
    --ho-dur: .28s;
    --ho-ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------- 2. ТИПОГРАФИКА -------------------------- */

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

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

body {
    margin: 0;
    background: var(--ho-bg);
    color: var(--ho-text);
    font-family: var(--ho-font);
    font-size: var(--ho-fs-base);
    line-height: var(--ho-lh-base);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .5em;
    color: var(--ho-dark);
    font-weight: 700;
    line-height: var(--ho-lh-tight);
    letter-spacing: -.01em;
}

h1 { font-size: var(--ho-fs-3xl); }
h2 { font-size: var(--ho-fs-2xl); }
h3 { font-size: var(--ho-fs-xl); }
h4 { font-size: var(--ho-fs-lg); }
h5 { font-size: var(--ho-fs-md); }
h6 { font-size: var(--ho-fs-base); }

p { margin: 0 0 1em; }

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

figure { margin: 0; }

ul, ol { margin: 0 0 1em 1.2em; }

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

th, td {
    padding: 10px 12px;
    border: 1px solid var(--ho-border);
    text-align: left;
}

blockquote {
    margin: 0 0 1em;
    padding: 16px 20px;
    border-left: 4px solid var(--ho-accent);
    background: var(--ho-bg-soft);
}

/* ------------------------ 3. ССЫЛКИ И КНОПКИ ------------------------ */

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

a:hover,
a:focus-visible {
    color: var(--ho-accent);
}

.ho-btn,
button,
input[type="submit"],
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: var(--ho-accent-strong);
    color: #fff;
    font-family: inherit;
    font-size: var(--ho-fs-base);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background var(--ho-transition), box-shadow var(--ho-transition),
        transform var(--ho-transition), color var(--ho-transition);
}

.ho-btn:hover,
button:hover,
input[type="submit"]:hover {
    background: var(--ho-accent-hover);
    color: #fff;
    box-shadow: var(--ho-shadow-accent);
    transform: translateY(-1px);
}

.ho-btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible {
    outline: 2px solid var(--ho-accent);
    outline-offset: 2px;
}

.ho-btn--ghost {
    background: transparent;
    border-color: var(--ho-border);
    color: var(--ho-dark);
}

.ho-btn--ghost:hover {
    background: var(--ho-bg-soft);
    border-color: var(--ho-accent);
    color: var(--ho-accent);
    box-shadow: none;
}

.ho-btn--white {
    background: #fff;
    color: var(--ho-dark);
}

.ho-btn--white:hover {
    background: #fff;
    color: var(--ho-accent);
}

.ho-btn--lg {
    min-height: 56px;
    padding: 16px 32px;
    font-size: var(--ho-fs-md);
}

.ho-btn--block { width: 100%; }

/* ------------------------------ 4. ФОРМЫ ---------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--ho-border);
    border-radius: var(--ho-radius);
    background: #fff;
    color: var(--ho-text);
    font-family: inherit;
    font-size: var(--ho-fs-base);
    line-height: 1.4;
    transition: border-color var(--ho-transition), box-shadow var(--ho-transition);
}

textarea { min-height: 120px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ho-accent);
    box-shadow: 0 0 0 3px rgba(238, 89, 31, .15);
    outline: none;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: var(--ho-fs-sm);
    color: var(--ho-muted);
}

.ho-field { margin-bottom: 16px; }

/* Согласие на обработку персональных данных (152-ФЗ) */
.ho-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--ho-fs-xs);
    color: var(--ho-muted);
}

.ho-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--ho-accent);
    flex: 0 0 auto;
}

.ho-consent a { color: var(--ho-link-legal); text-decoration: underline; }

/* ---------------------- 5. СЕТКА И УТИЛИТЫ -------------------------- */

.ho-container {
    width: 100%;
    max-width: var(--ho-container);
    margin: 0 auto;
    padding: 0 var(--ho-gutter);
}

.ho-container--narrow { max-width: 900px; }

.ho-section { padding: var(--ho-section) 0; }
.ho-section--soft { background: var(--ho-bg-soft); }
.ho-section--dark { background: var(--ho-bg-dark); color: #fff; }
.ho-section--dark h1,
.ho-section--dark h2,
.ho-section--dark h3,
.ho-section--dark h4 { color: #fff; }

.ho-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

.ho-section__title { margin: 0; }
.ho-section__subtitle { margin: 8px 0 0; color: var(--ho-muted); }

.ho-grid { display: grid; gap: 24px; }
.ho-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ho-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ho-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ho-card {
    border: 1px solid var(--ho-border);
    border-radius: var(--ho-radius-lg);
    background: #fff;
    overflow: hidden;
    transition: border-color var(--ho-transition), box-shadow var(--ho-transition),
        transform var(--ho-transition);
}

.ho-card:hover {
    border-color: var(--ho-accent);
    box-shadow: var(--ho-shadow-sm);
    transform: translateY(-2px);
}

.ho-wordpress-content::after,
.ho-clearfix::after {
    content: '';
    display: table;
    clear: both;
}

.ho-visually-hidden,
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ho-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 20px;
    background: var(--ho-accent);
    color: #fff;
}

.ho-skip-link:focus { left: 0; color: #fff; }

.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { margin: 0 auto 16px; }

.wp-caption-text,
.wp-element-caption,
.entry-meta {
    font-size: var(--ho-fs-sm);
    color: var(--ho-muted);
}

/* Контент записей и страниц (то, что приходит из редактора) */
.ho-content > * { margin-bottom: 1em; }
.ho-content h2 { margin-top: 1.4em; }
.ho-content h3 { margin-top: 1.2em; }
.ho-content img { border-radius: var(--ho-radius); }
.ho-content a { color: var(--ho-link-legal); text-decoration: underline; }
.ho-content a:hover { color: var(--ho-accent); }
.ho-content ul,
.ho-content ol { padding-left: 1.2em; }
.ho-content li { margin-bottom: .4em; }
.ho-content table { margin-bottom: 1.5em; }
.ho-content table th { background: var(--ho-bg-soft); }

/* Хлебные крошки */
.ho-breadcrumbs {
    padding: 16px 0;
    font-size: var(--ho-fs-sm);
    color: var(--ho-muted);
}

.ho-breadcrumbs a { color: var(--ho-muted); }
.ho-breadcrumbs a:hover { color: var(--ho-accent); }
.ho-breadcrumbs__sep { margin: 0 8px; color: var(--ho-muted-light); }

/* Пагинация */
.ho-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 40px;
}

.ho-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ho-border);
    border-radius: var(--ho-radius);
    background: #fff;
    color: var(--ho-dark);
}

.ho-pagination .page-numbers:hover {
    border-color: var(--ho-accent);
    color: var(--ho-accent);
}

.ho-pagination .page-numbers.current {
    background: var(--ho-accent);
    border-color: var(--ho-accent);
    color: #fff;
}

/* Уведомления форм */
.ho-notice {
    padding: 14px 18px;
    border-radius: var(--ho-radius);
    font-size: var(--ho-fs-sm);
    margin-bottom: 16px;
}

.ho-notice--success {
    background: rgba(13, 194, 103, .12);
    border: 1px solid var(--ho-success);
    color: #0a7c43;
}

.ho-notice--error {
    background: rgba(217, 44, 44, .1);
    border: 1px solid var(--ho-danger);
    color: #a51f1f;
}

/* Плашка «Нет в наличии» / «Под заказ» */
.ho-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--ho-radius-pill);
    background: var(--ho-bg-soft);
    color: var(--ho-muted);
    font-size: var(--ho-fs-xs);
}

.ho-badge--accent { background: var(--ho-accent-soft); color: var(--ho-accent); }

@media print {
    .ho-header, .ho-footer, .ho-cookie, .ho-mobile-cta { display: none !important; }
    body { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}