/* ========================================
   PROFESSIONAL COLOR SCHEME OVERRIDES
   Dark Mode Theme Application
   ======================================== */

/* ========================================
   BUTTON TEXT COLOR OVERRIDES
   ======================================== */

/* Force white text on primary buttons, black on hover */
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited,
a.btn-primary,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-primary:visited,
Link.btn-primary,
.btn-primary span {
    color: #FFFFFF !important;
}

/* Black text on teal hover */
.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:hover span {
    color: #000000 !important;
}

/* Override any link color inheritance */
a.btn-primary:not(.nav-link-item) {
    color: #FFFFFF !important;
}

a.btn-primary:hover:not(.nav-link-item) {
    color: #000000 !important;
}

/* ========================================
   NAVIGATION & HEADER
   ======================================== */

/* Sticky header dark mode */
.site-header--sticky.mobile-sticky-enable.scrolling {
    background-color: rgba(17, 17, 17, 0.95) !important;
    border-bottom: 1px solid rgba(120, 60, 193, 0.2);
}

.site-header--sticky.mobile-sticky-enable.is--bg-dark.scrolling {
    background-color: rgba(17, 17, 17, 0.95) !important;
}

/* Navigation links - force white text */
.site-menu-main .nav-link-item {
    color: #FFFFFF !important;
    opacity: 100 !important;
}

.site-menu-main .nav-link-item:hover {
    color: #783CC1 !important;
    opacity: 1 !important;
}

/* Dropdown menus */
.site-menu-main .sub-menu {
    background-color: #1a1a1a !important;
    border: 1px solid rgba(120, 60, 193, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

.site-menu-main .sub-menu:before {
    border-bottom-color: #1a1a1a !important;
}

.site-menu-main .sub-menu--item {
    color: #EAE7E7 !important;
}

.site-menu-main .sub-menu--item>a {
    color: #EAE7E7 !important;
}

.site-menu-main .sub-menu--item:hover>a {
    color: #783CC1 !important;
}

/* Mega menu */
.site-menu-main .sub-menu.megamenu {
    background-color: #1a1a1a !important;
    border-color: rgba(120, 60, 193, 0.2) !important;
}

.site-menu-main .sub-menu.megamenu .mega-drop-menu-item {
    color: #EAE7E7 !important;
}

.site-menu-main .sub-menu.megamenu .mega-drop-menu-item:hover {
    color: #783CC1 !important;
}

/* Mobile menu */
@media (max-width: 991px) {
    .site-header .menu-block {
        background-color: #111111 !important;
    }

    .site-header .menu-block .mobile-menu-head {
        background-color: #111111 !important;
        border-bottom-color: rgba(234, 231, 231, 0.1) !important;
    }

    .site-header .menu-block .mobile-menu-head .current-menu-title,
    .site-header .menu-block .mobile-menu-head .mobile-menu-close,
    .site-header .menu-block .mobile-menu-head .go-back {
        color: #EAE7E7 !important;
        border-color: rgba(234, 231, 231, 0.1) !important;
    }

    .site-menu-main>li>a {
        border-bottom-color: rgba(234, 231, 231, 0.1) !important;
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    .menu-block.active .nav-link-item {
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    .site-header .mobile-menu-trigger span {
        background-color: #EAE7E7 !important;
    }

    .site-header .mobile-menu-trigger span:before,
    .site-header .mobile-menu-trigger span:after {
        background-color: #EAE7E7 !important;
    }

    .reveal-header .mobile-menu-trigger span {
        background-color: #EAE7E7 !important;
    }
}

/* ========================================
   MOBILE RESPONSIVE NAVBAR
   ======================================== */

/* Navbar hover colors */
.hover\:text-purple-400:hover,
.fixed a:hover span {
    color: #783CC1 !important;
}

/* Desktop navbar links hover */
.hidden.md\:flex a:hover {
    color: #783CC1 !important;
}

/* Professional Navbar Styling */
.header {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

.header .navbar ul li a {
    color: #FFFFFF !important;
    font-weight: 500 !important;
}

.header .navbar ul li a:hover {
    color: #783CC1 !important;
}

.header .navbar ul li a.text-primary {
    color: #783CC1 !important;
}

/* Contact button styling */
.bg-blue-600 {
    background-color: #783CC1 !important;
}

.bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: #5a2d91 !important;
}

/* Mobile menu styling */
.navbar {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px) !important;
}

.navbar ul li a {
    color: #FFFFFF !important;
}

.navbar ul li a:hover {
    color: #783CC1 !important;
}

/* ========================================
   CARDNAV COMPONENT OVERRIDES - FORCE WHITE TEXT
   ======================================== */

/* Force ALL text in CardNav to be white */
.card-nav *,
.card-nav-container *,
.nav-card *,
.nav-card-label,
.nav-card-link,
.nav-card-link span,
a.nav-card-link,
a.nav-card-link span,
.card-nav div,
.card-nav a,
.card-nav span {
    color: #ffffff !important;
}

/* Force white on hover states */
.nav-card-link:hover,
.nav-card-link:hover span,
a.nav-card-link:hover,
a.nav-card-link:hover span,
.card-nav a:hover,
.card-nav *:hover {
    color: #ffffff !important;
}

/* Override React Router Link colors */
.card-nav Link,
.card-nav [data-testid],
.card-nav [class*="Link"] {
    color: #ffffff !important;
}

/* Override any inherited link colors in CardNav */
.card-nav a,
.card-nav a:visited,
.card-nav a:focus,
.card-nav a:active,
.card-nav a:link {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Hamburger menu white color */
.hamburger-menu {
    color: #ffffff !important;
}

.hamburger-line {
    background-color: #ffffff !important;
}

/* Contact Us button hover - teal color */
.card-nav-cta-button:hover {
    background-color: #069494 !important;
    color: #ffffff !important;
}

/* Force white text on all navigation elements */
nav *,
header *,
.navbar *,
.navigation * {
    color: #ffffff !important;
}

/* ========================================
   SECTIONS & BACKGROUNDS
   ======================================== */

/* Default sections */
section {
    background-color: #111111;
    color: #EAE7E7;
}

/* Content sections */
.section-space,
.section-block {
    background-color: #111111;
}

/* Specific background overrides */
.bg-white,
.bg-colorButteryWhite {
    background-color: #111111 !important;
}

.bg-black {
    background-color: #111111 !important;
}

/* Text color overrides */
.text-colorButteryWhite,
.text-white {
    color: #EAE7E7 !important;
}

.text-black {
    color: #EAE7E7 !important;
}

/* ========================================
   CARDS & COMPONENTS
   ======================================== */

/* Service cards */
.service-card,
.project-card,
.card {
    background-color: rgba(234, 231, 231, 0.05) !important;
    border-color: rgba(234, 231, 231, 0.1) !important;
}

.service-card:hover,
.project-card:hover,
.card:hover {
    border-color: #069494 !important;
    box-shadow: 0 10px 30px rgba(15, 163, 177, 0.2) !important;
}

/* Testimonial cards */
.testimonial-card {
    background-color: rgba(234, 231, 231, 0.05) !important;
    border-color: rgba(234, 231, 231, 0.1) !important;
}

/* ========================================
   SERVICE CARDS - PURPLE BOXES
   ======================================== */

/* Service boxes with purple background */
.service-item,
.service-box,
.service-card,
[class*="service-"] {
    background-color: #783CC1 !important;
    border-color: #783CC1 !important;
    color: #000000 !important;
    transition: all 0.3s ease !important;
}

/* Service box text colors - white */
.service-item h3,
.service-item h4,
.service-item h5,
.service-item p,
.service-box h3,
.service-box h4,
.service-box h5,
.service-box p,
.service-card h3,
.service-card h4,
.service-card h5,
.service-card p {
    color: #FFFFFF !important;
}

/* Service box hover - purple */
.service-item:hover,
.service-box:hover,
.service-card:hover,
[class*="service-"]:hover {
    background-color: #783CC1 !important;
    border-color: #783CC1 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(120, 60, 193, 0.3) !important;
}

/* Specific targeting for service section boxes */
.section-service .bg-colorIvory,
.section-service [class*="bg-colorIvory"] {
    background-color: #783CC1 !important;
}

.section-service .group:hover .bg-colorIvory,
.section-service .group:hover [class*="bg-colorIvory"] {
    background-color: #783CC1 !important;
}

/* Service section text - white on purple */
.section-service h4,
.section-service p {
    color: #FFFFFF !important;
}

/* Service section text - white on teal hover (stays white) */
.section-service .group:hover h4,
.section-service .group:hover p {
    color: #FFFFFF !important;
}

/* Override group-hover:bg-colorLightLime to purple */
.group:hover .group-hover\:bg-colorLightLime {
    background-color: #783CC1 !important;
}


/* White text on hover */
.service-item:hover h3,
.service-item:hover h4,
.service-item:hover h5,
.service-item:hover p,
.service-box:hover h3,
.service-box:hover h4,
.service-box:hover h5,
.service-box:hover p,
.service-card:hover h3,
.service-card:hover h4,
.service-card:hover h5,
.service-card:hover p {
    color: #FFFFFF !important;
}

/* Service icons - white on both purple and teal */
.service-item img,
.service-box img,
.service-card img,
.section-service img {
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}

.service-item:hover img,
.service-box:hover img,
.service-card:hover img,
.section-service .group:hover img {
    filter: brightness(0) invert(1);
}


/* ========================================
   BORDERS & DIVIDERS
   ======================================== */

.horizontal-line {
    background-color: rgba(234, 231, 231, 0.1) !important;
}

.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
    border-color: rgba(234, 231, 231, 0.1) !important;
}

/* ========================================
   FORMS & INPUTS
   ======================================== */

input,
textarea,
select,
.form-control {
    background-color: rgba(234, 231, 231, 0.05) !important;
    border-color: rgba(234, 231, 231, 0.2) !important;
    color: #EAE7E7 !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: #069494 !important;
    box-shadow: 0 0 0 3px rgba(15, 163, 177, 0.1) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(234, 231, 231, 0.5) !important;
}

/* Newsletter forms */
.newsletter-form input {
    background-color: rgba(234, 231, 231, 0.05) !important;
    border-color: rgba(234, 231, 231, 0.2) !important;
    color: #EAE7E7 !important;
}

/* ========================================
   ACCENT COLORS
   ======================================== */

/* Purple accents */
.text-colorLightLime,
.accent-color {
    color: #783CC1 !important;
}

/* Make star images purple */
img[src*="star"],
img[alt*="star"],
img[src*="shape-light-lime"] {
    filter: brightness(0) saturate(100%) invert(29%) sepia(89%) saturate(2076%) hue-rotate(260deg) brightness(91%) contrast(91%);
}

/* Teal accents for links */
a:not(.btn):not(.btn-primary):not(.btn-black):not(.btn-outline-black):not(.nav-link-item) {
    color: #069494;
}

a:not(.btn):not(.btn-primary):not(.btn-black):not(.btn-outline-black):not(.nav-link-item):hover {
    color: #783CC1;
}

(.btn-black):not(.btn-outline-black):not(.nav-link-item):hover {
    color: #12c4d4;
}

/* ========================================
   SPECIAL COMPONENTS
   ======================================== */

/* Social media icons */
.social-link {
    border-color: #EAE7E7 !important;
    background-color: transparent !important;
}

.social-link:hover {
    border-color: #069494 !important;
    background-color: #069494 !important;
}

/* Pagination */
.pagination .page-link {
    background-color: rgba(234, 231, 231, 0.05);
    border-color: rgba(234, 231, 231, 0.2);
    color: #EAE7E7;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
    background-color: #783CC1;
    border-color: #783CC1;
    color: #FFFFFF;
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: #EAE7E7;
}

.breadcrumb-item.active {
    color: #069494;
}

/* ========================================
   OVERLAYS & MODALS
   ======================================== */

.modal-content {
    background-color: #1a1a1a;
    border-color: rgba(120, 60, 193, 0.3);
    color: #EAE7E7;
}

.modal-header {
    border-bottom-color: rgba(234, 231, 231, 0.1);
}

.modal-footer {
    border-top-color: rgba(234, 231, 231, 0.1);
}

.overlay {
    background-color: rgba(17, 17, 17, 0.9);
}

/* ========================================
   ANIMATIONS & TRANSITIONS
   ======================================== */

/* Ensure smooth transitions for all color changes */
* {
    transition-property: background-color, border-color, color;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Preserve existing transition properties */
a,
button,
.btn {
    transition: all 0.3s ease;
}

/* ========================================
   UTILITY OVERRIDES
   ======================================== */

/* Background utilities */
.bg-primary {
    background-color: #111111 !important;
}

.bg-secondary {
    background-color: #1a1a1a !important;
}

.bg-accent {
    background-color: #783CC1 !important;
}

.bg-teal {
    background-color: #069494 !important;
}

.bg-green {
    background-color: #783CC1 !important;
}

/* Text utilities */
.text-primary {
    color: #EAE7E7 !important;
}

.text-secondary {
    color: rgba(234, 231, 231, 0.7) !important;
}

.text-accent {
    color: #783CC1 !important;
}

.text-teal {
    color: #069494 !important;
}

/* Border utilities */
.border-primary {
    border-color: rgba(234, 231, 231, 0.2) !important;
}

.border-accent {
    border-color: #783CC1 !important;
}

.border-teal {
    border-color: #069494 !important;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {

    /* Ensure mobile sections maintain dark theme */
    section,
    .section-space {
        background-color: #111111;
    }
}

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

/* Focus states for keyboard navigation */
*:focus-visible {
    outline: 2px solid #069494;
    outline-offset: 2px;
}

/* High contrast for important elements */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #EAE7E7;
}

p,
span,
div {
    color: #EAE7E7;
}

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

@media print {
    body {
        background-color: white !important;
        color: black !important;
    }
}