/* Корисна інформація — фронтенд стилі
   Прагнемо до відповідності темі: використовуємо системні шрифти, успадковуємо кольори.
   Легка адаптивна сітка і картки підкатегорій з фоновими зображеннями. */

:root {
  --ki-gap: 16px;
  --ki-radius: 10px;
  --ki-overlay: rgba(0,0,0,0.35);
  --ki-overlay-strong: rgba(0,0,0,0.55);
  --ki-card-bg: #f3f4f6; /* fallback if no image */
  --ki-accent: #e72626; /* близько до кнопок cookie банера */
}

.ki-index,
.ki-index * { font-family: inherit; }

/* Full-width layout on rubric pages: remove theme container max-widths */
body.ki-fullwidth .site-main,
body.ki-fullwidth .content-area,
body.ki-fullwidth .site-content,
body.ki-fullwidth .container,
body.ki-fullwidth .wrap,
body.ki-fullwidth .container .site-main,
body.ki-fullwidth #primary {
  max-width: none !important;
  width: 100% !important;
}

/* Keep readable side paddings on small screens */
body.ki-fullwidth .site-main { padding-left: 12px; padding-right: 12px; }
@media (min-width: 1025px) {
  body.ki-fullwidth .site-main { padding-left: 16px; padding-right: 16px; }
}

/* Page header/title styling for better UX */
.ki-index .page-header,
body.ki-fullwidth .page-header {
  margin: 6px 0 18px;
}

.ki-index .page-header .page-title,
body.ki-fullwidth .page-header .page-title {
  display: inline-block;
  margin: 0 0 8px;
  font-size: 1.85rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2px;
  position: relative;
  padding-bottom: 6px;
}

.ki-index .page-header .page-title:after,
body.ki-fullwidth .page-header .page-title:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 68px;
  height: 3px;
  background: var(--ki-accent);
  border-radius: 2px;
}

@media (max-width: 600px) {
  .ki-index .page-header .page-title,
  body.ki-fullwidth .page-header .page-title {
    font-size: 1.5rem;
  }
}

.ki-index .ki-index-intro {
  margin-bottom: 20px;
  font-size: 1.05rem;
  line-height: 1.6;
}

.ki-section-title {
  margin: 24px 0 12px;
  font-size: 1.35rem;
}

/* Breadcrumbs */
.ki-breadcrumbs {
  font-size: 0.95rem;
  margin: 10px 0 14px;
  color: rgba(0,0,0,0.7);
}
.ki-breadcrumbs a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(0,0,0,0.25); }
.ki-breadcrumbs a:hover { color: var(--ki-accent); border-color: var(--ki-accent); }
.ki-breadcrumbs .sep { margin: 0 6px; opacity: .6; }

/* Subcategories grid */
.ki-subcats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ki-gap);
}

@media (max-width: 1024px) {
  .ki-subcats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ki-subcats__grid { grid-template-columns: 1fr; }
}

.ki-card {
  position: relative;
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
  text-align: center; /* center text */
  min-height: 200px;
  padding: 16px;
  border-radius: var(--ki-radius);
  background: var(--ki-card-bg);
  background-size: cover;
  background-position: center;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.ki-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--ki-overlay);
  transition: background 160ms ease;
}
.ki-card:hover .ki-card__overlay { background: var(--ki-overlay-strong); }
.ki-card__content {
  position: relative;
  z-index: 1;
  display: block;
}
.ki-card__title {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
}
.ki-card__desc {
  display: block;
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.95;
}

/* Popular lists and internal links */
.ki-popular__list,
.ki-internal-links { list-style: none; padding: 0; margin: 8px 0 0; }
.ki-popular__list li,
.ki-internal-links li { margin: 6px 0; }
.ki-popular__list a,
.ki-internal-links a { text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.1); }
.ki-popular__list a:hover,
.ki-internal-links a:hover { color: var(--ki-accent); border-color: var(--ki-accent); }

/* Term page SEO text & sorting */
.ki-term-seo { margin: 10px 0 14px; font-size: 1rem; line-height: 1.6; }
.ki-sort { margin: 8px 0 18px; font-size: 0.95rem; }
.ki-sort a { text-decoration: none; margin: 0 4px; }
.ki-sort a:hover { color: var(--ki-accent); }

/* Related links block on single */
.ki-related { margin-top: 24px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.08); }
.ki-related h3 { margin: 0 0 10px; font-size: 1.1rem; }