/* clever-design.css */
/* Дизайн-код Clever: кольори, шрифти, відступи для всього блогу.
   Підключається після style.css теми, тому перекриває її стилі. */

/* 1) Токени */

:root {
  --clever-primary: #9fd36e;
  --clever-hover: #89ba5b;
  --clever-secondary: #cfe9b7;      /* Icons */
  --clever-warning: #ff7866;
  --clever-medium: #ffc75f;         /* Pending */
  --clever-crown: #ffffaa;

  --clever-main-bg: #ffffff;        /* Main bg - фон сторінки, як у шапки */
  --clever-block-bg: #ffffff;
  --clever-page-bg: #f2f6fa;        /* Secondary BG */
  --clever-border: #dae5f0;

  --clever-text: #344147;
  --clever-text-secondary: rgba(52, 65, 71, 0.7);
  --clever-placeholder: rgba(52, 65, 71, 0.2);

  --clever-highlight-bg: #f4ffeb;
  --clever-highlight-yellow: #ffe3af;
  --clever-highlight-green: #f5ffeb;
  --clever-sky: #eef9ff;

  --clever-padding-small: 16px;
  --clever-padding: 24px;
  --clever-padding-big: 32px;
  --clever-padding-large: 48px;
  --clever-padding-huge: 64px;

  --clever-font: Geologica, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* 2) Базовий текст */

body {
  font-family: var(--clever-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--clever-text);
  background: var(--clever-main-bg);
}

h1, h2, h3, h4, h5, h6,
input, textarea, select, button {
  font-family: var(--clever-font);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.5;
  color: var(--clever-text);
}

strong, b,
.entry-content strong, .entry-content b {
  font-weight: 600;
}

/* 3) Заголовки: h2 36 / h3 24 / h4 16, усі Semibold.
   h1 у макеті немає - робимо як h2, щоб назва статті не була дрібнішою за підзаголовки */

.entry-title,
.page-title,
.entry-content h1,
.entry-content h2 {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.5;
}

.entry-content h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th {
  font-size: 16px;
  line-height: 1.5;
}

/* Заголовки віджетів і секцій ("Новини НМТ", "Читайте також") - як h4 */
.mh-widget-title,
.mh-sidebar .wp-block-heading {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--clever-text);
  padding-bottom: 5px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--clever-primary);
}

/* 4) Картки записів у стрічках і віджетах */

.mh-loop .entry-title,
.mh-posts-grid-title,
.mh-posts-list-title,
.mh-custom-posts-small-title,
.mh-custom-posts-xl-title,
.mh-posts-large-title,
.mh-related-content .mh-posts-grid-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.mh-custom-posts-xl-title,
.mh-posts-large-title {
  font-size: 24px;
}

.mh-excerpt,
.mh-loop-excerpt,
.mh-posts-list-excerpt,
.mh-posts-grid-excerpt {
  font-size: 16px;
  line-height: 1.5;
}

/* 5) Другорядний текст: мета, хлібні крихти, підписи - subtitle 12 Regular */

.mh-meta,
.mh-meta a,
.mh-breadcrumb,
.mh-breadcrumb a,
.wp-caption-text,
.wp-block-image figcaption,
.mh-ticker-item-date,
.mh-ticker-item-cat {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--clever-text-secondary);
}

.mh-meta a:hover,
.mh-breadcrumb a:hover {
  color: var(--clever-hover);
}

/* 6) Посилання в тексті статті */

.entry-content a {
  color: var(--clever-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--clever-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.entry-content a:hover,
.entry-content a:focus-visible {
  color: var(--clever-hover);
  text-decoration-color: var(--clever-hover);
}

/* 7) Кнопки - 16 Semibold, Primary, при наведенні Hover */

input[type=submit],
button[type=submit],
.wp-block-search__button,
.wp-block-button__link,
.wp-element-button {
  font-family: var(--clever-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: none;
  color: #fff;
  background: var(--clever-primary);
  border: 0;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s ease;
}

input[type=submit]:hover,
button[type=submit]:hover,
.wp-block-search__button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  color: #fff;
  background: var(--clever-hover);
}

/* 8) Поля вводу - 16 Regular */

input[type=text],
input[type=search],
input[type=email],
input[type=tel],
input[type=url],
input[type=number],
textarea,
select,
.wp-block-search__input {
  font-family: var(--clever-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none;
  color: var(--clever-text);
  background: var(--clever-block-bg);
  border: 1px solid var(--clever-border);
  border-radius: 10px;
  padding: 10px 14px;
}

input[type=text]:hover,
input[type=search]:hover,
input[type=email]:hover,
input[type=tel]:hover,
input[type=url]:hover,
textarea:hover,
.wp-block-search__input:hover,
input:focus,
textarea:focus,
.wp-block-search__input:focus {
  border-color: var(--clever-primary);
  outline: none;
}

::placeholder {
  color: var(--clever-placeholder);
  opacity: 1;
}

/* Пошук у зеленій смузі під меню - компактніший, але теж 16px */
.mh-header-search .search-form input,
.mh-subheader .search-form input {
  padding: 2px 12px;
  border-radius: 8px;
}

/* 9) Навігація по рубриках і стрічка новин */

.mh-main-nav li,
.mh-main-nav li a {
  font-weight: 600;
}

.mh-ticker-title {
  font-weight: 600;
}

/* 10) Таблиці і цитати в статтях */

.entry-content table,
.entry-content td,
.entry-content th {
  border-color: var(--clever-border);
}

.entry-content th {
  font-weight: 600;
  background: var(--clever-page-bg);
}

blockquote {
  color: var(--clever-text);
  background: var(--clever-highlight-green);
  border-left-color: var(--clever-primary);
}

/* 11) Футер */

.footer {
  font-family: var(--clever-font);
  background: var(--clever-sky);
}

/* 12) Телефон: великі заголовки трохи менші, щоб довгі слова влазили в екран */

@media (max-width: 767px) {
  .entry-title,
  .page-title,
  .entry-content h1,
  .entry-content h2 {
    font-size: 28px;
  }

  .entry-content h3 {
    font-size: 20px;
  }

  .mh-custom-posts-xl-title,
  .mh-posts-large-title {
    font-size: 20px;
  }
}