/* 
 * Article-specific styles for "How Many Questions Should a Customer Survey Have?"
 * Slug: how-many-questions-customer-survey
 * 
 * Using blog color palette with standard typography
 */

/* СТАНДАРТНАЯ ЦВЕТОВАЯ ПАЛИТРА БЛОГА */
:root {
  --font-size: 16px;
  --background: #FAFAFA;              /* Фон страницы */
  --foreground: #0f0f1c;              /* Цвет заголовков */
  --card: #ffffff;
  --card-foreground: #0f0f1c;
  --primary: #5B5FED;                 /* Primary цвет (буллеты, ссылки) */
  --primary-foreground: #ffffff;
  --secondary: #E8E8FF;
  --secondary-foreground: #5B5FED;
  --muted: #E8E8FF;
  --muted-foreground: #414B5A;        /* Цвет текста параграфов */
  --accent: #E63E8E;
  --border: rgba(91, 95, 237, 0.1);
  
  /* СТАНДАРТНЫЕ РАЗМЕРЫ ТЕКСТА БЛОГА */
  --text-base: 1.125rem;              /* 18px - основной текст */
  --text-lg: 1.25rem;                 /* 20px - текст на desktop */
  --text-xl: 1.35rem;                 /* 20px - H3 */
  --text-2xl: 1.5rem;                 /* 24px - H2 mobile */
  --text-3xl: 1.875rem;               /* 30px - H2 desktop */
  
  /* СТАНДАРТНЫЙ FONT-WEIGHT */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 500;        /* Для H2 и H3 */
  
  --leading-relaxed: 1.625;
  --radius: 0.75rem;
}

/* Article page container - scoped to this specific article */
.article-page-how-many-questions-customer-survey {
  --article-background: #FAFAFA !important;
  background: var(--article-background) !important;
  min-height: 100vh !important;

  /* Переопределение глобальных переменных */
  --background: #FAFAFA !important;
  --foreground: #0f0f1c !important;
  --primary: #5B5FED !important;
  --muted-foreground: #414B5A !important;
  --border: rgba(91, 95, 237, 0.1) !important;
}

/* H2 - СТАНДАРТНЫЕ РАЗМЕРЫ И ЖИРНОСТЬ */
.article-page-how-many-questions-customer-survey article h2 {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-2xl) !important;      /* 24px mobile */
  line-height: 1.5 !important;
  font-weight: 500 !important;                 /* semibold - ОБЯЗАТЕЛЬНО */
  color: var(--foreground) !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
}

/* H3 - СТАНДАРТНЫЕ РАЗМЕРЫ И ЖИРНОСТЬ */
.article-page-how-many-questions-customer-survey article h3 {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-xl) !important;       /* 20px */
  line-height: 1.5 !important;
  font-weight: 500 !important;                 /* semibold - ОБЯЗАТЕЛЬНО */
  color: var(--foreground) !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

/* Body paragraphs - СТАНДАРТНЫЕ РАЗМЕРЫ */
.article-page-how-many-questions-customer-survey article p {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base) !important;     /* 18px mobile */
  line-height: var(--leading-relaxed) !important;
  font-weight: var(--font-weight-normal) !important;
  color: var(--muted-foreground) !important;
  margin-bottom: 1.5rem !important;
}

/* Lists - СТАНДАРТНАЯ СТРУКТУРА */
.article-page-how-many-questions-customer-survey article ul {
  list-style: none !important;
  padding: 0;
  margin: 0 0 2rem 1.5rem !important;
}

.article-page-how-many-questions-customer-survey article ul li {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--muted-foreground) !important;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  list-style: none !important;
}

/* Bullet points - СТАНДАРТНЫЙ СТИЛЬ */
.article-page-how-many-questions-customer-survey article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--primary);
  border-radius: 50%;
}

/* Links */
.article-page-how-many-questions-customer-survey article a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.article-page-how-many-questions-customer-survey article a:hover {
  text-decoration: underline;
}

/* Strong text */
.article-page-how-many-questions-customer-survey article strong {
  font-weight: 600;
  color: var(--foreground);
}

/* Card components - белые карточки с информацией */
.article-page-how-many-questions-customer-survey article .bg-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
}

/* Key Takeaways section - выделенный блок */
.article-page-how-many-questions-customer-survey article .bg-\[\#f5f5ff\] {
  background: #f5f5ff !important;
  border: 1px solid rgba(91, 95, 237, 0.15) !important;
}

/* RESPONSIVE - Desktop размеры */
@media (min-width: 640px) {
  .article-page-how-many-questions-customer-survey article h2 {
    font-size: var(--text-3xl) !important;   /* 30px desktop */
  }
  
  .article-page-how-many-questions-customer-survey article p {
    font-size: var(--text-lg) !important;    /* 20px desktop */
  }
  
  .article-page-how-many-questions-customer-survey article ul li {
    font-size: var(--text-lg) !important;    /* 20px desktop */
  }
}