/* =============================================================
   Mezgil Kyzmat — перешивка внутренних страниц под стиль лендинга
   Подключается на всех НЕ-главных страницах (см. functions.php).
   Цель: убрать «вид из коробки» Exertio, привести к циан-бренду
   (#0891B2) и визуальному языку front-page.php (Montserrat + Inter,
   радиусы 16px, мягкие тени, светлый фон #F0F7F9).
   Бренд-канон: BRAND.json. Primary темы (#009cbd) уже близок к циану —
   массово не перекрашиваем, выравниваем только ключевые интерактивы.
   ============================================================= */

:root {
  --mz-accent: #0891B2;
  --mz-accent-d: #0E7490;
  --mz-accent-2: #155E75;
  --mz-ink: #083344;
  --mz-ink-2: #334155;
  --mz-soft: #F0F7F9;
  --mz-line: #d9e7ec;
  --mz-radius: 16px;
  --mz-radius-sm: 12px;
  --mz-shadow-sm: 0 1px 2px rgba(8,49,68,.06), 0 1px 3px rgba(8,49,68,.05);
  --mz-shadow: 0 8px 24px rgba(8,49,68,.08);
  --mz-shadow-lg: 0 24px 60px rgba(8,49,68,.14);
  --mz-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --- Типографика заголовков: единый с лендингом Montserrat --- */
.fr-list-product h1,
.fr-lance-details h1, .fr-lance-details h2, .fr-lance-details h3, .fr-lance-details h4,
.project-sidebar .heading h4,
.services-filter-2 .heading-area h4,
.exertio-services-box h3, .exertio-services-box h4,
.card .card-title,
.dashboard-content h1, .dashboard-content h2, .dashboard-content h3, .dashboard-content h4 {
  font-family: var(--mz-display);
  letter-spacing: -.01em;
}

/* =============================================================
   1. БАННЕР СТРАНИЦЫ — был серый шаблон (sz.png), стал циан-градиент
   ============================================================= */
section.fr-list-product {
  background: linear-gradient(125deg, var(--mz-accent-2) 0%, var(--mz-accent-d) 45%, var(--mz-accent) 100%) !important;
  background-image:
    radial-gradient(900px 380px at 82% -20%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(700px 360px at 8% 120%, rgba(8,49,68,.30), transparent 55%),
    linear-gradient(125deg, var(--mz-accent-2) 0%, var(--mz-accent-d) 45%, var(--mz-accent) 100%) !important;
  position: relative;
  padding: clamp(54px, 6vw, 96px) 0 clamp(48px, 5vw, 84px);
  border-bottom: 0;
}
section.fr-list-product::after {
  /* лёгкая «зернистая» волна снизу, отделяет баннер от контента */
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px; height: 28px;
  background: var(--mz-soft);
  clip-path: ellipse(75% 100% at 50% 100%);
}
section.fr-list-product .fr-list-srch h1 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.7rem, 1.1rem + 2.4vw, 2.9rem);
  line-height: 1.08;
  margin: 0 0 .35em;
  text-shadow: 0 2px 18px rgba(8,49,68,.25);
}
section.fr-list-product .fr-list-details ul { margin: 0; padding: 0; }
section.fr-list-product .fr-list-details ul li,
section.fr-list-product .fr-list-details ul li a {
  color: rgba(255,255,255,.86);
  font-weight: 500;
}
section.fr-list-product .fr-list-details ul li a:hover { color: #fff; text-decoration: underline; }

/* =============================================================
   2. ФОН КОНТЕНТА — мягкий бренд-светлый вместо плоского серого
   ============================================================= */
.bg-gray-color { background: var(--mz-soft) !important; }
body:not(.home) { background: var(--mz-soft); }

/* =============================================================
   3. ШАПКА — чище, мягкая тень, бренд-наведение на пунктах
   ============================================================= */
.fr-menu.sb-header {
  background: #fff;
  box-shadow: 0 1px 0 var(--mz-line), 0 6px 20px rgba(8,49,68,.05);
}
.fr-menu .sb-menu > ul > li > a {
  color: var(--mz-ink);
  font-weight: 600;
  transition: color .18s ease;
}
.fr-menu .sb-menu > ul > li > a:hover { color: var(--mz-accent); }
/* наши добавленные пункты навигации */
.fr-menu .sb-menu > ul > li.mz-nav-item > a { position: relative; }
.fr-menu .sb-menu > ul > li.mz-nav-item > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 2px;
  background: var(--mz-accent); border-radius: 2px; transition: right .22s ease;
}
.fr-menu .sb-menu > ul > li.mz-nav-item > a:hover::after { right: 0; }

/* =============================================================
   4. КНОПКИ — выравниваем на бренд-циан, мягкий hover/подъём
   ============================================================= */
.btn-theme,
.btn.btn-theme,
a.btn-theme {
  background: var(--mz-accent) !important;
  border-color: var(--mz-accent) !important;
  color: #fff !important;            /* контраст: текст кнопок всегда белый */
  border-radius: var(--mz-radius-sm) !important;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(8,145,178,.22);
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-theme *, .btn.btn-theme *, a.btn-theme * { color: #fff !important; }
.btn-theme:hover, .btn.btn-theme:hover, a.btn-theme:hover {
  background: var(--mz-accent-d) !important;
  border-color: var(--mz-accent-d) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(8,145,178,.30);
}
.btn-theme-secondary, a.btn-theme-secondary {
  border: 1.5px solid var(--mz-accent) !important;
  color: var(--mz-accent) !important;
  background: transparent !important;
  border-radius: var(--mz-radius-sm) !important;
  font-weight: 600;
  transition: all .18s ease;
}
.btn-theme-secondary:hover, a.btn-theme-secondary:hover {
  background: var(--mz-accent) !important;
  color: #fff !important;
}

/* =============================================================
   5. КАРТОЧКИ И БЛОКИ — радиус, тень, бордер, подъём при наведении
   ============================================================= */
.card,
.project-sidebar,
.services-filter-2,
.exertio-services-box,
.fr-box, .freelancer-box, .fr-grid-box {
  background: #fff;
  border: 1px solid var(--mz-line) !important;
  border-radius: var(--mz-radius) !important;
  box-shadow: var(--mz-shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.exertio-services-box:hover,
.fr-box:hover, .freelancer-box:hover, .fr-grid-box:hover {
  box-shadow: var(--mz-shadow);
  transform: translateY(-3px);
  border-color: #bfe0e8 !important;
}
.project-sidebar .heading h4,
.services-filter-2 .heading-area h4 { color: var(--mz-ink); font-weight: 700; }
.project-sidebar .heading a { color: var(--mz-accent) !important; font-weight: 600; }

/* =============================================================
   6. ФОРМЫ — фокус в бренд-цвет
   ============================================================= */
.form-control:focus,
.services-filter-2 input:focus,
.project-widgets input:focus,
select:focus, textarea:focus {
  border-color: var(--mz-accent) !important;
  box-shadow: 0 0 0 3px rgba(8,145,178,.15) !important;
  outline: none;
}

/* =============================================================
   7. АКЦЕНТ-ССЫЛКИ И МЕЛОЧИ — мягко к бренд-циану
   ============================================================= */
.fr-lance-details a:not(.btn):not(.btn-theme):not(.btn-theme-secondary):hover { color: var(--mz-accent); }
/* Переключатель вида (список/сетка): точки иконки рисуются span-фоном.
   На АКТИВНОЙ кнопке фон циан → точки должны быть БЕЛЫМИ (иначе сливаются),
   на неактивной — в бренд-циане поверх белого. */
.top-filters li a.active span,
.services-list-icon.active span,
.services-list-icon.list-style.active span { background: #fff !important; }
.top-filters li a:not(.active) span,
.services-list-icon:not(.active) span { background: var(--mz-accent) !important; }

/* «Найдено N …» — заголовок результатов покрупнее и в ink */
.services-filter-2 .heading-area h4,
.fr-lance-details .heading-area h4 { font-size: 1.15rem; }

/* =============================================================
   8. КАБИНЕТ (/dashboard/) — sidebar и активный пункт в бренд
   ============================================================= */
.sidebar .nav .nav-item.active > .nav-link,
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link .menu-title { color: var(--mz-accent) !important; }
.sidebar .nav .nav-item .nav-link:hover .menu-title,
.sidebar .nav .nav-item .nav-link:hover i { color: var(--mz-accent-d) !important; }
.dashboard-content .card { border-radius: var(--mz-radius) !important; }

/* =============================================================
   10. РЕГИСТР — тема ставит text-transform:capitalize («Найти Специалиста»),
   по-русски это неграмотно. Возвращаем нормальный регистр предложения.
   ============================================================= */
.fr-menu .sb-menu > ul > li > a,
.fr-list-product h1,
.fr-list-srch h1,
.fr-list-details ul li a,
.project-sidebar .heading h4,
.services-filter-2 .heading-area h4,
.heading-area h4, .heading h4 { text-transform: none !important; }

/* =============================================================
   9. АДАПТИВ — на мобильном баннер компактнее
   ============================================================= */
@media (max-width: 575px) {
  section.fr-list-product { padding: 40px 0 34px; }
  section.fr-list-product::after { height: 18px; }
}