/* ==========================================================================
   MAIN.CSS
   Точка входа. Порядок импорта = порядок каскада Atomic Design:
   variables -> reset -> atoms -> molecules -> organisms -> templates
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Manrope:wght@500;600;700;800&display=swap');

@import 'variables.css';
@import 'atoms.css';
@import 'molecules.css';
@import 'organisms.css';
@import 'templates.css';

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

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

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

body {
  font-family: var(--font-secondary);
  background: var(--color-bg-main);
  color: var(--color-text-main);
  line-height: var(--lh-body);
  min-height: 100vh;
  min-height: 100svh;
}

img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }

/* ==========================================================================
   ACCESSIBILITY & INTERACTIONS
   ========================================================================== */

/* Видимый фокус для клавиатурной навигации */
:focus-visible {
  outline: var(--bw-md) solid var(--color-accent-primary);
  outline-offset: var(--bw-md);
}

/* Сброс системной подсветки только для глобальных интерактивных тегов */
a, button, summary, details, label, input, textarea, select, [role="button"],
img, svg, picture {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ==========================================================================
   GLOBAL LAYOUT FIXES
   ========================================================================== */

html, body {
  width: 100%;
  position: relative;
  /* Убрали overflow-x: hidden, чтобы спасти position: sticky */
}

/* Глобальный враппер для защиты от горизонтального скролла */
.l-page-wrapper {
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* ==========================================================================
   CUSTOM SELECTION (Кастомне виділення тексту)
   ========================================================================== */
::selection {
  background-color: var(--color-accent-primary); /* Наша кислотна заливка */
  color: var(--color-bg-main); /* Темний колір тексту для контрасту */
  text-shadow: none; /* Вимикаємо тіні, щоб виділений текст був монолітним */
}

/* Фолбек для старих версій Firefox */
::-moz-selection {
  background-color: var(--color-accent-primary);
  color: var(--color-bg-main);
  text-shadow: none;
}