/* ==========================================================================
   Bleu Saigon - Global Typography & Mobile Optimization
   ========================================================================== */

/* 1. Global Font Unification (Plus Jakarta Sans) */
:root {
    --clb-title-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    --clb-text-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    --e-global-typography-primary-font-family: 'Plus Jakarta Sans', sans-serif !important;
    --e-global-typography-secondary-font-family: 'Plus Jakarta Sans', sans-serif !important;
    --e-global-typography-text-font-family: 'Plus Jakarta Sans', sans-serif !important;
    --e-global-typography-accent-font-family: 'Plus Jakarta Sans', sans-serif !important;
}

html, body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.title, .titles-typo, .heading, .subtitle,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.accordion-header,
.branding-title,
.branding-title .logo,
.branding-title .logo-sticky,
.nav-container,
.card-details .title,
.widget-title,
.headline-meta,
.options-group .title {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ensure proper line height for accented headings */
h1, h2, h3, h4, h5, h6, .title, .heading {
    letter-spacing: -0.015em;
}

/* 2. Responsive Mobile Typography Overrides (max-width: 767px) */
@media (max-width: 767px) {
    /* Hero Title */
    .elementor-231056 .elementor-element.elementor-element-46e0eea h1,
    .elementor-231056 .elementor-element.elementor-element-46e0eea h2,
    .elementor-231056 .elementor-element.elementor-element-46e0eea h3,
    .elementor-231056 .elementor-element.elementor-element-46e0eea h4,
    .elementor-231056 .elementor-element.elementor-element-46e0eea h5,
    .elementor-231056 .elementor-element.elementor-element-46e0eea h6,
    .elementor-element-46e0eea .title {
        font-size: clamp(30px, 8.2vw, 38px) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.02em !important;
        word-break: keep-all;
    }
    .elementor-231056 .elementor-element.elementor-element-46e0eea .subtitle {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    /* Manifesto & Philosophy Statements */
    .elementor-231056 .elementor-element.elementor-element-1a84093 h1,
    .elementor-231056 .elementor-element.elementor-element-1a84093 h2,
    .elementor-231056 .elementor-element.elementor-element-1a84093 h3,
    .elementor-231056 .elementor-element.elementor-element-327cc447 h1,
    .elementor-231056 .elementor-element.elementor-element-327cc447 h2,
    .elementor-231056 .elementor-element.elementor-element-327cc447 h3 {
        font-size: clamp(18px, 4.8vw, 21px) !important;
        line-height: 1.55 !important;
        letter-spacing: normal !important;
        font-weight: 400 !important;
    }

    /* Section 4 & Services Headings */
    .elementor-231056 .elementor-element.elementor-element-945e136 h1,
    .elementor-231056 .elementor-element.elementor-element-945e136 h2,
    .elementor-231056 .elementor-element.elementor-element-945e136 h3 {
        font-size: clamp(18px, 4.8vw, 22px) !important;
        line-height: 1.45 !important;
        letter-spacing: normal !important;
        font-weight: 400 !important;
    }
    .elementor-231056 .elementor-element.elementor-element-8e5c4ea h1,
    .elementor-231056 .elementor-element.elementor-element-8e5c4ea h2,
    .elementor-231056 .elementor-element.elementor-element-8e5c4ea h3 {
        font-size: clamp(22px, 5.5vw, 25px) !important;
        line-height: 1.3 !important;
        letter-spacing: normal !important;
        font-weight: 600 !important;
    }

    /* Bottom CTA: Làm việc cùng Bleu */
    .elementor-231056 .elementor-element.elementor-element-4fa891fe h1,
    .elementor-231056 .elementor-element.elementor-element-4fa891fe h2,
    .elementor-231056 .elementor-element.elementor-element-4fa891fe h3,
    .elementor-element-4fa891fe .title {
        font-size: clamp(32px, 8.5vw, 40px) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.02em !important;
        margin-bottom: 14px !important;
    }

    /* Mobile Containers Spacing & Padding */
    .elementor-231056 .elementor-element.elementor-element-5934d38,
    .elementor-231056 .elementor-element.elementor-element-43c0c30 {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
    }
    .elementor-231056 .elementor-element.elementor-element-4d92dcb {
        min-height: auto !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
    .elementor-231056 .elementor-element.elementor-element-207afb9 {
        min-height: auto !important;
    }

    /* Accordion Headers */
    .elementor-element-b52269d .accordion-header {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }

    /* Blog / Portfolio Cards on Mobile */
    .portfolio-projects .card-details .title,
    .blog-item .heading.title a {
        font-size: clamp(16px, 4.5vw, 19px) !important;
        line-height: 1.35 !important;
    }

    /* General Headings on All Pages */
    h1, .h1 {
        font-size: clamp(26px, 7vw, 34px) !important;
        line-height: 1.2 !important;
    }
    h2, .h2 {
        font-size: clamp(22px, 5.8vw, 28px) !important;
        line-height: 1.25 !important;
    }
    h3, .h3 {
        font-size: clamp(18px, 4.8vw, 23px) !important;
        line-height: 1.35 !important;
    }
    h4, .h4 {
        font-size: clamp(16px, 4.2vw, 19px) !important;
        line-height: 1.4 !important;
    }
    p, body {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* 3. Tablet Responsive Adjustments (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-231056 .elementor-element.elementor-element-46e0eea h1,
    .elementor-231056 .elementor-element.elementor-element-46e0eea h2,
    .elementor-231056 .elementor-element.elementor-element-46e0eea h3,
    .elementor-element-46e0eea .title {
        font-size: clamp(48px, 6vw, 64px) !important;
        line-height: 1.12 !important;
    }
    .elementor-231056 .elementor-element.elementor-element-4fa891fe h1,
    .elementor-231056 .elementor-element.elementor-element-4fa891fe h2,
    .elementor-231056 .elementor-element.elementor-element-4fa891fe h3,
    .elementor-element-4fa891fe .title {
        font-size: clamp(52px, 7vw, 72px) !important;
        line-height: 1.12 !important;
    }
}