/* TaxZero Blog Style Guide - Following Global CSS Variables
   RULE: Maximum 2 box colors across all blog content
   1. Primary Theme (Indigo): var(--color-accent) - For highlights, tips, important information  
   2. Neutral Theme (Gray): var(--color-gray-200) - For borders and subtle accents only
*/

/* CRITICAL: Override all CSS variables that might cause color conflicts */
:root {
  --color-accent: #6366F1 !important;
  --color-accent-light: #6366F1 !important;  /* Force same as primary */
  --color-accent-dark: #4F46E5 !important;
  --color-primary: #6366F1 !important;
  --color-secondary: white !important;
  --color-gray-50: #F9FAFB !important;
  --color-gray-100: #F3F4F6 !important;
  --color-gray-200: #E5E7EB !important;
  --color-gray-600: #475569 !important;
  --color-gray-700: #374151 !important;
  --color-gray-900: #111827 !important;
  --color-navy: #1E293B !important;
}

/* CRITICAL: All boxes must use white background */
/* PRIMARY BOX THEME - Using Global Variables */
.highlight-box,
.tip-box,
.important-box,
.deduction-box,
.key-insight-box,
.strategy-box,
.benefit-box,
.advantage-box,
.warning-box,
.caution-box,
.info-box,
.example-box,
.note-box,
.disclaimer-box,
.consideration-box {
  background: white !important;
  border: 1px solid var(--color-gray-200) !important;
  border-left: 4px solid var(--color-accent) !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  margin: 2rem 0 !important;
  display: block !important;
  width: auto !important;
  min-height: auto !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.highlight-box h3,
.tip-box h3,
.important-box h3,
.deduction-box h3,
.deduction-box h4,
.key-insight-box h3,
.strategy-box h3,
.benefit-box h3,
.advantage-box h3,
.warning-box h3,
.caution-box h3,
.info-box h3,
.example-box h3,
.note-box h3,
.disclaimer-box h3,
.consideration-box h3 {
  color: var(--color-accent) !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}

.highlight-box p,
.tip-box p,
.important-box p,
.deduction-box p,
.key-insight-box p,
.strategy-box p,
.benefit-box p,
.advantage-box p,
.warning-box p,
.caution-box p,
.info-box p,
.example-box p,
.note-box p,
.disclaimer-box p,
.consideration-box p {
  color: var(--color-gray-900) !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.6 !important;
}

.highlight-box ul,
.tip-box ul,
.important-box ul,
.deduction-box ul,
.key-insight-box ul,
.strategy-box ul,
.benefit-box ul,
.advantage-box ul,
.warning-box ul,
.caution-box ul,
.info-box ul,
.example-box ul,
.note-box ul,
.disclaimer-box ul,
.consideration-box ul {
  color: var(--color-gray-900) !important;
  padding-left: 1.25rem !important;
  margin: 0.5rem 0 !important;
}

/* Tables - Following Global Style Variables */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.875rem;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.article-content th,
.article-content td {
  border: 1px solid var(--color-gray-200);
  padding: 0.75rem;
  text-align: left;
}

.article-content th {
  background: var(--color-gray-50);
  font-weight: 600;
  color: var(--color-gray-900);
}

.article-content td {
  background: white;
  color: var(--color-gray-900);
}

.article-content tbody tr:nth-child(even) td {
  background: var(--color-gray-50);
}

/* Blockquotes - Using Primary Theme Variables */
.article-content blockquote {
  border-left: 4px solid var(--color-accent);
  background: white;
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--color-gray-900);
  border-radius: 0 8px 8px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Code blocks - Following Global Standards */
.article-content pre {
  background: white;
  color: var(--color-gray-900);
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 2rem 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem;
  line-height: 1.4;
  border: 1px solid var(--color-gray-200);
}

/* CTA sections - High contrast styling matching published standards */
.article-cta {
  background: white;
  color: var(--color-gray-900);
  padding: 3rem 2rem;
  border-radius: 12px;
  text-align: center;
  margin: 3rem 0;
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.article-cta h1,
.article-cta h2,
.article-cta h3 {
  color: var(--color-gray-900) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

.article-cta p {
  color: var(--color-gray-700);
  margin-bottom: 2rem;
}

.article-cta .cta-button {
  display: inline-block !important;
  background: var(--color-accent) !important;
  color: white !important;
  padding: 1rem 2rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

/* EMERGENCY FIX: Force override any undefined CSS variables */
*[style*="var(--gradient-primary)"],
*[style*="var(--gradient-accent)"] {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
}

/* FORCE 2-COLOR COMPLIANCE: Override any non-compliant colors */
*[style*="background: linear-gradient"],
.article-content [style*="background-color"],
.article-content [style*="background:"] {
  background: white !important;
  background-image: none !important;
}

/* Override any CSS variables that might create color violations */
* {
  --bg-primary: white !important;
  --bg-secondary: white !important;
  --bg-gray: white !important;
  --bg-light: white !important;
  --border-primary: #6366F1 !important;
  --border-secondary: #64748B !important;
  --text-primary: #111827 !important;
  --text-secondary: #475569 !important;
}

/* AGGRESSIVE OVERRIDE: Target any element that might use non-white backgrounds */
*[style*="background-color"],
*[style*="background:"],
*[class*="box"],
*[class*="card"],
*[class*="container"] {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
}

/* 
USAGE GUIDELINES (Following /blog/BLOG_STYLE_GUIDELINES.md):
- Primary Theme (Indigo): var(--color-accent) for highlights, tips, important information
- Neutral Theme (Gray): var(--color-gray-600) for warnings, examples, general info  
- All styling uses global CSS variables from /includes/global-styles.css
- Maximum 2 box colors for visual consistency per documented guidelines
- Semantic class names for easier content management
*/

/* Text contrast fix applied: Sat Jun  7 22:28:36 PDT 2025 */
/* Heading color fix: force 2-color compliance - Sat Jun  7 22:32:53 PDT 2025 */
/* COMPREHENSIVE COLOR OVERRIDE: Force 2-color system compliance - Sat Jun  7 22:45:00 PDT 2025 */
/* FORCE CACHE RELOAD: Sat Jun  7 22:41:24 PDT 2025 */
/* AGGRESSIVE OVERRIDE APPLIED: Sat Jun  7 22:41:59 PDT 2025 */

/* ULTIMATE OVERRIDE: Force 2-color system compliance at all costs */
.article-content .highlight-box,
.article-content .tip-box,
.article-content .important-box,
.article-content .deduction-box,
.article-content .key-insight-box,
.article-content .strategy-box,
.article-content .benefit-box,
.article-content .advantage-box,
div.highlight-box,
div.tip-box,
div.important-box,
div.deduction-box,
div.key-insight-box,
div.strategy-box,
div.benefit-box,
div.advantage-box {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
  border: 1px solid rgba(99, 102, 241, 0.2) !important;
  border-left: 4px solid #6366F1 !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  margin: 2rem 0 !important;
  display: block !important;
  width: auto !important;
  min-height: auto !important;
}

/* Force all headings in boxes to use only indigo or gray */
.article-content .highlight-box h3,
.article-content .tip-box h3,
.article-content .important-box h3,
.article-content .deduction-box h3,
.article-content .deduction-box h4,
.article-content .key-insight-box h3,
.article-content .strategy-box h3,
.article-content .benefit-box h3,
.article-content .advantage-box h3,
div.highlight-box h3,
div.tip-box h3,
div.important-box h3,
div.deduction-box h3,
div.deduction-box h4,
div.key-insight-box h3,
div.strategy-box h3,
div.benefit-box h3,
div.advantage-box h3 {
  color: #6366F1 !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}

/* NUCLEAR OPTION: Override ALL green colors */
.article-content *[style*="color: green"],
.article-content *[style*="color: #22C55E"],
.article-content *[style*="color: #16A34A"],
.article-content *[style*="color: #15803D"],
.article-content *[style*="color: #166534"],
.article-content *[style*="color: #14532D"],
.article-content *[style*="color: rgb(34, 197, 94)"],
.article-content h1[style*="color"],
.article-content h2[style*="color"],
.article-content h3[style*="color"],
.article-content h4[style*="color"],
.article-content h5[style*="color"],
.article-content h6[style*="color"] {
  color: #6366F1 !important;
}

/* Override ANY purple/violet backgrounds */
.article-content *[style*="background: rgb(129, 140, 248)"],
.article-content *[style*="background-color: rgb(129, 140, 248)"],
.article-content *[style*="background: #818CF8"],
.article-content *[style*="background-color: #818CF8"],
.article-content *[style*="background: rgba(129, 140, 248"],
.article-content *[style*="background-color: rgba(129, 140, 248"],
.article-content *[style*="background: linear-gradient"],
.article-content *[style*="background-image: linear-gradient"] {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
}

/* Force ALL article content headings to 2-color compliance */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  color: #6366F1 !important;
}

/* Override any CSS classes that might be causing green colors */
.green,
.text-green,
.text-green-600,
.text-green-500,
.text-emerald,
.text-emerald-600,
.text-emerald-500 {
  color: #6366F1 !important;
}

/* Nuclear option: Override ANY background that's not white */
.article-content * {
  background-image: none !important;
}

.article-content *[style*="background"] {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
}

/* COMPLETE COLOR OVERRIDE: Force every possible element to comply */
* {
  --color-green-600: #6366F1 !important;
  --color-green-500: #6366F1 !important;
  --color-emerald-600: #6366F1 !important;
  --color-emerald-500: #6366F1 !important;
  --text-green: #6366F1 !important;
  --bg-purple: white !important;
  --bg-violet: white !important;
  --bg-indigo-light: white !important;
}

/* FORCE CACHE RELOAD: Sat Jun  7 22:45:00 PDT 2025 */
/* AGGRESSIVE OVERRIDE APPLIED: Sat Jun  7 22:45:00 PDT 2025 */
/* NUCLEAR OPTION DEPLOYED: Sat Jun  7 22:47:00 PDT 2025 */
/* COMPLETE STYLE VIOLATION ELIMINATION: Sat Jun  7 22:50:00 PDT 2025 */
/* FINAL VIOLATION FIX: Sat Jun  7 22:45:52 PDT 2025 */
/* CSS REWRITTEN TO FOLLOW GLOBAL VARIABLES: Sat Jun  7 22:48:20 PDT 2025 */

/* Override any non-compliant inline styles - Force compliance with global variables */
.article-content *[style*="color: green"],
.article-content *[style*="color: #22C55E"],
.article-content *[style*="background: rgb(129, 140, 248)"],
.article-content *[style*="background-color: rgb(129, 140, 248)"] {
  color: var(--color-accent) !important;
  background: var(--color-secondary) !important;
}

/* CRITICAL FIX: Force ALL article headings to be black, not purple */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6,
h1, h2, h3, h4, h5, h6 {
  color: var(--color-gray-900) !important;
}

/* OVERRIDE: Specifically target purple headings */
.article-content h1[style*="color"],
.article-content h2[style*="color"], 
.article-content h3[style*="color"],
.article-content h4[style*="color"],
h1[style*="color"],
h2[style*="color"],
h3[style*="color"],
h4[style*="color"] {
  color: var(--color-gray-900) !important;
}

/* FIX: Header navigation button styling */
.cta-button,
.header-buttons .cta-button,
button[class*="cta"],
a[class*="cta"] {
  background: var(--gradient-accent) !important;
  color: var(--color-secondary) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
  cursor: pointer !important;
}

.cta-button:hover,
.header-buttons .cta-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}
/* HEADING COLOR FIX APPLIED: Sat Jun  7 22:53:00 PDT 2025 */

/* HEADING COLOR FIX APPLIED: Sun Jun  8 01:10:19 PDT 2025 */

/* ULTRA-SPECIFIC OVERRIDE: Force ALL headings to black with maximum specificity */
html body .article-content h1,
html body .article-content h2,
html body .article-content h3,
html body .article-content h4,
html body .article-content h5,
html body .article-content h6,
body .article-content h1,
body .article-content h2,
body .article-content h3,
body .article-content h4,
body .article-content h5,
body .article-content h6,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  color: #111827 !important;
  font-weight: 700 !important;
}

/* BUTTON FIX: Ultra-specific override for header buttons */
html body header .cta-button,
html body .header-buttons .cta-button,
body header .cta-button,
body .header-buttons .cta-button,
header .cta-button,
.header-buttons .cta-button,
.cta-button {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
  color: white !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border: none !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
}

/* FORCE PURPLE OVERRIDE: Remove any purple heading colors */
*[style*="color: #6366F1"],
*[style*="color: #4F46E5"],
*[style*="color: rgb(99, 102, 241)"],
*[style*="color: rgb(79, 70, 229)"] {
  color: #111827 !important;
}

/* BLUE COLOR OVERRIDE: Convert all blue elements to 2-color system */
/* Target all possible blue variations and convert to purple or grey */
.article-content *[style*="background: #0EA5E9"],
.article-content *[style*="background-color: #0EA5E9"],
.article-content *[style*="border: 2px solid #0EA5E9"],
.article-content *[style*="border-color: #0EA5E9"],
.article-content *[style*="border-left: 4px solid #0EA5E9"],
.article-content *[style*="background: #0369A1"],
.article-content *[style*="background-color: #0369A1"],
.article-content *[style*="border: 2px solid #0369A1"],
.article-content *[style*="border-color: #0369A1"],
.article-content *[style*="border-left: 4px solid #0369A1"],
.article-content *[style*="background: #075985"],
.article-content *[style*="background-color: #075985"],
.article-content *[style*="border: 2px solid #075985"],
.article-content *[style*="border-color: #075985"],
.article-content *[style*="border-left: 4px solid #075985"],
.article-content *[style*="background: #F0F9FF"],
.article-content *[style*="background-color: #F0F9FF"],
.article-content *[style*="background: rgb(14, 165, 233)"],
.article-content *[style*="background-color: rgb(14, 165, 233)"],
.article-content *[style*="border-color: rgb(14, 165, 233)"],
.article-content *[style*="background: rgb(3, 105, 161)"],
.article-content *[style*="background-color: rgb(3, 105, 161)"],
.article-content *[style*="border-color: rgb(3, 105, 161)"],
.article-content *[style*="background: rgb(7, 89, 133)"],
.article-content *[style*="background-color: rgb(7, 89, 133)"],
.article-content *[style*="border-color: rgb(7, 89, 133)"],
.article-content *[style*="background: rgb(240, 249, 255)"],
.article-content *[style*="background-color: rgb(240, 249, 255)"],
.article-content *[style*="color: #0EA5E9"],
.article-content *[style*="color: #0369A1"],
.article-content *[style*="color: #075985"],
.article-content *[style*="color: rgb(14, 165, 233)"],
.article-content *[style*="color: rgb(3, 105, 161)"],
.article-content *[style*="color: rgb(7, 89, 133)"] {
  background: white !important;
  background-color: white !important;
  border-color: #64748B !important;
  border-left-color: #64748B !important;
  color: #111827 !important;
}

/* BLUE BOX SPECIFIC OVERRIDES: Target boxes with blue borders/outlines */
.article-content div[style*="border: 2px solid #0EA5E9"],
.article-content div[style*="border-color: #0EA5E9"],
.article-content div[style*="border-left: 4px solid #0EA5E9"],
.article-content div[style*="background: #F0F9FF"],
.article-content div[style*="background-color: #F0F9FF"],
div[style*="border: 2px solid #0EA5E9"],
div[style*="border-color: #0EA5E9"],
div[style*="border-left: 4px solid #0EA5E9"],
div[style*="background: #F0F9FF"],
div[style*="background-color: #F0F9FF"] {
  background: white !important;
  background-color: white !important;
  border: 1px solid #E5E7EB !important;
  border-left: 4px solid #64748B !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  margin: 2rem 0 !important;
}

/* BLUE HEADING OVERRIDE: Convert blue headings in boxes to grey */
.article-content div[style*="border"][style*="blue"] h3,
.article-content div[style*="border-color: #0EA5E9"] h3,
.article-content div[style*="background: #F0F9FF"] h3,
div[style*="border-color: #0EA5E9"] h3,
div[style*="background: #F0F9FF"] h3 {
  color: #64748B !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  font-weight: 600 !important;
}

/* CSS VARIABLE OVERRIDE: Force ALL blue variations to 2-color system */
* {
  --color-blue: #64748B !important;
  --color-blue-light: #64748B !important;
  --color-blue-dark: #64748B !important;
  --color-blue-50: white !important;
  --color-blue-100: white !important;
  --color-blue-200: #E5E7EB !important;
  --color-blue-300: #64748B !important;
  --color-blue-400: #64748B !important;
  --color-blue-500: #64748B !important;
  --color-blue-600: #64748B !important;
  --color-blue-700: #64748B !important;
  --color-blue-800: #64748B !important;
  --color-blue-900: #64748B !important;
  --color-sky-50: white !important;
  --color-sky-100: white !important;
  --color-sky-200: #E5E7EB !important;
  --color-sky-300: #64748B !important;
  --color-sky-400: #64748B !important;
  --color-sky-500: #64748B !important;
  --color-sky-600: #64748B !important;
  --color-sky-700: #64748B !important;
  --color-sky-800: #64748B !important;
  --color-sky-900: #64748B !important;
  --border-blue: #64748B !important;
  --bg-blue-50: white !important;
  --bg-blue-100: white !important;
  --bg-sky-50: white !important;
  --bg-sky-100: white !important;
}

/* COMPREHENSIVE BLUE OVERRIDE: Target any possible blue class or attribute */
.blue,
.text-blue,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.bg-blue-50,
.bg-blue-100,
.bg-sky-50,
.bg-sky-100,
.border-blue,
.border-blue-200,
.border-blue-300,
.border-sky-200,
.border-sky-300,
*[class*="blue"],
*[style*="color: blue"],
*[style*="background: blue"],
*[style*="border: blue"],
*[style*="border-color: blue"] {
  color: #111827 !important;
  background: white !important;
  background-color: white !important;
  border-color: #64748B !important;
}
/* CRITICAL FIX APPLIED - HEADINGS FORCED BLACK: Sat Jun  7 22:55:36 PDT 2025 */
/* BLUE COLOR SYSTEM OVERRIDE APPLIED: Sun Jun  8 23:15:00 PDT 2025 */

/* COMPREHENSIVE CTA STYLING: Ensure all CTA elements have high contrast */
/* Target all possible CTA variations and newsletter sections */
.newsletter-cta,
.cta-section,
.call-to-action,
div[class*="cta"],
section[class*="cta"],
.article-content .cta-section,
.article-content .newsletter-cta,
.article-content .call-to-action,
.article-content div[style*="background: linear-gradient"][style*="0F172A"],
.article-content div[style*="background-color"][style*="dark"] {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  color: white !important;
  padding: 3rem 2rem !important;
  border-radius: 12px !important;
  text-align: center !important;
  margin: 3rem 0 !important;
  display: block !important;
  width: auto !important;
  min-height: auto !important;
}

/* CTA Headings - Force bright white */
.newsletter-cta h3,
.cta-section h3,
.call-to-action h3,
div[class*="cta"] h3,
section[class*="cta"] h3,
.article-content .cta-section h3,
.article-content .newsletter-cta h3,
.article-content .call-to-action h3,
.article-content div[style*="background: linear-gradient"] h3,
.article-cta h1,
.article-cta h2,
.newsletter-cta h1,
.newsletter-cta h2,
.cta-section h1,
.cta-section h2 {
  color: white !important;
  margin-bottom: 1rem !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
}

/* CTA Paragraphs - High contrast white */
.newsletter-cta p,
.cta-section p,
.call-to-action p,
div[class*="cta"] p,
section[class*="cta"] p,
.article-content .cta-section p,
.article-content .newsletter-cta p,
.article-content .call-to-action p,
.article-content div[style*="background: linear-gradient"] p {
  color: rgba(255, 255, 255, 0.9) !important;
  margin-bottom: 2rem !important;
  font-size: 1.125rem !important;
}

/* CTA Buttons - Consistent purple gradient */
.newsletter-cta .cta-button,
.cta-section .cta-button,
.call-to-action .cta-button,
div[class*="cta"] .cta-button,
section[class*="cta"] .cta-button,
.article-content .cta-section .cta-button,
.article-content .newsletter-cta .cta-button,
.article-content .call-to-action .cta-button,
.newsletter-cta button,
.cta-section button,
.call-to-action button,
div[class*="cta"] button,
section[class*="cta"] button {
  display: inline-block !important;
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
  color: white !important;
  padding: 1rem 2rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
  border: none !important;
  cursor: pointer !important;
}

/* CTA Button Hover States */
.newsletter-cta .cta-button:hover,
.cta-section .cta-button:hover,
.call-to-action .cta-button:hover,
div[class*="cta"] .cta-button:hover,
section[class*="cta"] .cta-button:hover,
.article-content .cta-section .cta-button:hover,
.article-content .newsletter-cta .cta-button:hover,
.article-content .call-to-action .cta-button:hover,
.newsletter-cta button:hover,
.cta-section button:hover,
.call-to-action button:hover,
div[class*="cta"] button:hover,
section[class*="cta"] button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4) !important;
}
/* CTA HIGH-CONTRAST STYLING APPLIED: Sun Jun  8 23:20:00 PDT 2025 */

/* NEWSLETTER SIGNUP FIX: Target specific newsletter classes used in the codebase */
.newsletter-section,
.article-newsletter,
.newsletter-signup,
.email-signup,
form[class*="newsletter"],
form[class*="email"],
.subscription-form,
.signup-form {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  color: white !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 12px !important;
  text-align: center !important;
  margin: 1.5rem 0 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.slim-newsletter-form {
  display: block !important;
  max-width: 400px !important;
  margin: 0 auto !important;
}

/* Newsletter form inputs - Target specific classes */
.newsletter-signup input,
.email-signup input,
form[class*="newsletter"] input,
form[class*="email"] input,
.subscription-form input,
.signup-form input,
.slim-newsletter-input,
.newsletter-input,
input[type="email"],
input[placeholder*="email"],
input[placeholder*="Email"],
input[id*="email"],
input[id*="Email"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  padding: 1rem !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  width: 100% !important;
  max-width: 400px !important;
  min-width: 250px !important;
  margin: 0 0.5rem 1rem 0.5rem !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 48px !important;
}

/* Newsletter input group container */
.newsletter-input-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  margin: 1rem 0 !important;
}

/* Newsletter form inputs placeholder text */
.newsletter-signup input::placeholder,
.email-signup input::placeholder,
form[class*="newsletter"] input::placeholder,
form[class*="email"] input::placeholder,
.subscription-form input::placeholder,
.signup-form input::placeholder,
.slim-newsletter-input::placeholder,
.newsletter-input::placeholder,
input[type="email"]::placeholder,
input[placeholder*="email"]::placeholder,
input[placeholder*="Email"]::placeholder,
input[id*="email"]::placeholder,
input[id*="Email"]::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Newsletter submit buttons - Target specific classes */
.newsletter-signup button,
.email-signup button,
form[class*="newsletter"] button,
form[class*="email"] button,
.subscription-form button,
.signup-form button,
.slim-newsletter-btn,
.newsletter-btn,
button[type="submit"],
input[type="submit"],
button[id*="subscribe"],
button[id*="Subscribe"],
button[id*="newsletter"] {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
  color: white !important;
  padding: 1rem 2rem !important;
  border-radius: 8px !important;
  border: none !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 1rem !important;
  display: inline-block !important;
  min-height: 48px !important;
  white-space: nowrap !important;
}

/* Newsletter button hover */
.newsletter-signup button:hover,
.email-signup button:hover,
form[class*="newsletter"] button:hover,
form[class*="email"] button:hover,
.subscription-form button:hover,
.signup-form button:hover,
.slim-newsletter-btn:hover,
.newsletter-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
button[id*="subscribe"]:hover,
button[id*="Subscribe"]:hover,
button[id*="newsletter"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4) !important;
}
/* NEWSLETTER SIGNUP FIX APPLIED: Sun Jun  8 23:25:00 PDT 2025 */

/* CRITICAL NEWSLETTER FIX: Ultra-high specificity to override existing CSS */
html body .newsletter-section,
html body .article-newsletter {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  color: white !important;
  padding: 0.75rem !important;  /* Reduced from 1rem */
  border-radius: 12px !important;
  text-align: center !important;
  margin: 0.75rem auto !important;  /* Reduced from 1rem */
  display: block !important;
  width: 90% !important;
  max-width: 600px !important;
  box-sizing: border-box !important;
}

html body .slim-newsletter-form,
html body form.slim-newsletter-form {
  display: block !important;
  max-width: 400px !important;
  margin: 0.375rem auto !important;  /* Reduced from 0.5rem */
}

/* CRITICAL NEWSLETTER INPUT FIX: Force proper input sizing */
html body .slim-newsletter-input,
html body input.slim-newsletter-input,
html body .newsletter-input-group input,
html body input[id*="slimNewsletterEmailInput"],
html body input[id*="newsletterEmailInput"],
body .slim-newsletter-input,
body input.slim-newsletter-input,
body .newsletter-input-group input,
body input[id*="slimNewsletterEmailInput"],
body input[id*="newsletterEmailInput"],
input[class*="slim-newsletter"],
input[id*="newsletter"][type="email"],
input[placeholder*="Enter your email"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  padding: 0.375rem 0.625rem !important;  /* Reduced padding */
  border-radius: 6px !important;
  font-size: 0.8125rem !important;
  width: 100% !important;
  max-width: 250px !important;
  min-width: 180px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: 32px !important;  /* Fixed height */
  min-height: 32px !important;
  display: inline-block !important;
  flex: 1 !important;
}

/* CRITICAL NEWSLETTER BUTTON FIX: Force proper button styling */
html body .slim-newsletter-btn,
html body button.slim-newsletter-btn,
html body .newsletter-input-group button,
html body button[id*="slimNewsletterSubmitBtn"],
html body button[id*="newsletterSubmitBtn"],
body .slim-newsletter-btn,
body button.slim-newsletter-btn,
body .newsletter-input-group button,
body button[id*="slimNewsletterSubmitBtn"],
body button[id*="newsletterSubmitBtn"],
button[class*="slim-newsletter"],
button[id*="newsletter"][type="submit"] {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
  color: white !important;
  padding: 0.375rem 0.625rem !important;  /* Further reduced padding */
  border-radius: 6px !important;
  border: none !important;
  font-weight: 500 !important;  /* Reduced from 600 */
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 0.8125rem !important;
  display: inline-block !important;
  height: 32px !important;  /* Fixed height to match input */
  min-height: 32px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: auto !important;  /* Remove min-width constraint */
  margin-left: 0.25rem !important;
}

/* CRITICAL NEWSLETTER CONTAINER FIX: Ensure proper flexbox layout */
html body .newsletter-input-group,
body .newsletter-input-group,
.slim-newsletter-form .newsletter-input-group {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  flex-wrap: nowrap !important;
  margin: 0.375rem 0 !important;  /* Reduced margin */
  padding: 0 !important;
}

/* Adjust text spacing */
.newsletter-section h1,
.newsletter-section h2,
.newsletter-section h3 {
  margin: 0 0 0.375rem 0 !important;  /* Reduced margin */
  font-size: 1.25rem !important;  /* Slightly smaller */
  line-height: 1.4 !important;
  color: white !important;  /* Ensure header is white */
  font-weight: 600 !important;  /* Make it slightly bolder */
}

.newsletter-section p {
  margin: 0 0 0.375rem 0 !important;  /* Reduced margin */
  font-size: 0.875rem !important;  /* Slightly smaller */
  line-height: 1.4 !important;
  color: rgba(255, 255, 255, 0.9) !important;  /* Slightly transparent white for body text */
}

/* No spam text */
.newsletter-section p:last-child {
  margin: 0.25rem 0 0 0 !important;  /* Reduced margin */
  font-size: 0.75rem !important;
  opacity: 0.7 !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .newsletter-section,
  .article-newsletter {
    padding: 1.25rem !important;
    margin: 1.5rem 1rem !important;
  }
  
  .newsletter-form,
  .slim-newsletter-form {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .newsletter-input,
  .slim-newsletter-input {
    width: 100% !important;
    min-width: 0 !important;
  }
  
  .newsletter-submit,
  .slim-newsletter-btn {
    width: 100% !important;
  }
}

/* FINAL CTA WHITE HEADER FIX - MAXIMUM SPECIFICITY */
html body .article-cta {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  color: white !important;
  padding: 3rem 2rem !important;
  border-radius: 12px !important;
  text-align: center !important;
  margin: 3rem 0 !important;
}

html body .article-cta h1,
html body .article-cta h2,
html body .article-cta h3 {
  color: white !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  font-size: 1.75rem !important;
}

html body .article-cta p {
  color: rgba(255, 255, 255, 0.95) !important;
  margin-bottom: 2rem !important;
}

html body .article-cta .cta-button {
  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%) !important;
  color: white !important;
  padding: 1rem 2rem !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* ENSURE KEEP READING AND NEWSLETTER SECTIONS DISPLAY */
#keep-reading-placeholder {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.keep-reading-section {
  padding: 4rem 0;
  background: var(--color-gray-50);
}

.keep-reading-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.keep-reading-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.keep-reading-header h2 {
  font-size: 1.875rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.see-all-link {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.article-card {
  background: white;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  cursor: pointer;
}

.article-card:hover {
  transform: translateY(-2px);
}

.article-image {
  position: relative !important;
  height: 120px !important;
  background: var(--color-navy) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.article-icon {
  font-size: 1.5rem !important;
  z-index: 2 !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.article-background {
  display: none !important;
}

.article-card h3 {
  padding: 1.25rem;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.4;
}

/* Newsletter section headers - ensure white text */
html body .newsletter-section h1,
html body .newsletter-section h2,
html body .newsletter-section h3,
html body .article-newsletter h1,
html body .article-newsletter h2,
html body .article-newsletter h3,
.newsletter-section h1,
.newsletter-section h2,
.newsletter-section h3,
.article-newsletter h1,
.article-newsletter h2,
.article-newsletter h3 {
  color: white !important;
  margin: 0 0 0.375rem 0 !important;
  font-size: 1.25rem !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

/* Newsletter section text */
html body .newsletter-section p,
html body .article-newsletter p,
.newsletter-section p,
.article-newsletter p {
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 0 0.375rem 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
}

/* No spam text */
html body .newsletter-section p:last-child,
html body .article-newsletter p:last-child,
.newsletter-section p:last-child,
.article-newsletter p:last-child {
  margin: 0.25rem 0 0 0 !important;
  font-size: 0.75rem !important;
  opacity: 0.7 !important;
}

/* FORCE ALL BACKGROUNDS WHITE */
.article-content *[style*="background"],
.article-content div[style*="background"],
.article-content section[style*="background"] {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
}

/* Override any CSS variables that might create color violations */
* {
  --bg-primary: white !important;
  --bg-secondary: white !important;
  --bg-gray: white !important;
  --bg-light: white !important;
  --border-primary: #6366F1 !important;
  --border-secondary: #64748B !important;
  --text-primary: #111827 !important;
  --text-secondary: #475569 !important;
}

/* AGGRESSIVE OVERRIDE: Target any element that might use non-white backgrounds */
*[style*="background-color"],
*[style*="background:"],
*[class*="box"],
*[class*="card"],
*[class*="container"] {
  background: white !important;
  background-color: white !important;
  background-image: none !important;
}

/* Footer Styles - CRITICAL OVERRIDES */
html body .footer,
.footer,
footer {
  padding: 4rem 2rem 2rem !important;
  background: var(--color-navy) !important;
  color: var(--color-gray-300) !important;
  margin-top: 4rem !important;
  width: 100% !important;
}

html body .footer-container,
.footer-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: var(--color-navy) !important;
}

html body .footer-content,
.footer-content {
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr !important;
  gap: 2rem !important;
  margin-bottom: 2rem !important;
  align-items: start !important;
  background: var(--color-navy) !important;
}

html body .footer-brand,
.footer-brand {
  color: var(--color-gray-300) !important;
  background: var(--color-navy) !important;
}

html body .footer-brand .logo-text,
.footer-brand .logo-text {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  display: block !important;
  background: var(--color-navy) !important;
}

html body .footer-brand .logo-tax,
.footer-brand .logo-tax {
  color: white !important;
}

html body .footer-brand .logo-zero,
.footer-brand .logo-zero {
  color: var(--color-accent) !important;
}

html body .footer-brand p,
.footer-brand p {
  margin-top: 1rem !important;
  line-height: 1.6 !important;
  color: var(--color-gray-400) !important;
}

html body .footer-links,
.footer-links {
  display: flex !important;
  justify-content: center !important;
  gap: 4rem !important;
  background: var(--color-navy) !important;
}

html body .footer-column,
.footer-column {
  background: var(--color-navy) !important;
}

html body .footer-column h4,
.footer-column h4 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: white !important;
  margin-bottom: 1rem !important;
}

html body .footer-column ul,
.footer-column ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--color-navy) !important;
}

html body .footer-column li,
.footer-column li {
  margin-bottom: 0.5rem !important;
  background: var(--color-navy) !important;
}

html body .footer-column a,
.footer-column a {
  color: var(--color-gray-400) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

html body .footer-column a:hover,
.footer-column a:hover {
  color: var(--color-accent) !important;
}

html body .footer-bottom,
.footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 2rem !important;
  border-top: 1px solid var(--color-gray-700) !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  background: var(--color-navy) !important;
}

html body .footer-bottom p,
.footer-bottom p {
  color: var(--color-gray-400) !important;
  font-size: 0.875rem !important;
  text-align: center !important;
  opacity: 0.8 !important;
  margin: 0 !important;
}

/* Prevent duplicate footers */
#footer-placeholder + footer,
#footer-placeholder + .footer,
footer + #footer-placeholder,
.footer + #footer-placeholder {
  display: none !important;
}

/* Override any white background forcing on footer elements */
*[class*="footer"] {
  background: var(--color-navy) !important;
}

/* Keep Reading Section Grid Layout */
.keep-reading-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.article-card {
  background: white;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.article-image {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background: var(--color-gray-50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
}

.article-card h3 {
  padding: 1rem;
  margin: 0;
  font-size: 1rem;
  color: var(--color-gray-900);
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .keep-reading-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .keep-reading-grid {
    grid-template-columns: 1fr;
  }
}

/* Newsletter Styles */
.article-newsletter {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  border-radius: 12px;
  padding: 0.875rem 1.5rem;
  margin: 3rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.article-newsletter::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: shimmer 8s infinite linear;
}

@keyframes shimmer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.newsletter-content {
  position: relative;
  z-index: 1;
}

.article-newsletter h3 {
  color: white;
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.article-newsletter p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.slim-newsletter-form {
  max-width: 400px;
  margin: 0 auto;
}

.newsletter-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.slim-newsletter-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-gray-900);
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.slim-newsletter-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.8);
  background: white;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.slim-newsletter-input::placeholder {
  color: var(--color-gray-500);
}

.slim-newsletter-btn {
  padding: 0.75rem 1.5rem;
  background: white;
  color: #6366f1;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.slim-newsletter-btn:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.slim-newsletter-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.newsletter-disclaimer {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.8) !important;
  margin: 0 !important;
}

.loading-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(99, 102, 241, 0.3);
  border-top: 2px solid #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .article-newsletter {
    padding: 0.625rem 1.25rem;
    margin: 2rem 0;
  }
  
  .article-newsletter h3 {
    font-size: 1.25rem;
  }
  
  .newsletter-input-group {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .slim-newsletter-btn {
    justify-content: center;
  }
}