/* ============================================================
   TYPOGRAPHY SYSTEM — Hello Elementor Child Theme
   Responsive font sizes using CSS clamp() for fluid scaling
   Breakpoints: Mobile 320px → Tablet 768px → Desktop 1440px
   ============================================================ */


/* ============================================================
   1. GOOGLE FONTS IMPORT
      Add this @import to your functions.php enqueue instead
      (shown here for reference — do NOT use @import in prod)
   ============================================================

   Primary Heading Font  : DM Sans — used for ALL text (headings + body)
   Secondary/Body Font   : DM Sans handles both heading and body roles
   Mono/Code Font        : 

   In functions.php add inside hec_enqueue_styles():
   -------------------------------------------------------
   wp_enqueue_style(
       'hec-google-fonts',
       'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap',
       [],
       null
   );
   -------------------------------------------------------
*/


/* ============================================================
   2. FONT VARIABLES
   ============================================================ */
:root {
    /* Font Families */
    --font-heading:      'Georgia', 'Segoe UI', sans-serif;
    --font-body:         'Poppins', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:         'Georgia', monospace;
    --font-accent:       'Poppins', sans-serif;

    /* Font Weights */
    --fw-light:          300;
    --fw-regular:        400;
    --fw-medium:         500;
    --fw-semibold:       600;
    --fw-bold:           700;
    --fw-extrabold:      800;

    /* Letter Spacing */
    --ls-tight:          -0.03em;
    --ls-normal:          0em;
    --ls-wide:            0.04em;
    --ls-wider:           0.08em;
    --ls-widest:          0.15em;

    /* Line Heights */
    --lh-none:           1;
    --lh-tight:          1.2;
    --lh-snug:           1.35;
    --lh-normal:         1.55;
    --lh-relaxed:        1.7;
    --lh-loose:          1.9;

    /* ── Fluid Font Sizes (clamp: min → preferred → max) ──
       Formula: clamp(MIN, PREFERRED_VW, MAX)
       MIN    = mobile  (≤ 375px)
       MAX    = desktop (≥ 1440px)
       Mid vw = scales smoothly between the two
    */

    /* Display / Hero */
    --fs-display-2xl:    clamp(2.75rem,  6.5vw,  5.5rem);   /* 44px → 88px  */
    --fs-display-xl:     clamp(2.25rem,  5vw,    4.25rem);  /* 36px → 68px  */
    --fs-display-lg:     clamp(1.875rem, 4vw,    3.5rem);   /* 30px → 56px  */

    /* Headings */
    --fs-h1:             clamp(2rem,     4.5vw,  3.25rem);  /* 32px → 52px  */
    --fs-h2:             clamp(1.625rem, 3.5vw,  2.625rem); /* 26px → 42px  */
    --fs-h3:             clamp(1.375rem, 2.75vw, 2rem);     /* 22px → 32px  */
    --fs-h4:             clamp(1.125rem, 2vw,    1.625rem); /* 18px → 26px  */
    --fs-h5:             clamp(1rem,     1.6vw,  1.375rem); /* 16px → 22px  */
    --fs-h6:             clamp(0.9375rem,1.4vw,  1.125rem); /* 15px → 18px  */

    /* Body Text */
    --fs-body-xl:        clamp(1.125rem, 1.5vw,  1.375rem); /* 18px → 22px  */
    --fs-body-lg:        clamp(1rem,     1.3vw,  1.25rem);  /* 16px → 20px  */
    --fs-body-md:        clamp(0.9375rem,1.1vw,  1.125rem); /* 15px → 18px  */
    --fs-body-sm:        clamp(0.875rem, 1vw,    1rem);     /* 14px → 16px  */
    --fs-body-xs:        clamp(0.8125rem,0.9vw,  0.9375rem);/* 13px → 15px  */

    /* UI / Utility */
    --fs-label:          clamp(0.75rem,  0.8vw,  0.875rem); /* 12px → 14px  */
    --fs-caption:        clamp(0.6875rem,0.75vw, 0.8125rem);/* 11px → 13px  */
    --fs-overline:       clamp(0.6875rem,0.7vw,  0.75rem);  /* 11px → 12px  */
    --fs-button:         clamp(0.875rem, 1vw,    1rem);     /* 14px → 16px  */
    --fs-nav:            clamp(0.875rem, 1vw,    1.0625rem);/* 14px → 17px  */
    --fs-code:           clamp(0.8125rem,0.9vw,  0.9375rem);/* 13px → 15px  */
}


/* ============================================================
   3. BASE RESET & BODY
   ============================================================ */
html {
    font-size: 100%; /* 16px base */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family:    var(--font-body);
    font-size:      var(--fs-body-md);
    font-weight:    var(--fw-regular);
    line-height:    var(--lh-relaxed);
    color:          var(--color-text);
    letter-spacing: var(--ls-normal);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


/* ============================================================
   4. HEADING SCALE
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:    var(--font-heading);
    font-weight:    var(--fw-bold);
    line-height:    var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color:          var(--color-dark);
    margin-bottom:  0.5em;
}

h1, .h1 {
    font-size:      var(--fs-h1);
    font-weight:    var(--fw-extrabold);
    letter-spacing: -0.04em;
    line-height:    var(--lh-none);
}

h2, .h2 {
    font-size:      var(--fs-h2);
    font-weight:    var(--fw-bold);
    letter-spacing: -0.03em;
    line-height:    var(--lh-tight);
}

h3, .h3 {
    font-size:      var(--fs-h3);
    font-weight:    var(--fw-semibold);
    letter-spacing: -0.02em;
    line-height:    var(--lh-snug);
}

h4, .h4 {
    font-size:      var(--fs-h4);
    font-weight:    var(--fw-semibold);
    letter-spacing: -0.01em;
    line-height:    var(--lh-snug);
}

h5, .h5 {
    font-size:      var(--fs-h5);
    font-weight:    var(--fw-medium);
    letter-spacing: var(--ls-normal);
    line-height:    var(--lh-normal);
}

h6, .h6 {
    font-size:      var(--fs-h6);
    font-weight:    var(--fw-medium);
    letter-spacing: var(--ls-normal);
    line-height:    var(--lh-normal);
}


/* ============================================================
   5. DISPLAY / HERO SIZES
   ============================================================ */
.display-2xl {
    font-family:    var(--font-heading);
    font-size:      var(--fs-display-2xl);
    font-weight:    var(--fw-extrabold);
    line-height:    var(--lh-none);
    letter-spacing: -0.05em;
}

.display-xl {
    font-family:    var(--font-heading);
    font-size:      var(--fs-display-xl);
    font-weight:    var(--fw-extrabold);
    line-height:    1.05;
    letter-spacing: -0.04em;
}

.display-lg {
    font-family:    var(--font-heading);
    font-size:      var(--fs-display-lg);
    font-weight:    var(--fw-bold);
    line-height:    1.1;
    letter-spacing: -0.03em;
}


/* ============================================================
   6. BODY TEXT SCALE
   ============================================================ */
p {
    font-size:   var(--fs-body-md);
    line-height: var(--lh-relaxed);
   /* color:       var(--color-text);*/
    margin-bottom: 1em;
}

p:last-child { margin-bottom: 0; }

.text-xl {
    font-size:   var(--fs-body-xl);
    line-height: var(--lh-relaxed);
}

.text-lg {
    font-size:   var(--fs-body-lg);
    line-height: var(--lh-relaxed);
}

.text-md {
    font-size:   var(--fs-body-md);
    line-height: var(--lh-relaxed);
}

.text-sm {
    font-size:   var(--fs-body-sm);
    line-height: var(--lh-normal);
}

.text-xs {
    font-size:   var(--fs-body-xs);
    line-height: var(--lh-normal);
}


/* ============================================================
   7. UI TYPOGRAPHY UTILITIES
   ============================================================ */

/* Navigation */
.nav-link,
.elementor-nav-menu a {
    font-family:    var(--font-body);
    font-size:      var(--fs-nav);
    font-weight:    var(--fw-medium);
    letter-spacing: var(--ls-normal);
    line-height:    1;
}

/* Buttons */
.btn,
.elementor-button,
button {
    font-family:    var(--font-body);
    font-size:      var(--fs-button);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    line-height:    1;
}

/* Labels & Form Elements */
label,
.form-label {
    font-size:      var(--fs-label);
    font-weight:    var(--fw-medium);
    letter-spacing: var(--ls-wide);
    line-height:    var(--lh-normal);
}

/* Overline (category tag above headings) */
.overline,
.text-overline {
    font-family:    var(--font-body);
    font-size:      var(--fs-overline);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    line-height:    1;
}

/* Caption / helper text */
.caption,
figcaption,
.elementor-image-caption {
    font-size:      var(--fs-caption);
    font-weight:    var(--fw-regular);
    color:          var(--color-muted);
    line-height:    var(--lh-normal);
}

/* Code / monospace */
code, kbd, pre, samp,
.text-code {
    font-family:    var(--font-mono);
    font-size:      var(--fs-code);
    font-weight:    var(--fw-regular);
    letter-spacing: 0;
}

pre {
    line-height: var(--lh-relaxed);
    overflow-x:  auto;
}

/* Blockquote */
blockquote {
    font-family:    var(--font-heading);
    font-size:      var(--fs-h4);
    font-weight:    var(--fw-light);
    font-style:     italic;
    line-height:    var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color:          var(--color-dark);
    border-left:    4px solid var(--color-primary);
    padding-left:   1.5rem;
    margin:         1.5rem 0;
}


/* ============================================================
   8. FONT WEIGHT UTILITIES
   ============================================================ */
.fw-light     { font-weight: var(--fw-light); }
.fw-regular   { font-weight: var(--fw-regular); }
.fw-medium    { font-weight: var(--fw-medium); }
.fw-semibold  { font-weight: var(--fw-semibold); }
.fw-bold      { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }


/* ============================================================
   9. TEXT ALIGNMENT UTILITIES
   ============================================================ */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

@media (max-width: 768px) {
    .text-center-mobile { text-align: center; }
    .text-left-mobile   { text-align: left; }
}


/* ============================================================
   10. LINE HEIGHT UTILITIES
   ============================================================ */
.lh-none     { line-height: var(--lh-none); }
.lh-tight    { line-height: var(--lh-tight); }
.lh-snug     { line-height: var(--lh-snug); }
.lh-normal   { line-height: var(--lh-normal); }
.lh-relaxed  { line-height: var(--lh-relaxed); }
.lh-loose    { line-height: var(--lh-loose); }


/* ============================================================
   11. LETTER SPACING UTILITIES
   ============================================================ */
.ls-tight    { letter-spacing: var(--ls-tight); }
.ls-normal   { letter-spacing: var(--ls-normal); }
.ls-wide     { letter-spacing: var(--ls-wide); }
.ls-wider    { letter-spacing: var(--ls-wider); }
.ls-widest   { letter-spacing: var(--ls-widest); }


/* ============================================================
   12. ELEMENTOR WIDGET OVERRIDES
   ============================================================ */

/* Elementor Heading Widget */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-heading);
    line-height: var(--lh-tight);
}

.elementor-widget-heading .elementor-heading-title.elementor-size-xl,
.elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
    font-size:      var(--fs-h1);
    letter-spacing: -0.04em;
    line-height:    var(--lh-none);
}

.elementor-widget-heading .elementor-heading-title.elementor-size-large {
    font-size: var(--fs-h2);
}

.elementor-widget-heading .elementor-heading-title.elementor-size-medium {
    font-size: var(--fs-h3);
}

.elementor-widget-heading .elementor-heading-title.elementor-size-small {
    font-size: var(--fs-h4);
}

/* Elementor Text Editor Widget */
.elementor-widget-text-editor p {
    font-size:   var(--fs-body-md);
    line-height: var(--lh-relaxed);
}

/* Elementor Button Widget */
.elementor-widget-button .elementor-button {
    font-size:      var(--fs-button);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-wide);
}

/* Elementor Icon Box Widget */
.elementor-icon-box-title {
    font-size:   var(--fs-h5) !important;
    font-weight: var(--fw-semibold) !important;
}

.elementor-icon-box-description {
    font-size:   var(--fs-body-sm) !important;
    line-height: var(--lh-relaxed) !important;
}

/* Elementor Counter Widget */
.elementor-counter-number-wrapper {
    font-family: var(--font-heading) !important;
    font-size:   var(--fs-display-lg) !important;
    font-weight: var(--fw-extrabold) !important;
    line-height: 1 !important;
}

.elementor-counter-title {
    font-size:      var(--fs-body-sm) !important;
    font-weight:    var(--fw-medium) !important;
    letter-spacing: var(--ls-wide) !important;
}

/* Elementor Testimonial Widget */
.elementor-testimonial-content {
    font-size:   var(--fs-body-lg) !important;
    font-style:  italic;
    line-height: var(--lh-relaxed) !important;
}

.elementor-testimonial-name {
    font-size:   var(--fs-body-sm) !important;
    font-weight: var(--fw-semibold) !important;
}

/* Elementor Nav Menu */
.elementor-nav-menu--main .elementor-nav-menu > li > a {
    font-size:      var(--fs-nav) !important;
    font-weight:    var(--fw-medium) !important;
    letter-spacing: 0 !important;
}

/* Elementor Tabs */
.elementor-tab-title {
    font-size:      var(--fs-body-sm) !important;
    font-weight:    var(--fw-semibold) !important;
    letter-spacing: var(--ls-wide) !important;
}


/* ============================================================
   13. SECTION-SPECIFIC TYPOGRAPHY (Codeflash design)
   ============================================================ */

/* Hero section */
.hero-section h1,
.elementor-section.hero-section .elementor-heading-title {
    font-size:      var(--fs-display-xl);
    font-weight:    var(--fw-extrabold);
    letter-spacing: -0.04em;
    line-height:    1.05;
}

.hero-section .hero-subtitle {
    font-size:   var(--fs-body-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color:       var(--color-muted);
}

/* Stats bar */
.stats-section .counter-number {
    font-family: var(--font-heading);
    font-size:   var(--fs-display-lg);
    font-weight: var(--fw-extrabold);
    line-height: 1;
    color:       #ffffff;
}

.stats-section .counter-label {
    font-size:      var(--fs-body-xs);
    font-weight:    var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.65);
}

/* Section headings (Explore Our Leading Projects, etc.) */
.section-title {
    font-size:      var(--fs-h2);
    font-weight:    var(--fw-bold);
    letter-spacing: -0.03em;
    line-height:    var(--lh-tight);
}

.section-subtitle {
    font-size:   var(--fs-body-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color:       var(--color-muted);
    max-width:   640px;
}

/* Service card titles */
.service-card-title {
    font-size:   var(--fs-h5);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

.service-card-desc {
    font-size:   var(--fs-body-sm);
    line-height: var(--lh-relaxed);
    color:       var(--color-muted);
}

/* Portfolio card overlay */
.portfolio-card-category {
    font-size:      var(--fs-overline);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.75);
}

.portfolio-card-title {
    font-size:   var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color:       #ffffff;
}

/* Footer */
.footer-heading {
    font-size:      var(--fs-body-sm);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color:          rgba(255, 255, 255, 0.5);
    margin-bottom:  1rem;
}

.footer-link,
.site-footer a {
    font-size:   var(--fs-body-sm);
    font-weight: var(--fw-regular);
    line-height: var(--lh-loose);
}

.footer-copyright {
    font-size: var(--fs-caption);
    color:     rgba(255, 255, 255, 0.4);
}


/* ============================================================
   14. RESPONSIVE BREAKPOINT OVERRIDES
       Fine-tune anything clamp() can't handle on its own
   ============================================================ */

/* ── Tablet (max 1024px) ── */
@media (max-width: 1024px) {
    body {
        font-size: var(--fs-body-sm);
    }

    h1, .h1 { letter-spacing: -0.03em; }
    h2, .h2 { letter-spacing: -0.025em; }

    blockquote {
        font-size: var(--fs-h5);
        padding-left: 1rem;
    }

    .elementor-widget-heading .elementor-heading-title.elementor-size-xl,
    .elementor-widget-heading .elementor-heading-title.elementor-size-xxl {
        letter-spacing: -0.03em;
    }
}

/* ── Mobile Large (max 768px) ── */
@media (max-width: 768px) {
    body {
        line-height: var(--lh-normal);
    }

    h1, .h1 {
        letter-spacing: -0.02em;
        line-height:    1.1;
    }

    h2, .h2 {
        letter-spacing: -0.015em;
        line-height:    var(--lh-snug);
    }

    h3, .h3 { line-height: var(--lh-normal); }
    h4, .h4 { line-height: var(--lh-normal); }

    .display-2xl,
    .display-xl,
    .display-lg {
        letter-spacing: -0.02em;
        line-height:    1.1;
    }

    .hero-section .hero-subtitle {
        font-size: var(--fs-body-md);
    }

    .section-subtitle {
        font-size: var(--fs-body-md);
    }

    blockquote {
        font-size:   var(--fs-body-lg);
        padding-left: 1rem;
        margin:       1rem 0;
    }

    .elementor-counter-number-wrapper {
        font-size: var(--fs-h2) !important;
    }
}

/* ── Mobile Small (max 480px) ── */
@media (max-width: 480px) {
    body {
        font-size:   var(--fs-body-sm);
        line-height: var(--lh-normal);
    }

    h1, .h1 { line-height: 1.15; }
    h2, .h2 { line-height: 1.2; }

    .btn,
    .elementor-button {
        font-size: var(--fs-body-sm);
    }

    .nav-link,
    .elementor-nav-menu a {
        font-size: var(--fs-body-sm) !important;
    }

    blockquote {
        font-size: var(--fs-body-md);
    }

    .stats-section .counter-number {
        font-size: var(--fs-h2);
    }
}

/* ── Very Small Screens (max 360px) ── */
@media (max-width: 360px) {
    html  { font-size: 93.75%; } /* 15px base */
    body  { font-size: var(--fs-body-sm); }
}


/* ============================================================
   15. DARK SECTION TYPOGRAPHY HELPERS
       For dark background sections (stats bar, footer, etc.)
   ============================================================ */
.dark-section,
.elementor-section.dark-bg {
    color: rgba(255, 255, 255, 0.85);
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.elementor-section.dark-bg .elementor-heading-title {
    color: #ffffff;
}

.dark-section p,
.elementor-section.dark-bg .elementor-widget-text-editor p {
    color: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   16. SELECTION STYLE
   ============================================================ */
::selection {
    background-color: var(--color-primary);
    color:            #ffffff;
}

::-moz-selection {
    background-color: var(--color-primary);
    color:            #ffffff;
}