/*
Theme Name: ecopowerafrica
Author: Essikdev
Author URI: https://essikdev.com
Version: 1.0.8
Description: A WordPress theme powered by Essikdev.
*/

/* Styles from index.html */
body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevent scrollbar from negative margins */
}

/* Preloader Styles */
#preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 3s linear infinite;
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   Navigation Menu Styling (React Replica)
   ========================================= */

/* Ensure parent items are relative for absolute positioning of submenus */
.main-navigation ul li {
    position: relative;
    list-style: none;
}

/* Top Level Menu Items - Base Styles */
.main-navigation ul#primary-menu > li > a {
    display: flex;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid transparent;
    transition: all 300ms;
}

/* Submenu Container - Matches React's dropdown style */
.main-navigation ul ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 16rem; /* w-64 */
    background-color: white;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
    border-bottom-left-radius: 0.5rem; /* rounded-b-lg */
    border-bottom-right-radius: 0.5rem;
    border-top: 2px solid #059669; /* border-emerald-600 */
    
    /* Animation & Visibility State */
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: all 300ms ease-in-out;
    z-index: 50;
    
    padding: 0.5rem 0; /* py-2 */
    margin: 0;
    display: block;
    flex-direction: column; /* Reset any flex inheritance */
}

/* Hover State - Show Submenu */
.main-navigation ul li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu Items */
.main-navigation ul ul.sub-menu li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.main-navigation ul ul.sub-menu li a {
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem; /* px-6 py-3 */
    font-size: 0.875rem; /* text-sm */
    color: #475569; /* text-slate-600 */
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: all 150ms;
}

.main-navigation ul ul.sub-menu li a:hover {
    background-color: #ecfdf5; /* hover:bg-emerald-50 */
    border-left-color: #059669; /* border-emerald-600 */
    color: #047857; /* text-emerald-700 */
    padding-left: 1.75rem; /* slightly shift right on hover */
}

/* Remove default list styles from widgets if any */
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Contact Form 7 Styles */
.wpcf7-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155; /* slate-700 */
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: #10b981; /* emerald-500 */
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.wpcf7-form input[type="submit"] {
    background-color: #059669; /* emerald-600 */
    color: white;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #047857; /* emerald-700 */
}

/* Footer Widget Styles */
.footer-widget-area .widget ul li {
    margin-bottom: 0.75rem;
}

.footer-widget-area .widget ul li a {
    color: #94a3b8; /* slate-400 */
    text-decoration: none;
    transition: color 0.2s;
}

.footer-widget-area .widget ul li a:hover {
    color: #10b981; /* emerald-500 */
}

/* Elementor Container Max Width Override */
/* Force full width for specific sections to avoid box layout constraints */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important; 
}

/* Full Width Utility for Specific Widgets */
.w-full-important {
    width: 100% !important;
    max-width: 100% !important;
}

/* Partner Logo Sizing - Force Override */
/* This ensures logos are always contained and small regardless of Elementor settings */
.partner-logo-container img {
    height: 3rem !important; /* h-12 */
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s;
}

.partner-logo-container:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Testimonials Grid Alignment */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Fix for Elementor Section Padding/Margins on Home */
/* Remove default padding/margins that might be added by Elementor or theme defaults */
.home .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove gap above header */
body.home {
    padding-top: 0 !important;
}

/* Aggressive CSS Reset for Full Width Layout */
html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Force Elementor sections to respect full width */
.elementor-section-full_width {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Menu Text Colors */
/* Default: Dark Text (for white pages) */
.main-navigation ul#primary-menu > li > a {
    color: #1e293b; /* slate-800 */
}

.main-navigation ul#primary-menu > li > a:hover {
    color: #059669; /* emerald-600 */
}

/* Home Page (Transparent Header): White Text */
.home .bg-transparent .main-navigation ul#primary-menu > li > a {
    color: #ffffff; /* white */
}

.home .bg-transparent .main-navigation ul#primary-menu > li > a:hover {
    color: #34d399; /* emerald-400 */
}

/* Scrolled State (White Header): Dark Text (Even on Home) */
.home .scrolled .main-navigation ul#primary-menu > li > a {
    color: #1e293b; /* slate-800 */
}

.home .scrolled .main-navigation ul#primary-menu > li > a:hover {
    color: #059669; /* emerald-600 */
}

/* Top Bar Text Color Fix */
/* Ensure Top Bar text is always readable */
.bg-slate-900 {
    background-color: #0f172a; /* slate-900 */
    color: #f8fafc; /* slate-50 */
}

/* Page Title Background */
.page-header-bg {
    background-color: #0f172a; /* slate-900 fallback */
    background-size: cover;
    background-position: center;
    position: relative;
}

.page-header-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.9));
}

.page-header-content {
    position: relative;
    z-index: 10;
}

/* Transparent Header for Standard Pages */
body:not(.home) .site-header.bg-transparent {
    background-color: transparent !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Force White Menu Text on Transparent Header (Standard Pages) */
body:not(.home) .site-header.bg-transparent .main-navigation ul#primary-menu > li > a {
    color: #ffffff !important;
}

body:not(.home) .site-header.bg-transparent .main-navigation ul#primary-menu > li > a:hover {
    color: #34d399 !important; /* emerald-400 */
}

/* Force White Logo Text on Transparent Header (Standard Pages) */
body:not(.home) .site-header.bg-transparent .site-branding span {
    color: #ffffff !important;
}

/* Scrolled State for Standard Pages (Sticky) */
body:not(.home) .site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    position: fixed !important;
    border-bottom: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Scrolled Menu Text (Standard Pages) */
body:not(.home) .site-header.scrolled .main-navigation ul#primary-menu > li > a {
    color: #1e293b !important; /* slate-800 */
}

/* Scrolled Logo Text (Standard Pages) */
body:not(.home) .site-header.scrolled .site-branding span {
    color: #1e293b !important; /* slate-800 */
}

/* =========================================
   Mobile Menu Styling
   ========================================= */

/* Base List Reset */
.mobile-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Top Level Items */
.mobile-nav-menu > li {
    border-bottom: 1px solid #f1f5f9;
}

.mobile-nav-menu > li:last-child {
    border-bottom: none;
}

.mobile-nav-menu > li > a {
    display: block;
    padding: 1rem 0;
    font-weight: 600;
    color: #1e293b; /* slate-800 */
    font-size: 1.1rem;
    position: relative;
    transition: color 0.2s ease;
}

.mobile-nav-menu > li > a:hover {
    color: #059669; /* emerald-600 */
}

/* Submenus */
.mobile-nav-menu .sub-menu {
    padding-left: 0;
    margin-bottom: 0.5rem;
    margin-top: -0.25rem;
    border-left: 2px solid #e2e8f0;
    margin-left: 0.5rem;
    display: block; /* Always visible for simplicity, or use JS for accordion */
}

.mobile-nav-menu .sub-menu li {
    margin: 0;
}

.mobile-nav-menu .sub-menu li a {
    display: block;
    padding: 0.6rem 0 0.6rem 1.25rem;
    color: #64748b; /* slate-500 */
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.mobile-nav-menu .sub-menu li a:hover {
    color: #059669;
    background-color: #f8fafc;
    border-radius: 0.25rem;
}

/* Active State Highlighting */
.mobile-nav-menu .current-menu-item > a,
.mobile-nav-menu .current-menu-ancestor > a {
    color: #059669;
}

.mobile-nav-menu .sub-menu .current-menu-item > a {
    color: #059669;
    background-color: #f0fdf4; /* emerald-50 */
    font-weight: 600;
}

/* Fix for iOS click events */
#mobile-menu-toggle, #mobile-menu-close {
    cursor: pointer;
    touch-action: manipulation;
}

/* =========================================
   TranslatePress Custom Styling (FR | EN)
   ========================================= */

/* 1. Hide the dropdown trigger (Current Language Display) */
.trp_language_switcher_shortcode .trp-ls-shortcode-current-language {
    display: none !important;
}

/* 2. Show the list container (which contains ALL languages) as a flat row */
.trp_language_switcher_shortcode .trp-ls-shortcode-language {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: auto !important;
    background: transparent !important;
    position: static !important;
    visibility: visible !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Style the links */
.trp_language_switcher_shortcode .trp-ls-shortcode-language a {
    display: inline-block !important;
    padding: 0 !important;
    text-decoration: none !important;
    color: currentColor !important;
    opacity: 0.6 !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important; /* Match React app size */
    text-transform: uppercase !important;
    transition: opacity 0.2s !important;
    background: transparent !important;
    border: none !important;
}

/* 4. Active State (Current Language) */
.trp_language_switcher_shortcode .trp-ls-shortcode-language a.trp-ls-shortcode-disabled-language {
    opacity: 1 !important;
    font-weight: 700 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* 5. Hover State */
.trp_language_switcher_shortcode .trp-ls-shortcode-language a:hover {
    opacity: 1 !important;
}

/* 6. Separator */
/* We use a pseudo-element on the link, but position it absolute or margin to avoid clicking it? 
   Simpler: Just standard inline ::after */
.trp_language_switcher_shortcode .trp-ls-shortcode-language a:not(:last-child)::after {
    content: "|" !important;
    display: inline-block !important;
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
    opacity: 0.4 !important;
    font-weight: 300 !important;
    color: currentColor !important;
}