/* ==========================================================================
   Base CSS - CSS Custom Properties + Global Styles
   ========================================================================== */

/* CSS Custom Properties */
:root {
  /* Editorial palette (світла тема) */
  --ink: #1A1A1A;
  --ink-light: #3A3A3A;
  --amber: #E5231B;
  --amber-dark: #B81810;
  --paper: #F4F4F2;
  --paper-card: #FFFFFF;
  --graphite: #1A1A1A;
  --graphite-soft: #6B6B6B;
  --mint: #E5231B;
  --border: #DADADA;
  --radius: 10px;
  --font-head: 'Source Serif 4', Georgia, 'Times New Roman', 'Noto Serif', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Colors - червоний акцент */
  --color-primary: var(--amber);
  --color-primary-hover: var(--amber-dark);
  --color-primary-light: rgba(229, 35, 27, 0.08);
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-error: #dc2626;
  --color-warning: #ffc107;
  --color-info: #6c757d;

  /* Чорно-білі: */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-text: var(--ink);
  --color-text-muted: var(--graphite-soft);
  --color-border: var(--border);
  --color-border-light: var(--border);
  --color-bg: var(--paper);
  --color-bg-dark: #F5F5F3;
  --color-bg-secondary: #F5F5F3;
  --color-bg-parallax: var(--paper);

  /* Glassmorphism: */
  --glass-white: rgba(255, 255, 255, 0.1);
  --glass-black: rgba(0, 0, 0, 0.1);
  --glass-blur: blur(10px);

  /* Glassmorphism colors (iOS 18+ стиль) */
  --glass-bg-light: rgba(255, 255, 255, 0.7);
  --glass-bg-dark: rgba(0, 0, 0, 0.5);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

  /* Gradient overlays (замість blur для великих елементів) */
  --glass-gradient-light: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.6) 100%
  );
  --glass-gradient-dark: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );

  /* Gray light для меню */
  --color-gray-light: #F5F5F3;

  /* Spacing */
  --spacing-xs: clamp(8px, 1vw, 12px);
  --spacing-sm: clamp(16px, 2vw, 24px);
  --spacing-md: clamp(24px, 4vw, 32px);
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-xxl: 3rem;      /* 48px */

  /* Menu scale factor (1/1.5 = 0.6667) */
  --menu-scale: 0.6667;

  /* Масштабовані spacing для меню */
  --menu-spacing-xs: calc(clamp(8px, 1vw, 12px) * var(--menu-scale));
  --menu-spacing-sm: calc(clamp(16px, 2vw, 24px) * var(--menu-scale));
  --menu-spacing-md: calc(clamp(24px, 4vw, 32px) * var(--menu-scale));
  --menu-spacing-lg: calc(1.5rem * var(--menu-scale));

  /* Масштабовані font-size для меню */
  --menu-font-xs: calc(13px * var(--menu-scale));
  --menu-font-sm: calc(14px * var(--menu-scale));
  --menu-font-base: calc(1rem * var(--menu-scale));
  --menu-font-lg: calc(1.25rem * var(--menu-scale));
  --menu-font-xl: calc(1.5rem * var(--menu-scale));

  /* Масштабовані розміри */
  --menu-size-xs: calc(8px * var(--menu-scale));
  --menu-size-sm: calc(12px * var(--menu-scale));
  --menu-size-md: calc(16px * var(--menu-scale));
  --menu-size-lg: calc(44px * var(--menu-scale));
  --menu-size-xl: calc(48px * var(--menu-scale));

  /* Масштабовані border */
  --menu-border-sm: calc(1px * var(--menu-scale));
  --menu-border-md: calc(2px * var(--menu-scale));

  /* Масштабовані border-radius */
  --menu-radius-sm: calc(0.25rem * var(--menu-scale));
  --menu-radius-md: calc(0.5rem * var(--menu-scale));
  --menu-radius-lg: calc(1.5rem * var(--menu-scale));

  /* Border radius */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 1.5rem;      /* 24px */
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* Typography */
  --font-family-heading: var(--font-head);
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 2rem;     /* 32px */

  /* Line heights */
  --line-height-body: 1.7;
  --line-height-heading: 1.3;

  /* Additional text colors */
  --color-text-light: var(--ink-light);

  /* Code block colors */
  --color-code-bg: rgba(0, 0, 0, 0.5);
  --color-code-text: #e0e0e0;
  --color-code-inline-bg: #F5F5F3;
  --color-code-inline-text: var(--amber-dark);

  /* Additional border radius */
  --radius-xs: 0.125rem; /* 2px */

  /* Primary color in RGB format (for rgba usage) */
  --color-primary-rgb: 229, 35, 27;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

  /* Z-index */
  --z-parallax-container: -1; /* Паралакс-контейнер (за контентом) */
  --z-content: 1;            /* Контент */
  --z-section-content: 2;    /* Вище за hero-content (1) */
  --z-running-line: 998;
  --z-menu-overlay: 999;
  --z-menu: 1000;
  --z-menu-button: 1001;
  --z-dropdown: 1002;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* Fixed menu heights */
  --header-height: 80px;     /* Desktop header */
  --nav-height: 70px;        /* Mobile navigation */
  --z-header: 1000;          /* Top header */
  --z-nav: 1000;             /* Bottom navigation */

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Content width constraints */
  --content-width-desktop: 70vw;
  --content-width-mobile: 85vw;
  --content-max-width: 1200px;

  /* Enhanced spacing for sections */
  --section-spacing-desktop: 4rem; /* 64px */
  --section-spacing-mobile: 3rem; /* 48px */
  --section-padding-desktop: 3rem; /* 48px */
  --section-padding-mobile: 2rem; /* 32px */

  /* Redesign tokens */
  --section-bg-contrast: #F5F5F3;
  --card-bg-light: var(--paper-card);
  --font-size-display: clamp(2.5rem, 6vw, 5rem);
  --font-size-hero-sub: clamp(1rem, 2vw, 1.25rem);
  --advantage-card-radius: 20px;
  --section-gap: clamp(4rem, 8vw, 8rem);

  /* Enhanced glassmorphism */
  --glass-bg-elevated: rgba(255, 255, 255, 0.85);
  --glass-border-elevated: rgba(255, 255, 255, 0.3);
  --glass-shadow-elevated:
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 16px 64px rgba(0, 0, 0, 0.12),
    0 24px 96px rgba(0, 0, 0, 0.15);

  /* Button enhancements */
  --button-padding-v: 1rem; /* 16px */
  --button-padding-h: 2rem; /* 32px */
  --button-shadow: none;
  --button-shadow-hover: none;

  /* Form contrast */
  --input-bg: var(--color-white);
  --input-border: var(--color-border);

  /* Input styling variables */
  --input-border-width: 1.5px;
  --input-border-radius: var(--radius-sm);
  --input-padding: var(--spacing-sm);
  --input-font-size: var(--font-size-base);
  --input-transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
  --input-focus-shadow: 0 0 0 2px var(--color-primary-light);
  --input-placeholder-color: rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Global Styles with Cross-Platform Rules
   ========================================================================== */

html {
  /* Rule 44: text-size-adjust */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Rule 41: color-scheme */
  color-scheme: light;

  /* Smooth scroll для якорних посилань */
  scroll-behavior: smooth;

  /* Base font size for rem calculations */
  font-size: 16px;

  /* Критично: запобігає горизонтальному скролу */
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;

  /* Запобігає зайвому скролу через fixed елементи */
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  
  /* EMERGENCY FIX: Force vertical scroll */
  overflow-y: scroll;

  background-color: var(--color-bg);
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--paper);

  /* Rule 32: overscroll-behavior - REMOVED to fix stuck scroll */
  /* overscroll-behavior: none; */

  /* Rule 42: font-smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Rule 45: scrollbar-gutter */
  scrollbar-gutter: stable;

  /* Safe area padding for notched devices */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);

  /* Критично: запобігає горизонтальному скролу */
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;

  /* Запобігає зайвому скролу через fixed елементи */
  min-height: 100vh;
  min-height: 100dvh; /* Ensure body takes full height */
  height: auto;
  
  /* EMERGENCY FIX: Ensure body allows scroll */
  overflow-y: visible !important;
}

/* На мобільних робимо body прозорим, щоб фонове зображення було видиме */
@media (width <= 767px) {
  body {
    background-color: var(--paper);
  }
}

/* Rule 33: touch-action для інтерактивних елементів */
button,
a,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
[tabindex] {
  touch-action: manipulation;
}

/* Rule 34: -webkit-overflow-scrolling (deprecated але залишаємо для старих iOS) */
.scrollable {
  -webkit-overflow-scrolling: touch;
}

/* Rule 111: Touch targets minimum 44px */
button,
a,
input,
select,
textarea {
  min-height: 2rem;
  min-width: 2rem;
}

/* Rule 40: accent-color для inputs */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--color-primary);
}

/* Rule 50: input autofill styling - MOVED TO components/form.css */
/* Autofill стилі тепер в form.css для кращого контролю */

/* Rule 113: Focus indicators */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Видалити outline для мишки, але залишити для клавіатури */
:focus:not(:focus-visible) {
  outline: none;
}

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

/* Rule 31: Hover effects тільки для пристроїв з hover */
@media (hover: hover) and (pointer: fine) {
  /* Забезпечуємо, що кнопки не мають підкреслення при hover */
  .button:hover,
  a.button:hover,
  [class*="button"]:hover {
    text-decoration: none;
  }

  /* Тільки для голих кнопок без власного класу */
  button:not([class]):hover {
    opacity: 0.9;
  }
}

/* Rule 35: backdrop-filter з -webkit- prefix */
.modal-backdrop,
.overlay {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Rule 43: text-wrap balance для заголовків */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  color: var(--color-text);
}

h1, h2, h3 {
  font-family: var(--font-family-heading);
}

h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

h2 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* HTMX Indicator - прихований за замовчуванням */
.htmx-indicator {
  display: none;
}

/* Показується коли є HTMX запит */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: block;
}

/* Загальний стиль для заголовків секцій (як h1 в hero) */
.section-title {
  font-family: var(--font-family-heading);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  color: var(--color-text);
  margin-bottom: 2rem;
}

/* Декоративна лінія-акцент під заголовком */
.section-title--decorated::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 12px auto 0;
}

/* Eyebrow - мітка над заголовком секції з декоративними лініями */
.section-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  flex: 0 0 28px;
  height: 1px;
  background: var(--color-primary);
}

/* ==========================================================================
   Scroll Reveal - fade-up при появі в viewport
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal--scale {
  transform: scale(0.96);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.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;
}

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* Rule 27: 100vh з fallback на 100dvh */
.full-height {
  height: 100vh; /* Fallback */
  height: 100dvh;
}

/* Content width constraint utility */
.content-constrained {
  width: 100%;
  max-width: min(var(--content-width-desktop), var(--content-max-width));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (width <= 767px) {
  .content-constrained {
    max-width: var(--content-width-mobile);
  }
}

/* Large desktop (1920px+) */
@media (width >= 1920px) {
  :root {
    --content-max-width: 1600px;
  }

  .container {
    max-width: 1600px;
  }
}

/* 2K monitors (2560px+) */
@media (width >= 2560px) {
  :root {
    --content-max-width: 2000px;
  }

  .container {
    max-width: 2000px;
  }
}

/* 4K monitors (3840px+) */
@media (width >= 3840px) {
  :root {
    --content-max-width: 2800px;
  }

  .container {
    max-width: 2800px;
  }
}

/* Fixed menu offset utility */
.fixed-menu-offset {
  padding-top: var(--header-height, 80px);
  padding-bottom: var(--nav-height, 70px);
}

/* Main content offset for fixed menus */
.main-content {
  /* Desktop: top padding for header, bottom for nav */
  padding-top: calc(var(--header-height, 80px) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px));
}

/* Прибрати padding-bottom, якщо після main-content йде footer */
.main-content:has(+ .footer) {
  padding-bottom: 0;
}

@media (width <= 767px) {
  .main-content {
    /* Mobile: top padding for header, bottom for nav */
    padding-top: calc(var(--header-height, 80px) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px));
  }

  .main-content:has(+ .footer) {
    padding-bottom: 0;
  }

  /* Додати margin-bottom для останньої секції перед footer, щоб навігація не перекривала контент */
  .main-content:has(+ .footer) > *:last-child > section:last-child,
  .main-content:has(+ .footer) section:last-child,
  .main-content:has(+ .footer) .glass-section:last-child {
    margin-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px) + 20px);
    scroll-margin-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px) + 20px);
  }
}

/* Прибрати margin-bottom у останньої секції перед footer */

/* Загальні правила для всіх секцій */
.main-content > *:last-child > section:last-child,
.main-content section:last-child,
.main-content .glass-section:last-child {
  margin-bottom: 0;
}

/* Додати scroll-margin-bottom для останніх секцій на мобільних, щоб навігація не перекривала контент */
@media (width <= 767px) {
  .main-content > *:last-child > section:last-child,
  .main-content section:last-child,
  .main-content .glass-section:last-child {
    scroll-margin-bottom: calc(var(--nav-height, 70px) + env(safe-area-inset-bottom, 0px) + 20px);
  }

  /* Додати scroll-margin-top для перших секцій, щоб контент не обрізався зверху */
  .main-content > *:first-child > section:first-child,
  .main-content section:first-child,
  .main-content .glass-section:first-child {
    scroll-margin-top: calc(var(--header-height, 80px) + env(safe-area-inset-top, 0px) + 20px);
  }

  /* Додати додатковий padding-top для першої секції, якщо вона може бути обрізана */
  .main-content > *:first-child > section:first-child,
  .main-content section:first-child {
    padding-top: max(20px, env(safe-area-inset-top, 20px));
  }
}

/* Стилі для сторінки "Про нас" - світла тема */
.about-page .glass-section p {
  color: var(--ink-light);
  line-height: 1.7;
}

.about-page .glass-section p:not(.about-hero__subtitle) {
  color: var(--ink-light);
}

.about-page .glass-section h2 {
  color: var(--ink);
}

.about-page .glass-section ul li {
  color: var(--ink-light);
  line-height: 1.7;
}

.about-page .glass-section strong {
  color: var(--ink);
  font-weight: 700;
}

/* Специфічно для hero-content (головна сторінка) - 4rem відстань перед footer */
.hero-content > section:last-child,
.hero-content .glass-section:last-child,
.hero-content > section.consultation-section:last-child {
  margin-bottom: 4rem;
}

/* Специфічні правила для різних типів секцій */
.main-content .consultation-section:last-child,
.hero-content .consultation-section:last-child,
.main-content .testimonials-section:last-child,
.hero-content .testimonials-section:last-child,
.main-content .achievements:last-child,
.hero-content .achievements:last-child,
.main-content .advantages-carousel:last-child,
.hero-content .advantages-carousel:last-child,
.main-content .courses-section:last-child,
.hero-content .courses-section:last-child,
.main-content .pricing-section:last-child,
.hero-content .pricing-section:last-child {
  margin-bottom: 0;
}

/* Перевизначення для hero-content - завжди 4rem для останньої секції */
.hero-content .consultation-section:last-child,
.hero-content .testimonials-section:last-child,
.hero-content .achievements:last-child,
.hero-content .advantages-carousel:last-child,
.hero-content .courses-section:last-child,
.hero-content .pricing-section:last-child {
  margin-bottom: 4rem;
}

/* ==========================================================================
   Error pages (404, 500)
   ========================================================================== */

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg-dark);
  color: var(--color-text);
  text-align: center;
  padding: 2rem;
}

.error-page__container {
  max-width: 480px;
}

.error-page__code {
  font-size: clamp(5rem, 15vw, 10rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
  margin: 0 0 1rem;
}

.error-page__message {
  font-size: 1.125rem;
  color: var(--color-text-muted);
  margin: 0 0 2rem;
  line-height: 1.6;
}

.error-page__link {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--color-primary);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--radius-md, 8px);
  font-weight: 600;
  transition: background 0.2s ease;
}

.error-page__link:hover {
  background: var(--color-primary-hover);
}

/* GTM noscript fallback iframe - прихований, не впливає на layout */
.gtm-noscript {
  display: none;
  visibility: hidden;
}