/* =========================================================
   HRYVNIA CENT — BASE STYLES
   Цей файл містить:
   • CSS-змінні (брендова палітра, шрифти, відступи)
   • Сучасний ресет
   • Типографіка
   • Основні утиліти (контейнер, кнопки, форми)
   ========================================================= */

/* ---------- Variables ---------- */
:root {
  /* Бренд-кольори */
  --hc-orange: #F26522;
  --hc-orange-light: #FF8A4C;
  --hc-orange-dark: #D14E0F;
  --hc-purple: #4A2870;
  --hc-purple-light: #6B3F95;
  --hc-purple-dark: #2D1845;
  --hc-yellow: #FFD200;

  /* Нейтральні */
  --hc-white: #FFFFFF;
  --hc-off-white: #FAF7F2;
  --hc-gray-50: #F5F5F7;
  --hc-gray-100: #F0F0F3;
  --hc-gray-200: #E5E7EB;
  --hc-gray-300: #D1D5DB;
  --hc-gray-500: #6B7280;
  --hc-gray-700: #374151;
  --hc-gray-900: #111827;
  --hc-ink: #1A1428;

  /* Семантичні */
  --hc-success: #10B981;
  --hc-error: #EF4444;
  --hc-warning: #F59E0B;

  /* Типографіка */
  --hc-font-display: "Unbounded", system-ui, -apple-system, sans-serif;
  --hc-font-body: "Manrope", system-ui, -apple-system, sans-serif;

  /* Розміри шрифту (clamp для адаптивності) */
  --hc-text-xs: 0.75rem;
  --hc-text-sm: 0.875rem;
  --hc-text-base: 1rem;
  --hc-text-lg: 1.125rem;
  --hc-text-xl: clamp(1.25rem, 1.5vw, 1.5rem);
  --hc-text-2xl: clamp(1.5rem, 2vw, 2rem);
  --hc-text-3xl: clamp(1rem, 2vw, 1.25rem);
  --hc-text-4xl: clamp(1.25rem, 2vw, 1.75rem);
  --hc-text-5xl: clamp(3rem, 7vw, 6rem);

  /* Відступи */
  --hc-space-1: 0.25rem;
  --hc-space-2: 0.5rem;
  --hc-space-3: 0.75rem;
  --hc-space-4: 1rem;
  --hc-space-5: 1.25rem;
  --hc-space-6: 1.5rem;
  --hc-space-8: 2rem;
  --hc-space-10: 2.5rem;
  --hc-space-12: 3rem;
  --hc-space-16: 4rem;
  --hc-space-20: 5rem;
  --hc-space-24: 6rem;

  /* Радіуси */
  --hc-radius-sm: 6px;
  --hc-radius: 12px;
  --hc-radius-lg: 20px;
  --hc-radius-xl: 28px;
  --hc-radius-full: 9999px;

  /* Тіні */
  --hc-shadow-sm: 0 1px 2px rgba(26, 20, 40, 0.05);
  --hc-shadow: 0 4px 12px rgba(26, 20, 40, 0.08);
  --hc-shadow-md: 0 8px 24px rgba(26, 20, 40, 0.10);
  --hc-shadow-lg: 0 16px 40px rgba(26, 20, 40, 0.12);
  --hc-shadow-orange: 0 8px 24px rgba(242, 101, 34, 0.30);
  --hc-shadow-purple: 0 8px 24px rgba(74, 40, 112, 0.30);

  /* Контейнер */
  --hc-container: 1280px;
  --hc-container-wide: 1440px;
  --hc-container-narrow: 960px;
  --hc-page-padding: clamp(1rem, 4vw, 2.5rem);

  /* Анімації */
  --hc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hc-duration: 0.3s;
  --hc-duration-slow: 0.5s;

  /* Z-index */
  --hc-z-header: 100;
  --hc-z-mega: 110;
  --hc-z-modal: 200;
}

/* ---------- Modern Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--hc-font-body);
  font-size: var(--hc-text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--hc-ink);
  background: var(--hc-white);
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

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

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

button { cursor: pointer; background: none; border: none; padding: 0; }

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  hyphens: auto;
}

#root, #__next, .site { isolation: isolate; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--hc-font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hc-ink);
}

h1 { font-size: var(--hc-text-4xl); font-weight: 800; }
h2 { font-size: var(--hc-text-3xl); }
h3 { font-size: var(--hc-text-2xl); font-weight: 600; }
h4 { font-size: var(--hc-text-xl); font-weight: 600; letter-spacing: -0.01em; }
h5 { font-size: var(--hc-text-lg); font-weight: 600; letter-spacing: -0.01em; }
h6 { font-size: var(--hc-text-base); font-weight: 600; letter-spacing: -0.01em; }

a {
  color: var(--hc-orange);
  text-decoration: none;
  transition: color var(--hc-duration) var(--hc-ease);
}
a:hover { color: var(--hc-orange-dark); }

::selection {
  background: var(--hc-orange);
  color: var(--hc-white);
}

/* ---------- Layout ---------- */
.hc-container {
  width: 100%;
  max-width: var(--hc-container);
  margin: 0 auto;
  padding-left: var(--hc-page-padding);
  padding-right: var(--hc-page-padding);
}

.hc-container-wide {
  max-width: var(--hc-container-wide);
  margin: 0 auto;
  padding-left: var(--hc-page-padding);
  padding-right: var(--hc-page-padding);
}

.hc-container-narrow {
  width: 100%;
  max-width: var(--hc-container-narrow);
  margin: 0 auto;
  padding-left: max(1.5rem, 4vw);
  padding-right: max(1.5rem, 4vw);
}

/* ---------- Prose content ---------- */
.hc-page .hc-prose h2 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-top: 40px;
  margin-bottom: 16px;
}

.hc-prose h3 {
  margin-top: var(--hc-space-8);
  margin-bottom: var(--hc-space-3);
}

.hc-prose p,
.hc-prose ul,
.hc-prose ol {
  margin-bottom: var(--hc-space-4);
  color: var(--hc-gray-700);
  line-height: 1.7;
}

.hc-prose ul,
.hc-prose ol {
  padding-left: 1.5rem;
}

.hc-prose li { margin-bottom: var(--hc-space-2); }

.hc-section {
  padding-top: clamp(3rem, 6vw, 6rem);
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.hc-section-tight { padding: clamp(2rem, 4vw, 4rem) 0; }

/* Eyebrow / kicker label above titles */
.hc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--hc-font-display);
  font-size: var(--hc-text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hc-orange);
  margin-bottom: var(--hc-space-4);
}
.hc-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--hc-orange);
}

/* ---------- Buttons ---------- */
.hc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--hc-font-body);
  font-size: var(--hc-text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--hc-radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--hc-duration) var(--hc-ease);
  text-decoration: none;
  white-space: nowrap;
}

.hc-btn--primary {
  background: var(--hc-orange);
  color: var(--hc-white);
  box-shadow: var(--hc-shadow-orange);
}
.hc-btn--primary:hover {
  background: var(--hc-orange-dark);
  color: var(--hc-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(242, 101, 34, 0.40);
}

.hc-btn--secondary {
  background: var(--hc-purple);
  color: var(--hc-white);
}
.hc-btn--secondary:hover {
  background: var(--hc-purple-dark);
  color: var(--hc-white);
  transform: translateY(-2px);
}

.hc-btn--outline {
  background: transparent;
  color: var(--hc-ink);
  border-color: var(--hc-gray-300);
}
.hc-btn--outline:hover {
  background: var(--hc-ink);
  color: var(--hc-white);
  border-color: var(--hc-ink);
}

.hc-btn--ghost {
  background: transparent;
  color: var(--hc-ink);
}
.hc-btn--ghost:hover {
  background: var(--hc-gray-100);
  color: var(--hc-ink);
}

.hc-btn--lg { padding: 1.125rem 2.25rem; font-size: var(--hc-text-lg); }
.hc-btn--sm { padding: 0.625rem 1.25rem; font-size: var(--hc-text-sm); }

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

/* ---------- Forms (base) ---------- */
.hc-input,
.hc-textarea,
.hc-select {
  display: block;
  width: 100%;
  padding: 0.875rem 1.125rem;
  font-family: var(--hc-font-body);
  font-size: var(--hc-text-base);
  color: var(--hc-ink);
  background: var(--hc-white);
  border: 1.5px solid var(--hc-gray-200);
  border-radius: var(--hc-radius);
  transition: all var(--hc-duration) var(--hc-ease);
}
.hc-input:focus,
.hc-textarea:focus,
.hc-select:focus {
  outline: none;
  border-color: var(--hc-orange);
  box-shadow: 0 0 0 4px rgba(242, 101, 34, 0.12);
}
.hc-input::placeholder { color: var(--hc-gray-500); }

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

.hc-label {
  display: block;
  margin-bottom: var(--hc-space-2);
  font-size: var(--hc-text-sm);
  font-weight: 600;
  color: var(--hc-ink);
}
.hc-label .hc-required { color: var(--hc-error); }

.hc-help {
  margin-top: var(--hc-space-1);
  font-size: var(--hc-text-xs);
  color: var(--hc-gray-500);
}

/* ---------- Breadcrumbs ---------- */
.hc-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--hc-text-sm);
  color: var(--hc-gray-500);
  padding: var(--hc-space-4) 0;
}
.hc-breadcrumbs a {
  color: var(--hc-gray-500);
}
.hc-breadcrumbs a:hover { color: var(--hc-orange); }
.hc-breadcrumbs .sep { color: var(--hc-gray-300); }
.hc-breadcrumbs [aria-current="page"] { color: var(--hc-ink); font-weight: 500; }

/* ---------- Utilities ---------- */
.hc-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;
}

.hc-flex { display: flex; }
.hc-grid { display: grid; }
.hc-gap-2 { gap: var(--hc-space-2); }
.hc-gap-4 { gap: var(--hc-space-4); }
.hc-gap-6 { gap: var(--hc-space-6); }
.hc-gap-8 { gap: var(--hc-space-8); }

/* Reduced motion */
@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;
  }
}