/* ==========================================================================
   GLOBAL CSS VARIABLES
   ========================================================================== */
:root {
  /* ----------------------------------------
     FONT FAMILIES
  ---------------------------------------- */
  --font-sans: 'InterTight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --font-serif: 'NewsReader', Georgia, 'Times New Roman', Times, serif;

  /* ----------------------------------------
     FLUID TYPOGRAPHIC SCALE (320px to 1600px)
     Major Third @ 18px → Minor Third @ 16px
  ---------------------------------------- */
  --fs-h1: clamp(3.318rem, 2.096rem + 6.109vw, 4.395rem);
  --fs-h2: clamp(2.765rem, 1.874rem + 4.455vw, 3.515rem);
  --fs-h3: clamp(2.304rem, 1.684rem + 3.102vw, 2.813rem);
  --fs-h4: clamp(1.920rem, 1.519rem + 2.005vw, 2.250rem);
  --fs-h5: clamp(1.600rem, 1.375rem + 1.125vw, 1.800rem);
  --fs-h6: clamp(1.333rem, 1.241rem + 0.461vw, 1.440rem);
  --fs-body: clamp(1.000rem, 0.902rem + 0.488vw, 1.125rem);
  --fs-small: clamp(0.833rem, 0.800rem + 0.167vw, 0.900rem);

  /* ----------------------------------------
     CONTAINER GUTTERS
  ---------------------------------------- */
  --via-gutter: clamp(1rem, 8rem, 6vw);
}

/* ==========================================================================
   CONTAINER WIDTH SYSTEM
   ========================================================================== */
.elementor-container.elementor-container-boxed {
  max-width: calc(1600px + (var(--via-gutter) * 2));
  margin-inline: var(--via-gutter); /* keeps background visible */
  padding-inline: 0;                /* avoid double padding */
}

@media (max-width: 1024px) {
  .elementor-container.elementor-container-boxed {
    max-width: 100%;
    margin-inline: 0;
  }
}

/* ==========================================================================
   TYPOGRAPHY WIDTH CAP
   Prevent font scaling beyond 1600px
   ========================================================================== */
@media (min-width: 1600px) {
  html {
    font-size: 1rem !important; /* Lock base font size */
  }
}

/*
==========================================================================
// GLOBAL TYPOGRAPHY OVERRIDE FOR ELEMENTOR PRO //
// Fonts: Heebo (Headings) & Alef (Body)
// Base Sizes: H1 @ 100px, Body @ 24px
// This code is designed to override Elementor and Theme styles.
==========================================================================
*/

/* 1. Import Fonts from Google Fonts
-------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Alef:wght@400;700&family=Heebo:wght@400;600;700;800&display=swap');

/* 2. Global Body & Paragraph Styles
-------------------------------------------------------------------------- */
body.elementor-page,
body.elementor-page .elementor-widget-text-editor,
body.elementor-page .elementor-widget-text-editor p {
    font-family: 'Alef', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.7 !important; /* Generous line height for readability at large font size */
    color: #333; /* Optional: Set a default body text color */
}

/* Ensure other text elements inherit the body font */
body.elementor-page ul,
body.elementor-page ol,
body.elementor-page li {
    font-family: 'Alef', sans-serif !important;
}

/* Style links to match body text, with a distinct color */
body.elementor-page a {
    font-family: 'Alef', sans-serif !important;
    color: #0056b3; /* Example link color */
}

/* 3. Global Heading Styles (H1-H6)
-------------------------------------------------------------------------- */

/* Base styles for all headings to set font-family and line-height */
body.elementor-page h1, body.elementor-page h2, body.elementor-page h3,
body.elementor-page h4, body.elementor-page h5, body.elementor-page h6,
body.elementor-page .elementor-heading-title {
    font-family: 'Heebo', sans-serif !important;
    line-height: 1.2 !important; /* Tighter line height for headings */
    margin-top: 0 !important;
    margin-bottom: 0.5em !important; /* Vertical spacing between elements */
}

/* --- H1 --- */
body.elementor-page h1,
body.elementor-page .elementor-heading-title.elementor-size-xxl {
    font-size: 100px !important;
    font-weight: 800 !important; /* ExtraBold */
}

/* --- H2 --- */
body.elementor-page h2,
body.elementor-page .elementor-heading-title.elementor-size-xl {
    font-size: 79px !important;
    font-weight: 700 !important; /* Bold */
}

/* --- H3 --- */
body.elementor-page h3,
body.elementor-page .elementor-heading-title.elementor-size-lg {
    font-size: 62px !important;
    font-weight: 700 !important; /* Bold */
}

/* --- H4 --- */
body.elementor-page h4,
body.elementor-page .elementor-heading-title.elementor-size-md {
    font-size: 49px !important;
    font-weight: 600 !important; /* SemiBold */
}

/* --- H5 --- */
body.elementor-page h5,
body.elementor-page .elementor-heading-title.elementor-size-sm {
    font-size: 39px !important;
    font-weight: 600 !important; /* SemiBold */
}

/* --- H6 --- */
body.elementor-page h6,
body.elementor-page .elementor-heading-title.elementor-size-xs {
    font-size: 30px !important;
    font-weight: 600 !important; /* SemiBold */
}

/* 4. Common Elementor Widget Overrides
-------------------------------------------------------------------------- */

/* --- Button Widget --- */
/* Buttons often use a heading-style font for emphasis */
body.elementor-page .elementor-button {
    font-family: 'Heebo', sans-serif !important;
    font-size: 20px !important; /* A specific size for buttons */
    font-weight: 700 !important;
    line-height: 1 !important; /* Ensure text is vertically centered */
}

/* --- Icon Box & Image Box --- */
/* Style the title and description in these common widgets */
body.elementor-page .elementor-widget-icon-box .elementor-icon-box-title,
body.elementor-page .elementor-widget-image-box .elementor-image-box-title {
    font-family: 'Heebo', sans-serif !important;
}

body.elementor-page .elementor-widget-icon-box .elementor-icon-box-description,
body.elementor-page .elementor-widget-image-box .elementor-image-box-content {
    font-family: 'Alef', sans-serif !important;
    font-size: 24px !important; /* Match your body text size */
    line-height: 1.7 !important;
}

/* 5. IMPORTANT - Responsive Adjustments
-------------------------------------------------------------------------- */
/* The sizes above are large and designed for desktop.
   You MUST add media queries to adjust for tablet and mobile. */

/* Tablet Styles (e.g., screens under 1024px) */
@media (max-width: 1024px) {
    body.elementor-page h1,
    body.elementor-page .elementor-heading-title.elementor-size-xxl {
        font-size: 80px !important;
    }
    body.elementor-page h2,
    body.elementor-page .elementor-heading-title.elementor-size-xl {
        font-size: 65px !important;
    }
    body.elementor-page h3,
    body.elementor-page .elementor-heading-title.elementor-size-lg {
        font-size: 52px !important;
    }
    body.elementor-page h4,
    body.elementor-page .elementor-heading-title.elementor-size-md {
        font-size: 42px !important;
    }
    body.elementor-page p {
        font-size: 22px !important;
    }
}

/* Mobile Styles (e.g., screens under 767px) */
@media (max-width: 767px) {
    body.elementor-page h1,
    body.elementor-page .elementor-heading-title.elementor-size-xxl {
        font-size: 50px !important;
    }
    body.elementor-page h2,
    body.elementor-page .elementor-heading-title.elementor-size-xl {
        font-size: 42px !important;
    }
    body.elementor-page h3,
    body.elementor-page .elementor-heading-title.elementor-size-lg {
        font-size: 36px !important;
    }
    body.elementor-page h4,
    body.elementor-page .elementor-heading-title.elementor-size-md {
        font-size: 30px !important;
    }
     body.elementor-page h5,
    body.elementor-page .elementor-heading-title.elementor-size-sm {
        font-size: 26px !important;
    }
    body.elementor-page p {
        font-size: 18px !important;
    }
}