:root {
  --kh-accent: #2e9e5b;
  --kh-accent-dark: #237a46;
  --kh-text: #1f2933;
  --kh-muted: #6b7785;
  --kh-bg-soft: #f5f8f6;
  --kh-radius: 14px;
  --kh-shadow: 0 4px 14px rgba(20, 40, 30, 0.08);
  --kh-shadow-hover: 0 10px 28px rgba(20, 40, 30, 0.16);
  --kh-ease: 0.25s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- 1. База ---------- */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  color: var(--kh-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img {
  max-width: 100%;
  height: auto;
}
p {
  max-width: 75ch;
} /* комфортна довжина рядка для довгих описів */
h1,
h2,
h3,
h4 {
  line-height: 1.25;
  text-wrap: balance;
}
::selection {
  background: var(--kh-accent);
  color: #fff;
}

/* Якір #footer не ховається під шапкою */
[id] {
  scroll-margin-top: 90px;
}

/* ---------- 2. Доступність: чіткий фокус з клавіатури ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--kh-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. Посилання ---------- */
a {
  transition:
    color var(--kh-ease),
    opacity var(--kh-ease);
}
main a:not([class]):hover,
article a:not([class]):hover {
  color: var(--kh-accent-dark);
}

/* ---------- 4. Кнопки ("Приєднатись", "Перейти до платформи", "Увійти") ---------- */
a[href$="/register"],
a[href$="/login"],
a[href$="/platform"],
button[type="submit"] {
  transition:
    transform var(--kh-ease),
    box-shadow var(--kh-ease),
    background-color var(--kh-ease),
    color var(--kh-ease);
}
a[href$="/register"]:hover,
a[href$="/platform"]:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 158, 91, 0.28);
}
a[href$="/register"]:active,
a[href$="/platform"]:active,
button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---------- 5. Навігація ---------- */
header a,
nav a {
  position: relative;
}
header nav a:not(:has(img))::after,
nav a:not(:has(img)):not([href$="/register"]):not([href$="/login"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--kh-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--kh-ease);
}
header nav a:hover::after,
nav a:hover::after {
  transform: scaleX(1);
}

/* ---------- 6. Логотипи учасників ("Хто з нами") ---------- */
img[src*="/storage/company/"] {
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition:
    filter var(--kh-ease),
    opacity var(--kh-ease),
    transform var(--kh-ease);
}
a:hover > img[src*="/storage/company/"],
img[src*="/storage/company/"]:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

/* ---------- 7. Галерея на головній ---------- */
a:has(> img[src*="/storage/static_gallery/"]) {
  display: block;
  overflow: hidden;
  border-radius: var(--kh-radius);
  box-shadow: var(--kh-shadow);
  transition: box-shadow var(--kh-ease);
}
a:has(> img[src*="/storage/static_gallery/"]):hover {
  box-shadow: var(--kh-shadow-hover);
}
img[src*="/storage/static_gallery/"] {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
a:hover > img[src*="/storage/static_gallery/"] {
  transform: scale(1.07);
}

/* ---------- 8. Новини: посилання як картки ---------- */
main a[href*="/news/"]:not(:has(img)) {
  display: block;
  padding: 14px 18px;
  border-left: 4px solid transparent;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--kh-ease),
    border-color var(--kh-ease),
    transform var(--kh-ease);
}
main a[href*="/news/"]:not(:has(img)):hover {
  background: var(--kh-bg-soft);
  border-left-color: var(--kh-accent);
  transform: translateX(4px);
}

/* ---------- 9. Сторінка "Навчання": плитки груп курсів ---------- */
a[href*="/course_group/"] {
  display: block;
  border-radius: var(--kh-radius);
  overflow: hidden;
  box-shadow: var(--kh-shadow);
  transition:
    transform var(--kh-ease),
    box-shadow var(--kh-ease);
}
a[href*="/course_group/"]:hover {
  transform: translateY(-6px);
  box-shadow: var(--kh-shadow-hover);
}
/* Пусті посилання на цій сторінці без тексту — додаємо мінімальну клікабельну зону */
a[href*="/course_group/"]:empty {
  min-height: 160px;
}

/* ---------- 10. Відгуки (блок з іменами жирним) ---------- */
blockquote {
  position: relative;
  margin: 0;
  padding: 20px 24px 20px 28px;
  background: var(--kh-bg-soft);
  border-left: 4px solid var(--kh-accent);
  border-radius: 0 var(--kh-radius) var(--kh-radius) 0;
  box-shadow: var(--kh-shadow);
}

/* ---------- 11. Зображення в описах курсів і новин ---------- */
img[src*="/storage/news/"] {
  border-radius: 12px;
  box-shadow: var(--kh-shadow);
}

/* ---------- 12. Відео (iframe YouTube) ---------- */
iframe[src*="youtube"],
iframe[src*="youtu.be"] {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  border: 0;
  border-radius: var(--kh-radius);
  box-shadow: var(--kh-shadow);
}

/* ---------- 13. Форми ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  border: 1.5px solid #d5dce3;
  border-radius: 10px;
  padding: 11px 14px;
  font: inherit;
  transition:
    border-color var(--kh-ease),
    box-shadow var(--kh-ease);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--kh-accent);
  box-shadow: 0 0 0 4px rgba(46, 158, 91, 0.15);
  outline: none;
}

/* ---------- 14. Футер ---------- */
footer a[href^="tel:"],
footer a[href^="mailto:"],
footer a {
  color: inherit;
  opacity: 0.85;
  text-decoration: none;
}
footer a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 15. Мобільна версія ---------- */
@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
  p {
    max-width: none;
  }
  main a[href*="/news/"]:not(:has(img)) {
    padding: 12px 12px;
  }
  a[href*="/course_group/"]:hover {
    transform: none;
  } /* без "стрибків" на дотик */
}

/* ---------- 16. Повага до налаштування "зменшити рух" ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}