/* Theme Styles: Light & Simple Light Mode + Obsidian Dark Mode */

:root {
  --bg-main: #FFFFFF;
  --bg-surface: #F8FAFC;
  --bg-card: #FFFFFF;
  --text-main: #0A0D14;
  --text-body: #1E293B;
  --text-muted: #475569;
  --border-card: #E2E8F0;
  --header-bg: rgba(248, 249, 250, 0.96);
  --header-border: #E2E8F0;
  --hero-overlay-start: rgba(248, 249, 250, 0.60);
  --hero-overlay-mid: rgba(248, 249, 250, 0.60);
  --hero-overlay-end: rgba(248, 249, 250, 0.60);
}

html.dark {
  --bg-main: #0B0F17;
  --bg-surface: #111827;
  --bg-card: #151D2C;
  --text-main: #FFFFFF;
  --text-body: #F1F5F9;
  --text-muted: #94A3B8;
  --border-card: #334155;
  --header-bg: rgba(11, 15, 23, 0.96);
  --header-border: #1F2937;
  --hero-overlay-start: rgba(11, 15, 23, 0.96);
  --hero-overlay-mid: rgba(11, 15, 23, 0.90);
  --hero-overlay-end: rgba(11, 15, 23, 0.98);
}

body {
  background-color: var(--bg-main) !important;
  color: var(--text-body) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Light mode typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-main) !important;
}

p, span, li, label {
  color: var(--text-body);
}

/* Header */
header {
  transition: padding 0.35s ease, box-shadow 0.35s ease !important;
  background-color: var(--header-bg) !important;
  border-color: var(--header-border) !important;
}

/* Dropdown */
.theme-dropdown {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-card) !important;
}

/* Cards */
.theme-card {
  background-color: var(--bg-card) !important;
  border-color: var(--border-card) !important;
}

/* Hero Background Overlays */
.hero-pattern, .about-hero-pattern, .services-hero-pattern, .achieve-hero-pattern, .insights-hero-pattern, .contact-hero-pattern, .practice-hero-pattern {
  background-image: linear-gradient(to right, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=2000') !important;
  background-size: cover !important;
  background-position: center !important;
}

.hero-desc-box {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-card) !important;
  color: var(--text-main) !important;
}

/* CTA Section */
.cta-pattern {
  background-color: #0B0F17 !important;
  background-image: linear-gradient(to right, rgba(11, 15, 23, 0.96) 0%, rgba(11, 15, 23, 0.90) 50%, rgba(11, 15, 23, 0.98) 100%), url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=2000') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Explicit Dark Blocks */
.dark-section, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section p,
.cta-pattern h1, .cta-pattern h2, .cta-pattern h3, .cta-pattern p,
footer, footer h1, footer h2, footer h3, footer h4, footer p, footer a, footer div {
  color: #FFFFFF !important;
}

.dark-section .text-slate-100, .dark-section .text-slate-200 {
  color: #E2E8F0 !important;
}

.bg-black.text-white, .bg-black .text-white,
button.bg-black, a.bg-black,
.bg-slate-900.text-white, .bg-slate-950.text-white {
  color: #FFFFFF !important;
}

/* Dark Mode Overrides */
html.dark .text-black {
  color: #FFFFFF !important;
}

html.dark .text-slate-900, html.dark .text-slate-800, html.dark .text-slate-700 {
  color: #F1F5F9 !important;
}

html.dark .bg-white {
  background-color: var(--bg-card) !important;
}

html.dark .bg-\[\#F8FAFC\], html.dark .bg-\[\#F1F5F9\], html.dark .bg-\[\#FAFAFA\] {
  background-color: var(--bg-surface) !important;
}

html.dark .border-slate-300, html.dark .border-slate-200 {
  border-color: #334155 !important;
}


/* ==============================================================
   LIGHT MODE NEON ACCENTS OVERRIDE 
   ============================================================== */

:root {
  /* Vibrant Accents */
  --accent-lime: #a3e635;
  --accent-magenta: #ec4899;
  --accent-cyan: #06b6d4;
  --accent-coral: #fb7185;
}

/* Light Mode Overrides for UI Elements */

/* 1. Primary Buttons & Call to Actions (Cyan) */
html:not(.dark) a.bg-black.text-white:not(footer a, .hero-btn-primary, .hero-btn-secondary), 
html:not(.dark) button.bg-black.text-white {
  background-color: var(--accent-cyan) !important;
  color: #ffffff !important;
  border-color: var(--accent-cyan) !important;
}
html:not(.dark) a.bg-black.text-white:hover:not(footer a, .hero-btn-primary, .hero-btn-secondary), 
html:not(.dark) button.bg-black.text-white:hover {
  background-color: var(--accent-magenta) !important;
  border-color: var(--accent-magenta) !important;
}

/* Hero Action Buttons - Distinct, Larger & Fully Readable */
.hero-btn-primary {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border: 2px solid #0F172A !important;
  min-width: 230px;
}
.hero-btn-primary:hover {
  background-color: #1E293B !important;
  border-color: #1E293B !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -5px rgba(15, 23, 42, 0.35) !important;
}
html.dark .hero-btn-primary {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #FFFFFF !important;
}
html.dark .hero-btn-primary:hover {
  background-color: #E2E8F0 !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 12px 28px -5px rgba(255, 255, 255, 0.25) !important;
}

.hero-btn-secondary {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
  min-width: 210px;
}
.hero-btn-secondary:hover {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -5px rgba(15, 23, 42, 0.2) !important;
}
html.dark .hero-btn-secondary {
  background-color: #1E293B !important;
  color: #FFFFFF !important;
  border-color: #475569 !important;
}
html.dark .hero-btn-secondary:hover {
  background-color: #334155 !important;
  border-color: #64748B !important;
  box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Outlined Buttons */
html:not(.dark) a.border-black:not(.bg-black) {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}
html:not(.dark) a.border-black:not(.bg-black):hover {
  background-color: var(--accent-cyan) !important;
  color: #ffffff !important;
}

/* 3. Badges (Like 'Direct Channels') */
html:not(.dark) .rounded-full.bg-black.text-white {
  background-color: var(--accent-coral) !important;
  border-color: var(--accent-coral) !important;
  color: #ffffff !important;
}

/* 4. Service Card Icons - Distributed Colors */
html:not(.dark) .theme-card:nth-child(1) .w-16.h-16.bg-black,
html:not(.dark) .theme-card:nth-child(1) .w-14.h-14.bg-black,
html:not(.dark) .theme-card:nth-child(1) .w-12.h-12.bg-black {
  background-color: var(--accent-lime) !important;
  border-color: var(--accent-lime) !important;
  color: #0f172a !important;
}
html:not(.dark) .theme-card:nth-child(2) .w-16.h-16.bg-black,
html:not(.dark) .theme-card:nth-child(2) .w-14.h-14.bg-black,
html:not(.dark) .theme-card:nth-child(2) .w-12.h-12.bg-black {
  background-color: var(--accent-magenta) !important;
  border-color: var(--accent-magenta) !important;
  color: #ffffff !important;
}
html:not(.dark) .theme-card:nth-child(3) .w-16.h-16.bg-black,
html:not(.dark) .theme-card:nth-child(3) .w-14.h-14.bg-black,
html:not(.dark) .theme-card:nth-child(3) .w-12.h-12.bg-black {
  background-color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: #ffffff !important;
}
html:not(.dark) .theme-card:nth-child(4) .w-16.h-16.bg-black,
html:not(.dark) .theme-card:nth-child(4) .w-14.h-14.bg-black,
html:not(.dark) .theme-card:nth-child(4) .w-12.h-12.bg-black {
  background-color: var(--accent-coral) !important;
  border-color: var(--accent-coral) !important;
  color: #ffffff !important;
}

/* Service Card Hover States */
html:not(.dark) .theme-card:nth-child(1):hover { border-color: var(--accent-lime) !important; }
html:not(.dark) .theme-card:nth-child(2):hover { border-color: var(--accent-magenta) !important; }
html:not(.dark) .theme-card:nth-child(3):hover { border-color: var(--accent-cyan) !important; }
html:not(.dark) .theme-card:nth-child(4):hover { border-color: var(--accent-coral) !important; }

/* 5. Header / Theme Toggle Button */
html:not(.dark) header .w-12.h-12.bg-black {
  background-color: var(--accent-lime) !important;
  border-color: var(--accent-lime) !important;
  color: #0f172a !important;
}
html:not(.dark) header .w-12.h-12.bg-black:hover {
  background-color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: #ffffff !important;
}

/* Ensure Dropdown items use the accent color on hover */
html:not(.dark) .theme-dropdown a:hover {
  background-color: var(--accent-magenta) !important;
  color: #ffffff !important;
}

/* 6. Base Text Enhancements for Readability in Light Mode */
html:not(.dark) .text-black:not(footer, footer *, .dark-section, .dark-section *, .bg-black, .bg-black *, .contact-btn-telegram, .contact-btn-whatsapp, .contact-icon-phone, .contact-icon-email, .contact-icon-location) {
  color: #0f172a !important; /* Very dark blue-slate */
}
html:not(.dark) p:not(footer, footer *, .dark-section, .dark-section *, .bg-black, .bg-black *), 
html:not(.dark) .text-slate-800:not(footer, footer *, .dark-section, .dark-section *, .bg-black, .bg-black *),
html:not(.dark) .text-slate-900:not(footer, footer *, .dark-section, .dark-section *, .bg-black, .bg-black *) {
  color: #1e293b !important; /* Darker slate for better contrast */
}

/* Ensure footer remains SOLID DARK & readable across all modes */
footer,
footer.bg-black,
html:not(.dark) footer,
html:not(.dark) footer.bg-black,
html.dark footer,
html.dark footer.bg-black {
  background-color: #0B0F17 !important;
  color: #FFFFFF !important;
  border-top-color: #1E293B !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
footer p, footer span, footer div, footer li, footer ul,
html:not(.dark) footer h1, html:not(.dark) footer h2, html:not(.dark) footer h3, html:not(.dark) footer h4,
html:not(.dark) footer p, html:not(.dark) footer span, html:not(.dark) footer div, html:not(.dark) footer li, html:not(.dark) footer ul {
  color: #E2E8F0 !important;
}

footer a, html:not(.dark) footer a, html.dark footer a {
  color: #FFFFFF !important;
}

footer a:hover, html:not(.dark) footer a:hover, html.dark footer a:hover {
  color: #38bdf8 !important;
}

/* Contact Form Notice Alert Box */
.contact-notice-alert {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #334155 !important;
}
.contact-notice-alert strong {
  color: #0F172A !important;
}
html.dark .contact-notice-alert {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #CBD5E1 !important;
}
html.dark .contact-notice-alert strong {
  color: #FFFFFF !important;
}

/* Contact Sidebar Direct Channel Icons & Badges */
.contact-icon-phone {
  background-color: #059669 !important;
  color: #ffffff !important;
}
html.dark .contact-icon-phone {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.contact-icon-email {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}
html.dark .contact-icon-email {
  background-color: rgba(14, 165, 233, 0.2) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(14, 165, 233, 0.35) !important;
}

.contact-icon-location {
  background-color: #d97706 !important;
  color: #ffffff !important;
}
html.dark .contact-icon-location {
  background-color: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.contact-badge-phone {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid #a7f3d0 !important;
}
html.dark .contact-badge-phone {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: #6ee7b7 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.contact-btn-telegram {
  background-color: #0088cc !important;
  color: #ffffff !important;
  border: 1px solid #0077b5 !important;
}
.contact-btn-telegram:hover {
  background-color: #006699 !important;
  color: #ffffff !important;
}
html.dark .contact-btn-telegram {
  background-color: rgba(0, 136, 204, 0.25) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(0, 136, 204, 0.45) !important;
}
html.dark .contact-btn-telegram:hover {
  background-color: #0088cc !important;
  color: #ffffff !important;
}

.contact-btn-whatsapp {
  background-color: #25D366 !important;
  color: #ffffff !important;
  border: 1px solid #20bd5a !important;
}
.contact-btn-whatsapp:hover {
  background-color: #1ea952 !important;
  color: #ffffff !important;
}
html.dark .contact-btn-whatsapp {
  background-color: rgba(37, 211, 102, 0.25) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(37, 211, 102, 0.45) !important;
}
html.dark .contact-btn-whatsapp:hover {
  background-color: #25D366 !important;
  color: #ffffff !important;
}

/* Specific Social Channel Overrides */
html:not(.dark) a[href*="wa.me"].bg-black {
  background-color: var(--accent-lime) !important;
  border-color: var(--accent-lime) !important;
  color: #0f172a !important;
}
html:not(.dark) a[href*="wa.me"].bg-black:hover {
  background-color: #84cc16 !important;
  border-color: #84cc16 !important;
}
html:not(.dark) a[href*="t.me"].bg-black {
  background-color: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: #ffffff !important;
}
html:not(.dark) a[href*="t.me"].bg-black:hover {
  background-color: #0891b2 !important;
  border-color: #0891b2 !important;
}

/* Generic Hover Overrides */
html:not(.dark) .hover\:bg-black:hover {
  background-color: var(--text-main) !important;
  color: #ffffff !important;
}

/* Practice Area Details Grid Layout Fixes */
@media (min-width: 1024px) {
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
  .lg\:col-span-8 {
    grid-column: span 8 / span 8 !important;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4 !important;
  }
}

/* Mobile Drawer - High-Blur Glassmorphic Background */
#mobile-drawer {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}

html.dark #mobile-drawer {
  background-color: rgba(11, 15, 23, 0.88) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
}

#mobile-drawer #mobile-drawer-close {
  color: var(--text-main) !important;
}

html.dark #mobile-drawer #mobile-drawer-close {
  color: #FFFFFF !important;
}

html.dark #mobile-drawer .border-black {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Practice Sidebar Light Mode Contrast Fix */
html:not(.dark) .practice-sidebar {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}
html:not(.dark) .practice-sidebar h3,
html:not(.dark) .practice-sidebar p {
  color: #0F172A !important;
}
html:not(.dark) .practice-sidebar a {
  background-color: #0F172A !important;
  color: #FFFFFF !important;
  border-color: #0F172A !important;
}
html:not(.dark) .practice-sidebar a:hover {
  background-color: #1E293B !important;
  border-color: #1E293B !important;
}

/* Direct Channels cards — disable the black hover background in light mode */
html:not(.dark) .theme-card.group:hover {
  background-color: #F0F4F8 !important;
  color: #0F172A !important;
  border-color: #0F172A !important;
}
html:not(.dark) .theme-card.group:hover h3,
html:not(.dark) .theme-card.group:hover p,
html:not(.dark) .theme-card.group:hover svg {
  color: #0F172A !important;
}

/* Light mode CTA override: No photo, light background, dark text */
html:not(.dark) .cta-pattern {
  background-image: none !important;
  background-color: #F8FAFC !important;
}
html:not(.dark) .cta-pattern h1,
html:not(.dark) .cta-pattern h2,
html:not(.dark) .cta-pattern h3 {
  color: #0F172A !important;
}
html:not(.dark) .cta-pattern p {
  color: #334155 !important;
}