/*
Theme Name: ESACO Engineering Theme
Theme URI: https://esaco-eg.com
Author: ESACO Egypt
Author URI: https://esaco-eg.com
Description: Professional WordPress theme for ESACO Engineering Supplying & Contracting. Features custom Products, Vendors, and Clients post types. Fully editable via WordPress Customizer with bilingual English/Arabic support.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: esaco
Tags: business, custom-colors, custom-logo, featured-images, rtl-language-support, translation-ready
*/

/* ============================================================
   BASE & TYPOGRAPHY
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Kufi+Arabic:wght@300;400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #1e293b;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[lang="ar"] body,
[dir="rtl"] body {
    font-family: 'Noto Kufi Arabic', sans-serif;
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   TECH PATTERN BACKGROUND
   ============================================================ */
.tech-pattern {
    background-image: radial-gradient(rgba(37, 99, 235, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* ============================================================
   MARQUEE / INFINITE SCROLL
   Force LTR so the animation behaves identically regardless of page direction.
   ============================================================ */
.marquee-wrapper {
    direction: ltr;
}
.marquee-container {
    display: flex;
    width: max-content;
    will-change: transform;
    backface-visibility: hidden;
}
.animate-scroll-left  { animation: scrollLeft  40s linear infinite; }
.animate-scroll-right { animation: scrollRight 40s linear infinite; }

/* Pause when hovering an individual card (not the whole wrapper) — avoids the
   jumpy disappear/reappear when the cursor crosses gaps between cards. */
.marquee-container > *:hover {
    /* no-op; intentionally do not pause to keep motion smooth */
}

@keyframes scrollLeft  { 0% { transform: translateX(0);            } 100% { transform: translateX(-33.333%); } }
@keyframes scrollRight { 0% { transform: translateX(-33.333%);     } 100% { transform: translateX(0);        } }

/* ============================================================
   ARABIC / RTL TYPOGRAPHY FIXES
   Arabic glyphs have taller ascenders/descenders than Latin, so tight
   Tailwind line-heights (leading-none / leading-tight / leading-[1.1])
   cause overlap. Bump line-height for headings/text only in RTL.
   ============================================================ */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
    line-height: 1.5 !important;
}
[dir="rtl"] .leading-none,
[dir="rtl"] .leading-tight,
[dir="rtl"] .leading-snug,
[dir="rtl"] [class*="leading-["] {
    line-height: 1.5 !important;
}
[dir="rtl"] #hero-title {
    line-height: 1.6 !important;
}
[dir="rtl"] #legacy-title {
    line-height: 1.6 !important;
}
/* Hero / legacy paragraphs slightly more breathing room too */
[dir="rtl"] #hero-desc,
[dir="rtl"] p {
    line-height: 1.85;
}

/* ============================================================
   PRODUCT FILTER BUTTONS
   ============================================================ */
.filter-btn {
    background: white;
    color: #475569;
    border-color: #e2e8f0;
    cursor: pointer;
}
.filter-btn:hover {
    border-color: #3b82f6;
    color: #2563eb;
}
.active-filter {
    background: #1e3a8a !important;
    color: white !important;
    border-color: #1e3a8a !important;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.product-card { transition: opacity 0.3s ease, transform 0.3s ease; }
.product-card.hidden-card { display: none; }

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

/* ============================================================
   WORDPRESS ALIGNMENT (core styles)
   ============================================================ */
.wp-block-image img,
.aligncenter { display: block; margin: 0 auto; }
img { max-width: 100%; height: auto; }

/* ============================================================
   CUSTOM ALERT MODAL
   ============================================================ */
.esaco-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    font-family: 'Inter', sans-serif;
}
[dir="rtl"] .esaco-modal { font-family: 'Noto Kufi Arabic', sans-serif; }

.esaco-modal.is-open {
    display: flex;
    animation: esacoModalFade 0.25s ease-out;
}

.esaco-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.esaco-modal-card {
    position: relative;
    max-width: 440px;
    width: 100%;
    background: #ffffff;
    border-radius: 24px;
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35),
                0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: esacoModalPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.esaco-modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
    box-shadow: 0 12px 24px -8px rgba(37, 99, 235, 0.5);
    animation: esacoIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
.esaco-modal-icon.is-success { background: linear-gradient(135deg, #10b981 0%, #065f46 100%); box-shadow: 0 12px 24px -8px rgba(16, 185, 129, 0.5); }
.esaco-modal-icon.is-error   { background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%); box-shadow: 0 12px 24px -8px rgba(239, 68, 68, 0.5); }
.esaco-modal-icon.is-info    { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); box-shadow: 0 12px 24px -8px rgba(245, 158, 11, 0.5); }

.esaco-modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.esaco-modal-message {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 1.75rem;
}

.esaco-modal-btn {
    width: 100%;
    padding: 0.95rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
    box-shadow: 0 10px 20px -8px rgba(37, 99, 235, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.esaco-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -10px rgba(37, 99, 235, 0.65);
}
.esaco-modal-btn:active { transform: translateY(0); }

@keyframes esacoModalFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes esacoModalPop {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes esacoIconPop {
    0%   { opacity: 0; transform: scale(0); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}