/* 
 * Article-specific styles for "Why Customer Surveys Fail"
 * Slug: why-customer-surveys-fail
 * 
 * Using standard blog color palette with article-specific layouts
 */

/* CSS Variables - standard blog colors */
:root {
  --font-size: 16px;
  --background: #FAFAFA;
  --foreground: #0f0f1c;
  --card: #ffffff;
  --card-foreground: #0f0f1c;
  --primary: #5B5FED;
  --primary-foreground: #ffffff;
  --secondary: #E8E8FF;
  --secondary-foreground: #5B5FED;
  --muted: #E8E8FF;
  --muted-foreground: #414B5A;
  --accent: #E63E8E;
  --border: rgba(91, 95, 237, 0.1);
  
  /* Standard text sizes */
  --text-base: 1.125rem;    /* 18px - body text */
  --text-lg: 1.25rem;       /* 20px - desktop paragraphs */
  --text-xl: 1.25rem;       /* 20px - H3 */
  --text-2xl: 1.5rem;       /* 24px - H2 mobile */
  --text-3xl: 1.875rem;     /* 30px - H2 desktop */
  
  /* Standard font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 500;
  
  --leading-relaxed: 1.625;
  --radius: 0.75rem;
}

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

  /* Override global CSS variables */
  --background: #FAFAFA !important;
  --foreground: #0f0f1c !important;
  --primary: #5B5FED !important;
  --muted-foreground: #414B5A !important;
  --border: rgba(91, 95, 237, 0.1) !important;
}

/* H2 - STANDARD SIZES AND WEIGHT */
.article-page-why-customer-surveys-fail 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 - REQUIRED */
  color: var(--foreground) !important;
  margin-top: 3rem !important;
  margin-bottom: 1rem !important;
}

/* H3 - STANDARD SIZES AND WEIGHT */
.article-page-why-customer-surveys-fail article h3 {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-xl) !important;       /* 20px */
  line-height: 1.5 !important;
  font-weight: 500 !important;                 /* semibold - REQUIRED */
  color: var(--foreground) !important;
  margin-top: 2rem !important;
  margin-bottom: 1rem !important;
}

/* Body paragraphs - STANDARD SIZES */
.article-page-why-customer-surveys-fail 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 - STANDARD STRUCTURE */
.article-page-why-customer-surveys-fail article ul {
  list-style: none !important;
  padding: 0;
  margin: 0 0 2rem 1.5rem !important;
}

/* ⚠️ IMPORTANT: Position-based bullets, NOT flex */
.article-page-why-customer-surveys-fail 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 - STANDARD STYLE with position: absolute */
.article-page-why-customer-surveys-fail 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-why-customer-surveys-fail article a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.article-page-why-customer-surveys-fail article a:hover {
  text-decoration: underline;
}

/* Strong text */
.article-page-why-customer-surveys-fail article strong {
  font-weight: 500;
  color: var(--foreground);
}

/* Callout boxes - standard blog style */
.article-page-why-customer-surveys-fail .bg-\[\#f5f5ff\] {
  background-color: #f5f5ff !important;
}

.article-page-why-customer-surveys-fail .border-\[rgba\(91\,95\,237\,0\.15\)\] {
  border-color: rgba(91, 95, 237, 0.15) !important;
}

.article-page-why-customer-surveys-fail .rounded-xl {
  border-radius: 1rem !important;
}

.article-page-why-customer-surveys-fail .border {
  border: 1px solid var(--border) !important;
}

/* Spacing utilities */
.article-page-why-customer-surveys-fail .mb-0 {
  margin-bottom: 0 !important;
}

.article-page-why-customer-surveys-fail .mb-4 {
  margin-bottom: 1rem;
}

.article-page-why-customer-surveys-fail .mb-5 {
  margin-bottom: 1.25rem;
}

.article-page-why-customer-surveys-fail .mb-6 {
  margin-bottom: 1.5rem;
}

.article-page-why-customer-surveys-fail .mb-14 {
  margin-bottom: 3.5rem;
}

.article-page-why-customer-surveys-fail .mt-12 {
  margin-top: 3rem;
}

.article-page-why-customer-surveys-fail .p-6 {
  padding: 1.5rem;
}

.article-page-why-customer-surveys-fail .p-8 {
  padding: 2rem;
}

/* Space-y utilities */
.article-page-why-customer-surveys-fail .space-y-3 > :not(:last-child) {
  margin-bottom: 0.75rem;
}

/* Text colors */
.article-page-why-customer-surveys-fail .text-foreground {
  color: var(--foreground);
}

.article-page-why-customer-surveys-fail .text-muted-foreground {
  color: var(--muted-foreground);
}

.article-page-why-customer-surveys-fail .text-primary {
  color: var(--primary);
}

/* Font weights */
.article-page-why-customer-surveys-fail .font-medium {
  font-weight: 500;
}

/* Leading utilities */
.article-page-why-customer-surveys-fail .leading-relaxed {
  line-height: 1.625;
}

/* Prose styles */
.article-page-why-customer-surveys-fail .prose {
  max-width: none;
}

.article-page-why-customer-surveys-fail .prose-lg {
  font-size: 1.125rem;
}

.article-page-why-customer-surveys-fail .max-w-none {
  max-width: none;
}

/* RESPONSIVE - Desktop sizes */
@media (min-width: 640px) {
  .article-page-why-customer-surveys-fail article h2 {
    font-size: var(--text-3xl);              /* 30px desktop */
  }
  
  .article-page-why-customer-surveys-fail article h3 {
    font-size: 1.5625rem;                    /* 25px desktop */
  }
  
  .article-page-why-customer-surveys-fail article p {
    font-size: var(--text-lg);               /* 20px desktop */
  }
  
  .article-page-why-customer-surveys-fail .sm\:text-3xl {
    font-size: var(--text-3xl);
  }
}