/* ROOT Level Healing - Modern Website Styles - v12.3 (Final Padding Fix) */

/* ---------------------------------- */
/* 1. Reset and Base Styles
/* ---------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1E293B;
  background-color: #FFFFFF;
  overflow-x: hidden;
}

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

/* ---------------------------------- */
/* 2. Typography
/* ---------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  word-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: 3.75rem; font-weight: 800; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }

p {
  margin-bottom: 1rem;
  color: #64748B;
}

/* ---------------------------------- */
/* 3. Buttons
/* ---------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  min-width: 140px;
}

.btn-primary {
  background: linear-gradient(135deg, #059669 0%, #0891B2 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  min-width: 180px;
}

.btn-yellow {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
  color: #2563EB !important;
  border: 2px solid #F59E0B;
}

.btn-yellow:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(245 158 11 / 0.2), 0 4px 6px -4px rgb(245 158 11 / 0.2);
}

/* ---------------------------------- */
/* 4. General Section Styles
/* ---------------------------------- */
section {
  padding: 5rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #1E293B;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #64748B;
  line-height: 1.6;
}

/* ---------------------------------- */
/* 5. Hero Section
/* ---------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 6rem 0 4rem;
}

.hero-background {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: -2;
}

.gradient-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(8, 145, 178, 0.8) 100%);
  z-index: -1;
}

.floating-elements {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: -1;
}

.floating-element {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 6s ease-in-out infinite;
}

.floating-element.element-1 { width: 200px; height: 200px; top: 10%; left: 10%; animation-delay: 0s; }
.floating-element.element-2 { width: 150px; height: 150px; top: 60%; right: 15%; animation-delay: 2s; }
.floating-element.element-3 { width: 100px; height: 100px; bottom: 20%; left: 20%; animation-delay: 4s; }

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

.hero-content {
  text-align: center;
  color: #FFFFFF;
  max-width: 800px;
  margin: 0 auto;
  z-index: 1;
}

.hero-title .highlight {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
  margin-top: 4rem;
}

.stat-number {
  display: block;
  font-size: 2.25rem;
  font-weight: 800;
  color: #FCD34D;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------------------------------- */
/* 6. Problem/Solution Section
/* ---------------------------------- */
.problem-solution {
  background: #F8FAFC;
}

.problem-solution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.problem-card, .solution-card {
  background: #FFFFFF;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.problem-card:hover, .solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.card-icon {
  width: 64px; height: 64px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.problem-card .card-icon { background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%); color: #DC2626; }
.solution-card .card-icon { background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); color: #059669; }

.problem-list, .solution-list {
  list-style: none;
  margin-top: 1.5rem;
  padding-left: 0;
}

.problem-list li, .solution-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  color: #64748B;
}

.problem-list li::before { content: "⚠️"; flex-shrink: 0; }
.solution-list li::before { content: "✅"; flex-shrink: 0; }

/* ---------------------------------- */
/* 7. Education & Video Section
/* ---------------------------------- */
.education-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.education-card {
  background: #FFFFFF;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.education-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.card-content {
  padding: 1.5rem;
  flex-grow: 1;
}

.card-content h3 { font-size: 1.25rem; }

.video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  background: #000000;
}

.education-card .video-embed {
  border-radius: 0.75rem 0.75rem 0 0;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.download-card {
  background: linear-gradient(135deg, #2563EB 0%, #0891B2 100%);
  color: #FFFFFF;
  justify-content: center;
  text-align: center;
}

.download-card .card-content h3,
.download-card .card-content p {
  color: #FFFFFF;
}

.download-icon {
  width: 64px; height: 64px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #FFFFFF;
}

/* ---------------------------------- */
/* 8. Testimonials Section
/* ---------------------------------- */
.testimonials {
  background: #F8FAFC;
  padding-bottom: 0;
}

.testimonial-featured {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 3rem;
  background: #FFFFFF;
  border-radius: 1.5rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.testimonial-content, .testimonial-video {
  min-width: 0;
}

.testimonial-meta { margin-bottom: 1.5rem; }
.testimonial-author { font-weight: 700; color: #2563EB; font-size: 1.125rem; }
.testimonial-role { color: #64748B; font-size: 0.875rem; }

.testimonial-highlight {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  padding: 1.5rem;
  border-radius: 0.75rem;
  border-left: 4px solid #2563EB;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
  font-style: italic;
}

.testimonial-story p {
  margin-bottom: 1rem;
  line-height: 1.7;
  color: #64748B;
}

.testimonial-video .video-embed {
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.video-caption { text-align: center; padding-top: 1rem; }
.video-caption h4 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.video-caption p { color: #64748B; font-size: 0.875rem; margin: 0; }

.lab-results-wrapper {
  background: #F8FAFC;
  padding: 3rem 1.5rem;
  margin-top: 3rem;
  border-radius: 1.5rem;
  text-align: center;
}

.lab-results-wrapper h4 {
  font-size: 1.875rem;
  margin-bottom: 2rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.result-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: #FFFFFF;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}

.result-label { display: block; font-size: 0.75rem; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.result-value { display: block; font-size: 1.25rem; font-weight: 700; color: #2563EB; }
.results-note { font-size: 1rem; color: #64748B; font-style: italic; margin: 0; }

/* ---------------------------------- */
/* 9. Lab Reports Gallery & Modal
/* ---------------------------------- */
.lab-reports-section {
  margin-top: 0;
  text-align: center;
  background: #F8FAFC;
  padding-top: 3rem;
  padding-bottom: 3rem; /* <<< THE FIX */
}



.lab-reports-subtitle {
  color: #64748B;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

.lab-reports-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.lab-report-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lab-report-thumbnail {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  width: 100%;
}

.lab-report-thumbnail:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.lab-report-thumbnail img {
  width: 100%;
  height: 400px;
  object-fit: contain;
  display: block;
}

.thumbnail-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #FFFFFF;
  padding: 2rem 1.5rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.lab-report-thumbnail:hover .thumbnail-overlay { transform: translateY(0); }
.thumbnail-info h4 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.thumbnail-info p { font-size: 0.875rem; opacity: 0.9; margin-bottom: 0.75rem; }
.view-icon { display: inline-block; font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1rem; background: rgba(37, 99, 235, 0.9); border-radius: 0.375rem; }

.lab-report-date {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #FFFFFF;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid #E2E8F0;
  max-width: 220px;
}

.date-label { display: block; font-size: 0.75rem; color: #64748B; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; font-weight: 600; }
.date-value { display: block; font-size: 0.875rem; color: #2563EB; font-weight: 700; }

/* Modal Styles */
.modal {
  display: none; position: fixed; z-index: 2000; left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  animation: fadeIn 0.3s ease;
}

.modal-content {
  position: relative; margin: 2% auto; padding: 0;
  width: 90%; max-width: 1200px; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center;
}

.modal-content img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 0.5rem; }

.modal-close {
  position: absolute; top: -40px; right: 0;
  color: #FFFFFF; font-size: 2rem; font-weight: bold; cursor: pointer; z-index: 2001;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.5); border-radius: 50%;
  transition: background 0.3s ease;
}

.modal-close:hover { background: rgba(0, 0, 0, 0.8); }

.modal-navigation {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 600px;
  margin-top: 1rem; padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 0.75rem;
}

.nav-btn {
  background: rgba(37, 99, 235, 0.9); color: #FFFFFF; border: none;
  padding: 0.75rem 1.5rem; border-radius: 0.5rem;
  cursor: pointer; font-weight: 600; transition: background 0.3s ease;
}

.nav-btn:hover { background: #2563EB; }
.nav-btn:disabled { background: rgba(100, 116, 139,.5); cursor: not-allowed; }
#modalTitle { color: #FFFFFF; font-weight: 700; font-size: 1.125rem; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------- */
/* 10. CTA Section
/* ---------------------------------- */
.cta-section {
  background: linear-gradient(135deg, #2563EB 0%, #0891B2 100%);
  color: #FFFFFF;
  text-align: center;
}

.cta-content { max-width: 600px; margin: 0 auto; }
.cta-title { color: #FFFFFF; }
.cta-subtitle { color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; }

.cta-buttons {
  display: flex; gap: 1rem; justify-content: center;
  margin-bottom: 2rem; flex-wrap: wrap;
}

.cta-note p { color: rgba(255, 255, 255, 0.8); font-size: 0.875rem; margin: 0; }

.trust-signals {
  display: flex; justify-content: center; gap: 2rem;
  flex-wrap: wrap; margin-top: 2rem;
}

.trust-item {
  display: flex; align-items: center; gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9); font-size: 0.875rem; font-weight: 500;
}

/* ---------------------------------- */
/* 11. Footer
/* ---------------------------------- */
.footer {
  background: #1E293B;
  color: #FFFFFF;
}

.footer .container {
  padding-top: 2rem;
  padding-bottom: 1.5rem;
}

.footer-disclaimer {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem;
}

.footer-disclaimer p { font-size: 0.8rem; color: #94A3B8; line-height: 1.5; }
.footer-disclaimer p strong { color: #E2E8F0; }



/* ---------------------------------- */
/* 12. Animations
/* ---------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}







/* ==========================================================================
   14. BLOG & CONTENT HUB STYLES
   ========================================================================== */

/* ---------------------------------- */
/* A. Main Site Header (for Blog Pages)
/* ---------------------------------- */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
  padding: 0.5rem 0;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.main-nav .logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: #2563EB;
  text-decoration: none;
}

.main-nav-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main-nav-menu .nav-link {
  text-decoration: none;
  color: #64748B;
  font-weight: 500;
  transition: color 0.2s ease;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
}

.main-nav-menu .nav-link:hover {
  color: #1E293B;
}

.main-nav-menu .nav-link.active {
  color: #2563EB;
  font-weight: 700;
  border-bottom-color: #2563EB;
}

.main-nav-menu .cta-link {
  background: linear-gradient(135deg, #2563EB 0%, #0891B2 100%);
  color: #FFFFFF !important;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  border-bottom: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main-nav-menu .cta-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}

/* ---------------------------------- */
/* B. Blog Index Page (blog.html)
/* ---------------------------------- */
.page-header {
  text-align: center;
  padding: 4rem 0;
  background-color: #F8FAFC;
}

.page-header h1 {
  font-size: 3rem;
}

.blog-grid-section {
  padding: 5rem 0;
}

/* styles.css (Updated for 3-Column Layout) */

.blog-grid {
  display: grid;
  /* Start with 1 column on mobile */
  grid-template-columns: 1fr;
  gap: 2rem;
}


/* ================================================== */
/* Homepage Specific Overrides                      */
/* ================================================== */

/* ================================================== */
/* Homepage Specific Overrides                      */
/* ================================================== */

/* 1. Base style for homepage grid on mobile: 2 columns */
.blog-grid-home {
  grid-template-columns: repeat(2, 1fr);
}








.blog-card {
  background: #FFFFFF;
  border-radius: 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.blog-card-image-link img {
  width: 100%;
  height: 220px;  /* KEEP the fixed height */
  object-fit: contain;  /* CHANGE from 'cover' to 'contain' */
  object-position: center;
  display: block;
  background-color: #f8f9fa;  /* Optional: for letterboxing */
}

.blog-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-title {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.blog-card-title a {
  text-decoration: none;
  color: #1E293B;
  transition: color 0.2s ease;
}

.blog-card-title a:hover {
  color: #2563EB;
}

.blog-card-excerpt {
  color: #64748B;
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

/* ---------------------------------- */
/* C. Blog Post Template (Center-Column Layout)
/* ---------------------------------- */
.post-layout {
  padding: 4rem 0;
}

/* This is the main container for the article content */
.post-content {
  max-width: 720px; /* Optimal reading width */
  margin: 0 auto;   /* This centers the column */
}

.post-header {
  margin-bottom: 2rem;
  text-align: center; /* Center the title and meta info */
  border-bottom: 1px solid #E2E8F0;
  padding-bottom: 1.5rem;
}

.post-header h1 {
  font-size: 2.75rem;
  line-height: 1.2;
}

.post-meta {
  color: #64748B;
  font-size: 0.9rem;
  margin-top: 1rem;
}

.post-body h2 {
  font-size: 1.75rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.post-body h3 {
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.post-body p,
.post-body ul,
.post-body ol {
  margin-bottom: 1.25rem;
  line-height: 1.7;
  font-size: 1.1rem; /* Slightly larger font for readability */
}

.post-body ul, .post-body ol {
  padding-left: 1.5rem;
}

.post-body a {
  color: #2563EB;
  text-decoration: underline;
}

.post-body a:hover {
  color: #1D4ED8;
}




/* ---------------------------------- */
/* E. Enhanced Blog Post Elements
/* ---------------------------------- */
.symptom-list {
  margin-top: 2rem;
}

.symptom-item {
  display: flex;
  align-items: baseline;  /* Change to baseline for better alignment */
  gap: 1rem;
  margin-bottom: 2.5rem;
}


.symptom-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-top: 0;  /* Remove the margin */
}


.symptom-text h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

.post-divider {
  border: none;
  border-top: 1px solid #E2E8F0;
  margin: 2rem 0;
}

.final-cta-link {
  text-align: center;
  margin: 2.5rem 0;
}

/* ---------------------------------- */
/* F. End of Post CTA ("Coda")
/* ---------------------------------- */
.post-coda {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 0rem;
  border-top: 0px solid #E2E8F0;
}



.coda-item {
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.coda-item:hover {
  border-color: #DBEAFE;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.07);
  transform: translateY(-5px);
}

.coda-icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 1rem;
}

.coda-item h3 {
  font-size: 1.4rem;
}

.coda-item p {
  flex-grow: 1;
  margin-bottom: 1.5rem;
}

.coda-item .btn-large {
  width: 100%;
}

/* Specific styling for the primary (Quiz) CTA */
.coda-quiz {
  background-color: #EFF6FF; /* A light blue to draw attention */
  border-color: #DBEAFE;
}


/* ---------------------------------- */
/* G. Additional Post Elements
/* ---------------------------------- */
.product-highlight-box {
  background-color: #F8FAFC;
  border-left: 4px solid #2563EB;
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
}

.product-highlight-box h3 {
  margin-top: 0;
}

.disabled-link {
  background: #94A3B8;
  cursor: not-allowed;
  pointer-events: none;
}

.disabled-link:hover {
  transform: none;
  box-shadow: none;
}



/* --- H. Blog Post Featured Image (Responsive) --- */
.post-featured-image {
    width: 100%; /* Make the image container full-width by default */
    max-width: 800px; /* Allow it to be slightly wider than the text content */
    margin: 2rem auto 0rem; /* Center it and provide vertical spacing */
    border-radius: 1.5rem; /* A slightly larger radius for a modern look */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* A softer, more pronounced shadow */
}

.post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}



/* Add this inside Section 14.B */

.blog-card-date {
  color: #64748B;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem; /* Adds a little space above the title */
}


/* ---------------------------------- */
/* I. Single Post Navigation
/* ---------------------------------- */
.post-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 0rem;
  padding-top: 2rem;
  border-top: 0px solid #E2E8F0;
}

.post-navigation a {
  display: block;
  padding: 1rem;
  border: 1px solid #E2E8F0;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all 0.3s ease;
  max-width: 300px;
}

.post-navigation a:hover {
  border-color: #2563EB;
  background-color: #F8FAFC;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.post-navigation span {
  display: block;
  font-size: 0.85rem;
  color: #64748B;
  margin-bottom: 0.25rem;
}

.post-navigation strong {
  color: #1E293B;
  font-weight: 600;
}

.nav-next {
  text-align: right;
  margin-left: auto; /* Pushes to the right */
}

/* Add arrows for better UX */
.nav-previous a span::before {
  content: '← ';
}

.nav-next a span::after {
  content: ' →';
}



/* ---------------------------------- */
/* J. New Homepage Styles
/* ---------------------------------- */

/* --- Hero Section --- */
.home-hero {
  background-color: #F8FAFC;
  padding: 6rem 0;
  text-align: center;
}

.home-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.home-hero-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #1E293B;
  line-height: 1.1;
}

.home-hero-subtitle {
  font-size: 1.25rem;
  color: #475569;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

.home-hero-cta {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* A new button style for secondary actions on light backgrounds */
.btn-secondary-dark {
  background-color: #E2E8F0;
  color: #1E293B;
  border: 1px solid #CBD5E1;
}

.btn-secondary-dark:hover {
  background-color: #CBD5E1;
  transform: translateY(-2px);
}


/* --- Latest Articles Section --- */
.latest-articles {
  padding: 5rem 0;
  background-color: #FFFFFF;
}

/* Placeholder Card for "Coming Soon" posts */
.placeholder-card {
  background-color: #F8FAFC;
  border: 2px dashed #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: #64748B;
}

.placeholder-content .placeholder-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.placeholder-content h3 {
  color: #1E293B;
  font-size: 1.25rem;
}


/* --- Philosophy Section --- */
.philosophy-section {
  background-color: #1E293B; /* Dark background for contrast */
  color: #FFFFFF;
  padding: 5rem 0;
  text-align: center;
}

.philosophy-content {
  max-width: 750px;
  margin: 0 auto;
}

.philosophy-icon {
  color: #2563EB;
  margin-bottom: 1.5rem;
}

.philosophy-section .section-title {
  color: #FFFFFF;
}

.philosophy-text {
  font-size: 1.1rem;
  color: #CBD5E1;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}


/* --- Final CTA Section --- */
.final-cta {
  background-color: #F8FAFC;
  padding: 5rem 0;
  text-align: center;
}

.final-cta-content {
  max-width: 650px;
  margin: 0 auto;
}

.final-cta-content h2 {
  font-size: 2.25rem;
  color: #1E293B;
}

.final-cta-content p {
  font-size: 1.1rem;
  color: #475569;
  margin-bottom: 2rem;
}




/* ---------------------------------- */
/* K. New About Page Styles
/* ---------------------------------- */

/* --- About Hero Section --- */
.about-hero {
  background-color: #1E293B; /* Dark background for a serious, impactful tone */
  color: #FFFFFF;
  padding: 6rem 0;
  text-align: center;
}

.about-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.about-hero-title {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}

.about-hero-subtitle {
  font-size: 1.2rem;
  color: #CBD5E1;
  margin-top: 1.5rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Our Story Section --- */
.our-story {
  padding: 5rem 0;
  background-color: #FFFFFF;
}

.story-layout {
  display: grid;
  grid-template-columns: 1fr 2.5fr; /* Image on left, text on right */
  gap: 4rem;
  align-items: center;
}

.story-image img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.story-content .section-title {
  margin-bottom: 2rem;
}

.story-content p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* --- Core Values Section --- */
.core-values {
  padding: 5rem 0;
  background-color: #F8FAFC;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.value-card {
  background-color: #FFFFFF;
  padding: 2.5rem 2rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.value-icon {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.value-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #1E293B;
}

.value-card p {
  color: #475569;
  line-height: 1.6;
}




/* ---------------------------------- */
/* L. New Quiz Page Styles
/* ---------------------------------- */

.quiz-page-body {
  background-color: #F8FAFC;
  display: flex;
  flex-direction: column;
  align-items: center;      /* This vertically centers the content */
  justify-content: center;  /* This horizontally centers the content */
  min-height: 100vh;
  padding: 2rem 1rem;
}

.quiz-container {
  background-color: #FFFFFF;
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  padding: 2.5rem 3rem;
  overflow: hidden;
}

.quiz-header {
  text-align: center;
  margin-bottom: 2rem;
}

.quiz-header .logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  color: #2563EB;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 1rem;
}

.quiz-header h2 {
  font-size: 2rem;
  color: #1E293B;
  margin-bottom: 0.5rem;
}

.quiz-header p {
  color: #64748B;
  font-size: 1.1rem;
}

.quiz-progress-bar {
  width: 100%;
  height: 8px;
  background-color: #E2E8F0;
  border-radius: 4px;
  margin-bottom: 2.5rem;
}

.progress-bar-inner {
  height: 100%;
  width: 0%; /* Will be updated by JavaScript */
  background-color: #2563EB;
  border-radius: 4px;
  transition: width 0.4s ease;
}

.quiz-step {
  display: none;
}

.quiz-step.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

.question-title {
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
  color: #1E293B;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.options-grid label {
  display: block;
  background-color: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 0.75rem;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.options-grid label:hover {
  border-color: #A5B4FC;
}

.options-grid input[type="radio"] {
  display: none;
}

.options-grid input[type="radio"]:checked + span {
  color: #2563EB;
  font-weight: 600;
}

.options-grid input[type="radio"]:checked + span::before {
  content: '✓ ';
}

.options-grid input[type="radio"]:checked ~ label {
    border-color: #2563EB;
    background-color: #EFF6FF;
}

.quiz-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
  border-top: 1px solid #E2E8F0;
  padding-top: 1.5rem;
}

/* Email Gate Styles */
#email-gate .email-gate-subtitle {
  text-align: center;
  color: #475569;
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.5rem;
}

.form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #CBD5E1;
  border-radius: 0.5rem;
  font-size: 1rem;
}

.quiz-submit-btn {
  width: 100%;
  padding: 1rem;
}

.quiz-footer {
  text-align: center;
  margin-top: 2rem;
  color: #94A3B8;
  font-size: 0.8rem;
}








/* ================================================== */
/* STYLES FOR BLOG POST SYMPTOM LISTS                 */
/* ================================================== */

.symptom-list-item {
    display: flex;
    align-items: flex-start; /* Aligns icon with the top of the text block */
    gap: 1rem; /* Space between icon and text */
    margin-bottom: 1.25rem; /* Space between list items */
}

.symptom-icon {
    font-size: 1.75rem; /* The size of the emoji/icon */
    line-height: 1.6;   /* Helps vertically align the icon with the first line of text */
    color: #2563EB;     /* Your site's primary accent color */
    flex-shrink: 0;     /* Prevents the icon from shrinking if the text wraps */
    margin-top: 0.1em;  /* A tiny adjustment for perfect vertical alignment */
}

/* This ensures the text next to the icon has no extra top margin */
.symptom-list-item div {
    margin-top: 0;
}


/* --- Mobile Navigation Styles --- */

/* Style the hamburger icon lines */
.nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333; /* Or your preferred color */
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* Hide the hamburger on desktop by default */
.nav-toggle {
    display: none;
    cursor: pointer;
}



/* Animation for the hamburger turning into an "X" */
.nav-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}






/* ================================================== */
/* N. REUSABLE UI COMPONENTS                          */
/* ================================================== */

/* --- Icon List Component --- */
.icon-list-item {
    display: flex;
    gap: 1.5rem; /* Space between icon and text */
    margin-bottom: 2.5rem; /* Space between items */
}

.icon-list-icon {
    font-size: 2.5rem; /* Default icon size */
    line-height: 1;
    margin-top: 0.25rem; /* Default top alignment */
    flex-shrink: 0; /* Prevents icon from shrinking */
}

.icon-list-content > *:first-child {
    margin-top: 0; /* Removes top margin from the first element (e.g., h3) in the text block */
}

/* --- Alignment Modifier --- */
/* Add this class to an .icon-list-item for perfect vertical centering */
.icon-list-item.align-center {
    align-items: center;
}

/* --- Icon Size Modifiers (Optional but Recommended) --- */
.icon-list-icon.icon-small {
    font-size: 1.75rem;
}



/* Add these new rules in Section 14.A of your stylesheet */

/* This turns the main link into a flex container */
.logo-link {
    display: inline-flex; /* Use inline-flex to allow it to sit inside the nav correctly */
    align-items: center;  /* This is the key to vertically centering the text with the logo */
    text-decoration: none; /* Removes the underline from the link */
    gap: 0.0rem;         /* Creates a nice space between the logo and the text */
}

/* This styles the logo image itself */
.logo-image {
    height: 80px; /* Controls the size of the logo. Adjust if needed. */
    width: auto;  /* Maintains the aspect ratio */
}

/* We already have this, but ensure it's there */
.main-nav .logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: #2563EB;
  text-decoration: none;
}





.testimonial-image-container {
    text-align: center;
    margin: 2rem 0;
}

.testimonial-image {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 1rem;
    margin: 1rem auto;
    display: block;
}

.image-caption {
    font-style: italic;
    color: #667;
    margin-top: 1rem;
}




/* Add this to your existing CSS file (styles.css or whatever you're using) */

/* Center the Latest from the Blog section heading and subtitle */
.latest-blog-section h2 {
    text-align: center;
}

.latest-blog-section > .container > p {
    text-align: center;
}



/* ================================================== */
/* A++ FOOTER STYLES (REVISED)                        */
/* ================================================== */

/* This is the main container for the navigation links */
.footer-nav {
    display: flex;
    flex-wrap: wrap;         /* Allows links to wrap on small screens */
    justify-content: center; /* THIS IS THE FIX: Centers the links horizontally */
    align-items: center;     /* Ensures vertical alignment if they wrap to a new line */
    gap: 1rem 2.5rem;        /* Provides consistent spacing between links */
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #334155;
}

/* This styles each individual link */
.footer-link,
.footer-link:visited { /* THIS IS THE FIX: Apply same style to normal and visited links */
    color: #94A3B8; /* A lighter, more legible gray for readability */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* This handles the hover effect */
.footer-link:hover {
    color: #FFFFFF; /* Brightens to pure white on hover */
    text-decoration: underline;
}

/* This ensures the disclaimer below has consistent spacing */
.footer-disclaimer {
  text-align: center;
  max-width: 800px;
  margin: 2rem auto 2rem;
}

/* This styles the bottom copyright section */
.footer-bottom {
  padding-top: 1.5rem;
  text-align: center;
}

.footer-bottom p {
  color: #94A3B8;
  font-size: 0.875rem;
  margin: 0;
}


a.btn.btn-secondary-dark,
a.btn.btn-secondary-dark:link,
a.btn.btn-secondary-dark:visited,
a.btn.btn-secondary-dark:hover,
a.btn.btn-secondary-dark:active {
  display: block !important;
  background: #10b981 !important;
  color: #ffffff !important;
  font-weight: bold !important;
  padding: 15px 30px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-size: 1.1rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.4) !important;
  border: 2px solid #10b981 !important;
  cursor: pointer !important;
  margin: 1rem auto !important;
  text-align: center !important;
  max-width: 280px !important;
}

a.btn.btn-secondary-dark:hover {
  background: #059669 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 20px rgba(16, 185, 129, 0.6) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.symptom-list-item {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 3rem; /* Space for the icon */
}

.symptom-list-item .symptom-icon {
    position: absolute;
    left: 0;
    top: 0.2rem; /* Align with the heading */
    font-size: 2rem;
    line-height: 1;
}



.symptom-list-item h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
}


.product-highlight-box .symptom-list-item {
    position: relative;
    margin-bottom: 1rem;
    padding-left: 3rem; /* Space for the icon */
}

.product-highlight-box .symptom-list-item li {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-highlight-box .symptom-icon {
    position: absolute;
    left: 0;
    top: 0.1rem; /* Align with text baseline */
    font-size: 1.5rem;
    line-height: 1;
    margin-top: 0 !important; /* Override any existing margin */
}

.product-highlight-box .symptom-list-item div {
    flex: 1;
    padding-left: 0; /* Remove any existing padding */
}



/* ================================================== */
/* 3.1 - Homepage Hero Button Specifics               */
/* ================================================== */

/* ================================================== */
/* 3.2 - Homepage Hero Buttons (A++ Refactor)         */
/* ================================================== */

/* Base styles shared by both hero buttons */
.btn-hero-primary,
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  
  /* Sizing from .btn-large */
  padding: 1rem 2rem;
  font-size: 1.125rem;

  /* NEW: Consistent Sizing */
  width: 320px; /* A fixed width for perfect balance */
  min-width: 320px;
}

/* Style for the PRIMARY (Yellow) Hero Button */
.btn-hero-primary {
  /* From .btn-yellow */
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
  color: #2563EB !important;
  border: 2px solid #F59E0B;
  font-weight: 600; /* from .btn */
  border-radius: 0.75rem; /* from .btn */
}

.btn-hero-primary:hover {
  /* From .btn-yellow:hover */
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(245 158 11 / 0.2), 0 4px 6px -4px rgb(245 158 11 / 0.2);
}

/* Style for the SECONDARY (Grey) Hero Button */
.btn-hero-secondary {
  /* From .btn-secondary-dark */
  background-color: #E2E8F0;
  color: #1E293B;
  border: 1px solid #CBD5E1;
  font-weight: 600; /* from .btn */
  border-radius: 0.75rem; /* from .btn */
}

.btn-hero-secondary:hover {
  /* From .btn-secondary-dark:hover */
  background-color: #CBD5E1;
  transform: translateY(-2px);
}

.blog-post-infographic {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}



/* Video Lightbox Styles */
.video-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.video-lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 800px;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-lightbox iframe {
    width: 100%;
    height: 450px;
    border: none;
    display: block;
}

.video-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.video-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.video-trigger-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #DC2626, #EF4444);
    color: white;
    border: none;
    padding: 15px 25px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
    margin: 1.5rem 0;
}

.video-trigger-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
    background: linear-gradient(135deg, #B91C1C, #DC2626);
}

.play-icon {
    font-size: 1.2rem;
}



/* 
  Scoped Styles for the Re-engagement Confirmation Page.
  These styles will ONLY apply to the thank you page.
*/

/* This targets the body ONLY when the wrapper is present, applying the centered layout */
body:has(.thank-you-page-wrapper) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    text-align: center;
    padding: 20px;
}

/* Now, all other styles are prefixed with the wrapper class */
.thank-you-page-wrapper .container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    width: 100%;
}

.thank-you-page-wrapper h1 {
    color: #2c5b4c; /* A green tone to match a health theme */
    font-size: 28px;
    margin-bottom: 15px;
}

.thank-you-page-wrapper p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.thank-you-page-wrapper .button {
    display: inline-block;
    background-color: #3a7d6a; /* A slightly darker green for the button */
    color: #ffffff;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.thank-you-page-wrapper .button:hover {
    background-color: #2c5b4c;
}


/* Confirmation Page Styles */
.confirm-subscription-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    text-align: center;
    padding: 20px;
}

.confirm-subscription-page .container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    max-width: 600px;
    width: 100%;
}

.confirm-subscription-page h1 {
    color: #2c5b4c;
    font-size: 28px;
    margin-bottom: 15px;
}

.confirm-subscription-page p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.confirm-subscription-page .spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3a7d6a;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

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

/* =========================================
   DESKTOP & TABLET CSS RULES
   (min-width media queries)
   ========================================= */

/* Tablets and Up (≥ 768px) */
@media (min-width: 768px) {
  .post-coda {
    grid-template-columns: 1fr 1fr;
  }
  
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Large Tablets and Up (≥ 769px) */
@media (min-width: 769px) {
  .testimonial-featured {
    grid-template-columns: 1fr 1fr;
    padding: 3rem;
  }

  .education-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .blog-grid-home {
    grid-template-columns: repeat(4, 1fr);
  }
}

   /* Explicitly preserve desktop footer */
@media (min-width: 769px) {
    footer {
        /* Let desktop styles remain as they are */
        margin-top: initial;
        padding: initial;
    }
}

/* ================================================== */
/* STYLES FOR BLOG POST COMPARISON TABLE              */
/* ================================================== */

.comparison-table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse; /* Removes double borders */
    border: 1px solid #E2E8F0; /* Adds a subtle outer border */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); /* Adds a soft shadow */
    border-radius: 0.75rem; /* Rounds the corners */
    overflow: hidden; /* Ensures the border-radius clips the content */
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid #E2E8F0; /* Horizontal lines for rows */
}

.comparison-table th {
    background: linear-gradient(135deg, #2c5aa0, #3d6bb3);
    color: white;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border: 1px solid #e5e7eb;
}


.comparison-table tbody tr:nth-child(odd) {
    background-color: #f8f9fa;
}

.comparison-table tbody tr:nth-child(even) {
    background-color: white;
}


.comparison-table tbody tr:hover {
    background-color: #F1F5F9; /* A slightly darker hover for interactivity */
}

.comparison-table td:first-child {
    font-weight: 600;
    color: #1E293B;
}

/* This is the special highlight for your recommended solution */
.comparison-table .highlight {
    background-color: #EFF6FF; /* Light blue highlight */
    border-left: 4px solid #2563EB; /* Accent color border */
}

.comparison-table .highlight strong {
    color: #1E3A8A; /* Darker blue for the text in the highlight */
}

.comparison-table td:first-child strong {
    color: #2c5aa0;
}

.comparison-table td {
    border: 1px solid #e5e7eb;
}


/* =========================================
   MOBILE CSS - FIXED NAVIGATION
   Root Level Healing - Complete mobile solution
   ========================================= */

/* ================================================== */
/* FALLBACK FOR VERY SMALL SCREENS (< 320px) */
/* ================================================== */

@media (max-width: 319px) {
    
    .comparison-table td {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
    
    .comparison-table td::before {
        font-size: 0.75rem !important;
    }
}



/* =========================================
   MOBILE PHONES (320px - 480px)
   ========================================= */
@media (max-width: 480px) {
    /* CRITICAL: Container and Layout Padding - Use !important to override conflicts */
    .container {
        padding: 0 1rem !important; /* Override line 281 conflict */
    }
    
    .post-layout {
        padding-left: .75rem !important;   /* 24px total with container */
        padding-right: .75rem !important;  /* 24px total with container */
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    .post-content {
        padding-left: 0.5rem !important;  /* 8px additional = 32px total */
        padding-right: 0.5rem !important; /* 8px additional = 32px total */
    }
    
    /* Typography Scaling */
    h1, .post-header h1 {
        font-size: 1.875rem !important; /* Consolidate h1 rules */
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
    
    .post-body p, .post-body ul, .post-body ol {
        font-size: 1rem !important;
    }
    
    /* Featured Image - Consolidate conflicting rules */
    .post-featured-image {
        width: 95% !important;
        max-width: none !important;
        margin: 2rem auto 1.5rem auto !important;
        border-radius: 1rem !important;
    }
    
    /* COMPLETE MOBILE NAVIGATION - FIXED */
    .main-nav-menu {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: 70% !important; /* Slightly wider on small screens */
        background-color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(100%) !important; /* Hide off-screen */
        transition: transform 0.5s ease-in !important;
        box-shadow: -5px 0px 15px rgba(0,0,0,0.1) !important;
        z-index: 9999 !important; /* Ensure it's on top */
    }
    
    /* Active state for slide-out menu */
    .main-nav-menu.active {
        transform: translateX(0%) !important; /* Slide into view */
    }
    
    /* Navigation links in mobile menu */
    .main-nav-menu .nav-link {
        margin: 20px 0 !important;
        font-size: 18px !important;
        text-align: center !important;
        width: 100% !important;
        padding: 10px 20px !important;
    }
    
    /* Show hamburger icon */
    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        cursor: pointer !important;
        padding: 5px !important;
    }
    
    /* Hamburger icon styling */
    .nav-toggle span {
        width: 25px !important;
        height: 3px !important;
        background: #374151 !important;
        margin: 3px 0 !important;
        transition: 0.3s !important;
        display: block !important;
    }
    
    /* Grid Layouts */
    .blog-grid-home {
        grid-template-columns: 1fr !important;
    }
    
    .results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Cards and Components */
    .problem-card, .solution-card {
        padding: 1.5rem !important;
    }
    
    .lab-report-thumbnail img {
        height: 300px !important;
    }
    
    /* Hero Section */
    .hero-stats {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* COMPARISON TABLE - MOBILE PHONES */
    /* Container overflow protection - PREVENTS NAVIGATION ISSUES */
    .post-content,
    .post-body,
    .content {
        overflow-x: hidden !important; /* Prevent page-wide scrolling */
    }
    
    /* Comparison Table Mobile - Stacked Cards */
    .comparison-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 1.5rem 0 !important;
    }
    
    .comparison-table thead {
        display: none !important;
    }
    
    .comparison-table,
    .comparison-table tbody,
    .comparison-table tr,
    .comparison-table td {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
    }
    
    .comparison-table tr {
        margin-bottom: 1.5rem !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .comparison-table td {
        border: none !important;
        border-bottom: 1px solid #F1F5F9 !important;
        padding: 0.75rem 1rem !important;
        position: relative !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    .comparison-table td:last-child {
        border-bottom: 0 !important;
    }
    
    .comparison-table td::before {
        content: attr(data-label) !important;
        display: block !important;
        font-weight: 600 !important;
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        color: #64748B !important;
        margin-bottom: 0.25rem !important;
    }
    
    .comparison-table .highlight {
        border-left: none !important;
        border-top: 4px solid #2563EB !important;
        background-color: #EFF6FF !important;
    }
    
    .comparison-table .highlight td {
        color: #1E3A8A !important;
    }


}

/* =========================================
   SMALL TABLETS (481px - 640px) - FIXED GAP
   ========================================= */
@media (min-width: 481px) and (max-width: 640px) {
    .post-layout {
        padding-left: .75rem !important;  /* 24px */
        padding-right: .75rem !important; /* 24px */
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }
    
    .post-content {
        padding-left: 0.75rem !important;  /* 12px additional = 36px total */
        padding-right: 0.75rem !important; /* 12px additional = 36px total */
    }
    
    .container {
        padding: 0 1.5rem !important;
    }
    
    /* NAVIGATION FOR SMALL TABLETS - FIXED */
    .main-nav-menu {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: 60% !important;
        background-color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(100%) !important;
        transition: transform 0.5s ease-in !important;
        box-shadow: -5px 0px 15px rgba(0,0,0,0.1) !important;
        z-index: 9999 !important;
    }
    
    .main-nav-menu.active {
        transform: translateX(0%) !important;
    }
    
    .main-nav-menu .nav-link {
        margin: 20px 0 !important;
        font-size: 18px !important;
        text-align: center !important;
        padding: 10px 20px !important;
    }
    
    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        cursor: pointer !important;
        padding: 5px !important;
    }
    
    .nav-toggle span {
        width: 25px !important;
        height: 3px !important;
        background: #374151 !important;
        margin: 3px 0 !important;
        transition: 0.3s !important;
        display: block !important;
    }
    
    .quiz-container {
        padding: 2rem 1.5rem !important;
    }
    
    .quiz-header h2 {
        font-size: 1.5rem !important;
    }
    
    .blog-grid-home {
        grid-template-columns: 1fr !important;
    }

    /* COMPARISON TABLE - SMALL TABLETS */
    /* Container overflow protection */
    .post-content,
    .post-body,
    .content {
        overflow-x: hidden !important;
    }
    
    /* Comparison Table - Stacked Cards for Small Tablets */
    .comparison-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 1.5rem 0 !important;
    }
    
    .comparison-table thead {
        display: none !important;
    }
    
    .comparison-table,
    .comparison-table tbody,
    .comparison-table tr,
    .comparison-table td {
        display: block !important;
        width: 100% !important;
    }
    
    .comparison-table tr {
        margin-bottom: 1.5rem !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 0.5rem !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    .comparison-table td {
        border: none !important;
        border-bottom: 1px solid #F1F5F9 !important;
        padding: 0.75rem 1rem !important;
        position: relative !important;
        font-size: 0.95rem !important;
    }
    
    .comparison-table td:last-child {
        border-bottom: 0 !important;
    }
    
    .comparison-table td::before {
        content: attr(data-label) !important;
        display: block !important;
        font-weight: 600 !important;
        font-size: 0.85rem !important;
        text-transform: uppercase !important;
        color: #64748B !important;
        margin-bottom: 0.25rem !important;
    }
    
    .comparison-table .highlight {
        border-left: none !important;
        border-top: 4px solid #2563EB !important;
        background-color: #EFF6FF !important;
    }



}

/* =========================================
   MEDIUM TABLETS (641px - 768px)
   ========================================= */
@media (min-width: 641px) and (max-width: 768px) {
    .post-layout {
        padding-left: 1rem !important;   /* 32px */
        padding-right: 1rem !important;  /* 32px */
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .post-content {
        padding-left: 1rem !important;   /* 16px additional = 48px total */
        padding-right: 1rem !important;  /* 16px additional = 48px total */
    }
    
    .container {
        padding: 0 2rem !important;
    }
    
    /* Typography for medium tablets */
    .post-header h1 {
        font-size: 2rem !important;
    }
    
    .home-hero-title {
        font-size: 2.5rem !important;
    }
    
    .about-hero-title {
        font-size: 2.25rem !important;
    }
    
    .page-header h1 {
        font-size: 2.25rem !important;
    }
    
    /* Navigation - Still mobile menu */
    .main-nav-menu {
        position: fixed !important;
        right: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: 60% !important;
        background-color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(100%) !important;
        transition: transform 0.5s ease-in !important;
        box-shadow: -5px 0px 15px rgba(0,0,0,0.1) !important;
        z-index: 9999 !important;
    }
    
    .main-nav-menu.active {
        transform: translateX(0%) !important;
    }
    
    .main-nav-menu .nav-link {
        margin: 20px 0 !important;
        font-size: 18px !important;
        text-align: center !important;
        padding: 10px 20px !important;
    }
    
    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        cursor: pointer !important;
        padding: 5px !important;
    }
    
    .nav-toggle span {
        width: 25px !important;
        height: 3px !important;
        background: #374151 !important;
        margin: 3px 0 !important;
        transition: 0.3s !important;
        display: block !important;
    }
    
    /* Grid Layouts */
    .values-grid {
        grid-template-columns: 1fr !important;
    }
    
    .problem-solution-grid, .education-grid {
        grid-template-columns: 1fr !important;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .lab-reports-gallery {
        grid-template-columns: 1fr !important;
    }
    
    .modal-navigation {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Sections Padding */
    .philosophy-section, .final-cta, .latest-articles, .home-hero {
        padding: 4rem 0 !important;
    }
    
    /* Video Lightbox */
    .video-lightbox-content {
        width: 95% !important;
        margin: 0 auto !important;
    }
    
    .video-lightbox iframe {
        height: 250px !important;
    }
    
    .video-trigger-button {
        padding: 12px 20px !important;
        font-size: 1rem !important;
    }
    
    /* Blog Infographic */
    .blog-post-infographic {
        margin: 1.5rem auto !important;
    }
    
    /* Comparison Table Mobile */
    .comparison-table thead {
        display: none !important;
    }
    
    .comparison-table,
    .comparison-table tbody,
    .comparison-table tr,
    .comparison-table td {
        display: block !important;
        width: 100% !important;
    }
    
    .comparison-table tr {
        margin-bottom: 1.5rem !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 0.5rem !important;
    }
    
    .comparison-table td {
        border: none !important;
        border-bottom: 1px solid #F1F5F9 !important;
        padding-left: 1rem !important;
        position: relative !important;
    }
    
    .comparison-table td:last-child {
        border-bottom: 0 !important;
    }
    
    .comparison-table td::before {
        content: attr(data-label) !important;
        display: block !important;
        font-weight: 600 !important;
        font-size: 0.8rem !important;
        text-transform: uppercase !important;
        color: #64748B !important;
        margin-bottom: 0.25rem !important;
    }
    
    .comparison-table .highlight {
        border-left: none !important;
        border-top: 4px solid #2563EB !important;
    }
}


/* ================================================== */
/* ACCESSIBILITY & PERFORMANCE ENHANCEMENTS */
/* ================================================== */

@media (max-width: 768px) {
    
    /* CRITICAL: Container overflow protection for ALL tables */
    .post-content,
    .post-body,
    .content {
        overflow-x: hidden !important; /* Prevent page-wide scrolling */
    }
    
    /* Touch-friendly scrolling indicator */
    .comparison-table::-webkit-scrollbar {
        height: 8px !important;
    }
    
    .comparison-table::-webkit-scrollbar-track {
        background: #f1f5f9 !important;
        border-radius: 4px !important;
    }
    
    .comparison-table::-webkit-scrollbar-thumb {
        background: #cbd5e1 !important;
        border-radius: 4px !important;
    }
    
    .comparison-table::-webkit-scrollbar-thumb:hover {
        background: #94a3b8 !important;
    }
    
    /* Focus states for accessibility */
    .comparison-table:focus {
        outline: 2px solid #3b82f6 !important;
        outline-offset: 2px !important;
    }
    
    /* Performance optimization */
    .comparison-table {
        will-change: scroll-position !important;
        transform: translateZ(0) !important; /* Force hardware acceleration */
    }
}





/* =========================================
   LARGE TABLETS (769px - 1023px)
   ========================================= */
@media (min-width: 769px) and (max-width: 1023px) {
    /* Show desktop navigation */
    .main-nav-menu {
        display: flex !important;
        position: static !important;
        transform: none !important;
        flex-direction: row !important;
        background: transparent !important;
        box-shadow: none !important;
        height: auto !important;
        width: auto !important;
        z-index: auto !important;
    }
    
    .nav-toggle {
        display: none !important;
    }
    
    .main-nav-menu .nav-link {
        margin: 0 1rem !important;
        font-size: 1rem !important;
        padding: 0 !important;
    }
    
    /* Grid Layouts */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .testimonial-featured {
        grid-template-columns: 1fr 1fr !important;
        padding: 3rem !important;
    }
    
    .education-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    
    .post-coda {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Typography */
    h1 {
        font-size: 3rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }

}

/* =========================================
   DESKTOP (1024px and up)
   ========================================= */
@media (min-width: 1024px) {
    /* Desktop navigation - same as large tablets */
    .main-nav-menu {
        display: flex !important;
        position: static !important;
        transform: none !important;
        flex-direction: row !important;
        background: transparent !important;
        box-shadow: none !important;
        height: auto !important;
        width: auto !important;
        z-index: auto !important;
    }
    
    .nav-toggle {
        display: none !important;
    }
    
    .main-nav-menu .nav-link {
        margin: 0 1rem !important;
        font-size: 1rem !important;
        padding: 0 !important;
    }
    
    .blog-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .blog-grid-home {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}





/* =========================================
   MOBILE LAYOUT FIXES
   References Links & Navigation Improvements
   ========================================= */

/* =========================================
   REFERENCES SECTION - HYPERLINK OVERFLOW FIX
   ========================================= */

/* Mobile References Section Fixes */
@media (max-width: 768px) {
    
    /* References section container */
    .references-section,
    .post-references,
    .blog-references {
        padding: 0 !important;
        margin: 2rem 0 !important;
    }
    
    /* References heading */
    .references-section h2,
    .post-references h2,
    .blog-references h2,
    h2:contains("References") {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
        padding: 0 !important;
    }
    
    /* References list items */
    .references-section ol,
    .references-section ul,
    .post-references ol,
    .post-references ul,
    .blog-references ol,
    .blog-references ul {
        padding-left: 1rem !important;
        margin: 0 !important;
    }
    
    .references-section li,
    .post-references li,
    .blog-references li {
        margin-bottom: 1.5rem !important;
        padding-right: 0.5rem !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* CRITICAL: Fix hyperlink overflow */
    .references-section a,
    .post-references a,
    .blog-references a,
    .post-body ol a,
    .post-body ul a {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        display: inline-block !important;
        max-width: 100% !important;
        line-height: 1.4 !important;
        color: #2563eb !important;
        text-decoration: underline !important;
        padding: 2px 0 !important;
        margin: 2px 0 !important;
    }
    
    /* Long URL handling */
    .references-section a[href*="http"],
    .post-references a[href*="http"],
    .blog-references a[href*="http"],
    .post-body a[href*="http"] {
        word-break: break-all !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        max-width: calc(100vw - 4rem) !important;
        box-sizing: border-box !important;
    }
    
    /* DOI and PMC links specific handling */
    .references-section a[href*="doi.org"],
    .references-section a[href*="pmc.ncbi"],
    .references-section a[href*="pubmed"],
    .post-references a[href*="doi.org"],
    .post-references a[href*="pmc.ncbi"],
    .post-references a[href*="pubmed"] {
        font-size: 0.9rem !important;
        word-break: break-all !important;
        line-height: 1.3 !important;
    }
}

/* =========================================
   PREVIOUS/NEXT POST NAVIGATION - LAYOUT FIX
   ========================================= */

/* Mobile Navigation Cards Improvements */
@media (max-width: 768px) {
    
    /* Main navigation container */
    .post-navigation,
    .blog-navigation,
    .article-navigation {
        margin: 3rem 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    
    /* Individual navigation cards */
    .nav-previous,
    .nav-next,
    .previous-post,
    .next-post,
    .post-nav-item {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.75rem !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
        color: inherit !important;
    }
    
    /* Hover states for navigation cards */
    .nav-previous:hover,
    .nav-next:hover,
    .previous-post:hover,
    .next-post:hover,
    .post-nav-item:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-2px) !important;
        border-color: #2563eb !important;
    }
    
    /* Navigation labels (Previous Article, Next Article) */
    .nav-label,
    .post-nav-label,
    .navigation-label {
        font-size: 0.875rem !important;
        color: #6b7280 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }
    
    /* Navigation titles */
    .nav-title,
    .post-nav-title,
    .navigation-title {
        font-size: 1.125rem !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: #1f2937 !important;
        margin: 0 !important;
        word-wrap: break-word !important;
    }
    
    /* Arrow indicators */
    .nav-arrow,
    .post-nav-arrow {
        font-size: 1.25rem !important;
        color: #2563eb !important;
        margin: 0 0.5rem !important;
    }
    
    /* Previous article specific styling */
    .nav-previous .nav-arrow,
    .previous-post .nav-arrow {
        float: left !important;
        margin-right: 0.75rem !important;
        margin-left: 0 !important;
    }
    
    /* Next article specific styling */
    .nav-next .nav-arrow,
    .next-post .nav-arrow {
        float: right !important;
        margin-left: 0.75rem !important;
        margin-right: 0 !important;
    }
    
    /* Clear floats */
    .nav-previous::after,
    .nav-next::after,
    .previous-post::after,
    .next-post::after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }
}

/* =========================================
   EXTRA SMALL MOBILE (≤ 480px) ADJUSTMENTS
   ========================================= */

@media (max-width: 480px) {
    
    /* Tighter spacing for very small screens */
    .post-navigation,
    .blog-navigation,
    .article-navigation {
        margin: 2rem 0 !important;
        gap: 1rem !important;
    }
    
    .nav-previous,
    .nav-next,
    .previous-post,
    .next-post,
    .post-nav-item {
        padding: 1.25rem !important;
        border-radius: 0.5rem !important;
    }
    
    .nav-title,
    .post-nav-title,
    .navigation-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    
    /* References adjustments for very small screens */
    .references-section a,
    .post-references a,
    .blog-references a {
        font-size: 0.875rem !important;
        max-width: calc(100vw - 3rem) !important;
    }
}

/* =========================================
   FALLBACK SELECTORS FOR DIFFERENT HTML STRUCTURES
   ========================================= */

/* Generic selectors for various blog structures */
@media (max-width: 768px) {
    
    /* References - catch-all selectors */
    .post-body h2 + ol a,
    .post-body h2 + ul a,
    .post-content h2 + ol a,
    .post-content h2 + ul a,
    .content h2 + ol a,
    .content h2 + ul a {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
    
    /* Navigation - catch-all selectors */
    .wp-block-post-navigation,
    .post-nav,
    .entry-navigation,
    .posts-navigation {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        margin: 3rem 0 !important;
    }
    
    .wp-block-post-navigation a,
    .post-nav a,
    .entry-navigation a,
    .posts-navigation a {
        display: block !important;
        padding: 1.5rem !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.75rem !important;
        text-decoration: none !important;
        background: #ffffff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    }
}

/* =========================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================= */

@media (max-width: 768px) {
    
    /* Focus states for navigation */
    .nav-previous:focus,
    .nav-next:focus,
    .previous-post:focus,
    .next-post:focus {
        outline: 2px solid #2563eb !important;
        outline-offset: 2px !important;
    }
    
    /* Touch-friendly sizing */
    .nav-previous,
    .nav-next,
    .previous-post,
    .next-post {
        min-height: 44px !important; /* iOS touch target minimum */
        touch-action: manipulation !important;
    }
    
    /* High contrast for links */
    .references-section a:focus,
    .post-references a:focus,
    .blog-references a:focus {
        background-color: #fef3c7 !important;
        outline: 2px solid #f59e0b !important;
        outline-offset: 1px !important;
    }
}


/* MOBILE ONLY - Footer spacing */
@media (max-width: 768px) {
    footer {
        margin-top: 3rem !important;      /* Space above */
        padding-top: 2.5rem !important;   /* Internal top */
        padding-bottom: 2.5rem !important; /* Internal bottom */
        padding-left: 1rem !important;    /* Side spacing */
        padding-right: 1rem !important;   /* Side spacing */
    }
}

/* =========================================
   HAMBURGER MENU & FOOTER FIXES
   Mobile Layout Issues Resolution
   ========================================= */

/* =========================================
   HAMBURGER MENU OVERLAY FIXES
   ========================================= */

/* Mobile Navigation Menu Overlay - Complete Fix */
@media (max-width: 768px) {
    
    /* CRITICAL: Proper overlay background */
    .main-nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for mobile browsers */
        width: 70% !important;
        background-color: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease-in-out !important;
        box-shadow: -5px 0px 20px rgba(0, 0, 0, 0.3) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        padding: 2rem 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Active state - slide into view */
    .main-nav-menu.active {
        transform: translateX(0%) !important;
    }
    
    /* Dark overlay behind menu */
    .nav-overlay,
    .menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
    }
    
    /* Show overlay when menu is active */
    .nav-overlay.active,
    .menu-overlay.active,
    body.menu-open .nav-overlay,
    body.menu-open .menu-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Navigation links styling */
    .main-nav-menu .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        margin: 0.5rem 0 !important;
        text-align: center !important;
        font-size: 1.125rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        text-decoration: none !important;
        border-radius: 0.5rem !important;
        transition: all 0.2s ease !important;
        background-color: transparent !important;
    }
    
    /* Navigation link hover/active states */
    .main-nav-menu .nav-link:hover,
    .main-nav-menu .nav-link:focus {
        background-color: #f3f4f6 !important;
        color: #2563eb !important;
        transform: translateX(-5px) !important;
    }
    
    /* Active/current page link */
    .main-nav-menu .nav-link.active,
    .main-nav-menu .nav-link.current {
        background-color: #2563eb !important;
        color: #ffffff !important;
    }
    
    /* CTA button in menu */
    .main-nav-menu .cta-link {
        background-color: #2563eb !important;
        color: #ffffff !important;
        margin-top: 1rem !important;
        font-weight: 600 !important;
    }
    
    .main-nav-menu .cta-link:hover {
        background-color: #1d4ed8 !important;
        transform: translateX(-5px) scale(1.02) !important;
    }
    
    /* Hamburger icon improvements */
    .nav-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
        padding: 8px !important;
        border: none !important;
        background: transparent !important;
        z-index: 10000 !important;
        position: relative !important;
    }
    
    /* Hamburger lines */
    .nav-toggle span {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background-color: #374151 !important;
        margin: 3px 0 !important;
        transition: all 0.3s ease !important;
        transform-origin: center !important;
    }
    
    /* Hamburger animation when active */
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px) !important;
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px) !important;
    }
}

/* =========================================
   END OF MOBILE SECTION
   ========================================= */


/* =========================================
   DESKTOP "TAKE THE QUIZ" BUTTON FIX
   Restore proper desktop navigation styling
   ========================================= */

/* =========================================
   DESKTOP NAVIGATION RESTORATION
   Fix the Take The Quiz button on desktop
   ========================================= */

/* Desktop Navigation - Restore proper styling */
@media (min-width: 769px) {
    
    /* CRITICAL: Reset mobile navigation overrides for desktop */
    .main-nav-menu {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        transform: none !important;
        transition: none !important;
        box-shadow: none !important;
        z-index: auto !important;
        height: auto !important;
        width: auto !important;
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    /* Desktop navigation links */
    .main-nav-menu .nav-link {
        display: inline-block !important;
        position: static !important;
        margin: 0 1rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        text-decoration: none !important;
        text-align: left !important;
        width: auto !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        transition: color 0.2s ease !important;
        transform: none !important;
    }
    
    /* Desktop navigation link hover */
    .main-nav-menu .nav-link:hover {
        color: #2563eb !important;
        background-color: transparent !important;
        transform: none !important;
    }
    
    /* CRITICAL: Take The Quiz button styling for desktop */
    .main-nav-menu .cta-link,
    .main-nav-menu .nav-link.cta,
    .main-nav-menu .nav-link[href*="quiz"],
    .main-nav-menu a[href*="quiz"] {
        background-color: #2563eb !important;
        color: #ffffff !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        margin-left: 1rem !important;
        display: inline-block !important;
        border: none !important;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
    }
    
    /* Take The Quiz button hover state */
    .main-nav-menu .cta-link:hover,
    .main-nav-menu .nav-link.cta:hover,
    .main-nav-menu .nav-link[href*="quiz"]:hover,
    .main-nav-menu a[href*="quiz"]:hover {
        background-color: #1d4ed8 !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3) !important;
    }
    
    /* Hide hamburger menu on desktop */
    .nav-toggle {
        display: none !important;
    }
    
    /* Ensure no mobile menu overlays on desktop */
    .nav-overlay,
    .menu-overlay {
        display: none !important;
    }
    
    /* Reset any mobile body classes */
    body.menu-open {
        overflow: auto !important;
        position: static !important;
        width: auto !important;
    }
}

/* =========================================
   LARGE DESKTOP ENHANCEMENTS
   ========================================= */

@media (min-width: 1024px) {
    
    /* Enhanced spacing for large screens */
    .main-nav-menu .nav-link {
        margin: 0 1.25rem !important;
        padding: 0.625rem 1.25rem !important;
    }
    
    /* Enhanced Take The Quiz button for large screens */
    .main-nav-menu .cta-link,
    .main-nav-menu .nav-link.cta,
    .main-nav-menu .nav-link[href*="quiz"],
    .main-nav-menu a[href*="quiz"] {
        padding: 0.875rem 2rem !important;
        font-size: 1rem !important;
        margin-left: 1.5rem !important;
    }
}

/* =========================================
   FALLBACK SELECTORS FOR DIFFERENT STRUCTURES
   ========================================= */

/* Additional selectors for various navigation structures */
@media (min-width: 769px) {
    
    /* Header navigation variations */
    .header-nav .nav-link,
    .site-nav .nav-link,
    .primary-nav .nav-link {
        position: static !important;
        transform: none !important;
        background: transparent !important;
        padding: 0.5rem 1rem !important;
        margin: 0 0.5rem !important;
    }
    
    /* CTA button variations */
    .header-nav .cta-link,
    .site-nav .cta-link,
    .primary-nav .cta-link,
    .nav-cta,
    .button-cta {
        background-color: #2563eb !important;
        color: #ffffff !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 0.5rem !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
    
    /* WordPress navigation block fixes */
    .wp-block-navigation .wp-block-navigation-item a {
        position: static !important;
        transform: none !important;
        background: transparent !important;
    }
    
    /* Generic navigation menu fixes */
    nav ul li a,
    .navigation ul li a,
    .menu ul li a {
        position: static !important;
        transform: none !important;
        background: transparent !important;
    }
}

/* =========================================
   ACCESSIBILITY & FOCUS STATES
   ========================================= */

@media (min-width: 769px) {
    
    /* Focus states for desktop navigation */
    .main-nav-menu .nav-link:focus {
        outline: 2px solid #2563eb !important;
        outline-offset: 2px !important;
        background-color: transparent !important;
        transform: none !important;
    }
    
    /* Focus state for Take The Quiz button */
    .main-nav-menu .cta-link:focus,
    .main-nav-menu .nav-link.cta:focus,
    .main-nav-menu .nav-link[href*="quiz"]:focus {
        outline: 2px solid #ffffff !important;
        outline-offset: 2px !important;
        background-color: #1d4ed8 !important;
    }
    
    /* Active/current page styling */
    .main-nav-menu .nav-link.active,
    .main-nav-menu .nav-link.current,
    .main-nav-menu .nav-link[aria-current="page"] {
        color: #2563eb !important;
        font-weight: 600 !important;
        background-color: transparent !important;
    }
}

/* =========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================= */

/* Remove mobile animations on desktop */
@media (min-width: 769px) {
    
    .main-nav-menu,
    .main-nav-menu .nav-link,
    .nav-toggle span {
        will-change: auto !important;
        backface-visibility: visible !important;
    }
    
    /* Ensure smooth hover transitions only */
    .main-nav-menu .nav-link,
    .main-nav-menu .cta-link {
        transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    }
}

/* =========================================
   DESKTOP "TAKE THE QUIZ" BUTTON WITH GRADIENT
   Restore gradient styling to match mobile
   ========================================= */

/* =========================================
   DESKTOP NAVIGATION RESTORATION WITH GRADIENT
   ========================================= */

/* Desktop Navigation - Restore proper styling */
@media (min-width: 769px) {
    
    /* CRITICAL: Reset mobile navigation overrides for desktop */
    .main-nav-menu {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        transform: none !important;
        transition: none !important;
        box-shadow: none !important;
        z-index: auto !important;
        height: auto !important;
        width: auto !important;
        background-color: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }
    
    /* Desktop navigation links */
    .main-nav-menu .nav-link {
        display: inline-block !important;
        position: static !important;
        margin: 0 1rem !important;
        padding: 0.5rem 1rem !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        color: #374151 !important;
        text-decoration: none !important;
        text-align: left !important;
        width: auto !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        transition: color 0.2s ease !important;
        transform: none !important;
    }
    
    /* Desktop navigation link hover */
    .main-nav-menu .nav-link:hover {
        color: #2563eb !important;
        background-color: transparent !important;
        transform: none !important;
    }
    
    /* CRITICAL: Take The Quiz button with GRADIENT styling for desktop */
    .main-nav-menu .cta-link,
    .main-nav-menu .nav-link.cta,
    .main-nav-menu .nav-link[href*="quiz"],
    .main-nav-menu a[href*="quiz"] {
        /* Beautiful blue gradient - matches mobile */
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%) !important;
        color: #ffffff !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        margin-left: 1rem !important;
        display: inline-block !important;
        border: none !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Take The Quiz button hover state with enhanced gradient */
    .main-nav-menu .cta-link:hover,
    .main-nav-menu .nav-link.cta:hover,
    .main-nav-menu .nav-link[href*="quiz"]:hover,
    .main-nav-menu a[href*="quiz"]:hover {
        /* Enhanced gradient on hover */
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e3a8a 100%) !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4) !important;
    }
    
    /* Take The Quiz button active/pressed state */
    .main-nav-menu .cta-link:active,
    .main-nav-menu .nav-link.cta:active,
    .main-nav-menu .nav-link[href*="quiz"]:active,
    .main-nav-menu a[href*="quiz"]:active {
        transform: translateY(0px) !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
    }
    
    /* Hide hamburger menu on desktop */
    .nav-toggle {
        display: none !important;
    }
    
    /* Ensure no mobile menu overlays on desktop */
    .nav-overlay,
    .menu-overlay {
        display: none !important;
    }
    
    /* Reset any mobile body classes */
    body.menu-open {
        overflow: auto !important;
        position: static !important;
        width: auto !important;
    }
}

/* =========================================
   LARGE DESKTOP ENHANCEMENTS
   ========================================= */

@media (min-width: 1024px) {
    
    /* Enhanced spacing for large screens */
    .main-nav-menu .nav-link {
        margin: 0 1.25rem !important;
        padding: 0.625rem 1.25rem !important;
    }
    
    /* Enhanced Take The Quiz button for large screens */
    .main-nav-menu .cta-link,
    .main-nav-menu .nav-link.cta,
    .main-nav-menu .nav-link[href*="quiz"],
    .main-nav-menu a[href*="quiz"] {
        padding: 0.875rem 2rem !important;
        font-size: 1rem !important;
        margin-left: 1.5rem !important;
        /* Enhanced gradient for larger screens */
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 25%, #1d4ed8 75%, #1e40af 100%) !important;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25) !important;
    }
    
    /* Enhanced hover for large screens */
    .main-nav-menu .cta-link:hover,
    .main-nav-menu .nav-link.cta:hover,
    .main-nav-menu .nav-link[href*="quiz"]:hover,
    .main-nav-menu a[href*="quiz"]:hover {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 25%, #1e40af 75%, #1e3a8a 100%) !important;
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35) !important;
        transform: translateY(-3px) !important;
    }
}

/* =========================================
   GRADIENT VARIATIONS FOR DIFFERENT STATES
   ========================================= */

@media (min-width: 769px) {
    
    /* Focus state with gradient */
    .main-nav-menu .cta-link:focus,
    .main-nav-menu .nav-link.cta:focus,
    .main-nav-menu .nav-link[href*="quiz"]:focus {
        outline: 3px solid rgba(59, 130, 246, 0.5) !important;
        outline-offset: 2px !important;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%) !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
    }
    
    /* Disabled state (if needed) */
    .main-nav-menu .cta-link:disabled,
    .main-nav-menu .nav-link.cta:disabled,
    .main-nav-menu .nav-link[href*="quiz"]:disabled {
        background: linear-gradient(135deg, #9ca3af 0%, #6b7280 50%, #4b5563 100%) !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: none !important;
    }
}

/* =========================================
   FALLBACK SELECTORS FOR DIFFERENT STRUCTURES
   ========================================= */

/* Additional selectors for various navigation structures */
@media (min-width: 769px) {
    
    /* Header navigation variations */
    .header-nav .nav-link,
    .site-nav .nav-link,
    .primary-nav .nav-link {
        position: static !important;
        transform: none !important;
        background: transparent !important;
        padding: 0.5rem 1rem !important;
        margin: 0 0.5rem !important;
    }
    
    /* CTA button variations with gradient */
    .header-nav .cta-link,
    .site-nav .cta-link,
    .primary-nav .cta-link,
    .nav-cta,
    .button-cta {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%) !important;
        color: #ffffff !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 0.5rem !important;
        text-decoration: none !important;
        display: inline-block !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    }
    
    /* WordPress navigation block fixes */
    .wp-block-navigation .wp-block-navigation-item a {
        position: static !important;
        transform: none !important;
        background: transparent !important;
    }
    
    /* Generic navigation menu fixes */
    nav ul li a,
    .navigation ul li a,
    .menu ul li a {
        position: static !important;
        transform: none !important;
        background: transparent !important;
    }
}

/* =========================================
   ACCESSIBILITY & ANIMATION ENHANCEMENTS
   ========================================= */

@media (min-width: 769px) {
    
    /* Smooth gradient animation on hover */
    .main-nav-menu .cta-link,
    .main-nav-menu .nav-link.cta,
    .main-nav-menu .nav-link[href*="quiz"],
    .main-nav-menu a[href*="quiz"] {
        background-size: 200% 200% !important;
        animation: gradientShift 3s ease infinite !important;
    }
    
    /* Pause animation on hover for better UX */
    .main-nav-menu .cta-link:hover,
    .main-nav-menu .nav-link.cta:hover,
    .main-nav-menu .nav-link[href*="quiz"]:hover,
    .main-nav-menu a[href*="quiz"]:hover {
        animation-play-state: paused !important;
    }
    
    /* Active/current page styling */
    .main-nav-menu .nav-link.active,
    .main-nav-menu .nav-link.current,
    .main-nav-menu .nav-link[aria-current="page"] {
        color: #2563eb !important;
        font-weight: 600 !important;
        background-color: transparent !important;
    }
}

/* =========================================
   GRADIENT ANIMATION KEYFRAMES
   ========================================= */

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* =========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================= */

/* Remove mobile animations on desktop */
@media (min-width: 769px) {
    
    .main-nav-menu,
    .main-nav-menu .nav-link {
        will-change: transform, box-shadow !important;
        backface-visibility: hidden !important;
    }
    
    /* Ensure smooth transitions */
    .main-nav-menu .nav-link {
        transition: color 0.2s ease !important;
    }
    
    .main-nav-menu .cta-link,
    .main-nav-menu .nav-link.cta,
    .main-nav-menu .nav-link[href*="quiz"],
    .main-nav-menu a[href*="quiz"] {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* =========================================
   CRITICAL OVERRIDES FOR DESKTOP
   Place at end to ensure highest specificity
   ========================================= */

/* Final desktop navigation reset with gradient */
@media (min-width: 769px) {
    
    /* Force reset any mobile positioning */
    .main-nav-menu {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        transition: none !important;
    }
    
    /* Force reset mobile link styling */
    .main-nav-menu .nav-link {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 1rem !important;
        padding: 0.5rem 1rem !important;
        text-align: left !important;
        font-size: 1rem !important;
        background: transparent !important;
        border-radius: 0 !important;
        transform: none !important;
    }
    
    /* Ensure Take The Quiz button always has gradient */
    .main-nav-menu .cta-link,
    .main-nav-menu .nav-link.cta,
    .main-nav-menu .nav-link[href*="quiz"],
    .main-nav-menu a[href*="quiz"],
    a[href*="quiz"].nav-link {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%) !important;
        color: #ffffff !important;
        border-radius: 0.5rem !important;
        padding: 0.75rem 1.5rem !important;
        margin-left: 1rem !important;
        text-decoration: none !important;
        display: inline-block !important;
        font-weight: 600 !important;
        transform: none !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        text-align: center !important;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
        transition: all 0.3s ease !important;
    }
}
/* =========================================
   CRITICAL OVERRIDES - PLACE AT END
   ========================================= */

/* Ensure mobile padding always works - REMOVE NAVIGATION CONFLICTS */
@media (max-width: 768px) {
    .post-content {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Ensure hamburger is always visible on mobile */
    .nav-toggle {
        display: flex !important;
    }
}

/* Final safety net for very small screens */
@media (max-width: 320px) {
    .post-layout {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .post-content {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .container {
        padding: 0 0.75rem !important;
    }
    
    /* Ensure navigation still works on very small screens */
    .main-nav-menu {
        width: 80% !important; /* Wider on very small screens */
    }
}

/* Blog Post Image Styling */
.post-image {
    margin: 2rem 0;
    text-align: center;
}

.post-image img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    display: block;
    max-width: 100%;
}

.post-image .image-caption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .post-image {
        margin: 1.5rem 0;
    }
    
    .post-image img {
        border-radius: 0.75rem;
    }
    
    .post-image .image-caption {
        font-size: 0.85rem;
        margin-top: 0.5rem;
        padding: 0 1rem;
    }
}

/* ========================================
   VIDEO LIGHTBOX STYLES
   Add these styles to your main CSS stylesheet
   ======================================== */

/* Enhanced Video Lightbox Styles */
.video-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-in-out;
    /* CENTERING FIX */
    justify-content: center;
    align-items: center;
}

.video-lightbox.active {
    display: flex; /* This is crucial */
    align-items: center;
    justify-content: center;
}


.video-lightbox-content {
    position: fixed !important;
    width: 90%;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90%;
    max-width: 900px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: slideIn 0.4s ease-out;
}

.video-lightbox iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 12px;
}

.video-close-btn {
    position: absolute;
    top: -50px;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.video-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Enhanced Video Trigger with Thumbnail */
.video-trigger-container {
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    max-width: 600px;
    margin: 0 auto;
}

.video-trigger-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.video-thumbnail {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease;
}

.video-trigger-container:hover .video-thumbnail {
    transform: scale(1.02);
}

.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.video-trigger-container:hover .video-play-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.video-play-button {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.video-trigger-container:hover .video-play-button {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
}

.video-play-icon {
    width: 0;
    height: 0;
    border-left: 25px solid #333;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    margin-left: 5px;
}

.video-info-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 30px 20px 20px;
    text-align: center;
}

.video-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.video-duration {
    font-size: 14px;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { 
        opacity: 0;
        transform: scale(0.8) translateY(50px);
    }
    to { 
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .video-lightbox-content {
        width: 95%;
        margin: 20px;
    }
    
    .video-close-btn {
        top: -45px;
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
    
    .video-play-button {
        width: 60px;
        height: 60px;
    }
    
    .video-play-icon {
        border-left-width: 18px;
        border-top-width: 11px;
        border-bottom-width: 11px;
    }
    
    .video-title {
        font-size: 16px;
    }
    
    .video-info-overlay {
        padding: 20px 15px 15px;
    }
}


/* Trustpilot Review Gallery Styles */
.review-gallery-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.review-scroller {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    scroll-behavior: smooth;
}

.review-scroller-2 {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    scroll-behavior: smooth;
}




.review-scroller::-webkit-scrollbar {
    width: 10px;
}

.review-scroller::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.review-scroller::-webkit-scrollbar-thumb {
    background: #2c5aa0;
    border-radius: 10px;
}

.review-scroller::-webkit-scrollbar-thumb:hover {
    background: #1e3d6b;
}

.review-image-wrapper {
    margin-bottom: 1rem;
}

.review-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.review-gallery-link {
    text-align: center;
    margin-top: 1rem;
}

.review-gallery-link a {
    color: #2c5aa0;
    text-decoration: underline;
    font-size: 1rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .review-scroller {
        height: 400px;
    }
}

@media (max-width: 480px) {
    .review-scroller {
        height: 350px;
        padding: 0.5rem;
    }
    
    .review-image-wrapper {
        margin-bottom: 0.75rem;
    }
}




/* ============================================
   BLOG CATEGORY FILTERING SYSTEM - CSS
   Add this to your styles.css file
   ============================================ */

/* Filter Container */
.blog-filter-container {
    background: #ffffff;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.blog-filter-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.blog-filter-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.blog-filter-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.blog-filter-count {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Filter Buttons Grid */
.blog-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
}

/* Individual Filter Button */
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #4b5563;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.filter-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #1f2937;
    transform: translateY(-1px);
}

.filter-btn.active {
    background: #10b981;
    border-color: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.filter-btn.active:hover {
    background: #059669;
    border-color: #059669;
}

/* Filter Button Count Badge */
.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: #e5e7eb;
    color: #4b5563;
    border-radius: 9999px;
    transition: all 0.2s ease;
}

.filter-btn.active .filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Blog Card Animations */
.blog-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.blog-card.hidden {
    display: none;
    opacity: 0;
    transform: scale(0.95);
}

/* Category Tag on Blog Card (Optional Visual Tag) */
.blog-card-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #10b981;
    background: #d1fae5;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* Empty State (when no posts match filter) */
.blog-empty-state {
    display: none;
    text-align: center;
    padding: 4rem 2rem;
    color: #6b7280;
}

.blog-empty-state.show {
    display: block;
}

.blog-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.blog-empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.blog-empty-state-text {
    font-size: 1rem;
    color: #6b7280;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .blog-filter-container {
        padding: 1.5rem 0;
    }
    
    .blog-filter-buttons {
        gap: 0.5rem;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .filter-count {
        min-width: 1.25rem;
        height: 1.25rem;
        font-size: 0.6875rem;
    }
    
    .blog-filter-title {
        font-size: 1rem;
    }
}

/* Smooth Grid Reflow */
.blog-grid {
    transition: all 0.3s ease;
}




/**
 * Root Level Healing - Related Posts Section Styles
 * Version: 2.0 - 4 Posts (2x2 Grid)
 * 
 * Matches existing blog card design and Root Level Healing branding
 */

/* ============================================================================
   SECTION CONTAINER
   ============================================================================ */

.related-posts-section {
  margin: 60px 0;
  padding: 60px 0;
  background: #ffffff !important;  /* White instead of grey */
  border-top: 3px solid #4a90e2;
  border-bottom: 3px solid #4a90e2;
}

.related-posts-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============================================================================
   HEADING
   ============================================================================ */

.related-posts-heading,
.post-body .related-posts-heading,
.post-content .related-posts-heading {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2c3e50;
  text-align: center;
  margin: 0 0 40px 0;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -0.5px;
}

.related-posts-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #4a90e2, #50c878);
  margin: 20px auto 0;
  border-radius: 2px;
}

/* ============================================================================
   GRID LAYOUT - UPDATED TO 2x2 (4 POSTS)
   ============================================================================ */

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* CHANGED: 2 columns instead of 3 */
  gap: 30px;
  margin-top: 40px;
}

/* Tablet: Keep 2 columns */
@media (max-width: 992px) {
  .related-posts-grid {
    grid-template-columns: repeat(2, 1fr);  /* UNCHANGED: Already 2 columns */
    gap: 25px;
  }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
  .related-posts-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .related-posts-heading {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  
  .related-posts-section {
    margin: 40px 0;
    padding: 40px 0;
  }
}

/* ============================================================================
   POST CARD
   ============================================================================ */

.related-post-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.related-post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* ============================================================================
   IMAGE
   ============================================================================ */

.related-post-image-link {
  display: block;
  width: 100%;
  height: 240px;  /* Fixed height */
  overflow: hidden;
  background: #f1f5f9;
}

.related-post-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Scale without distortion */
  object-position: center;  /* Keep center visible */
  display: block;
  transition: transform 0.3s ease;
}

.related-post-card:hover .related-post-image-link img {
  transform: scale(1.05);
}


/* ============================================================================
   CONTENT
   ============================================================================ */

.related-post-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ============================================================================
   LABEL - UPDATED FOR 4 POSTS
   ============================================================================ */

.related-post-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #4a90e2;
  margin-bottom: 12px;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

/* Position 1-2: Series posts (blue) */
.related-post-card[data-position="1"] .related-post-label,
.related-post-card[data-position="2"] .related-post-label {
  color: #4a90e2;
}

/* Position 3-4: Discovery posts (green) */
.related-post-card[data-position="3"] .related-post-label,
.related-post-card[data-position="4"] .related-post-label {
  color: #50c878;
}

/* ============================================================================
   TITLE
   ============================================================================ */

.related-post-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 12px 0;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
}

.related-post-title a {
  color: #2c3e50;
  text-decoration: none;
  transition: color 0.2s ease;
}

.related-post-title a:hover {
  color: #4a90e2;
}

/* ============================================================================
   EXCERPT
   ============================================================================ */

.related-post-excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin: 0 0 20px 0;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;  /* ← ADD THIS LINE */
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================================
   BUTTON - UPDATED FOR 4 POSTS
   ============================================================================ */

.related-post-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  align-self: flex-start;
  margin-top: auto;
}

.related-post-btn:hover {
  background: linear-gradient(135deg, #357abd 0%, #2868a8 100%);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

/* Position 3-4 get green button */
.related-post-card[data-position="3"] .related-post-btn,
.related-post-card[data-position="4"] .related-post-btn {
  background: linear-gradient(135deg, #50c878 0%, #3da860 100%);
}

.related-post-card[data-position="3"] .related-post-btn:hover,
.related-post-card[data-position="4"] .related-post-btn:hover {
  background: linear-gradient(135deg, #3da860 0%, #2d8a4a 100%);
  box-shadow: 0 4px 12px rgba(80, 200, 120, 0.3);
}

/* ============================================================================
   LOADING STATE
   ============================================================================ */

.related-posts-loading {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-style: italic;
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.related-posts-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .related-post-card,
  .related-post-image-link img,
  .related-post-btn {
    transition: none;
  }
  
  .related-post-card:hover {
    transform: none;
  }
  
  .related-post-card:hover .related-post-image-link img {
    transform: none;
  }
}

/* Focus styles for keyboard navigation */
.related-post-image-link:focus,
.related-post-title a:focus,
.related-post-btn:focus {
  outline: 3px solid #4a90e2;
  outline-offset: 2px;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  .related-posts-section {
    page-break-inside: avoid;
    background: #ffffff;
    border: 1px solid #ddd;
  }
  
  .related-post-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
  }
  
  .related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }

  .related-post-btn {
    display: none;
  }
}

/* ============================================================================
   BLOG CARD COMPATIBILITY (if using .blog-card class)
   ============================================================================ */

/* Color-code the labels for blog-card class */
.blog-card[data-position="1"] .blog-card-date,
.blog-card[data-position="2"] .blog-card-date {
  color: #4a90e2;
}

.blog-card[data-position="3"] .blog-card-date,
.blog-card[data-position="4"] .blog-card-date {
  color: #50c878;
}




/* ============================================================================
   PRODUCT CATEGORY HEADERS - Add this to your styles.css
   ============================================================================ */

/* Main category header styling */
.product-category-header {
  font-size: 1.75rem;
  font-weight: 700;
  color: #2c3e50;
  margin: 3rem 0 1.5rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid #4a90e2;
  font-family: 'Inter', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: -0.5px;
  position: relative;
}

/* First category header has less top margin */
.product-category-header:first-of-type {
  margin-top: 2rem;
}

/* Accent line under category headers */
.product-category-header::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100px;
  height: 3px;
  background: #50c878;
}

/* Grid spacing for each category section */
.category-products-grid {
  margin-bottom: 2rem;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .product-category-header {
    font-size: 1.5rem;
    margin: 2.5rem 0 1.25rem 0;
  }
  
  .product-category-header:first-of-type {
    margin-top: 1.5rem;
  }
}

/* ============================================================================
   END PRODUCT CATEGORY HEADERS
   ============================================================================ */

/* Products page specific spacing fixes - STRONGER */
.products-page .page-hero {
  margin-bottom: 2rem !important;  /* Reduce space after hero */
  padding-bottom: 1rem !important;
}

.products-page .products-section {
  padding-top: 1rem !important;  /* Reduce space before products section */
}

.products-page .products-intro {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 2rem !important;
}

.products-page .products-intro h2 {
  margin-top: 0 !important;
}

/* Target the container inside products section */
.products-page .products-section > .container {
  padding-top: 1rem !important;
}


/* ---------------------------------- */
/* Page Hero (for Products, Blog, etc)
/* ---------------------------------- */
.page-hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 4rem 0 2rem;  /* Reduced padding */
  text-align: center;
  color: #FFFFFF;
}

.page-title {
  font-size: 3rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.page-subtitle {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Products page specific - reduce spacing */
.products-page .page-hero {
  padding: 3rem 0 1.5rem;  /* Even tighter for products page */
}

.products-page .products-section {
  padding-top: 2rem;
}

.products-page .products-intro {
  margin-bottom: 2rem;
}


/* ============================================================================
   MODERN SNAZZY JUMP LINKS - Choose Your Style!
   ============================================================================ */

/* ========== OPTION 1: Gradient Pills (Recommended) ========== */

.category-jump-links {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 2rem;
  margin: 2.5rem 0 3rem 0;
  text-align: center;
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.category-jump-links h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.jump-links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.jump-link {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50px;
  color: #667eea;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.jump-link:hover {
  background: #FFFFFF;
  color: #764ba2;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.jump-link::before {
  content: '→';
  margin-right: 0.5rem;
  font-weight: 700;
  transition: transform 0.3s ease;
}

.jump-link:hover::before {
  transform: translateX(3px);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

.product-category-header {
  scroll-margin-top: 100px;
}

/* Responsive */
@media (max-width: 768px) {
  .category-jump-links {
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 12px;
  }
  
  .category-jump-links h3 {
    font-size: 1rem;
    margin-bottom: 1.25rem;
  }
  
  .jump-link {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
  }
}


/* ===================================================================
   PILLAR PAGE SPECIFIC STYLES
   These styles are ONLY for pillar page elements and won't affect
   any other pages on the site. All standard elements (headings,
   paragraphs, images, etc.) use existing blog post classes.
   =================================================================== */

/* Table of Contents (Pillar Pages Only) */
.pillar-toc {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    border-left: 4px solid #7c3aed;
    padding: 2rem;
    margin: 2.5rem 0;
    border-radius: 8px;
}

.pillar-toc h2 {
    margin-top: 0;
    margin-bottom: 1.25rem;
    color: #1f2937;
    font-size: 1.5rem;
    font-weight: 700;
}

.pillar-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pillar-toc li {
    margin-bottom: 0.75rem;
}

.pillar-toc li:last-child {
    margin-bottom: 0;
}

.pillar-toc a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 0.25rem 0;
}

.pillar-toc a:hover {
    color: #7c3aed;
    text-decoration: underline;
}

/* Warning Signs Grid (Pillar Pages Only) */
.pillar-warning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0;
}

.pillar-warning-grid .warning-sign {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pillar-warning-grid .warning-sign:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.pillar-warning-grid .warning-sign h4 {
    color: #7c3aed;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.pillar-warning-grid .warning-sign p {
    margin: 0;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Callout Boxes (Pillar Pages Only) */
.pillar-callout {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    padding: 1.75rem;
    margin: 2.5rem 0;
    border-radius: 8px;
}

.pillar-callout h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #92400e;
    font-size: 1.25rem;
    font-weight: 700;
}

.pillar-callout p {
    margin: 0;
    color: #78350f;
    line-height: 1.7;
}

.pillar-callout a {
    color: #92400e;
    font-weight: 600;
}

.pillar-callout a:hover {
    color: #78350f;
}

/* Product Features Grid (Pillar Pages Only) */
.pillar-product-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.pillar-product-features .feature {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
}

.pillar-product-features .feature h4 {
    color: #7c3aed;
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.pillar-product-features .feature p {
    margin: 0;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Clean Slate CTA Box Container */
.pillar-cta-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 3rem 2rem;
    border-radius: 1.5rem;
    text-align: center;
    margin: 3rem 0;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.pillar-cta-box h3 {
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.pillar-cta-box p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Inline links within the paragraph */
.pillar-cta-box p a {
    color: #FCD34D;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pillar-cta-box p a:hover {
    color: #FFFFFF;
}

/* CTA Button (Yellow/Gold) */
.pillar-cta-box .btn-primary {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    color: #2563EB !important;
    border: 2px solid #F59E0B;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 0.75rem;
    min-width: 280px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.pillar-cta-box .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3);
    text-decoration: none !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .pillar-cta-box {
        padding: 2.5rem 1.5rem;
    }
    
    .pillar-cta-box h3 {
        font-size: 1.75rem;
    }
    
    .pillar-cta-box .btn-primary {
        width: 100%;
        max-width: 320px;
    }
}


/* Action Plan Phases (Pillar Pages Only) */
.pillar-action-phases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.pillar-action-phases .phase {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.75rem;
}

.pillar-action-phases .phase h3 {
    color: #7c3aed;
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
}

.pillar-action-phases .phase ul {
    margin: 0;
    padding-left: 1.25rem;
}

.pillar-action-phases .phase li {
    margin-bottom: 0.75rem;
    color: #4b5563;
    line-height: 1.6;
}

.pillar-action-phases .phase li:last-child {
    margin-bottom: 0;
}

/* FAQ Section (Pillar Pages Only) */
.pillar-faq {
    margin: 2rem 0;
}

.pillar-faq .faq-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
}

.pillar-faq .faq-item:last-child {
    margin-bottom: 0;
}

.pillar-faq .faq-item h4 {
    color: #1f2937;
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.pillar-faq .faq-item p {
    margin: 0;
    color: #4b5563;
    line-height: 1.7;
}

/* Resource Library (Pillar Pages Only) */
.pillar-resources {
    margin: 2rem 0;
}

.pillar-resources h3 {
    color: #1f2937;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    font-weight: 700;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.pillar-resources h3:first-of-type {
    margin-top: 1.5rem;
}

.pillar-resources .resource-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.pillar-resources .resource-list li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.pillar-resources .resource-list li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #7c3aed;
    font-weight: bold;
}

.pillar-resources .resource-list li:last-child {
    margin-bottom: 0;
}

.pillar-resources .resource-list a {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pillar-resources .resource-list a:hover {
    color: #7c3aed;
    text-decoration: underline;
}

/* CTA Section Container */
.pillar-final-cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 0rem 2rem;
    border-radius: 1.5rem;
    text-align: center;
    margin: 2rem 0;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.pillar-final-cta h2 {
    color: #FFFFFF;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.pillar-final-cta p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.pillar-final-cta a {
    color: rgba(255, 255, 0);
    
}



/* CTA Buttons Container */
.pillar-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Primary Button (Yellow/Gold) */
.pillar-cta-buttons .btn-primary {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    color: #2563EB !important;
    border: 2px solid #F59E0B;
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.75rem;
    min-width: 240px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.pillar-cta-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3);
}

/* Secondary Button (White/Transparent) */
.pillar-cta-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF !important;
    border: 2px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.75rem;
    min-width: 240px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.pillar-cta-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .pillar-final-cta {
        padding: 3rem 1.5rem;
    }
    
    .pillar-final-cta h2 {
        font-size: 2rem;
    }
    
    .pillar-cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .pillar-cta-buttons .btn-primary,
    .pillar-cta-buttons .btn-secondary {
        width: 100%;
        max-width: 320px;
    }
}



/* ===================================================================
   PILLAR PAGE FOOTER RESOURCES SECTION - FINAL VERSION
   Add this to the END of your pillar-page-additions.css file
   =================================================================== */


        .pillar-footer-resources {
            text-align: center !important;
            margin-bottom: 2.5rem !important;
        }
        
        .pillar-footer-resources h4 {
            color: #7c85d8 !important;
            font-size: 0.9rem !important;
            font-weight: 600 !important;
            letter-spacing: 0.1em !important;
            text-transform: uppercase !important;
            text-align: center !important;
        }
        
        .pillar-footer-resources ul {
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            display: flex !important;
            justify-content: center !important;
            gap: 2.5rem !important;
        }
        
        .pillar-footer-resources ul li {
            list-style: none !important;
            display: inline-block !important;
        }
        
        .pillar-footer-resources ul li a {
            color: #a0aec0 !important;
            text-decoration: none !important;
        }
        
        .pillar-footer-resources ul li a:hover {
            color: #fff !important;
        }
    

/* ===================================================================
   COMPLETE ENHANCED PILLAR PAGE CSS
   COPY THIS ENTIRE FILE and REPLACE your current pillar-page-additions.css
   This version has MORE PROMINENT enhancements (Snazz Level: 6/10)
   =================================================================== */

/* ===================================================================
   PILLAR PAGE FOOTER RESOURCES SECTION
   =================================================================== */

.pillar-footer-resources {
    text-align: center !important;
    margin-bottom: 2.5rem !important;
}

.pillar-footer-resources h4 {
    color: #7c85d8 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

.pillar-footer-resources ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 2.5rem !important;
}

.pillar-footer-resources ul li {
    list-style: none !important;
    display: inline-block !important;
}

.pillar-footer-resources ul li a {
    color: #a0aec0 !important;
    text-decoration: none !important;
}

.pillar-footer-resources ul li a:hover {
    color: #fff !important;
}

/* ===================================================================
   1. ENHANCED GRADIENT SECTION DIVIDERS
   BIGGER, BRIGHTER, MORE PROMINENT!
   =================================================================== */

.pillar-section-divider {
    height: 5px;  /* Increased from 4px */
    background: linear-gradient(90deg, 
        rgba(102, 126, 234, 0) 0%, 
        rgba(102, 126, 234, 0.9) 18%,  /* Starts sooner, brighter */
        rgba(139, 92, 246, 1) 50%,     /* Full brightness */
        rgba(102, 126, 234, 0.9) 82%,  /* Ends later, brighter */
        rgba(102, 126, 234, 0) 100%
    );
    margin: 4rem 0;
    border-radius: 3px;  /* Slightly more rounded */
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.4);  /* Stronger glow */
}

/* Thinner divider for subsections */
.pillar-section-divider-thin {
    height: 3px;  /* Increased from 2px */
    background: linear-gradient(90deg, 
        rgba(102, 126, 234, 0) 0%, 
        rgba(102, 126, 234, 0.7) 25%,  /* Brighter */
        rgba(139, 92, 246, 0.9) 50%,   /* Brighter */
        rgba(102, 126, 234, 0.7) 75%,  /* Brighter */
        rgba(102, 126, 234, 0) 100%
    );
    margin: 2.5rem 0;
    border-radius: 2px;
    box-shadow: 0 1px 6px rgba(139, 92, 246, 0.3);  /* Added glow */
}

/* ===================================================================
   2. ENHANCED TABLE OF CONTENTS
   =================================================================== */

.pillar-toc {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
    border: 2px solid #667eea;
    border-radius: 1rem;
    padding: 2rem;
    margin: 2.5rem 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.pillar-toc h2 {
    color: #667eea;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 2px solid #667eea;
    padding-bottom: 0.75rem;
}

.pillar-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pillar-toc ul li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.pillar-toc ul li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: 700;
}

.pillar-toc ul li a {
    color: #4338ca;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.pillar-toc ul li a:hover {
    color: #667eea;
    padding-left: 0.5rem;
}

/* ===================================================================
   3. ENHANCED HEADINGS WITH GRADIENT ACCENTS
   LONGER, THICKER, WITH GLOW!
   =================================================================== */

/* Major section headings */
.post-body > h2 {
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
}

.post-body > h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;  /* Increased from 80px */
    height: 5px;   /* Increased from 4px */
    background: linear-gradient(90deg, #667eea 0%, #8b5cf6 100%);
    border-radius: 3px;  /* More rounded */
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);  /* Added glow */
}

/* Subsection headings */
.post-body > h3 {
    color: #4338ca;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    padding-left: 1rem;
}

.post-body > h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 5px;      /* Increased from 4px */
    height: 1.75rem; /* Increased from 1.5rem */
    background: linear-gradient(180deg, #667eea 0%, #8b5cf6 100%);
    border-radius: 3px;  /* More rounded */
    box-shadow: 2px 0 6px rgba(139, 92, 246, 0.3);  /* Added glow */
}

/* ===================================================================
   4. ENHANCED IMAGE STYLING
   =================================================================== */

.post-image img {
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-image img:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}

.image-caption {
    color: #64748b;
    font-size: 0.9rem;
    font-style: italic;
    text-align: center;
    margin-top: 0.75rem;
}

/* ===================================================================
   5. ENHANCED WARNING SIGNS GRID
   =================================================================== */

.pillar-warning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0;
}

.pillar-warning-item {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pillar-warning-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
}

.pillar-warning-item h4 {
    color: #92400e;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.pillar-warning-item p {
    color: #78350f;
    font-size: 0.95rem;
    margin: 0;
}

/* ===================================================================
   6. ENHANCED CALLOUT BOXES
   =================================================================== */

.pillar-callout {
    background: linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%);
    border-left: 5px solid #667eea;
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    margin: 2rem 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.pillar-callout p {
    color: #4338ca;
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

.pillar-callout strong {
    color: #3730a3;
    font-weight: 700;
}

/* ===================================================================
   7. ENHANCED RESOURCE LIBRARY
   =================================================================== */

.pillar-resources {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 2.5rem;
    border-radius: 1rem;
    margin: 3rem 0;
    border: 2px solid #e2e8f0;
}

.pillar-resources h2 {
    color: #1e293b;
    text-align: center;
    margin-bottom: 2rem;
}

.pillar-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.pillar-resource-card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pillar-resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
    border-color: #667eea;
}

.pillar-resource-card h3 {
    color: #667eea;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}

.pillar-resource-card p {
    color: #64748b;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.pillar-resource-card a {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pillar-resource-card a:hover {
    color: #4338ca;
    text-decoration: underline;
}

/* ===================================================================
   8. ALTERNATING SECTION BACKGROUNDS (Optional)
   =================================================================== */

.pillar-section-alt {
    background: linear-gradient(135deg, #fafbff 0%, #f8f9fe 100%);
    padding: 3rem 0;
    margin: 3rem 0;
}

/* ===================================================================
   9. ENHANCED FAQ SECTION
   =================================================================== */

.pillar-faq {
    margin: 3rem 0;
}

.pillar-faq-item {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.pillar-faq-item:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

.pillar-faq-item h4 {
    color: #667eea;
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
}

.pillar-faq-item p {
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* ===================================================================
   10. CTA SECTIONS
   =================================================================== */

/* Final CTA Section */
.pillar-final-cta {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4rem 2rem;
    border-radius: 1.5rem;
    text-align: center;
    margin: 4rem 0;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.pillar-final-cta h2 {
    color: #FFFFFF;
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.pillar-final-cta p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pillar-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.pillar-cta-buttons .btn-primary {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    color: #2563EB;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.pillar-cta-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.pillar-cta-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #FFFFFF;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.pillar-cta-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Clean Slate CTA Box */
.pillar-cta-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 3rem 2rem;
    border-radius: 1.5rem;
    text-align: center;
    margin: 3rem 0;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.pillar-cta-box h3 {
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.pillar-cta-box p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pillar-cta-box p a {
    color: #FCD34D;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pillar-cta-box p a:hover {
    color: #FFFFFF;
}

.pillar-cta-box .btn-primary {
    background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%);
    color: #2563EB;
    padding: 1rem 2.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0.75rem;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.pillar-cta-box .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

/* ===================================================================
   11. MOBILE RESPONSIVENESS
   =================================================================== */

@media (max-width: 768px) {
    .pillar-section-divider {
        margin: 2.5rem 0;
        height: 4px;  /* Slightly smaller on mobile */
    }
    
    .pillar-toc {
        padding: 1.5rem;
    }
    
    .post-body > h2::after {
        width: 80px;  /* Slightly smaller on mobile */
        height: 4px;
    }
    
    .post-body > h3::before {
        width: 4px;
        height: 1.5rem;
    }
    
    .pillar-warning-grid {
        grid-template-columns: 1fr;
    }
    
    .pillar-resources {
        padding: 1.5rem;
    }
    
    .pillar-resources-grid {
        grid-template-columns: 1fr;
    }
    
    .pillar-final-cta h2 {
        font-size: 1.75rem;
    }
    
    .pillar-cta-box h3 {
        font-size: 1.5rem;
    }
    
    .pillar-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .pillar-cta-buttons .btn-primary,
    .pillar-cta-buttons .btn-secondary {
        width: 100%;
        max-width: 320px;
    }
}


/* ============================================
   RESOURCES DROPDOWN MENU CSS
   SEO-Friendly | Mobile-Responsive | Accessible
   ============================================ */

/* Dropdown Container */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Toggle Link (Resources) */
.nav-dropdown .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

/* Dropdown Arrow Icon */
.dropdown-arrow {
    transition: transform 0.3s ease;
    margin-top: 2px;
}

/* Rotate arrow when dropdown is open (desktop hover) */
.nav-dropdown:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu Container */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 0.75rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1000;
    
    /* Border for visual separation */
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Show dropdown on hover (Desktop) */
.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Menu Items */
.dropdown-item {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    white-space: nowrap;
}

/* Dropdown Item Hover Effect */
.dropdown-item:hover {
    background-color: #f3f4f6;
    color: #667eea;
    padding-left: 1.75rem;
}

/* Active Dropdown Item (Current Page) */
.dropdown-item.active {
    background-color: #e0e7ff;
    color: #667eea;
    font-weight: 600;
}

/* Add subtle left border on hover */
.dropdown-item:hover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.dropdown-item {
    position: relative;
}


/* ============================================
   MOBILE NAVIGATION (Hamburger Menu)
   ============================================ */

@media (max-width: 768px) {
    /* Dropdown container in mobile */
    .nav-dropdown {
        display: block;
        width: 100%;
    }
    
    /* Dropdown toggle in mobile */
    .nav-dropdown .dropdown-toggle {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0.75rem 1rem;
    }
    
    /* Dropdown menu in mobile (accordion style) */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: #f9fafb;
        padding: 0;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    
    /* Show dropdown when parent has 'active' class (JavaScript toggle) */
    .nav-dropdown.active .dropdown-menu {
        max-height: 500px;
    }
    
    /* Rotate arrow when dropdown is open (mobile tap) */
    .nav-dropdown.active .dropdown-arrow {
        transform: rotate(180deg);
    }
    
    /* Dropdown items in mobile */
    .dropdown-item {
        padding: 0.75rem 1rem 0.75rem 2rem;
        font-size: 0.9rem;
        border-left: 3px solid transparent;
    }
    
    /* Dropdown item hover in mobile */
    .dropdown-item:hover,
    .dropdown-item.active {
        background-color: #e5e7eb;
        border-left-color: #667eea;
        padding-left: 2rem;
    }
    
    /* Remove the ::before pseudo-element in mobile */
    .dropdown-item:hover::before {
        display: none;
    }
}


/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus styles for keyboard navigation */
.dropdown-toggle:focus,
.dropdown-item:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Ensure dropdown is accessible via keyboard */
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ============================================
   OPTIONAL: ANIMATION ENHANCEMENTS
   ============================================ */

/* Subtle fade-in animation for dropdown items */
.dropdown-menu .dropdown-item {
    animation: fadeInItem 0.3s ease forwards;
    opacity: 0;
}

.dropdown-menu .dropdown-item:nth-child(1) { animation-delay: 0.05s; }
.dropdown-menu .dropdown-item:nth-child(2) { animation-delay: 0.1s; }
.dropdown-menu .dropdown-item:nth-child(3) { animation-delay: 0.15s; }
.dropdown-menu .dropdown-item:nth-child(4) { animation-delay: 0.2s; }

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Only animate on desktop, not mobile */
@media (max-width: 768px) {
    .dropdown-menu .dropdown-item {
        animation: none;
        opacity: 1;
    }
}

/* Prevent horizontal overflow on mobile */
@media (max-width: 768px) {
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure all content respects viewport width */
    * {
        max-width: 100vw !important;
    }
    
    /* Fix footer links */
    .footer-section ul {
        padding-left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .pillar-footer-resources {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem 1rem !important;
        box-sizing: border-box !important;
    }
    
    .pillar-footer-resources h4 {
        text-align: center !important;
        margin-bottom: 1rem !important;
    }
    
    .pillar-footer-resources ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }
    
    .pillar-footer-resources ul li {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    
    .pillar-footer-resources ul li a {
        display: block !important;
        width: 100% !important;
        padding: 0.5rem 0.5rem !important;
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
}


@media (max-width: 768px) {
    /* Force text wrapping in mobile dropdown menu with better padding */
    .dropdown-menu .dropdown-item {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.4 !important;
        padding: 0.75rem 2rem 0.75rem 1rem !important; /* More right padding */
        text-align: left !important;
    }
    
    /* Ensure dropdown menu has proper width */
    .dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.5rem 0 !important;
        box-sizing: border-box !important;
    }
}


@media (max-width: 768px) {
    /* Remove gap between CTA section and footer on mobile */
    .cta-section {
        margin-bottom: 0 !important;
        padding-bottom: 2rem !important; /* Keep some internal padding */
    }
    
    .footer {
        margin-top: 0 !important;
        padding-top: 2rem !important; /* Keep some internal padding */
    }
    
    /* Ensure no container padding creates gaps */
    .cta-section .container {
        padding-bottom: 0 !important;
    }
    
    .footer .container {
        padding-top: 0 !important;
    }
    
    /* Alternative: Force sections to touch */
    .cta-section + .footer {
        margin-top: 0 !important;
    }
}


/* ================================================== */
/* MOBILE VIDEO EMBED FIXES                           */
/* ================================================== */

@media (max-width: 768px) {
    /* 1. Fix Lightbox Centering */
    .video-lightbox-content {
        width: 95% !important;
        margin: 0 !important; /* Removes the rogue 20px margin causing the offset */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    /* 2. Fix Title Text Cutoff */
    .video-info-overlay {
        padding: 20px 10px 10px !important; /* Reduces padding to give text more room */
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.95)) !important; /* Slightly darker for readability */
    }
    
    .video-title {
        font-size: 14px !important; /* Smaller font for mobile */
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
        /* Optional: Limits title to 2 lines with an ellipsis (...) if it's still too long */
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;  /* standard 'line-clamp' not yet browser-supported */
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    
    .video-duration {
        font-size: 12px !important;
    }
}

/* ================================================== */
/* Buttons For product page                           */
/* ================================================== */


/* Secondary Outline Button */
.btn-outline {
    background-color: transparent;
    color: #2c5aa0; /* Brand blue text */
    border: 2px solid #2c5aa0; /* Brand blue border */
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    margin-top: 8px; /* <-- Adjust this number! Try 4px to tighten it, or 16px to push it down */
    display: block; /* Makes the button full-width to match the Buy button */
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover effect for the outline button */
.btn-outline:hover {
    background-color: #2c5aa0; /* Fills in with blue on hover */
    color: #ffffff; /* Text turns white on hover */
    box-shadow: 0 4px 10px rgba(44, 90, 160, 0.2);
}


/* Tertiary Text Link */
.btn-text {
    display: block;
    text-align: center;
    color: #475569;
    font-size: 0.95rem;
    font-weight: bold;
    text-decoration: none;
    margin-top: 16px; /* <-- Adjust this number! Try 4px to tighten it, or 16px to push it down */
    transition: color 0.2s ease;
}


.btn-text:hover {
    color: #2c5aa0; /* Turns brand blue on hover */
    text-decoration: underline;
}


/* ================================================== */
/* author box and medical disclaimer                  */
/* ================================================== */


/* Medical Disclaimer */
.medical-disclaimer {
    background-color: #f8f9fa;
    border-left: 4px solid #6c757d;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: #555;
}

/* Author Bio Box */
.author-bio-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    margin: 40px 0;
}

.author-bio-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 20px;
    object-fit: cover;
}

.author-bio-text h4 {
    margin: 0 0 5px 0;
}

.author-bio-text p {
    margin: 0;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
}

.author-bio-text a {
    color: #2563eb;
    text-decoration: underline;
}

/* Make the bio box stack vertically on small mobile screens */
@media (max-width: 600px) {
    .author-bio-box {
        flex-direction: column;
        text-align: center;
    }
    .author-bio-img {
        margin-right: 0;
        margin-bottom: 15px;
    }
}



/* ── Slim Blog Bar for home / root funnel page ── */
.slim-blog-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #12121e;
    padding: 9px 16px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.slim-blog-bar p {
    margin: 0;
    font-size: 13px;
    color: #e0e0e0;
    letter-spacing: 0.02em;
}

.slim-blog-bar a {
    color: #f5a623;
    font-weight: 600;
    text-decoration: none;
    margin-left: 6px;
    transition: opacity 0.2s ease;
}

.slim-blog-bar a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* ── Slim Blog Bar — Mobile Stack ── */
@media (max-width: 600px) {
    .slim-blog-bar {
        flex-direction: column;
        gap: 2px;
        padding: 8px 16px;
    }

    .slim-blog-bar p {
        text-align: center;
    }

    .slim-blog-bar a {
        margin-left: 0;
        display: block;
        white-space: nowrap;
    }
}

/* ── Hover effects for CTA buttons ── */
.cta-btn-learn:hover {
    background: #ffed4e !important;
    transform: translateY(-2px ) !important;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.6) !important;
}

.cta-btn-buy:hover {
    background: #16a34a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(34, 197, 94, 0.6) !important;
}



/* ================================================== */
/* Pillar Page CTA Button Animations                  */
/* ================================================== */

/* Primary button (used in pillar-cta-box and pillar-final-cta) */
.btn-primary,
.btn.btn-primary,
.btn.btn-primary.btn-large {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn.btn-primary.btn-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(44, 90, 160, 0.35);
    background-color: #1a4a8a; /* Slightly deeper blue on hover */
}

.btn-primary:active,
.btn.btn-primary:active,
.btn.btn-primary.btn-large:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(44, 90, 160, 0.25);
}

/* Secondary button (used in pillar-final-cta) */
.btn-secondary {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(44, 90, 160, 0.2);
    background-color: #2c5aa0; /* Fills with brand blue on hover */
    color: #ffffff;
}

.btn-secondary:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(44, 90, 160, 0.15);
}