/* ============================================
   VISIBILITY FIXES - Minimal Overrides
   Only applies where absolutely needed
   Respects the color token system
   
   NOTE: Header and dropdown styles are in
   navigation-glassmorphism.css (loads after this)
   ============================================ */

/* ==========================================
   MOBILE SIDEBAR - NAVY BACKGROUND
   Sidebar uses navy glass background
   ========================================== */

.sidebar-menu,
.mobile-menu,
#menu-sidebar {
    background: rgba(14, 43, 72, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.sidebar-nav a,
.sidebar-menu a,
.mobile-menu a {
    color: rgba(255, 255, 255, 0.9);
}

.sidebar-nav a:hover,
.sidebar-menu a:hover,
.mobile-menu a:hover {
    color: #ffffff;
}

.sidebar-brand-name {
    color: #ffffff;
}

.sidebar-tagline {
    color: rgba(255, 255, 255, 0.8);
}

.brand-suffix {
    color: var(--accent-coral, #FF1654);
}

.sidebar-section-title {
    color: rgba(255, 255, 255, 0.85);
    border-top-color: rgba(255, 255, 255, 0.1);
}

.sidebar-section-title:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-section-title .section-link {
    color: rgba(255, 255, 255, 0.85);
}

.sidebar-section-title .section-link:hover {
    color: #ffffff;
}

.sidebar-accordion-content li a {
    color: rgba(255, 255, 255, 0.85);
}

.sidebar-accordion-content li a:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-nav ul li a i {
    color: var(--accent-coral, #FF1654);
}

/* ==========================================
   BUTTONS - PROPER CONTRAST
   ========================================== */

/* WhatsApp buttons - white text on green */
.btn-whatsapp,
.mobile-action-btn--whatsapp {
    background: #25D366;
    color: #ffffff;
}

/* ==========================================
   HERO SECTIONS WITH DARK OVERLAYS
   Only apply white text on dark sections
   ========================================== */

/* Breadcrumbs on dark hero backgrounds */
.hero-section .breadcrumbs,
.hero-section .breadcrumb,
[data-theme="dark"] .breadcrumbs,
[data-theme="dark"] .breadcrumb {
    color: rgba(255, 255, 255, 0.7);
}

.hero-section .breadcrumbs a,
.hero-section .breadcrumb a,
[data-theme="dark"] .breadcrumbs a,
[data-theme="dark"] .breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.hero-section .breadcrumbs a:hover,
.hero-section .breadcrumb a:hover {
    color: #ffffff;
}

/* ==========================================
   CONTENT SECTIONS - USE TOKEN SYSTEM
   Let the color variables do their job
   ========================================== */

/* Service cards use token colors */
.card-title-enhanced,
.card-description-enhanced {
    color: var(--text-heading);
}

.service-card-enhanced .card-description-enhanced {
    color: var(--text-muted);
}

/* Accordion titles use token colors */
.accordion-title {
    color: var(--text-heading);
}

.accordion-content {
    color: var(--text-body);
}

/* Pricing cards use token colors */
.pricing-tier-name,
.pricing-tier-tagline,
.pricing-features li {
    color: var(--text-heading);
}

/* Dark mode header styles are in navigation-glassmorphism.css */