/* ============================================================
   SHADOW STUDIO — SINGLE FONT & FLUID TYPOGRAPHY SYSTEM
   Load AFTER Bootstrap and the original site stylesheet.
   This REPLACES the previous shadow-responsive-typography.css,
   NOT the original design stylesheet.

   CHANGE GOOGLE FONTS (all in this file):
   1. Update family names in the @import URL below.
   2. Update --ss-font-en and/or --ss-font-ar below.

   Defaults: English Outfit, Arabic Cairo.
   No layout, video sizing, JS, animation or sticky rules here.
   ============================================================ */

/* Google Fonts — use the available weights for each family. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* ========== CENTRAL FONT CONTROL ========== */
    --ss-font-en: "Outfit", Arial, sans-serif;
    --ss-font-ar: "Cairo", Tahoma, sans-serif;
    --ss-font-current: var(--ss-font-en);

    /* Compatibility with variables used in the ORIGINAL CSS. */
    --font-heading: var(--ss-font-current);
    --font-body: var(--ss-font-current);
    --ss-font-title: var(--ss-font-current);
    --ss-font-text: var(--ss-font-current);

    /* ========== CENTRAL RESPONSIVE SIZE CONTROL ========== */
    --ss-display: clamp(2rem, 1.15rem + 3.35vw, 4.4rem);
    --ss-page-title: clamp(1.85rem, 1.12rem + 2.35vw, 3.4rem);
    --ss-section-title: clamp(1.4rem, 1.13rem + 1.1vw, 2.15rem);
    --ss-card-title: clamp(1.1rem, .97rem + .55vw, 1.45rem);
    --ss-lead: clamp(1rem, .92rem + .45vw, 1.35rem);
    --ss-body: clamp(1rem, .96rem + .16vw, 1.08rem);
    --ss-nav: clamp(.95rem, .9rem + .25vw, 1.125rem);
    --ss-label: clamp(.8125rem, .78rem + .16vw, .95rem);
    --ss-button: clamp(.9375rem, .9rem + .2vw, 1.06rem);
    --ss-reel-title: clamp(1.05rem, .94rem + .5vw, 1.4rem);
    --ss-small: clamp(.75rem, .73rem + .1vw, .84rem);

    /* ========== CENTRAL WEIGHT CONTROL ========== */
    --ss-weight-normal: 400;
    --ss-weight-medium: 500;
    --ss-weight-heading: 700;
    --ss-weight-display: 800;
}

/* Laravel layout should have lang="ar" + dir="rtl" for Arabic pages. */
html:lang(ar),
html[dir="rtl"] {
    --ss-font-current: var(--ss-font-ar);
}

/* Base text, form controls and buttons. Don't overwrite icon-font classes. */
body,
button,
input,
select,
textarea {
    font-family: var(--ss-font-current);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ss-font-title);
}

/* A language-specific span can opt back into the other font. */
:lang(ar) [lang="en"],
:lang(ar) [lang^="en-"] {
    font-family: var(--ss-font-en);
}

/* English-specific spacing can look wrong in Arabic lettering. */
html:lang(ar) :is(.center-title, .meta-text, .eyebrow-tag, .founder-role,
    .contact-eyebrow, .svc-label, .pl-title, .pl-cat, .pl-item,
    .reel-cat),
html[dir="rtl"] :is(.center-title, .meta-text, .eyebrow-tag, .founder-role,
    .contact-eyebrow, .svc-label, .pl-title, .pl-cat, .pl-item,
    .reel-cat) {
    letter-spacing: normal;
}

/* ========== SITE-WIDE NAV / FOOTER / HOME ========== */
.site-nav-list,
.site-nav-list .nav-link,
.services-menu .dropdown-item,
.footer-list,
.site-footer .copyright {
    font-family: var(--ss-font-text);
    font-size: var(--ss-nav);
}

.site-footer .footer-panel h2,
.section-heading h2,
.service-copy h2 {
    font-family: var(--ss-font-title);
    font-size: var(--ss-section-title);
    line-height: 1.3;
}

.hero-section h1 {
    font-family: var(--ss-font-title);
    font-size: var(--ss-page-title);
    line-height: 1.25;
}

.content-hero h1 {
    font-family: var(--ss-font-title);
    font-size: var(--ss-page-title);
    line-height: 1.2;
}

.about-intro h2,
.why-section h2,
.founders-section h2,
.portfolio-section h2,
.contact-options h2 {
    font-family: var(--ss-font-title);
    font-size: var(--ss-section-title);
    line-height: 1.3;
}

.site-navbar .language-toggle,
.contact-details,
.portfolio-card h3,
.founder-card h3 {
    font-family: var(--ss-font-text);
    font-size: var(--ss-body);
}

.hero-section .hero-tagline,
.service-copy > p,
.testimonial-copy,
.testimonial-heading p,
.content-hero p,
.about-copy,
.why-card p,
.contact-option p {
    font-family: var(--ss-font-text);
    font-size: var(--ss-body);
    line-height: 1.7;
}

.hero-actions .button-light,
.hero-actions .button-outline,
.service-actions .button-light,
.service-actions .button-outline,
.btn-work {
    font-family: var(--ss-font-text);
    font-size: var(--ss-button);
}

.service-copy .service-pro,
.footer-tag {
    font-family: var(--ss-font-text);
    font-size: var(--ss-small);
}

.testimonial-heading h3,
.why-card h3,
.contact-options h2,
.portfolio-section h2 {
    font-family: var(--ss-font-title);
    font-size: var(--ss-card-title);
    line-height: 1.35;
}

/* ========== ABOUT ========== */
.content-page .service-copy h2 {
    font-family: var(--ss-font-title);
    font-size: var(--ss-section-title);
    line-height: 1.25;
}

.content-page .service-copy .service-pro {
    font-size: var(--ss-small);
}

.studio-section .about-heading {
    font-family: var(--ss-font-title);
    font-size: var(--ss-page-title);
    font-weight: var(--ss-weight-display);
    line-height: 1.2;
    overflow-wrap: break-word;
}

.studio-section .about-description,
.studio-section .founder-bio {
    font-family: var(--ss-font-text);
    font-size: var(--ss-body);
    line-height: 1.75;
}

.studio-section .founder-name {
    font-family: var(--ss-font-title);
    font-size: var(--ss-card-title);
    line-height: 1.35;
    overflow-wrap: break-word;
}

.studio-section .center-title,
.studio-section .meta-text,
.studio-section .eyebrow-tag,
.studio-section .founder-role {
    font-family: var(--ss-font-text);
    font-size: var(--ss-label);
    line-height: 1.55;
}

/* ========== CONTACT ========== */
.contact-standalone-wrapper .contact-heading {
    font-family: var(--ss-font-title);
    font-size: var(--ss-display);
    font-weight: var(--ss-weight-display);
    line-height: 1.18;
    overflow-wrap: break-word;
}

.contact-standalone-wrapper .contact-eyebrow {
    font-family: var(--ss-font-text);
    font-size: var(--ss-label);
    line-height: 1.5;
}

.contact-standalone-wrapper .contact-input-field {
    font-family: var(--ss-font-text);
    /* 16px minimum helps avoid iOS zoom when focusing fields. */
    font-size: clamp(1rem, .96rem + .12vw, 1.05rem);
    line-height: 1.5;
}

.contact-standalone-wrapper .btn-send-message {
    font-family: var(--ss-font-text);
    font-size: var(--ss-button);
    line-height: 1.4;
}

/* ========== SERVICES: IMAGE + VIDEO ========== */
.service-section--video .svc-title,
.hero .svc-title {
    font-family: var(--ss-font-title);
    font-size: var(--ss-display);
    font-weight: var(--ss-weight-display);
    line-height: 1.17;
    overflow-wrap: break-word;
}

.service-section--video .svc-subtitle,
.hero .svc-subtitle {
    font-family: var(--ss-font-text);
    font-size: var(--ss-lead);
    line-height: 1.45;
}

.service-section--video .svc-desc,
.hero .svc-desc {
    font-family: var(--ss-font-text);
    font-size: var(--ss-body);
    line-height: 1.75;
}

.service-section--video .svc-label,
.hero .svc-label {
    font-family: var(--ss-font-text);
    font-size: var(--ss-label);
    line-height: 1.5;
}

.service-section--video .btn-work,
.hero .btn-work {
    font-family: var(--ss-font-text);
    font-size: var(--ss-button);
    line-height: 1.45;
}

/* ========== WORK ========== */
.work-section .work-head h1 {
    font-family: var(--ss-font-title);
    font-size: var(--ss-page-title);
    font-weight: var(--ss-weight-heading);
    line-height: 1.2;
    overflow-wrap: break-word;
}

.work-section .work-head p {
    font-family: var(--ss-font-text);
    font-size: var(--ss-lead);
    line-height: 1.6;
}

.work-section .pl-cat {
    font-family: var(--ss-font-title);
    font-size: var(--ss-card-title);
    line-height: 1.4;
}

.work-section .pl-title,
.work-section .pl-now,
.work-section .pl-item,
.work-section .player-msg {
    font-family: var(--ss-font-text);
    font-size: var(--ss-body);
    line-height: 1.55;
}

.work-section .pl-count {
    font-family: var(--ss-font-text);
    font-size: var(--ss-label);
}

html[dir="rtl"] .work-section .pl-item {
    text-align: start;
}

/* ========== REELS ========== */
.reels .reel-info h2 {
    font-family: var(--ss-font-title);
    font-size: var(--ss-reel-title);
    line-height: 1.35;
    overflow-wrap: break-word;
}

.reels .reel-cat,
.reels .reel-count {
    font-family: var(--ss-font-text);
    font-size: var(--ss-label);
    line-height: 1.45;
}

.reels .reel-msg {
    font-family: var(--ss-font-text);
    font-size: var(--ss-body);
    line-height: 1.6;
}

/* Small screens: avoid excess letter-spacing on narrow lines. */
@media (max-width: 575.98px) {
    .studio-section .center-title,
    .studio-section .meta-text,
    .studio-section .eyebrow-tag,
    .studio-section .founder-role,
    .contact-standalone-wrapper .contact-eyebrow,
    .service-section--video .svc-label,
    .hero .svc-label {
        letter-spacing: .06em;
    }

    /* RTL stays natural at every width. */
    html:lang(ar) :is(.center-title, .meta-text, .eyebrow-tag,
        .founder-role, .contact-eyebrow, .svc-label),
    html[dir="rtl"] :is(.center-title, .meta-text, .eyebrow-tag,
        .founder-role, .contact-eyebrow, .svc-label) {
        letter-spacing: normal;
    }
}
/* ==========================================
   SOCIAL ACCOUNTS - GOLDEN HOVER
========================================== */

.accounts-section .account-tile {
    position: relative !important;
    cursor: pointer !important;
    background: #0d0d0d !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease !important;
}

/* Golden Overlay */
.accounts-section .account-tile::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(236, 196, 21, 0.18) !important;
    opacity: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: opacity 0.35s ease !important;
}

/* Images */
.accounts-section .account-tile img {
    transition:
        transform 0.4s ease,
        filter 0.4s ease !important;
}

/* Text */
.accounts-section .account-tile span {
    z-index: 2 !important;
    transition:
        background 0.3s ease,
        color 0.3s ease !important;
}

/* Hover */
.accounts-section .account-tile:hover,
.accounts-section .account-tile:focus-visible {
    transform: translateY(-6px) !important;
    background: rgba(236, 196, 21, 0.12) !important;
    border-color: #ecc415 !important;

    box-shadow:
        0 0 12px rgba(236, 196, 21, 0.35),
        0 0 25px rgba(236, 196, 21, 0.15) !important;
}

.accounts-section .account-tile:hover::before,
.accounts-section .account-tile:focus-visible::before {
    opacity: 1 !important;
}

.accounts-section .account-tile:hover img,
.accounts-section .account-tile:focus-visible img {
    transform: scale(1.15) !important;
    filter: brightness(1.15) !important;
}

.accounts-section .account-tile:hover span,
.accounts-section .account-tile:focus-visible span {
    background: #ecc415 !important;
    color: #000000 !important;
    font-weight: 600 !important;
}


/* ==========================================
   FOOTER - GOLDEN HOVER
========================================== */

/* Footer Links */
.site-footer .footer-list a {
    display: inline-block !important;
    color: #d4d4d8 !important;
    text-decoration: none !important;

    transition:
        color 0.3s ease,
        transform 0.3s ease,
        text-shadow 0.3s ease !important;
}

/* Links Hover */
.site-footer .footer-list a:hover,
.site-footer .footer-list a:focus-visible {
    color: #ecc415 !important;
    transform: translateY(-2px) !important;

    text-shadow:
        0 0 10px rgba(236, 196, 21, 0.35) !important;
}

/* Social Icons */
.site-footer .footer-socials a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid transparent !important;
    border-radius: 8px !important;

    color: #ffffff !important;
    background: transparent !important;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* Social Hover */
.site-footer .footer-socials a:hover,
.site-footer .footer-socials a:focus-visible {
    background: #ecc415 !important;
    color: #000000 !important;
    border-color: #ecc415 !important;

    transform: translateY(-4px) !important;

    box-shadow:
        0 0 12px rgba(236, 196, 21, 0.4),
        0 0 22px rgba(236, 196, 21, 0.15) !important;
}

/* Footer Logo */
.site-footer .footer-brand > img {
    transition:
        transform 0.4s ease,
        filter 0.4s ease !important;
}

/* Logo Hover */
.site-footer .footer-brand > img:hover {
    transform: scale(1.05) !important;

    filter:
        drop-shadow(0 0 12px rgba(236, 196, 21, 0.45)) !important;
}


/* ==========================================
   MOBILE VIDEO FIX ONLY
   DESKTOP UNCHANGED
========================================== */

@media (max-width: 767.98px) {

    .home-showcase .service-video-wrap {
        width: 100% !important;
        padding: 0 !important;
    }

    .home-showcase .service-video {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        object-fit: contain !important;

        border-radius: 8px !important;
    }

}


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

@media (prefers-reduced-motion: reduce) {

    .accounts-section .account-tile,
    .accounts-section .account-tile::before,
    .accounts-section .account-tile img,
    .accounts-section .account-tile span,
    .site-footer .footer-list a,
    .site-footer .footer-socials a,
    .site-footer .footer-brand > img {
        transition: none !important;
    }

}