/**
 * TrendingTags - Accessibility & Bug Fixes
 * Version 97
 */

/* ==============================================
   FIX 1: HERO SLIDER DOTS - MAKE TINY
   Override all existing styles completely
   ============================================== */

/* Reset all dot styles */
.hero-slider-nav-inside .hero-slider-dots-inside {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.hero-slider-dots-inside .hero-dot-inside {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.4) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.hero-slider-dots-inside .hero-dot-inside::before,
.hero-slider-dots-inside .hero-dot-inside::after {
  display: none !important;
  content: none !important;
}

.hero-slider-dots-inside .hero-dot-inside.active {
  width: 20px !important;
  max-width: 20px !important;
  border-radius: 4px !important;
  background: var(--color-accent) !important;
}

.hero-slider-dots-inside .hero-dot-inside:hover {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* Nav buttons smaller */
.hero-slider-nav-inside .hero-nav-btn-inside {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
}

.hero-slider-nav-inside .hero-nav-btn-inside svg {
  width: 14px !important;
  height: 14px !important;
}

/* Container padding */
.hero-slider-nav-inside {
  padding: 10px 14px !important;
  gap: 10px !important;
}

/* ==============================================
   MOBILE - Even tinier dots
   ============================================== */
@media (max-width: 768px) {
  .hero-slider-dots-inside .hero-dot-inside {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    max-width: 6px !important;
    min-height: 6px !important;
    max-height: 6px !important;
  }
  
  .hero-slider-dots-inside .hero-dot-inside.active {
    width: 16px !important;
    max-width: 16px !important;
  }
  
  .hero-slider-nav-inside .hero-slider-dots-inside {
    gap: 4px !important;
  }
  
  .hero-slider-nav-inside .hero-nav-btn-inside {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
  
  .hero-slider-nav-inside .hero-nav-btn-inside svg {
    width: 12px !important;
    height: 12px !important;
  }
  
  .hero-slider-nav-inside {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
}

@media (max-width: 480px) {
  .hero-slider-dots-inside .hero-dot-inside {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    max-width: 5px !important;
    min-height: 5px !important;
    max-height: 5px !important;
  }
  
  .hero-slider-dots-inside .hero-dot-inside.active {
    width: 14px !important;
    max-width: 14px !important;
  }
  
  .hero-slider-nav-inside .hero-slider-dots-inside {
    gap: 3px !important;
  }
  
  .hero-slider-nav-inside .hero-nav-btn-inside {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
  
  .hero-slider-nav-inside .hero-nav-btn-inside svg {
    width: 10px !important;
    height: 10px !important;
  }
  
  .hero-slider-nav-inside {
    padding: 6px 8px !important;
    gap: 6px !important;
  }
}

/* ==============================================
   FIX 2: LIGHT MODE BUTTON TEXT VISIBILITY
   Force white text on ALL accent/primary buttons
   ============================================== */

/* Universal fix for ALL primary/accent buttons in light mode */
[data-theme="light"] .btn-primary {
  color: #ffffff !important;
}

[data-theme="light"] .btn-primary svg {
  stroke: #ffffff !important;
}

[data-theme="light"] .btn-services-primary {
  background: var(--color-accent) !important;
  color: #ffffff !important;
}

[data-theme="light"] .btn-services-primary svg {
  stroke: #ffffff !important;
}

/* Sidebar CTA buttons */
[data-theme="light"] .sidebar-cta .btn,
[data-theme="light"] .sidebar-card .btn-primary,
[data-theme="light"] .write-cta .btn,
[data-theme="light"] .share-cta .btn {
  color: #ffffff !important;
}

[data-theme="light"] .sidebar-cta .btn svg,
[data-theme="light"] .sidebar-card .btn-primary svg {
  stroke: #ffffff !important;
}

/* Form submit buttons */
[data-theme="light"] button.btn-primary,
[data-theme="light"] button[type="submit"].btn-primary,
[data-theme="light"] .btn.btn-primary.btn-lg,
[data-theme="light"] .btn.btn-primary.btn-block {
  color: #ffffff !important;
}

[data-theme="light"] button.btn-primary svg,
[data-theme="light"] button[type="submit"] svg {
  stroke: #ffffff !important;
}

/* CTA sections */
[data-theme="light"] .cta-btn,
[data-theme="light"] .sp-btn-primary,
[data-theme="light"] .cta-btn-primary {
  color: #ffffff !important;
}

/* Any link styled as primary button */
[data-theme="light"] a.btn-primary {
  color: #ffffff !important;
}

[data-theme="light"] a.btn-primary svg {
  stroke: #ffffff !important;
}

/* Catch-all for any element with accent background */
[data-theme="light"] [style*="background"][style*="accent"],
[data-theme="light"] .bg-accent {
  color: #ffffff !important;
}

/* ==============================================
   FIX 3: CONTACT PAGE HEADER SPACING
   ============================================== */

.contact-section {
  padding-top: 140px !important;
}

/* Add a proper page header style */
.contact-header {
  margin-bottom: 32px;
}

.contact-title {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  color: var(--color-text) !important;
  margin-bottom: 12px !important;
}

.contact-subtitle {
  font-size: 1.05rem !important;
  color: var(--color-text-muted) !important;
  line-height: 1.6 !important;
}

/* ==============================================
   FIX 4: CONTRAST IMPROVEMENTS
   ============================================== */

/* Ad placeholder */
.ad-placeholder {
  color: var(--color-text-muted) !important;
  opacity: 0.7 !important;
}

[data-theme="light"] .ad-placeholder {
  color: #64748b !important;
  opacity: 0.8 !important;
}

/* Mobile nav */
.mobile-nav-item {
  color: #d1d5db !important;
}

[data-theme="light"] .mobile-nav-item {
  color: #374151 !important;
}

.mobile-nav-item.active {
  color: var(--color-accent) !important;
}