/*
Theme Name: GeneratePress WordsSpace Child
Template: generatepress
Version: 1.0.0
*/

/* 1. ГЛОБАЛЬНІ НАЛАШТУВАННЯ ТА ЗМІННІ */
:root {
  --bg: #05080E;
  --cyan: #00E5FF;
  --gold: #FCD65B;
  --text: #C9D6E5;
  --muted: #73869B;
  --line: rgba(0, 229, 255, .18);
  --panel: rgba(8, 16, 28, .55);
  --display: 'Unbounded', sans-serif;
  --body: 'Manrope', sans-serif;
}

/* 2. ПЕРЕФАРБУВАННЯ СТРУКТУРИ GENERATEPRESS */
body, html {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--body) !important;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Космічна сітка та неоновий градієнт на весь сайт */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), 
                    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 78%);
  opacity: .5;
}

body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: -10%;
  width: 520px;
  height: 520px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 229, 255, .16), transparent 65%);
  filter: blur(18px);
}

/* Перефарбовуємо контейнери контенту GeneratePress у ваші напівпрозорі панелі */
.inside-article, 
.separate-containers .inside-article,
.inside-page-header,
.sidebar .widget {
  background-color: var(--panel) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 26px rgba(0,229,255,.10), inset 0 0 20px rgba(0,229,255,.05) !important;
  color: var(--text) !important;
}

/* 3. ТИПОГРАФІКА ТА ЗАГОЛОВКИ */
h1, h2, h3, .main-title a {
  font-family: var(--display) !important;
  color: #EAF6FF !important;
}

h1, .main-title a {
  font-weight: 800;
  text-shadow: 0 0 22px rgba(0, 229, 255, .35) !important;
}

a {
  color: var(--cyan) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--gold) !important;
}

/* 4. АДАПТАЦІЯ НАВІГАЦІЇ ТА ШАПКИ GENERATEPRESS */
.site-header, 
.main-navigation, 
.main-navigation ul ul,
footer.site-footer {
  background-color: transparent !important;
}

.main-navigation .main-nav ul li a, 
.menu-toggle {
  color: var(--text) !important;
  font-family: var(--body);
}

.main-navigation .main-nav ul li:hover > a, 
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--cyan) !important;
  background-color: rgba(0, 229, 255, 0.08) !important;
}

/* 5. СТИЛІЗАЦІЯ СТАНДАРТНИХ КНОПОК */
button, html input[type="button"], input[type="reset"], input[type="submit"], .button {
  background-color: rgba(0, 229, 255, .04) !important;
  color: #EAF6FF !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 13px !important;
  font-family: var(--body);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(0, 229, 255, .14) !important;
  transition: all 0.3s ease;
}

button:hover, html input[type="button"]:hover, input[type="submit"]:hover, .button:hover {
  background-color: rgba(0, 229, 255, 0.15) !important;
  border-color: var(--cyan) !important;
  color: var(--gold) !important;
}
/* ПЕРЕФАРБУВАННЯ НИЖНЬОГО ФУТЕРА */
.site-footer, 
.site-info,
footer.site-footer {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
}

/* Колір посилань у футері (наприклад, GeneratePress) */
.site-info a,
.site-footer a {
  color: var(--cyan) !important;
  opacity: 0.8;
}

.site-info a:hover,
.site-footer a:hover {
  color: var(--gold) !important;
  opacity: 1;
}
/* 1. ПЕРЕФАРБУВАННЯ БЛОКУ КОМЕНТАРІВ */
#comments,
.comment-respond,
.comments-area {
  background-color: var(--panel) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 26px rgba(0, 229, 255, .10), inset 0 0 20px rgba(0, 229, 255, .05) !important;
  padding: 30px !important;
  margin-top: 30px !important;
}

/* 2. ТЕКСТ ТА ЗАГОЛОВКИ У КОМЕНТАРІЯХ */
.comment-reply-title {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  color: #EAF6FF !important;
  text-shadow: 0 0 22px rgba(0, 229, 255, .35) !important;
  margin-bottom: 20px !important;
}

/* Текст "Logged in as..." та інші службові написи */
.comment-respond,
.comment-respond p,
.logged-in-as {
  color: var(--text) !important;
}

/* Приглушений текст приміток (наприклад, про обов'язкові поля) */
.comment-notes, 
.logged-in-as {
  color: var(--muted) !important;
}

/* 3. СТИЛІЗАЦІЯ ПОЛЯ ВВЕДЕННЯ ТЕКСТУ (TEXTAREA) */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"] {
  background-color: rgba(5, 8, 14, 0.6) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  color: #EAF6FF !important;
  padding: 15px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Ефект фокусу на полі введення */
.comment-form textarea:focus,
.comment-form input:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important;
  outline: none !important;
}
/* ВИПРАВЛЕННЯ СТАБІЛЬНОСТІ ДЛЯ КЛАСИЧНОГО РЕДАКТОРА */

/* Повертаємо стабільну анімацію для карток */
.card {
  display: flex !important;
  gap: 16px;
  align-items: flex-start;
  background: var(--panel) !important;
  border: 1px solid rgba(255, 255, 255, .06) !important;
  border-radius: 16px !important;
  padding: 18px !important;
  margin-bottom: 14px !important;
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.55s cubic-bezier(.2,.7,.3,1) forwards;
}

/* Виправляємо послідовну появу карток незалежно від структури WordPress */
.card:nth-of-type(1) { animation-delay: 0.05s; }
.card:nth-of-type(2) { animation-delay: 0.12s; }
.card:nth-of-type(3) { animation-delay: 0.19s; }
.card:nth-of-type(4) { animation-delay: 0.26s; }
.card:nth-of-type(5) { animation-delay: 0.33s; }
.card:nth-of-type(6) { animation-delay: 0.40s; }

@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}