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

/* CSS Custom Properties */
:root {
  /* Colors - червоний дизайн */
  --color-primary: #e71e14;
  --color-primary-hover: #b81810;
  --color-primary-light: rgba(231, 30, 20, 0.1);
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-error: #e71e14;
  --color-warning: #ffc107;
  --color-info: #6c757d;

  /* Чорно-білі: */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-text: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.8);
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.2);
  --color-bg: #FFFFFF;
  --color-bg-dark: #000000;
  --color-bg-secondary: #F5F5F5;

  /* 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: rgba(255, 255, 255, 0.1);

  /* 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-base: -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 */

  /* 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: 1000;
  --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 */

  /* 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: 0 4px 12px rgba(231, 30, 20, 0.25);
  --button-shadow-hover: 0 6px 20px rgba(231, 30, 20, 0.35);

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

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #f8f9fa;
    --color-bg: #212529;
    --color-bg-secondary: #343a40;
    --color-border: #495057;
  }
}

/* ==========================================================================
   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 dark;

  /* 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;
  overflow-y: 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-white);
  background-color: var(--color-bg);

  /* Rule 32: overscroll-behavior */
  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: 0;
  height: auto;
}

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

/* 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 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
  -webkit-text-fill-color: var(--color-text);
  border-color: var(--color-primary);
  transition: background-color 5000s ease-in-out 0s;
}

/* 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) {
  a:hover {
    text-decoration: underline;
  }

  button: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-white);
}

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

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

/* Загальний стиль для заголовків секцій (як h1 в hero) */
.section-title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--color-white);
  margin-bottom: 2rem;
  text-shadow:
    0 3px 6px rgba(0, 0, 0, 0.5),
    0 6px 12px rgba(0, 0, 0, 0.4),
    0 9px 18px rgba(0, 0, 0, 0.3),
    0 12px 24px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   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 */
    margin-top: 4rem;
    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(--color-white);
  line-height: 1.7;
}

.about-page .glass-section p:not(.about-hero__subtitle) {
  color: rgba(255, 255, 255, 0.95);
}

.about-page .glass-section h2 {
  color: var(--color-white);
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.4);
}

.about-page .glass-section ul li {
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.7;
}

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

@media (width <= 767px) {
  .about-page .glass-section p {
    color: rgba(255, 255, 255, 0.98);
  }

  .about-page .glass-section ul li {
    color: rgba(255, 255, 255, 0.98);
  }
}

/* Специфічно для 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 .faq-section:last-child,
.hero-content .faq-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 .faq-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;
}