/* ==========================================================================
   Waqt Al-Hadhara - variables.css
   Design System Variables and Font Loading
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
    font-family: 'The Year of The Camel';
    src: url('../../assets/The Year of The Camel/TheYearofTheCamel-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Year of The Camel';
    src: url('../../assets/The Year of The Camel/TheYearofTheCamel-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Year of The Camel';
    src: url('../../assets/The Year of The Camel/TheYearofTheCamel-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'The Year of The Camel';
    src: url('../../assets/The Year of The Camel/TheYearofTheCamel-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Color Palette - Dark Mode (default) */
    --color-bg-deep: #000000;
    --color-bg-primary: #000000;
    --color-bg-secondary: #000000;
    --color-bg-card: #0A0A0A;
    --color-bg-input: #050505;
    --color-bg-overlay: rgba(0, 0, 0, 0.85);
    --color-bg-canvas: #0A0A0A;
    
    /* Brighter Golden Colors */
    --color-gold: #E5B869;
    --color-gold-bright: #F7D08A;
    --color-gold-dim: #A88448;
    --color-gold-rgb: 229, 184, 105;
    
    /* Text Color */
    --color-text-primary: #F5F5F7;
    --color-text-secondary: #A0A0A5;
    --color-text-dark: #080809;
    
    /* Borders */
    --color-border: rgba(229, 184, 105, 0.2);
    --color-border-active: rgba(229, 184, 105, 0.7);
    --color-border-grey: #232428;
    
    /* Fonts */
    --font-headers: 'The Year of The Camel', sans-serif;
    --font-body: 'Tajawal', sans-serif;
    
    /* Animation & Timing */
    --transition-speed: 0.35s;
    --transition-ease: cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Box shadows (brutalist, sharp offset) */
    --shadow-sharp: 4px 4px 0px rgba(229, 184, 105, 0.25);
    --shadow-sharp-hover: 6px 6px 0px rgba(229, 184, 105, 0.50);
}

/* ── Light Mode ────────────────────────────────────────────────────────── */
html.light-mode {
    --color-bg-deep: #F5F0E8;
    --color-bg-primary: #FAF8F4;
    --color-bg-secondary: #F9F6F0;
    --color-bg-card: #FFFFFF;
    --color-bg-input: #FFFFFF;
    --color-bg-overlay: rgba(255, 255, 255, 0.92);
    --color-bg-canvas: #F0EBE3;
    
    --color-gold: #B8860B;
    --color-gold-bright: #D4A030;
    --color-gold-dim: #8B6914;
    --color-gold-rgb: 184, 134, 11;
    
    --color-text-primary: #1C1B1A;
    --color-text-secondary: #5C5A56;
    --color-text-dark: #FAF8F4;
    
    --color-border: rgba(184, 134, 11, 0.25);
    --color-border-active: rgba(184, 134, 11, 0.6);
    --color-border-grey: #D4D0C8;
    
    --shadow-sharp: 4px 4px 0px rgba(184, 134, 11, 0.2);
    --shadow-sharp-hover: 6px 6px 0px rgba(184, 134, 11, 0.35);
}

/* Light mode: grayscale + invert Vision 2030 images for crisp black-on-light contrast */
html.light-mode .header-vision-badge,
html.light-mode .footer-vision-img,
html.light-mode .gallery-vision-logo {
    filter: grayscale(1) invert(1);
}

/* ── Language-aware font switching ──────────────────────────────────── */
html.lang-en {
    --font-body: 'Inter', sans-serif;
}

/* Toast language-aware styles */
.custom-toast {
    font-family: var(--font-body);
    direction: rtl;
    text-align: right;
}

html.lang-en .custom-toast {
    direction: ltr;
    text-align: left;
    right: auto;
    left: 30px;
}

/* ==========================================================================
   LTR Layout Overrides
   When dir="ltr" is set by i18n.js, these overrides flip physical CSS
   properties (left/right/text-align) that don't auto-respect the dir attr.
   Selector: html[dir="ltr"] — applied by i18n.js setLanguage()
   ========================================================================== */

/* ── 1. Body — override hardcoded RTL in reset.css ─────────────────── */
html[dir="ltr"] body {
    direction: ltr;
    text-align: left;
}

/* ── 2. Header — nav underline starts from left ────────────────────── */
html[dir="ltr"] .nav-link::after {
    right: auto;
    left: 0;
}

/* ── 3. Hero — flip horizontal gradient for LTR readability ────────── */
html[dir="ltr"] .hero-sec::before {
    background:
        linear-gradient(to bottom,
            rgba(12, 13, 14, 0.45) 0%,
            rgba(12, 13, 14, 0.15) 30%,
            rgba(12, 13, 14, 0.1) 50%,
            rgba(12, 13, 14, 0.5) 75%,
            rgba(12, 13, 14, 0.85) 90%,
            var(--color-bg-primary) 100%),
        linear-gradient(to right,
            rgba(12, 13, 14, 0.4) 0%,
            rgba(12, 13, 14, 0.08) 40%,
            rgba(12, 13, 14, 0) 100%);
}

html[dir="ltr"].light-mode .hero-sec::before {
    background:
        linear-gradient(to bottom,
            rgba(250, 248, 244, 0.4) 0%,
            rgba(250, 248, 244, 0.15) 25%,
            rgba(250, 248, 244, 0.1) 45%,
            rgba(250, 248, 244, 0.15) 65%,
            rgba(250, 248, 244, 0.4) 80%,
            rgba(250, 248, 244, 0.85) 93%,
            var(--color-bg-primary) 100%),
        linear-gradient(to right,
            rgba(250, 248, 244, 0.35) 0%,
            rgba(250, 248, 244, 0.1) 40%,
            rgba(250, 248, 244, 0) 100%);
}

/* ── 4. FAQ trigger alignment ──────────────────────────────────────── */
html[dir="ltr"] .faq-trigger {
    text-align: left;
}

/* ── 5. Testimonial cards — flip direction ─────────────────────────── */
html[dir="ltr"] .t-card {
    direction: ltr;
    text-align: left;
}

/* ── 6. Lightbox — swap prev/next positions for LTR ────────────────── */
html[dir="ltr"] .lightbox-prev {
    right: auto;
    left: 20px;
}
html[dir="ltr"] .lightbox-next {
    left: auto;
    right: 20px;
}
html[dir="ltr"] .lightbox-close {
    left: auto;
    right: 20px;
}

/* ── 7. Scroll-to-top — opposite side from WhatsApp ────────────────── */
html[dir="ltr"] .scroll-top-btn {
    left: auto;
    right: 30px;
}

/* ── 8. Footer links hover indent ──────────────────────────────────── */
html[dir="ltr"] .footer-links a:hover {
    padding-right: 0;
    padding-left: 5px;
}

/* ── 9. Select dropdown arrow position ─────────────────────────────── */
html[dir="ltr"] select.form-control {
    background-position: right 15px center;
}

/* ── 10. About section gradient — darken right side in LTR ─────────── */
html[dir="ltr"] .about-sec::before {
    background:
        linear-gradient(to bottom,
            rgba(0,0,0,0.45) 0%,
            rgba(0,0,0,0.55) 50%,
            rgba(0,0,0,0.80) 85%,
            var(--color-bg-primary) 100%),
        linear-gradient(to left,
            rgba(0,0,0,0.35) 0%,
            rgba(0,0,0,0) 60%);
}
html[dir="ltr"].light-mode .about-sec::before {
    background:
        linear-gradient(to bottom,
            rgba(255,255,255,0.45) 0%,
            rgba(255,255,255,0.55) 50%,
            rgba(255,255,255,0.80) 85%,
            var(--color-bg-primary) 100%),
        linear-gradient(to left,
            rgba(255,255,255,0.35) 0%,
            rgba(255,255,255,0) 60%);
}

/* ── 11. Mobile nav — slide from left in LTR ──────────────────────── */
@media (max-width: 768px) {
    html[dir="ltr"] .nav-menu {
        right: auto;
        left: 0;
        border-left: none;
        border-right: 1px solid var(--color-border);
        transform: translateX(-110%);
    }
    html[dir="ltr"] .nav-menu.open {
        transform: translateX(0);
    }

    html[dir="ltr"] .hero-sec {
        text-align: left;
    }

    html[dir="ltr"] .lightbox-prev { right: auto; left: 8px; }
    html[dir="ltr"] .lightbox-next { left: auto; right: 8px; }
}

@media (max-width: 600px) {
    html[dir="ltr"] .lightbox-prev { right: auto; left: 8px; }
    html[dir="ltr"] .lightbox-next { left: auto; right: 8px; }
}