/*
Theme Name: Wrangler Service
Theme URI: https://wranglerservice.ru/
Author: Wrangler Service
Description: Кастомная тема профильного сервиса Jeep Wrangler (Санкт-Петербург). Собрана на восстановленной структуре старого сайта: фирменный Plumb, стальные карточки и оранжевый акцент сохранены, вёрстка переведена на mobile-first grid.
Version: 0.1.0
Requires at least: 6.5
Requires PHP: 8.2
Text Domain: wranglerservice
Tags: custom-theme, catalog, automotive
*/

/* ==========================================================================
   Токены. Палитра выведена из двух фирменных цветов старого сайта:
   #ef4023 — оранжевый такелажа и такелажных строп, #464647 — сталь корпуса.
   Остальное — их производные, чтобы у темы была шкала, а не два цвета.
   ========================================================================== */

:root {
  /* Сталь */
  --ws-steel-900: #1b1b1c;
  --ws-steel-800: #2c2c2d;
  --ws-steel-700: #464647;   /* фирменный: карточки, футер */
  --ws-steel-500: #6d6e70;
  --ws-steel-300: #b6b7b9;
  --ws-steel-150: #e4e5e6;
  --ws-steel-50:  #f4f4f5;
  --ws-paper:     #ffffff;

  /* Акцент */
  --ws-accent:      #ef4023;  /* фирменный: насечки, бейджи, крупные цифры */
  --ws-accent-deep: #c22d15;  /* hover / active фоновых элементов на --ws-accent */
  /* Тот же фирменный красно-оранжевый, но контрастный: #ef4023 на белом даёт
     3.87:1 и не проходит WCAG AA (нужно 4.5:1) для текста мельче 24px.
     #c22d15 даёт 5.26:1. Используется везде, где акцент — это ТЕКСТ мелкого
     кегля или фон под белым текстом мелкого кегля. */
  --ws-accent-text: #c22d15;
  --ws-accent-text-hover: #9e2411;

  /* Акцент раздела «911 Service» — сознательно не красный: раздел должен
     выделяться на фоне остального сайта, а не сливаться с фирменным
     акцентом, который здесь и так используется для CTA и насечек. */
  --ws-porsche:       #b9922f;
  --ws-porsche-hover: #93731f;

  /* Текст */
  --ws-ink:        var(--ws-steel-900);
  --ws-ink-muted:  var(--ws-steel-500);
  --ws-ink-invert: var(--ws-paper);

  /* Шрифты */
  --ws-font-display: 'Plumb', 'Arial Black', sans-serif;
  --ws-font-body: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ws-font-data: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Типографическая шкала (mobile-first, растёт с вьюпортом) */
  --ws-text-xs:   0.8125rem;
  --ws-text-sm:   0.9375rem;
  --ws-text-base: 1rem;
  --ws-text-lg:   clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  --ws-text-xl:   clamp(1.25rem, 1vw + 1rem, 1.5rem);
  --ws-text-2xl:  clamp(1.5rem, 2vw + 1.1rem, 2.125rem);
  --ws-text-3xl:  clamp(1.875rem, 3.2vw + 1.2rem, 3rem);

  /* Шаг отступов — кратно 4px */
  --ws-space-1: 0.25rem;
  --ws-space-2: 0.5rem;
  --ws-space-3: 0.75rem;
  --ws-space-4: 1rem;
  --ws-space-5: 1.5rem;
  --ws-space-6: 2rem;
  --ws-space-7: 3rem;
  --ws-space-8: 4rem;
  --ws-space-9: 6rem;

  /* Каркас */
  --ws-container: 1180px;
  --ws-container-narrow: 780px;
  --ws-gutter: var(--ws-space-4);
  --ws-radius: 14px;
  --ws-radius-sm: 8px;
  --ws-border: 1px solid var(--ws-steel-150);
  --ws-shadow: 0 1px 2px rgba(27, 27, 28, 0.06), 0 8px 24px rgba(27, 27, 28, 0.06);
  --ws-shadow-lifted: 0 2px 4px rgba(27, 27, 28, 0.08), 0 16px 40px rgba(27, 27, 28, 0.12);
  --ws-transition: 180ms ease;
}

@media (min-width: 768px) {
  :root { --ws-gutter: var(--ws-space-6); }
}

/* На широких мониторах (2К/4К) контейнер держался в 1180px и оставлял
   пустые поля в треть экрана и больше — росла только «рамка» вокруг сайта,
   а не сам сайт. Расширяем контейнер двумя ступенями вместо плавного vw,
   чтобы не задеть уже выверенные вёрстки на типичных 1366–1536px. */
@media (min-width: 1600px) {
  :root { --ws-container: 1440px; }
}
@media (min-width: 2000px) {
  :root { --ws-container: 1720px; }
}

/* ==========================================================================
   Сброс и база
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ws-paper);
  color: var(--ws-ink);
  font-family: var(--ws-font-body);
  font-size: var(--ws-text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--ws-font-display);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--ws-text-3xl); }
h2 { font-size: var(--ws-text-2xl); }
h3 { font-size: var(--ws-text-xl); }
h4 { font-size: var(--ws-text-lg); font-weight: 500; }

p, ul, ol { margin: 0 0 var(--ws-space-4); }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: var(--ws-space-2); }

a { color: var(--ws-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ws-accent-text-hover); }

strong, b { font-weight: 600; }

/* Числа, цены, характеристики — моноширинным: это замеры, а не текст. */
.ws-data, .ws-price { font-family: var(--ws-font-data); font-weight: 500; font-variant-numeric: tabular-nums; }

button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ws-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.ws-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.ws-skip-link {
  position: absolute; top: 0; left: 0; z-index: 999;
  transform: translateY(-120%);
  padding: var(--ws-space-3) var(--ws-space-5);
  background: var(--ws-accent); color: var(--ws-paper);
  font-weight: 600; text-decoration: none;
}
.ws-skip-link:focus { transform: translateY(0); color: var(--ws-paper); }

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