/*
 * ДолгиПро — seo-pilot.css
 * Добавляется постпроцессором seo_pilot в <head> выбранных страниц.
 * Все правила скоупятся префиксом .dp-, глобальные стили не трогаем.
 * Мобильный минимум — 360px, focus-visible, семантическая разметка.
 */

/* ---------- Страница инструмента (/razbor-dolga/) ---------- */

.dp-tool-page {
  margin: 0;
  color: #1c2733;
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.55;
}

.dp-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

.dp-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #12426e;
  color: #ffffff;
  padding: 8px 14px;
  z-index: 10;
}

.dp-skip:focus {
  left: 8px;
  top: 8px;
}

.dp-header {
  border-bottom: 1px solid #dfe5eb;
  background: #ffffff;
}

.dp-header .dp-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.dp-brand {
  font-weight: 700;
  font-size: 20px;
  color: #12426e;
  text-decoration: none;
}

.dp-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dp-nav a {
  color: #1c2733;
  text-decoration: none;
  padding: 4px 2px;
}

.dp-nav a:hover {
  text-decoration: underline;
}

.dp-nav [aria-current="page"] a,
.dp-nav [aria-current="page"] {
  font-weight: 600;
}

.dp-breadcrumbs {
  font-size: 14px;
  color: #5b6a79;
  border-bottom: 1px solid #eef2f6;
}

.dp-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 8px 16px;
}

.dp-breadcrumbs li + li::before {
  content: "→";
  margin-right: 8px;
  color: #9aa7b4;
}

.dp-breadcrumbs a {
  color: #12426e;
}

/* ---------- Инструмент подбора ---------- */

.dp-tool {
  margin: 24px 0;
  padding: 20px 16px;
  border: 1px solid #dfe5eb;
  border-radius: 10px;
  background: #f8fafc;
}

.dp-tool-hint {
  margin: 0 0 16px;
  font-size: 14px;
  color: #5b6a79;
}

.dp-question {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #d3dce4;
  border-radius: 8px;
  background: #ffffff;
}

.dp-question legend {
  font-weight: 600;
  padding: 0 4px;
}

.dp-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.dp-option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
}

.dp-option input {
  margin: 0;
}

.dp-question select {
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
  padding: 8px 10px;
  font: inherit;
  color: inherit;
  border: 1px solid #b9c5d0;
  border-radius: 6px;
  background: #ffffff;
}

.dp-btn,
.dp-btn-secondary {
  display: inline-block;
  font: inherit;
  border-radius: 8px;
  cursor: pointer;
  padding: 10px 18px;
}

.dp-btn {
  background: #12426e;
  border: 1px solid #12426e;
  color: #ffffff;
}

.dp-btn:hover {
  background: #0d3557;
}

.dp-btn-secondary {
  background: #ffffff;
  border: 1px solid #b9c5d0;
  color: #12426e;
  margin-top: 12px;
}

.dp-result {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #cfe0d8;
  border-left: 4px solid #1d7a53;
  border-radius: 8px;
  background: #ffffff;
}

.dp-result-title {
  margin: 0 0 8px;
  font-size: 20px;
}

.dp-result-links,
.dp-links,
.dp-sources {
  margin: 8px 0 0;
  padding-left: 20px;
}

.dp-result-links li,
.dp-links li,
.dp-sources li {
  margin: 4px 0;
}

.dp-tool-error {
  color: #8a2f2f;
}

.dp-noscript {
  padding: 14px;
  border: 1px dashed #b9c5d0;
  border-radius: 8px;
  background: #ffffff;
}

.dp-noscript ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

/* Статический блок материалов (виден без JS, индексируемый) */

.dp-materials {
  margin: 24px 0;
  padding: 16px;
  border: 1px solid #dfe5eb;
  border-radius: 8px;
  background: #f8fafc;
}

.dp-materials h2 {
  margin-top: 0;
}

/* ---------- Практический блок в статьях ---------- */

.dp-practical {
  margin: 28px 0;
  padding: 18px 16px;
  border: 1px solid #dfe5eb;
  border-left: 4px solid #12426e;
  border-radius: 8px;
  background: #f8fafc;
}

.dp-practical h2,
.dp-practical h3 {
  margin-top: 0;
}

.dp-checklist {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}

.dp-checklist li {
  position: relative;
  padding-left: 26px;
  margin: 6px 0;
}

.dp-checklist li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: #1d7a53;
  font-weight: 700;
}

.dp-updated {
  font-size: 13px;
  color: #5b6a79;
  margin-bottom: 0;
}

/* ---------- Связанный материал в карточках ---------- */

.dp-related {
  margin: 28px 0;
  padding: 16px;
  border: 1px solid #dfe5eb;
  border-radius: 8px;
  background: #f8fafc;
}

.dp-related h2,
.dp-related h3 {
  margin-top: 0;
}

/* ---------- CTA ---------- */

.dp-cta {
  margin: 28px 0;
  padding: 18px 16px;
  border: 1px solid #cfe0d8;
  border-left: 4px solid #1d7a53;
  border-radius: 8px;
  background: #f6faf8;
}

.dp-cta h2,
.dp-cta h3 {
  margin-top: 0;
}

.dp-cta-operator {
  font-size: 14px;
  color: #33414f;
}

.dp-cta-channels {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0;
  padding: 0;
}

.dp-cta-channels li {
  margin: 0;
}

.dp-cta-channels a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #12426e;
  color: #12426e;
  text-decoration: none;
}

.dp-cta-channels a.dp-btn-primary {
  background: #12426e;
  color: #ffffff;
}

.dp-cta-channels a:hover {
  text-decoration: underline;
}

.dp-cta-note {
  font-size: 14px;
  color: #5b6a79;
}

.dp-cta-sign {
  font-size: 13px;
  color: #5b6a79;
  border-top: 1px solid #dfe5eb;
  padding-top: 10px;
  margin-bottom: 0;
}

/* ---------- Навигационная полоска ---------- */

.dp-strip {
  margin: 24px 0;
  padding: 12px 16px;
  border: 1px solid #dfe5eb;
  border-radius: 8px;
  background: #f8fafc;
  font-size: 15px;
}

.dp-strip-title {
  font-weight: 600;
  margin: 0 0 4px;
}

.dp-strip p {
  margin: 0 0 6px;
}

.dp-strip ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
}

.dp-strip a {
  color: #12426e;
}

/* ---------- Футер страницы инструмента ---------- */

.dp-footer {
  border-top: 1px solid #dfe5eb;
  background: #f8fafc;
  font-size: 14px;
  color: #33414f;
  margin-top: 40px;
}

.dp-footer .dp-container {
  padding-top: 20px;
  padding-bottom: 24px;
}

.dp-footer p {
  margin: 6px 0;
}

.dp-disclaimer {
  font-size: 13px;
  color: #5b6a79;
}

/* ---------- Доступность и мобильные ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #f0a500;
  outline-offset: 2px;
}

@media (max-width: 400px) {
  .dp-header .dp-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .dp-tool,
  .dp-practical,
  .dp-related,
  .dp-materials,
  .dp-cta {
    padding: 14px 12px;
  }

  .dp-cta-channels,
  .dp-strip ul {
    flex-direction: column;
    gap: 8px;
  }

  .dp-cta-channels a {
    display: block;
    text-align: center;
  }
}