/*
Theme Name: Launch Lab Studio
Theme URI: https://launchlabstudio.ae/
Description: Launch Lab Studio Official Theme - Built on Ohio. Powered by Playfair Display & Poppins typography (with Alexandria & Readex Pro for Arabic), Deep Green (#0E1A14), Gold (#B8955A), Secondary Green (#2F3E36), and Warm Alabaster Light (#F4F1EA) brand identity.
Author: Launch Lab Studio
Author URI: https://launchlabstudio.ae/
Template: ohio
Version: 1.2.0
Text Domain: ohio-child
License: GNU General Public License v2 or later
*/

/* ==========================================================================
   Google Fonts Import:
   - Playfair Display (Luxury Serif for Latin Headings)
   - Poppins (Geometric Modern Sans for Latin Body)
   - Alexandria (Prestigious Modern Arabic Headings & Accents)
   - Readex Pro (Clean High-Legibility Arabic Body & UI)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Readex+Pro:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   Launch Lab Studio - Core Brand Design Tokens (Identity Guide)
   #0E1A14 (Deep Green), #2F3E36 (Secondary Green), #B8955A (Accent Gold), #F4F1EA (Alabaster Light)
   ========================================================================== */
:root {
    /* Brand Primary & Accents */
    --clb-color-primary:        #B8955A;
    --lls-accent-gold:          #B8955A;
    --lls-accent-gold-hover:    #C8A66B;
    --lls-accent-gold-dark:     #9E7E45;
    --lls-accent-gold-glow:     rgba(184, 149, 90, 0.32);
    --lls-accent-gold-soft:     rgba(184, 149, 90, 0.12);
    --lls-accent-gold-border:   rgba(184, 149, 90, 0.28);

    /* Brand Forest Greens & Alabaster */
    --lls-primary-deep-green:   #0E1A14;
    --lls-secondary-green:      #2F3E36;
    --lls-surface-dark:         #14221B;
    --lls-surface-dark-card:    #16271F;
    --lls-bg-light:             #F4F1EA;
    --lls-surface-card-light:   #FFFFFF;
    --lls-border-light:         rgba(14, 26, 20, 0.09);
    --lls-border-dark:          rgba(184, 149, 90, 0.22);
    
    /* Typography Tokens */
    --font-heading:        'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:           'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-arabic-heading: 'Alexandria', 'Playfair Display', sans-serif;
    --font-arabic-body:    'Readex Pro', 'Poppins', sans-serif;
    
    --lls-radius-pill: 9999px;
    --lls-radius-card: 16px;
    --lls-radius-sm: 8px;
    --lls-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Arabic Typography Support (RTL & Bilingual)
   ========================================================================== */
:lang(ar),
[dir="rtl"],
body.rtl {
    --font-heading: var(--font-arabic-heading);
    --font-body:    var(--font-arabic-body);
    font-family: var(--font-arabic-body) !important;
}

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4, :lang(ar) h5, :lang(ar) h6,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6 {
    font-family: var(--font-arabic-heading) !important;
    letter-spacing: 0 !important;
}

/* ==========================================================================
   Base Background & Typography Hierarchy: LIGHT MODE (DEFAULT)
   Warm Alabaster Light (#F4F1EA) with Deep Forest Green Headings (#0E1A14)
   ========================================================================== */
html,
body {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Light Theme Scheme */
body:not(.dark-scheme),
.light-scheme,
body:not(.dark-scheme) #page,
body:not(.dark-scheme) .site,
body:not(.dark-scheme) .site-content,
body:not(.dark-scheme) .site-content .page-container,
body:not(.dark-scheme) .child-project-single-wrapper {
    background-color: var(--lls-bg-light) !important;
    color: #2F3E36;
}

body:not(.dark-scheme) h1,
body:not(.dark-scheme) h2,
body:not(.dark-scheme) h3,
body:not(.dark-scheme) h4,
body:not(.dark-scheme) h5,
body:not(.dark-scheme) h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #0E1A14;
}

body:not(.dark-scheme) .section-title,
body:not(.dark-scheme) .project-headline,
body:not(.dark-scheme) .contact-main-title,
body:not(.dark-scheme) .projects-title,
body:not(.dark-scheme) .services-title {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #0E1A14;
}

/* ==========================================================================
   DARK MODE SCHEME (When user toggles Dark Scheme in Ohio)
   Primary Deep Green (#0E1A14) with White & Gold Accents (#B8955A)
   ========================================================================== */
body.dark-scheme,
.dark-scheme,
body.dark-scheme #page,
body.dark-scheme .site,
body.dark-scheme .site-content,
body.dark-scheme .site-content .page-container,
body.dark-scheme .child-project-single-wrapper {
    background-color: var(--lls-primary-deep-green) !important;
    color: #C8D6CF;
}

body.dark-scheme h1,
body.dark-scheme h2,
body.dark-scheme h3,
body.dark-scheme h4,
body.dark-scheme h5,
body.dark-scheme h6 {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #FFFFFF;
}

body.dark-scheme .section-title,
body.dark-scheme .project-headline,
body.dark-scheme .contact-main-title,
body.dark-scheme .projects-title,
body.dark-scheme .services-title {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
    font-weight: 700;
    color: #FFFFFF;
}

/* ==========================================================================
   Luxury Brand Gold Buttons (#B8955A - Gold Capsule / Pill)
   High contrast, crystal clear readability (#0E1A14 text on #B8955A gold)
   ========================================================================== */
.lls-btn-pill,
a.lls-btn-pill,
.child-btn-primary,
button.child-btn-primary,
.submit-contact-btn,
button.submit-contact-btn,
#contact-submit-btn,
.header-button a,
.header-nav .btn-primary,
.site-header .button,
.overlay-action-btn,
.page-numbers.current,
.page-numbers span.current {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    padding: 0.85rem 2rem !important;
    border-radius: var(--lls-radius-pill) !important;
    background: #B8955A !important;
    background-color: #B8955A !important;
    color: #0E1A14 !important;
    -webkit-text-fill-color: #0E1A14 !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: 1px solid #B8955A !important;
    box-shadow: 0 4px 18px rgba(184, 149, 90, 0.35) !important;
    transition: all 0.28s var(--lls-spring) !important;
    cursor: pointer !important;
}

.lls-btn-pill:hover,
a.lls-btn-pill:hover,
.child-btn-primary:hover,
button.child-btn-primary:hover,
.submit-contact-btn:hover,
button.submit-contact-btn:hover,
#contact-submit-btn:hover,
.header-button a:hover,
.header-nav .btn-primary:hover,
.site-header .button:hover,
.overlay-action-btn:hover {
    background: #C8A66B !important;
    background-color: #C8A66B !important;
    color: #0E1A14 !important;
    -webkit-text-fill-color: #0E1A14 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(184, 149, 90, 0.5) !important;
}

/* Button Circle Arrow Icon (Dark Pill Inside Gold Capsule) */
.lls-btn-pill .btn-circle-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0E1A14;
    color: #B8955A;
    transition: all 0.3s var(--lls-spring);
}

.lls-btn-pill:hover .btn-circle-arrow {
    transform: translateX(4px);
    background: #0E1A14;
    color: #FFFFFF;
}

[dir="rtl"] .lls-btn-pill:hover .btn-circle-arrow {
    transform: translateX(-4px) rotate(180deg);
}

/* ==========================================================================
   FLAG IMAGES STYLING (Country Filter Bar & Project Cards)
   ========================================================================== */
.filter-flag-img {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.card-flag-img {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.filter-globe-icon {
    display: inline-block;
    vertical-align: middle;
    color: var(--lls-accent-gold);
    flex-shrink: 0;
}

/* ==========================================================================
   ELEMENTOR COMPATIBILITY (Allow user to freely change text & heading colors in Elementor)
   ========================================================================== */
.elementor-element .elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-element [class*="elementor-heading"],
.elementor-element [class*="elementor-"] {
    /* Elementor user-selected color will take precedence */
}

/* ==========================================================================
   INVERTED FOOTER SCHEME (Opposite of Active Theme Scheme)
   Light Site => Luxury Deep Green Footer (#0E1A14)
   Dark Site  => Warm Alabaster Light Footer (#F4F1EA)
   ========================================================================== */

/* 1. When Site is in LIGHT SCHEME -> Footer is LUXURY DEEP DARK */
body:not(.dark-scheme) .site-footer,
body:not(.dark-scheme) #colophon,
body:not(.dark-scheme) footer.site-footer,
body:not(.dark-scheme) #page .site-footer,
body:not(.dark-scheme) .site-footer.clb__light_section,
body:not(.dark-scheme) .site-footer.clb__dark_section,
body:not(.dark-scheme) .site-footer-copyright {
    background-color: #0E1A14 !important;
    background: #0E1A14 !important;
    color: #C8D6CF !important;
}

body:not(.dark-scheme) .site-footer .page-container,
body:not(.dark-scheme) .site-footer .widgets,
body:not(.dark-scheme) .site-footer .widgets-column,
body:not(.dark-scheme) .site-footer-copyright .holder {
    background-color: transparent !important;
    background: transparent !important;
}

body:not(.dark-scheme) .site-footer h1,
body:not(.dark-scheme) .site-footer h2,
body:not(.dark-scheme) .site-footer h3,
body:not(.dark-scheme) .site-footer h4,
body:not(.dark-scheme) .site-footer h5,
body:not(.dark-scheme) .site-footer h6,
body:not(.dark-scheme) .site-footer .widget-title,
body:not(.dark-scheme) .site-footer .title,
body:not(.dark-scheme) .site-footer .heading {
    color: #FFFFFF !important;
}

body:not(.dark-scheme) .site-footer p,
body:not(.dark-scheme) .site-footer span,
body:not(.dark-scheme) .site-footer li,
body:not(.dark-scheme) .site-footer .widgets,
body:not(.dark-scheme) .site-footer .textwidget {
    color: #C8D6CF !important;
}

body:not(.dark-scheme) .site-footer a,
body:not(.dark-scheme) .site-footer .widgets a,
body:not(.dark-scheme) .site-footer li a {
    color: #C8D6CF !important;
    transition: color 0.25s ease;
}

body:not(.dark-scheme) .site-footer a:hover,
body:not(.dark-scheme) .site-footer .widgets a:hover,
body:not(.dark-scheme) .site-footer li a:hover {
    color: #B8955A !important;
}

body:not(.dark-scheme) .site-footer-text p {
    color: rgba(255, 255, 255, 0.05) !important;
}

body:not(.dark-scheme) .site-footer-copyright {
    background-color: #08100C !important;
    border-top: 1px solid rgba(184, 149, 90, 0.2) !important;
    color: #9EAEA5 !important;
}

body:not(.dark-scheme) .site-footer-copyright a {
    color: #B8955A !important;
}

body:not(.dark-scheme) .site-footer .scroll-top .icon-button {
    background-color: #16271F !important;
    color: #B8955A !important;
    border: 1px solid rgba(184, 149, 90, 0.3) !important;
}

/* 2. When Site is in DARK SCHEME -> Footer is WARM ALABASTER LIGHT */
body.dark-scheme .site-footer,
body.dark-scheme #colophon,
body.dark-scheme .site-footer.clb__dark_section,
body.dark-scheme .site-footer.clb__light_section {
    background-color: #F4F1EA !important;
    color: #2F3E36 !important;
}

body.dark-scheme .site-footer .page-container {
    background-color: transparent !important;
}

body.dark-scheme .site-footer h1,
body.dark-scheme .site-footer h2,
body.dark-scheme .site-footer h3,
body.dark-scheme .site-footer h4,
body.dark-scheme .site-footer h5,
body.dark-scheme .site-footer h6,
body.dark-scheme .site-footer .widget-title,
body.dark-scheme .site-footer .title,
body.dark-scheme .site-footer .heading {
    color: #0E1A14 !important;
}

body.dark-scheme .site-footer p,
body.dark-scheme .site-footer span,
body.dark-scheme .site-footer li,
body.dark-scheme .site-footer .widgets,
body.dark-scheme .site-footer .textwidget {
    color: #2F3E36 !important;
}

body.dark-scheme .site-footer a,
body.dark-scheme .site-footer .widgets a,
body.dark-scheme .site-footer li a {
    color: #2F3E36 !important;
    transition: color 0.25s ease;
}

body.dark-scheme .site-footer a:hover,
body.dark-scheme .site-footer .widgets a:hover,
body.dark-scheme .site-footer li a:hover {
    color: #B8955A !important;
}

body.dark-scheme .site-footer-text p {
    color: rgba(14, 26, 20, 0.06) !important;
}

body.dark-scheme .site-footer-copyright {
    background-color: #EBE7DE !important;
    border-top: 1px solid rgba(47, 62, 54, 0.15) !important;
    color: #4B5E54 !important;
}

body.dark-scheme .site-footer-copyright a {
    color: #B8955A !important;
}

body.dark-scheme .site-footer .scroll-top .icon-button {
    background-color: #FFFFFF !important;
    color: #0E1A14 !important;
    border: 1px solid rgba(184, 149, 90, 0.3) !important;
}