/*
Theme Name: ColorHub
Theme URI: https://colorhub.by
Description: Дочерняя тема ColorHub для Blocksy. Каталог ЛКМ/абразивов/инструмента, тех. документация, ИИ-помощник. Юрлицо ООО «Пневматика».
Author: ColorHub
Version: 0.4.0
Template: blocksy
Text Domain: colorhub
*/

/* =========================================================
   ColorHub — «Color Lab» design system
   Чистый белый, синий основной акцент, радужная сетка-палитра
   ========================================================= */

:root {
  /* Нейтральные */
  --ink:        #141414;
  --ink-soft:   #3a3a3e;
  --muted:      #6b6f76;
  --faint:      #9a9ea6;
  --line:       #e6e7ef;
  --line-soft:  #f0f1f6;
  --bg:         #ffffff;
  --bg-soft:    #f6f7fb;
  --bg-ink:     #0d0f14;

  /* Основной акцент */
  --primary:        #1c75bc;
  --primary-hover:  #155e98;
  --primary-tint:   #eaf3fb;

  /* Радужная палитра (из логотипа) */
  --c-red:    #e64a2e;
  --c-orange: #f18a21;
  --c-amber:  #f6a623;
  --c-yellow: #ffc72c;
  --c-green:  #2ba84a;
  --c-teal:   #0e9d8e;
  --c-cyan:   #1ca0e3;
  --c-blue:   #1c75bc;
  --c-indigo: #2e3192;
  --c-violet: #5b3e96;
  --c-purple: #8e44ad;
  --c-magenta:#b7318a;

  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(20,20,20,.05);
  --shadow:    0 14px 40px -16px rgba(20,30,60,.18);
  --shadow-lg: 0 40px 80px -28px rgba(20,30,60,.28);

  --maxw: 1240px;
  --pad-x: clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 9vw, 132px);

  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ---------- Kicker / eyebrow ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--primary);
  display: inline-block;
}

.h2 {
  font-size: clamp(32px, 5vw, 56px);
  margin-top: 18px;
}
.section-lead {
  max-width: 560px;
  margin-top: 18px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 16px;
  border: 1.5px solid transparent;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .25s, color .25s, border-color .25s;
  white-space: nowrap;
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(28,117,188,.55);
}
.btn--primary:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(28,117,188,.6); }
.btn--ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn .arr { transition: transform .35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

/* ---------- Rainbow dot grid ---------- */
.dotgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dg-gap, 10px);
  width: max-content;
}
.dotgrid i {
  width: var(--dg-size, 14px);
  height: var(--dg-size, 14px);
  border-radius: 50%;
  display: block;
  opacity: 0;
  transform: scale(.3);
  animation: dotPop .6s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes dotPop { to { opacity: 1; transform: scale(1); } }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .dotgrid i { opacity: 1; transform: none; animation: none; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--sec-y); position: relative; }
.section--soft { background: var(--bg-soft); }

/* Flowing spectrum divider */
.spectrum-flow {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--c-red), var(--c-orange), var(--c-amber), var(--c-yellow),
    var(--c-green), var(--c-teal), var(--c-cyan), var(--c-blue),
    var(--c-indigo), var(--c-violet), var(--c-purple), var(--c-magenta),
    var(--c-red));
  background-size: 200% 100%;
  animation: spectrumSlide 18s linear infinite;
}
@keyframes spectrumSlide { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .spectrum-flow { animation: none; } }

/* WordPress admin bar */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* =========================================================
   Глобальный адаптив (тщательный проход: 768 / 480)
   ========================================================= */
@media (max-width: 768px) {
  :root { --sec-y: clamp(54px, 9vw, 132px); }
  body { font-size: 16px; }
  .btn { padding: 13px 22px; font-size: 15px; }
  .h2 { font-size: clamp(28px, 6.4vw, 44px); }
}
@media (max-width: 480px) {
  :root { --pad-x: 18px; }
  .h2 { font-size: clamp(25px, 7.4vw, 34px); }
  /* Кнопки на всю ширину контейнера для удобного тапа */
  .btn { width: 100%; justify-content: center; }
  /* Кнопки внутри инлайновых рядов остаются авто-ширины */
  .hero__actions .btn,
  .retail__actions .btn,
  .product__actions .btn,
  .nav__actions .btn { width: auto; }
}