/*
Theme Name: Yafta Media Theme
Description: A WordPress theme powered by Yafta Media.
Author: Yafta Media
Version: 1.0.0
*/

/* ==========================================================================
   Typography & Custom Fonts Setup
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Main English Typography: Sora Family
   Usage: Headlines (H1-H6, H2), Header, Logo, and Main Title text
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-VariableFont_wght.ttf') format('truetype-variations'),
         url('assets/newfonts/Sora-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sora';
    src: url('assets/newfonts/Sora-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Secondary English Typography: Outfit Family
   Usage: Paragraphs (p), body text, and UI text
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-VariableFont_wght.ttf') format('truetype-variations'),
         url('assets/newfonts/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('assets/newfonts/Outfit-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   3. Arabic Typography: Montserrat-Arabic Family
   Usage: Arabic body text
   Weights: Light (300) / Regular (400) / Bold (700) / Black (900)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('assets/fonts/MONTSERRAT-ARABIC LIGHT 300.OTF') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('assets/fonts/MONTSERRAT-ARABIC REGULAR 400.OTF') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('assets/fonts/MONTSERRAT-ARABIC BOLD 700.OTF') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat-Arabic';
    src: url('assets/fonts/MONTSERRAT-ARABIC BLACK 900.OTF') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   4. Arabic Typography: Ara Etab AlMonie'ee Family
   Usage: Arabic Headlines text
   Weights: Regular (400) / Bold (700)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Ara Etab AlMonie\'ee';
    src: url('assets/fonts/etab.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ara Etab AlMonie\'ee';
    src: url('assets/fonts/alfont_com_AlFont_com_AraEtabAlMonie_ee-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ara Etab AlMonieee';
    src: url('assets/fonts/etab.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ara Etab AlMonieee';
    src: url('assets/fonts/alfont_com_AlFont_com_AraEtabAlMonie_ee-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Font Application Rules
   ========================================================================== */

/* --- English Body & Paragraphs (Outfit - Secondary) --- */
html, body, input, button, select, textarea, p, span, div, a, li, label,
[dir="ltr"] html, [dir="ltr"] body, [dir="ltr"] input, [dir="ltr"] button,
[dir="ltr"] select, [dir="ltr"] textarea, [dir="ltr"] p, [dir="ltr"] span,
[dir="ltr"] div, [dir="ltr"] a, [dir="ltr"] li, [dir="ltr"] label,
:lang(en) body, :lang(en) p, :lang(en) span {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- English Headlines, H2, Header & Logo (Sora - Main) --- */
h1, h2, h3, h4, h5, h6,
.headline, .heading, .title, .hero-title,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.headline *, .heading *, .title *, .hero-title *,
header, header *, nav, nav *, .navbar, .navbar *, .header, .header *,
.logo, #logo, .brand, .site-title, [class*="logo"],
[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4, [dir="ltr"] h5, [dir="ltr"] h6,
[dir="ltr"] .headline, [dir="ltr"] .heading, [dir="ltr"] .title, [dir="ltr"] .hero-title,
[dir="ltr"] h1 *, [dir="ltr"] h2 *, [dir="ltr"] h3 *, [dir="ltr"] h4 *, [dir="ltr"] h5 *, [dir="ltr"] h6 *,
[dir="ltr"] .headline *, [dir="ltr"] .heading *, [dir="ltr"] .title *, [dir="ltr"] .hero-title *,
[dir="ltr"] header, [dir="ltr"] header *, [dir="ltr"] nav, [dir="ltr"] nav *,
:lang(en) h1, :lang(en) h2, :lang(en) h3, :lang(en) h4, :lang(en) h5, :lang(en) h6,
:lang(en) .headline, :lang(en) .heading, :lang(en) .title, :lang(en) .hero-title,
:lang(en) header, :lang(en) header *, :lang(en) nav, :lang(en) nav * {
    font-family: 'Sora', sans-serif !important;
}

/* --- Arabic Typography ([dir="rtl"] / :lang(ar)) --- */

/* Arabic Body Text */
[dir="rtl"] html,
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] button,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] div,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] label,
:lang(ar) body,
:lang(ar) p,
:lang(ar) span {
    font-family: 'Montserrat-Arabic', 'Outfit', -apple-system, sans-serif;
}

/* Arabic Headlines & Inner Elements */
[dir="rtl"] h1, [dir="rtl"] h1 *,
[dir="rtl"] h2, [dir="rtl"] h2 *,
[dir="rtl"] h3, [dir="rtl"] h3 *,
[dir="rtl"] h4, [dir="rtl"] h4 *,
[dir="rtl"] h5, [dir="rtl"] h5 *,
[dir="rtl"] h6, [dir="rtl"] h6 *,
[dir="rtl"] .headline, [dir="rtl"] .headline *,
[dir="rtl"] .heading, [dir="rtl"] .heading *,
[dir="rtl"] .title, [dir="rtl"] .title *,
[dir="rtl"] .hero-title, [dir="rtl"] .hero-title *,
:lang(ar) h1, :lang(ar) h1 *,
:lang(ar) h2, :lang(ar) h2 *,
:lang(ar) h3, :lang(ar) h3 *,
:lang(ar) h4, :lang(ar) h4 *,
:lang(ar) h5, :lang(ar) h5 *,
:lang(ar) h6, :lang(ar) h6 * {
    font-family: 'Ara Etab AlMonie\'ee', 'Ara Etab AlMonieee', 'Montserrat-Arabic', sans-serif !important;
}

/* Arabic Logo (if logo text is in Arabic) */
[dir="rtl"] .logo,
[dir="rtl"] #logo,
[dir="rtl"] .brand,
[dir="rtl"] .site-title {
    font-family: 'Montserrat-Arabic', 'Sora', sans-serif !important;
}

/* ==========================================================================
   Typography Utility Classes
   ========================================================================== */
.font-sora, .font-main, .font-primary {
    font-family: 'Sora', sans-serif !important;
}

.font-outfit, .font-secondary {
    font-family: 'Outfit', sans-serif !important;
}

.font-montserrat {
    font-family: 'Outfit', sans-serif !important;
}

.font-goudy {
    font-family: 'Sora', sans-serif !important;
}

.font-montserrat-arabic {
    font-family: 'Montserrat-Arabic', sans-serif !important;
}

.font-etab {
    font-family: 'Ara Etab AlMonie\'ee', 'Ara Etab AlMonieee', sans-serif !important;
}

.font-light {
    font-weight: 300 !important;
}

.font-regular, .font-normal {
    font-weight: 400 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-black {
    font-weight: 900 !important;
}

/* ==========================================================================
   Existing Theme Overrides
   ========================================================================== */

[dir="rtl"] #branding>div>h2,
[dir="rtl"] #ecommerce>div>h2,
[dir="rtl"] #management>div>h2,
[dir="rtl"] #mobile>div>h2 {
    font-size: 42px !important;
    margin-bottom: 12px !important;
}

[dir="rtl"] h2.leading-tight.tracking-tight.mb-6.text-foreground {
    line-height: 4rem !important;
}

[dir="rtl"] .hero-title {
    font-size: 70px !important;
}

[dir="rtl"] .hero-title .text-primary {
    display: block;
    margin-top: 26px;
    font-size: 3rem;
}

@media (min-width: 768px) {
    [dir="rtl"] .hero-title .text-primary {
        font-size: 4.5rem;
    }
}

@media (min-width: 1024px) {
    [dir="rtl"] .hero-title .text-primary {
        font-size: 6rem;
    }
}

/* Enforce maximum width of 1280px on hero and page containers */
.max-w-\[1440px\],
.max-w-\\[1400px\\] {
    max-width: 1280px !important;
}

/* Hide scrollbars for carousels and card previews while preserving arrow navigation */
.no-scrollbar::-webkit-scrollbar,
#projects-carousel-section::-webkit-scrollbar,
#projects-carousel-section *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.no-scrollbar,
#projects-carousel-section,
#projects-carousel-section * {
    -ms-overflow-style: none !important;  /* IE and Edge */
    scrollbar-width: none !important;     /* Firefox */
}

/* Responsive carousel item: 1 per row on mobile (<768px), 2 per row on desktop */
.carousel-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
}

@media (min-width: 768px) {
    .carousel-item {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        min-width: calc(50% - 12px) !important;
    }
}

/* Enforce 20px padding bottom on carousel section header parent div */
section[id] > div.flex.border-b {
    padding-bottom: 20px !important;
}

/* Mouse Drag & Swipe Optimization for Carousels */
.carousel-item,
.carousel-item *,
.pm-gallery-item,
.pm-gallery-item * {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

/* Campaign Gallery Single Page Carousel (3 per row on desktop, 2 on tablet, 1 on mobile) */
.pm-gallery-item {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 640px) {
    .pm-gallery-item {
        flex: 0 0 calc(50% - 12px) !important;
        width: calc(50% - 12px) !important;
        min-width: calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}

@media (min-width: 1024px) {
    .pm-gallery-item {
        flex: 0 0 calc(33.333% - 16px) !important;
        width: calc(33.333% - 16px) !important;
        min-width: calc(33.333% - 16px) !important;
        max-width: calc(33.333% - 16px) !important;
    }
}




/* ==========================================================================
   Service pages: tighten the mobile top spacing
   The services shell stacks main pt-12 + an empty gradient spacer section
   (pt-8) + the ServicePageTemplate section (py-12) above the tab bar, which
   leaves a large dead gap on phones. Pull the tab bar (and everything after
   it) up on mobile only; desktop keeps its original rhythm.
   ========================================================================== */
@media (max-width: 767px) {
    .yafta-services-top-spacer {
        padding-top: 0;
    }

    .yafta-service-tabs {
        margin-top: -2.5rem;
    }
}

/* ==========================================================================
   Arabic header & nav typography
   The English block above targets `header, header *, nav, nav *` without a
   [dir="ltr"] / :lang(en) qualifier and with !important, so in Arabic the
   header stayed on Sora (a Latin-only face) and fell back per-glyph to a
   browser default. Give it the site's Arabic body face instead.
   ========================================================================== */
[dir="rtl"] header, [dir="rtl"] header *,
[dir="rtl"] nav, [dir="rtl"] nav *,
[dir="rtl"] .navbar, [dir="rtl"] .navbar *,
[dir="rtl"] .header, [dir="rtl"] .header *,
:lang(ar) header, :lang(ar) header *,
:lang(ar) nav, :lang(ar) nav *,
:lang(ar) .navbar, :lang(ar) .navbar *,
:lang(ar) .header, :lang(ar) .header * {
    font-family: 'Montserrat-Arabic', 'Outfit', -apple-system, sans-serif !important;
}