/* 
 * Article-specific styles for "How to Avoid Survey Fatigue"
 * Slug: how-to-avoid-survey-fatigue
 * 
 * Using original article styles with blog color palette
 * Font sizes, spacing, and layout from reference article
 * Colors and background from blog theme
 */

/* CSS Variables - blog colors with reference article typography */
:root {
  --font-size: 16px;
  --background: #FAFAFA;
  --foreground: #0f0f1c;
  --card: #ffffff;
  --card-foreground: #0f0f1c;
  --popover: #ffffff;
  --popover-foreground: #0f0f1c;
  --primary: #5B5FED;
  --primary-foreground: #ffffff;
  --secondary: #E8E8FF;
  --secondary-foreground: #5B5FED;
  --muted: #E8E8FF;
  --muted-foreground: #414B5A;
  --accent: #E63E8E;
  --accent-foreground: #ffffff;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(91, 95, 237, 0.1);
  --input: rgba(91, 95, 237, 0.1);
  --input-background: #ffffff;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 700;
  --ring: #5B5FED;
  
  /* Text sizes - blog article standards */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1.125rem;    /* 18px - blog 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 */
  --text-4xl: 2.25rem;      /* 36px */
  --text-5xl: 3rem;         /* 48px */
  
  /* Spacing from reference */
  --spacing: 0.25rem;
  --leading-tight: 1.25;
  --leading-normal: 1.625;  /* 26px for 16px text */
  --leading-relaxed: 1.75;
  --leading-heading: 1.17;  /* 56px for 48px H1 */
  --leading-h2: 1.25;       /* 40px for 32px H2 */
  --leading-h3: 1.36;       /* 30px for 22px H3 */
  --leading-h4: 1.44;       /* 26px for 18px H4 */
  --leading-intro: 1.6;     /* 32px for 20px intro */
  
  --radius: 0.625rem;
  --radius-xl: 1rem;        /* 16px from reference */
}

/* Article page container - scoped to this specific article */
.article-page-how-to-avoid-survey-fatigue {
  /* Background - override all global styles */
  --article-background: #FAFAFA !important;
  background: var(--article-background) !important;
  min-height: 100vh !important;

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

.article-page-how-to-avoid-survey-fatigue * {
  box-sizing: border-box !important;
}

/* Base typography for article - reference article sizes */
.article-page-how-to-avoid-survey-fatigue article {
  font-family: 'Inter', sans-serif;
  font-size: var(--font-size) !important;
  color: var(--foreground) !important;
}

/* H1 - handled by blog system, keeping for consistency */
.article-page-how-to-avoid-survey-fatigue article h1 {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-3xl) !important;
  line-height: 1.5 !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--foreground) !important;
  margin-bottom: 1.5rem !important;
}

/* H2 - blog standards: 24px mobile, 30px desktop */
.article-page-how-to-avoid-survey-fatigue 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 - как H3 */
  color: var(--foreground) !important;
  margin-top: 3rem !important;              /* mt-12 */
  margin-bottom: 1rem !important;           /* mb-4 */
}

/* H3 - blog standards: 20px, semibold for better visibility */
.article-page-how-to-avoid-survey-fatigue 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;              /* mt-8 */
  margin-bottom: 1rem !important;           /* mb-4 */
}

/* H4 - blog standards */
.article-page-how-to-avoid-survey-fatigue article h4 {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-lg) !important;
  line-height: 1.5 !important;
  font-weight: var(--font-weight-medium) !important;
  color: var(--foreground) !important;
  margin-bottom: 0.75rem !important;
}

/* Body paragraphs - blog standards: 18px base */
.article-page-how-to-avoid-survey-fatigue article p {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base) !important;   /* 18px */
  line-height: var(--leading-relaxed) !important;
  font-weight: var(--font-weight-normal) !important;
  color: var(--muted-foreground) !important;
  margin-bottom: 1.5rem !important;         /* mb-6 */
}

/* Strong text */
.article-page-how-to-avoid-survey-fatigue article strong {
  font-weight: 600;
  color: var(--foreground);
}

/* Links */
.article-page-how-to-avoid-survey-fatigue article a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
  letter-spacing: -0.019em;             /* tracking-[-0.31px] from reference */
}

.article-page-how-to-avoid-survey-fatigue article a:hover {
  color: #4a4dd6;
  text-decoration: underline;
}

/* Lists - blog standards */
.article-page-how-to-avoid-survey-fatigue article ul {
  list-style: none !important;
  padding: 0;
  margin: 0 0 2rem 1.5rem !important;     /* mb-8 ml-6 */
}

.article-page-how-to-avoid-survey-fatigue article ul.space-y-3 {
  margin-bottom: 0.75rem !important;
}

.article-page-how-to-avoid-survey-fatigue article ul li {
  font-family: 'Inter', sans-serif;
  font-size: var(--text-base) !important;   /* 18px */
  line-height: var(--leading-relaxed) !important;
  font-weight: var(--font-weight-normal) !important;
  color: var(--muted-foreground) !important;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  position: relative;
  list-style: none !important;
}

/* Bullet points - before pseudo-element */
.article-page-how-to-avoid-survey-fatigue article ul li::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--primary);
  border-radius: 50%;
  margin-top: 0.625rem;                /* Align with first line of text */
  flex-shrink: 0;
}

/* Hide manual div markers from JSX */
.article-page-how-to-avoid-survey-fatigue article ul li > div:first-child {
  display: none !important;
}

/* Grid layout for comparison cards */
.article-page-how-to-avoid-survey-fatigue .grid {
  display: grid;
}

.article-page-how-to-avoid-survey-fatigue .grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .article-page-how-to-avoid-survey-fatigue .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Card styles - white background from reference */
.article-page-how-to-avoid-survey-fatigue .bg-card,
.article-page-how-to-avoid-survey-fatigue .bg-white {
  background-color: #ffffff !important;
}

.article-page-how-to-avoid-survey-fatigue article .rounded-\[16px\],
.article-page-how-to-avoid-survey-fatigue .rounded-xl {
  border-radius: 1rem !important;      /* 16px from reference */
}

.article-page-how-to-avoid-survey-fatigue .border {
  border: 1px solid var(--border) !important;
}

.article-page-how-to-avoid-survey-fatigue .border-\[rgba\(91\,95\,237\,0\.1\)\] {
  border-color: rgba(91, 95, 237, 0.1) !important;
}

/* Key takeaways box - exact colors from reference */
.article-page-how-to-avoid-survey-fatigue .bg-\[\#f5f5ff\] {
  background-color: #f5f5ff !important;
}

.article-page-how-to-avoid-survey-fatigue .border-\[rgba\(91\,95\,237\,0\.15\)\] {
  border-color: rgba(91, 95, 237, 0.15) !important;
}

/* Featured image background */
.article-page-how-to-avoid-survey-fatigue .bg-\[rgba\(232\,232\,255\,0\.3\)\] {
  background-color: rgba(232, 232, 255, 0.3) !important;
}

/* Image styles */
.article-page-how-to-avoid-survey-fatigue article img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Max widths */
.article-page-how-to-avoid-survey-fatigue .max-w-4xl {
  max-width: 56rem;
}

.article-page-how-to-avoid-survey-fatigue .max-w-none {
  max-width: none;
}

.article-page-how-to-avoid-survey-fatigue .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.article-page-how-to-avoid-survey-fatigue .w-full {
  width: 100%;
}

/* Spacing utilities - blog standards */
.article-page-how-to-avoid-survey-fatigue .mb-2 {
  margin-bottom: 0.5rem;
}

.article-page-how-to-avoid-survey-fatigue .mb-3 {
  margin-bottom: 0.75rem;
}

.article-page-how-to-avoid-survey-fatigue .mb-4 {
  margin-bottom: 1rem;
}

.article-page-how-to-avoid-survey-fatigue .mb-5 {
  margin-bottom: 1.25rem;
}

.article-page-how-to-avoid-survey-fatigue .mb-6 {
  margin-bottom: 1.5rem;
}

.article-page-how-to-avoid-survey-fatigue .mb-8 {
  margin-bottom: 2rem;
}

.article-page-how-to-avoid-survey-fatigue .mb-12 {
  margin-bottom: 3rem;
}

.article-page-how-to-avoid-survey-fatigue .mb-14 {
  margin-bottom: 3.5rem;
}

.article-page-how-to-avoid-survey-fatigue .mt-8 {
  margin-top: 2rem;
}

.article-page-how-to-avoid-survey-fatigue .mt-10 {
  margin-top: 2.5rem;
}

.article-page-how-to-avoid-survey-fatigue .mt-12 {
  margin-top: 3rem;
}

.article-page-how-to-avoid-survey-fatigue .mt-14 {
  margin-top: 3.5rem;
}

.article-page-how-to-avoid-survey-fatigue .ml-4 {
  margin-left: 1rem;
}

.article-page-how-to-avoid-survey-fatigue .ml-6 {
  margin-left: 1.5rem;
}

.article-page-how-to-avoid-survey-fatigue .my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/* Padding utilities */
.article-page-how-to-avoid-survey-fatigue .p-6 {
  padding: 1.5rem;
}

.article-page-how-to-avoid-survey-fatigue .p-8 {
  padding: 2rem;
}

.article-page-how-to-avoid-survey-fatigue .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Gap utilities */
.article-page-how-to-avoid-survey-fatigue .gap-3 {
  gap: 0.75rem;
}

.article-page-how-to-avoid-survey-fatigue .gap-4 {
  gap: 1rem;
}

.article-page-how-to-avoid-survey-fatigue .gap-6 {
  gap: 1.5rem;
}

/* Space-y utilities */
.article-page-how-to-avoid-survey-fatigue .space-y-3 > :not(:last-child) {
  margin-bottom: 0.75rem;
}

/* Flex utilities */
.article-page-how-to-avoid-survey-fatigue .flex {
  display: flex;
}

.article-page-how-to-avoid-survey-fatigue .items-start {
  align-items: flex-start;
}

.article-page-how-to-avoid-survey-fatigue .items-center {
  align-items: center;
}

.article-page-how-to-avoid-survey-fatigue .shrink-0 {
  flex-shrink: 0;
}

/* Height utilities */
.article-page-how-to-avoid-survey-fatigue .h-4 {
  height: 1rem;
}

.article-page-how-to-avoid-survey-fatigue .h-8 {
  height: 2rem;
}

.article-page-how-to-avoid-survey-fatigue .h-auto {
  height: auto;
}

.article-page-how-to-avoid-survey-fatigue .h-full {
  height: 100%;
}

/* Width and height utilities */
.article-page-how-to-avoid-survey-fatigue .w-1\.5 {
  width: 0.375rem;
}

.article-page-how-to-avoid-survey-fatigue .h-1\.5 {
  height: 0.375rem;
}

.article-page-how-to-avoid-survey-fatigue .mt-2\.5 {
  margin-top: 0.625rem;
}

/* Overflow */
.article-page-how-to-avoid-survey-fatigue .overflow-hidden {
  overflow: hidden;
}

/* Object fit */
.article-page-how-to-avoid-survey-fatigue .object-cover {
  object-fit: cover;
}

/* Border radius */
.article-page-how-to-avoid-survey-fatigue .rounded-full {
  border-radius: 9999px;
}

/* Text colors */
.article-page-how-to-avoid-survey-fatigue .text-foreground {
  color: var(--foreground);
}

.article-page-how-to-avoid-survey-fatigue .text-muted-foreground {
  color: var(--muted-foreground);
}

.article-page-how-to-avoid-survey-fatigue .text-primary {
  color: var(--primary);
}

/* Font weights */
.article-page-how-to-avoid-survey-fatigue .font-semibold {
  font-weight: 500;
}

.article-page-how-to-avoid-survey-fatigue .font-medium {
  font-weight: 500;
}

.article-page-how-to-avoid-survey-fatigue .font-normal {
  font-weight: 400;
}

/* Prose styles */
.article-page-how-to-avoid-survey-fatigue .prose {
  max-width: none;
}

.article-page-how-to-avoid-survey-fatigue .prose-lg {
  font-size: 1.125rem;
}

/* Leading utilities */
.article-page-how-to-avoid-survey-fatigue .leading-relaxed {
  line-height: 1.625;
}

/* Responsive utilities */
@media (min-width: 640px) {
  .article-page-how-to-avoid-survey-fatigue article h1 {
    font-size: var(--text-4xl);
  }
  
  .article-page-how-to-avoid-survey-fatigue article h2 {
    font-size: var(--text-3xl);        /* 30px on desktop */
  }
  
  .article-page-how-to-avoid-survey-fatigue article p {
    font-size: var(--text-lg);         /* 20px on desktop */
  }
  
  .article-page-how-to-avoid-survey-fatigue .sm\:text-3xl {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 1024px) {
  .article-page-how-to-avoid-survey-fatigue article h1 {
    font-size: var(--text-5xl);
  }
}