/*
Theme Name: Royal Elementor Kit Child - Amana Tech Redesign
Theme URI: https://amanatech.org
Description: Child theme for Royal Elementor Kit with redesigned color palette and typography for Amana Tech
Author: Amana Tech
Template: royal-elementor-kit
Version: 1.0.0
Text Domain: royal-elementor-kit-child
*/

/* ==========================================================================
   AMANA TECH REDESIGN - COLOR PALETTE & TYPOGRAPHY
   ========================================================================== */

/* 
   NEW COLOR PALETTE:
   - Primary: Deep Ocean Blue #2D6BFF
   - Accent: Vibrant Orange #FF751F
   - Neutral: Charcoal #1A1A1A, Slate Gray #6B7280, Light Gray #E5E7EB, White #FFFFFF
*/

:root {
    /* Primary Brand Colors */
    --amana-primary-blue: #2D6BFF;
    --amana-accent-orange: #FF751F;
    
    /* Neutral Colors */
    --amana-charcoal: #1A1A1A;
    --amana-slate-gray: #6B7280;
    --amana-light-gray: #E5E7EB;
    --amana-white: #FFFFFF;
    
    /* Typography */
    --heading-font: 'Poppins', sans-serif;
    --body-font: 'Open Sans', sans-serif;
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM
   ========================================================================== */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;600&display=swap');

/* Body Text */
body,
p,
.elementor-widget-text-editor,
.elementor-text-editor {
    font-family: var(--body-font) !important;
    color: var(--amana-charcoal);
    line-height: 1.6;
}

/* All Headings */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6 {
    font-family: var(--heading-font) !important;
    color: var(--amana-charcoal);
    font-weight: 600;
    line-height: 1.2;
}

/* Navigation */
.elementor-nav-menu a,
nav a,
.menu a {
    font-family: var(--heading-font) !important;
    font-weight: 500;
}

/* Buttons */
.elementor-button,
button,
.btn,
input[type="submit"],
a.button {
    font-family: var(--heading-font) !important;
    font-weight: 600;
}

/* Remove Lato and Oswald - Override any existing usage */
.elementor-widget-heading [style*="Lato"],
.elementor-widget-heading [style*="Oswald"],
[style*="font-family: Lato"],
[style*="font-family: Oswald"] {
    font-family: var(--heading-font) !important;
}

/* ==========================================================================
   COLOR SYSTEM
   ========================================================================== */

/* Primary Blue Overrides */
a,
.elementor-widget-heading .elementor-heading-title a:hover,
.elementor-button.elementor-button-link {
    color: var(--amana-primary-blue);
}

a:hover {
    color: var(--amana-accent-orange);
}

/* Primary Buttons */
.elementor-button-primary,
.elementor-button.elementor-size-md,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
    background-color: var(--amana-primary-blue) !important;
    border-color: var(--amana-primary-blue) !important;
    color: var(--amana-white) !important;
    transition: all 0.3s ease;
}

.elementor-button-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--amana-accent-orange) !important;
    border-color: var(--amana-accent-orange) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 107, 255, 0.3);
}

/* Secondary/Accent Buttons */
.elementor-button-secondary,
.elementor-button.elementor-button-accent {
    background-color: var(--amana-accent-orange) !important;
    border-color: var(--amana-accent-orange) !important;
    color: var(--amana-white) !important;
}

.elementor-button-secondary:hover {
    background-color: var(--amana-primary-blue) !important;
    border-color: var(--amana-primary-blue) !important;
}

/* Remove all other color variations - enforce brand colors only */
.elementor-button-success,
.elementor-button-warning,
.elementor-button-danger,
.elementor-button-info {
    background-color: var(--amana-primary-blue) !important;
    border-color: var(--amana-primary-blue) !important;
}

/* Background Sections */
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section[style*="background-color"] {
    /* Ensure only brand colors are used in backgrounds */
}

/* Navigation Menu Colors */
.elementor-nav-menu a {
    color: var(--amana-charcoal);
}

.elementor-nav-menu a:hover,
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
    color: var(--amana-primary-blue);
}

/* ==========================================================================
   ANIMATION OPTIMIZATION
   ========================================================================== */

/* Remove excessive animations */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
}

/* Disable bouncing logo animation */
.elementor-widget-image img[class*="bounce"],
.animated.bounce,
img.bounce {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Reduce all animation durations to subtle levels */
.elementor-invisible {
    animation-duration: 0.5s !important;
}

.elementor-animation-grow,
.elementor-animation-pulse,
.elementor-animation-bounce-in,
.elementor-animation-bounce-out {
    animation-duration: 0.3s !important;
}

/* Keep only subtle hover effects */
.elementor-widget-image a img,
.elementor-widget-button .elementor-button {
    transition: all 0.3s ease !important;
}

/* Disable auto-playing animations on page load */
[data-settings*='"_animation"'] {
    animation-delay: 0s !important;
}

/* ==========================================================================
   LAYOUT & SPACING IMPROVEMENTS
   ========================================================================== */

/* Consistent section spacing */
.elementor-section {
    padding-top: 60px;
    padding-bottom: 60px;
}

.elementor-section.elementor-section-gap-default > .elementor-container {
    gap: 20px;
}

/* Container max-width for readability */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1200px;
}

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

/* Logo optimization */
.elementor-widget-image .elementor-image img {
    max-height: 80px;
    width: auto;
}

/* Navigation styling */
.elementor-nav-menu--main {
    display: flex;
    align-items: center;
    gap: 30px;
}

.elementor-nav-menu--main .elementor-item {
    padding: 10px 0;
    font-size: 16px;
}

/* ==========================================================================
   CALL-TO-ACTION OPTIMIZATION
   ========================================================================== */

/* Enhanced CTA buttons */
.elementor-button {
    padding: 15px 35px;
    border-radius: 4px;
    font-size: 16px;
    letter-spacing: 0.5px;
    text-transform: none;
}

.elementor-button-icon {
    margin-left: 10px;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

/* Contact Form 7 & Form styling */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
    border: 1px solid var(--amana-light-gray);
    padding: 12px 15px;
    border-radius: 4px;
    font-family: var(--body-font);
    color: var(--amana-charcoal);
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--amana-primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 107, 255, 0.1);
}

/* ==========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* Focus states for keyboard navigation */
a:focus,
button:focus,
input:focus,
.elementor-button:focus {
    outline: 2px solid var(--amana-primary-blue);
    outline-offset: 2px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 10px;
    background: var(--amana-primary-blue);
    color: white;
    text-decoration: none;
}

.skip-to-content:focus {
    left: 0;
    top: 0;
}

/* Ensure minimum touch target sizes (48x48px) */
.elementor-button,
.elementor-nav-menu a {
    min-height: 44px;
    min-width: 44px;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
    .elementor-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    h1 { font-size: 32px; }
    h2 { font-size: 28px; }
    h3 { font-size: 24px; }
    
    .elementor-button {
        padding: 12px 25px;
        font-size: 14px;
    }
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Lazy loading support */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   POPUP OPTIMIZATION
   ========================================================================== */

/* Delay popups - override 3-second trigger */
.elementor-popup-modal {
    /* Popup should be controlled via Elementor settings - set to 10+ seconds */
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer,
.elementor-location-footer {
    background-color: var(--amana-charcoal);
    color: var(--amana-white);
}

footer a,
.elementor-location-footer a {
    color: var(--amana-white);
}

footer a:hover,
.elementor-location-footer a:hover {
    color: var(--amana-accent-orange);
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.text-primary {
    color: var(--amana-primary-blue) !important;
}

.text-accent {
    color: var(--amana-accent-orange) !important;
}

.bg-primary {
    background-color: var(--amana-primary-blue) !important;
}

.bg-accent {
    background-color: var(--amana-accent-orange) !important;
}

.btn-primary {
    background-color: var(--amana-primary-blue) !important;
    color: var(--amana-white) !important;
}

.btn-accent {
    background-color: var(--amana-accent-orange) !important;
    color: var(--amana-white) !important;
}

/* ==========================================================================
   TEXT VISIBILITY FIX - REPLACE BLACK WITH READABLE COLORS
   ========================================================================== */

body,
.elementor-widget-text-editor p,
.elementor-text-editor p,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-counter .elementor-counter-number,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-description {
    color: #1A1A1A !important;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    color: #1A1A1A !important;
}

p, span, div {
    color: #1A1A1A;
}

a {
    color: var(--amana-primary-blue);
}

a:hover {
    color: var(--amana-accent-orange);
}

.elementor-widget-button .elementor-button {
    color: #FFFFFF !important;
}

.elementor-price-table__price,
.elementor-price-table__integer-part,
.elementor-price-table__currency {
    color: var(--amana-primary-blue) !important;
}

.elementor-widget-tabs .elementor-tab-title,
.elementor-widget-tabs .elementor-tab-content {
    color: #1A1A1A !important;
}

.elementor-widget-accordion .elementor-accordion-title {
    color: #1A1A1A !important;
}

.elementor-widget-toggle .elementor-toggle-title {
    color: #1A1A1A !important;
}

/* ==========================================================================
   ELEMENTOR NAV MENU STYLES - AMANA TECH
   ========================================================================== */

/* Main Navigation Links */
.elementor-nav-menu a,
.elementor-widget-nav-menu a,
nav.elementor-nav-menu a {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    color: #1A1A1A !important;
    padding: 25px 15px !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

/* Hover State */
.elementor-nav-menu a:hover,
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item-active,
.elementor-nav-menu a:focus {
    color: #2D6BFF !important;
    background: transparent !important;
}

/* Dropdown Container */
.elementor-nav-menu .sub-menu,
.elementor-widget-nav-menu .sub-menu,
.elementor-nav-menu ul {
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    padding: 10px !important;
    min-width: 280px !important;
    border: none !important;
}

/* Dropdown Items */
.elementor-nav-menu .sub-menu li,
.elementor-nav-menu ul li {
    border-bottom: none !important;
}

/* Dropdown Links */
.elementor-nav-menu .sub-menu a,
.elementor-nav-menu ul a {
    color: #1A1A1A !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 2px 5px !important;
    width: calc(100% - 10px) !important;
    box-sizing: border-box !important;
}

/* Dropdown Hover */
.elementor-nav-menu .sub-menu a:hover,
.elementor-nav-menu ul a:hover {
    background: #2D6BFF !important;
    color: #FFFFFF !important;
}

/* Mobile Menu */
.elementor-nav-menu--dropdown {
    background: #FFFFFF !important;
}

/* ==========================================================================
   STOP LOGO BOUNCING ANIMATION
   ========================================================================== */

html body .elementor-widget-image img,
html body .elementor-image img,
html body .site-logo img,
html body header img,
html body .logo img,
html body img[class*="logo"],
html body .elementor-section img {
    animation: none !important;
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

html body .bounce,
html body .animated,
html body .infinite,
html body .pulse,
html body .rubberBand,
html body [class*="bounce"] {
    animation: none !important;
    animation-duration: 0s !important;
}

html body img {
    animation: none !important;
    animation-duration: 0s !important;
    transition: none !important;
}