/* ============================================================
   Casinoay — База: reset-минимум, типографика, базовые элементы.
   Зависит от tokens.css. Компоненты — отдельными файлами (BEM, см. конец).
   ============================================================ */

/* --- Reset-минимум --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* --- Заголовки (Manrope) --- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-bold);
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: normal; }

/* --- Текст --- */
p, ul, ol, blockquote, figure, table { margin-block: 0 var(--space-4); }
p { max-width: var(--measure); }
small { font-size: var(--fs-caption); color: var(--muted); }
strong, b { font-weight: var(--fw-semibold); color: var(--ink); }

a {
    color: var(--brand);
    text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
    text-underline-offset: 0.15em;
}

a:hover { color: var(--brand-strong); text-decoration-color: currentColor; }

ul, ol { padding-inline-start: var(--space-5); }
li { margin-block: var(--space-1) 0; }

blockquote {
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--brand);
    color: var(--ink);
}

hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--space-6); }

/* --- Код / моноданные --- */
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--surface-2); padding: 0.15em 0.4em; border-radius: var(--radius-sm); }
pre { background: var(--surface-2); padding: var(--space-4); border-radius: var(--radius); overflow: auto; }
pre code { background: none; padding: 0; }

/* --- Таблицы (база; «тяжёлые» таблицы стилизуем в компонентах) --- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--space-3); text-align: start; border-bottom: 1px solid var(--border); }
th { font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--ink); }
tbody tr:nth-child(even) { background: var(--surface-2); }

/* --- Доступность --- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--brand-tint); color: var(--ink); }

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

.skip-link {
    position: absolute; left: var(--space-3); top: -4rem; z-index: 100;
    background: var(--surface); color: var(--brand);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius); box-shadow: var(--shadow-md);
    transition: top 0.15s ease;
}

.skip-link:focus { top: var(--space-3); }

/* --- Контейнер (раскладка) --- */
.container { width: min(100% - 2 * var(--space-4), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--space-4), var(--container-narrow)); }

/* --- Уважение reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   BEM-НЕЙМСПЕЙС КОМПОНЕНТОВ
   Реализация — отдельными файлами assets/css/components/*.css,
   подключаются в inc/enqueue.php ПОСЛЕ base (зависимость 'casinoay-base').

   Соглашение:
     .block__element--modifier   — структура
     .is-* / .has-*              — состояния (.is-open, .is-active)
     .u-*                        — утилиты (.u-visually-hidden)
     js-*                        — только JS-хуки, без стилей

   Запланированные блоки:
     .site-header  .site-nav  .site-footer  .lang-switch  .theme-toggle
     .score-chip                 — signature: фишка-рейтинг (сукно + золотое кольцо)
     .rating-stars
     .btn  .btn--cta  .btn--ghost          — кнопки (CTA = оранжевый)
     .casino-card  .casino-card__score  .casino-card__cta
     .listing  .listing__item  .listing__toolbar
     .review                                — single-casino_review (стиль casino.guru)
       .review__sidebar  .review__facts  .review__body
       .review__section  .review__toggle (.is-open)  .review__verdict
     .pros-cons  .pros-cons__col  .pros-cons__item--pos | --neg
     .screenshots  .screenshots__item       — галерея / лайтбокс
     .provider-badge
     .data-list  .data-list__row            — параметры в сайдбаре
     .eyebrow  .breadcrumbs  .pagination
   ============================================================ */