/**
 * ============================================================================
 * TYPOGRAPHY - Text Styling, Animations & Responsive Scaling
 * ============================================================================
 * 
 * Purpose: Provides comprehensive text styling including responsive font
 * scaling with clamp(), text animations, link styling, and utility classes
 * for text layout.
 * 
 * Components:
 * - Hero Text Animation: Page-load color fade animation
 * - Link Fonts: Standardized link typography
 * - Fit to Content: Width constraint utility
 * - Footer Text Clamping: Responsive heading + SVG sizing
 * - Card Text Clamping: Two-tier responsive card typography
 * - CTA Text Clamping: Bottom CTA with decorative spiral
 * 
 * @package     4pmix-WordPress
 * @subpackage  Question-Answer-Block/Assets
 * @version     1.0.0
 * ============================================================================
 */


/* ============================================================================
   HERO TEXT ANIMATION
   ============================================================================
   Animates hero headings from gray to black after full page load. Uses a
   page-loaded class trigger (see hero-animations.js) and staggered delays.
   
   Usage: 
   - Add "to-black" class to heading
   - Add "delay-1" or "delay-2" for staggered timing
   - JS adds "page-loaded" class to body on window.load
   ============================================================================ */

.page-loaded .elementor-element.to-black .elementor-heading-title,
.page-loaded h2.elementor-heading-title.to-black {
  color: #D1D1D1;
  animation: toBlack 700ms ease-in-out forwards;
  animation-delay: var(--reveal-delay, 1s);
}

@keyframes toBlack {
  to {
    color: #000;
  }
}

/* Stagger timing helpers */
.elementor-element.to-black.delay-1 {
  --reveal-delay: 1s;
}

.elementor-element.to-black.delay-2 {
  --reveal-delay: 1.6s;
}

/* Accessibility: respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  .page-loaded .elementor-element.to-black .elementor-heading-title,
  .page-loaded h2.elementor-heading-title.to-black {
    animation: none;
    color: #000;
  }
}


/* ============================================================================
   LINK FONTS - Standardized Link Typography
   ============================================================================
   Forces Geologica font family on all Elementor text editor and heading links,
   removes text transformation and underlines for clean presentation.
   ============================================================================ */

.elementor-widget-text-editor a,
.elementor-widget-heading a {
  font-family: "Geologica", sans-serif !important;
  text-transform: none !important;
  text-decoration: none !important;
}

/* Apply same styling to icon list links in specific section */
.elementor-4301 .elementor-element-0dc86b1 .elementor-icon-list-item,
.elementor-4301 .elementor-element-0dc86b1 .elementor-icon-list-item a {
  font-family: "Geologica", sans-serif !important;
  text-transform: none !important;
}


/* ============================================================================
   FIT TO CONTENT - Width Utility
   ============================================================================
   Constrains element width to its content size, preventing unnecessary stretch.
   ============================================================================ */

.fit-text {
  width: fit-content;
}


/* ============================================================================
   FOOTER TEXT CLAMPING
   ============================================================================
   Responsive typography for footer sections with synchronized heading and SVG
   sizing. Uses CSS custom properties for coordinated scaling across breakpoints.
   
   Components:
   - text-clamp-footer: Main footer heading + inline SVG (synchronized sizing)
   - text-clamp-footer-2: Footer info text (independent scaling)
   ============================================================================ */

/* === Main Footer Heading + SVG (synchronized) === */
.text-clamp-footer-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  /* Space between text and SVG */
  --hSize: 38px;
  /* Base fallback (overridden by media queries) */
}

/* ≤992px: single clamp for mobile/tablet */
@media (max-width: 992px) {
  .text-clamp-footer-wrapper {
    --hSize: clamp(2.375rem, 1.5393rem + 3.5656vw, 3.75rem);
  }
}

/* Heading uses shared size variable */
.text-clamp-footer .elementor-heading-title {
  font-size: var(--hSize) !important;
  line-height: 1.05;
}

/* SVG scales proportionally (~25% smaller than text) */
.footer-svg img {
  display: block;
  height: calc(var(--hSize) * 0.75) !important;
  width: auto !important;
  max-width: none;
  margin: 0;
}

/* === Responsive Heading Scaling === */
/* (≤992px handled above; rules below apply from 1000px+) */

/* 1000px → 1100px */
@media (min-width: 1000px) and (max-width: 1100px) {
  .text-clamp-footer-wrapper {
    --hSize: clamp(55px,
        calc(55px + (60 - 55) * ((100vw - 1000px) / (1100 - 1000))),
        60px);
  }
}

/* 1100px → 1200px */
@media (min-width: 1100px) and (max-width: 1200px) {
  .text-clamp-footer-wrapper {
    --hSize: clamp(60px,
        calc(60px + (65 - 60) * ((100vw - 1100px) / (1200 - 1100))),
        65px);
  }
}

/* 1200px → 1300px */
@media (min-width: 1200px) and (max-width: 1300px) {
  .text-clamp-footer-wrapper {
    --hSize: clamp(65px,
        calc(65px + (70 - 65) * ((100vw - 1200px) / (1300 - 1200))),
        70px);
  }
}

/* 1300px → 1400px */
@media (min-width: 1300px) and (max-width: 1400px) {
  .text-clamp-footer-wrapper {
    --hSize: clamp(70px,
        calc(70px + (80 - 70) * ((100vw - 1300px) / (1400 - 1300))),
        80px);
  }
}

/* 1400px → 1440px */
@media (min-width: 1400px) and (max-width: 1440px) {
  .text-clamp-footer-wrapper {
    --hSize: 80px;
  }
}

/* 1440px → 1680px */
@media (min-width: 1440px) and (max-width: 1680px) {
  .text-clamp-footer-wrapper {
    --hSize: clamp(80px,
        calc(80px + (94 - 80) * ((100vw - 1440px) / (1680 - 1440))),
        94px);
  }
}

/* 1680px → 1920px */
@media (min-width: 1680px) and (max-width: 1920px) {
  .text-clamp-footer-wrapper {
    --hSize: clamp(94px,
        calc(94px + (110 - 94) * ((100vw - 1680px) / (1920 - 1680))),
        110px);
  }
}

/* 1920px+ */
@media (min-width: 1920px) {
  .text-clamp-footer-wrapper {
    --hSize: 110px;
  }
}

/* === Footer Info Text (independent scaling) === */
.text-clamp-footer-2 .elementor-heading-title {
  font-size: 16px !important;
}

/* 992px → 1440px */
@media (min-width: 992px) and (max-width: 1440px) {
  .text-clamp-footer-2 .elementor-heading-title {
    font-size: clamp(16px,
        calc(16px + (18 - 16) * ((100vw - 992px) / (1440 - 992))),
        18px) !important;
  }
}

/* 1440px → 1680px */
@media (min-width: 1440px) and (max-width: 1680px) {
  .text-clamp-footer-2 .elementor-heading-title {
    font-size: clamp(16px,
        calc(16px + (18 - 16) * ((100vw - 1440px) / (1680 - 1440))),
        18px) !important;
  }
}

/* 1680px → 1920px */
@media (min-width: 1680px) and (max-width: 1920px) {
  .text-clamp-footer-2 .elementor-heading-title {
    font-size: clamp(20px,
        calc(20px + (22 - 20) * ((100vw - 1680px) / (1920 - 1680))),
        22px) !important;
  }
}

/* 1920px+ */
@media (min-width: 1920px) {
  .text-clamp-footer-2 .elementor-heading-title {
    font-size: 22px !important;
  }
}


/* ============================================================================
   CARD TEXT CLAMPING (Two-Tier System)
   ============================================================================
   Responsive typography for card components with separate scaling for:
   - clamp-cards-1: Smaller cards (services, features)
   - clamp-cards-2: Larger cards (testimonials, highlights)
   
   Each handles H2 (headings) and P (descriptions) independently.
   ============================================================================ */

/* === CLAMP CARDS 1 (Smaller Cards) === */

/* H2 Headings */
@media (min-width: 992px) and (max-width: 1000px) {
  .clamp-cards-1 div.elementor-heading-title {
    font-size: 20px !important;
  }
}

@media (min-width: 1000px) and (max-width: 1100px) {
  .clamp-cards-1 div.elementor-heading-title {
    font-size: clamp(20px,
        calc(20px + (24 - 20) * ((100vw - 1000px) / (1100 - 1000))),
        24px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1200px) {
  .clamp-cards-1 div.elementor-heading-title {
    font-size: clamp(24px,
        calc(24px + (28 - 24) * ((100vw - 1100px) / (1200 - 1100))),
        28px) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .clamp-cards-1 div.elementor-heading-title {
    font-size: clamp(28px,
        calc(28px + (36 - 28) * ((100vw - 1200px) / (1440 - 1200))),
        36px) !important;
  }
}

/* Force smaller size at 1440-1520 to prevent wrapping */
@media (min-width: 1440px) and (max-width: 1520px) {
  .clamp-cards-1 div.elementor-heading-title {
    font-size: 33px !important;
  }
}

@media (min-width: 1520px) and (max-width: 1680px) {
  .clamp-cards-1 div.elementor-heading-title {
    font-size: clamp(33px,
        calc(33px + (40 - 33) * ((100vw - 1520px) / (1680 - 1520))),
        40px) !important;
  }
}

@media (min-width: 1680px) and (max-width: 1920px) {
  .clamp-cards-1 div.elementor-heading-title {
    font-size: clamp(40px,
        calc(40px + (44 - 40) * ((100vw - 1680px) / (1920 - 1680))),
        44px) !important;
  }
}

@media (min-width: 1920px) {
  .clamp-cards-1 div.elementor-heading-title {
    font-size: 44px !important;
  }
}

/* P Descriptions (clamp-cards-1) */
@media (min-width: 992px) and (max-width: 900px) {
  .clamp-cards-1 p.elementor-heading-title {
    font-size: 11px !important;
  }
}

@media (min-width: 900px) and (max-width: 1000px) {
  .clamp-cards-1 p.elementor-heading-title {
    font-size: clamp(11px,
        calc(11px + (13 - 11) * ((100vw - 900px) / (1000 - 900))),
        13px) !important;
  }
}

@media (min-width: 1000px) and (max-width: 1100px) {
  .clamp-cards-1 p.elementor-heading-title {
    font-size: clamp(13px,
        calc(13px + (15 - 13) * ((100vw - 1000px) / (1100 - 1000))),
        15px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1200px) {
  .clamp-cards-1 p.elementor-heading-title {
    font-size: clamp(15px,
        calc(15px + (18 - 15) * ((100vw - 1100px) / (1200 - 1100))),
        18px) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .clamp-cards-1 p.elementor-heading-title {
    font-size: clamp(18px,
        calc(18px + (20 - 18) * ((100vw - 1200px) / (1440 - 1200))),
        20px) !important;
  }
}

@media (min-width: 1440px) and (max-width: 1680px) {
  .clamp-cards-1 p.elementor-heading-title {
    font-size: clamp(20px,
        calc(20px + (22 - 20) * ((100vw - 1440px) / (1680 - 1440))),
        22px) !important;
  }
}

@media (min-width: 1680px) {
  .clamp-cards-1 p.elementor-heading-title {
    font-size: 22px !important;
  }
}

/* === CLAMP CARDS 2 (Larger Cards) === */

/* H2 Headings */
@media (min-width: 992px) and (max-width: 800px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: 30px !important;
  }
}

@media (min-width: 800px) and (max-width: 900px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: clamp(20px,
        calc(20px + (25 - 20) * ((100vw - 800px) / (900 - 800))),
        25px) !important;
  }
}

@media (min-width: 900px) and (max-width: 1000px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: clamp(25px,
        calc(25px + (30 - 25) * ((100vw - 900px) / (1000 - 900))),
        30px) !important;
  }
}

@media (min-width: 1000px) and (max-width: 1100px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: clamp(30px,
        calc(30px + (36 - 30) * ((100vw - 1000px) / (1100 - 1000))),
        36px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1200px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: clamp(36px,
        calc(36px + (44 - 36) * ((100vw - 1100px) / (1200 - 1100))),
        44px) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: clamp(44px,
        calc(44px + (50 - 44) * ((100vw - 1200px) / (1440 - 1200))),
        50px) !important;
  }
}

@media (min-width: 1440px) and (max-width: 1680px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: 50px !important;
  }
}

@media (min-width: 1680px) and (max-width: 1920px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: clamp(50px,
        calc(50px + (60 - 50) * ((100vw - 1680px) / (1920 - 1680))),
        60px) !important;
  }
}

@media (min-width: 1920px) {
  .clamp-cards-2 div.elementor-heading-title {
    font-size: 60px !important;
  }
}

/* P Descriptions (clamp-cards-2) */
@media (min-width: 992px) and (max-width: 800px) {
  .clamp-cards-2 p.elementor-heading-title {
    font-size: 18px !important;
  }
}

@media (min-width: 800px) and (max-width: 900px) {
  .clamp-cards-2 p.elementor-heading-title {
    font-size: clamp(8px,
        calc(8px + (10 - 8) * ((100vw - 800px) / (900 - 800))),
        10px) !important;
  }
}

@media (min-width: 900px) and (max-width: 1000px) {
  .clamp-cards-2 p.elementor-heading-title {
    font-size: clamp(10px,
        calc(10px + (12 - 10) * ((100vw - 900px) / (1000 - 900))),
        12px) !important;
  }
}

@media (min-width: 1000px) and (max-width: 1100px) {
  .clamp-cards-2 p.elementor-heading-title {
    font-size: clamp(12px,
        calc(12px + (15 - 12) * ((100vw - 1000px) / (1100 - 1000))),
        15px) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1200px) {
  .clamp-cards-2 p.elementor-heading-title {
    font-size: clamp(15px,
        calc(15px + (18 - 15) * ((100vw - 1100px) / (1200 - 1100))),
        18px) !important;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  .clamp-cards-2 p.elementor-heading-title {
    font-size: clamp(18px,
        calc(18px + (22 - 18) * ((100vw - 1200px) / (1440 - 1200))),
        22px) !important;
  }
}

@media (min-width: 1440px) {
  .clamp-cards-2 p.elementor-heading-title {
    font-size: 22px !important;
  }
}


/* ============================================================================
   CTA BOTTOM - Call-to-Action with Decorative Spiral
   ============================================================================
   Bottom CTA section with responsive heading text and positioned decorative
   spiral image. Maintains 3-line heading via character-based width control.
   
   Variables:
   - --ctaSize: Font size for heading
   - --img-top: Spiral vertical offset
   - --img-right: Spiral horizontal offset
   - --img-scale: Spiral scale multiplier
   ============================================================================ */

.cta-bottom {
  /* Base font size for ≤992px */
  --ctaSize: 22px;

  /* Decorative spiral positioning */
  --img-top: -20px;
  --img-right: -30px;
  --img-scale: 1;

  position: relative;
  display: flex;
  align-items: center;
}

/* CTA heading scales with --ctaSize variable */
.clamp-text-cta .elementor-heading-title {
  font-size: var(--ctaSize) !important;
  line-height: 1.1;
}

/* Keep heading to 3 lines on desktop via character-based width */
@media (min-width: 992px) {
  .clamp-text-cta {
    max-width: 38ch;
    /* ~38 characters wide */
  }
}

@media (min-width: 1000px) and (max-width: 1299px) {
  .clamp-text-cta {
    max-width: 35ch;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .clamp-text-cta {
    max-width: 33ch;
  }
}

/* Decorative spiral image - positioned absolutely */
.spiral-dec1 {
  position: absolute;
  top: var(--img-top);
  right: var(--img-right);
  z-index: 1;
  pointer-events: none;
}

.spiral-dec1 img {
  display: block;
  width: calc(var(--ctaSize) * 6);
  /* Scale with heading */
  transform: scale(var(--img-scale));
  height: auto;
  max-width: 100%;
}

/* === Responsive CTA Scaling === */

/* 800px → 900px */
@media (min-width: 800px) and (max-width: 900px) {
  .cta-bottom {
    --ctaSize: clamp(18px,
        calc(18px + (23 - 18) * ((100vw - 800px) / (900 - 800))),
        23px);
    --img-top: -120px;
    --img-right: 0px;
    --img-scale: 1.45;
  }
}

/* 900px → 1000px */
@media (min-width: 900px) and (max-width: 1000px) {
  .cta-bottom {
    --ctaSize: clamp(23px,
        calc(23px + (26 - 23) * ((100vw - 900px) / (1000 - 900))),
        26px);
    --img-top: -120px;
    --img-right: 0px;
    --img-scale: 1.45;
  }
}

/* 1000px → 1100px */
@media (min-width: 1000px) and (max-width: 1100px) {
  .cta-bottom {
    --ctaSize: clamp(26px,
        calc(26px + (30 - 26) * ((100vw - 1000px) / (1100 - 1000))),
        30px);
    --img-top: -120px;
    --img-right: 0px;
    --img-scale: 1.45;
  }
}

/* 1100px → 1200px */
@media (min-width: 1100px) and (max-width: 1200px) {
  .cta-bottom {
    --ctaSize: clamp(30px,
        calc(30px + (33 - 30) * ((100vw - 1100px) / (1200 - 1100))),
        33px);
    --img-top: -120px;
    --img-right: 0px;
    --img-scale: 1.45;
  }
}

/* 1200px → 1300px */
@media (min-width: 1200px) and (max-width: 1300px) {
  .cta-bottom {
    --ctaSize: clamp(33px,
        calc(33px + (36 - 33) * ((100vw - 1200px) / (1300 - 1200))),
        36px);
    --img-top: -120px;
    --img-right: 0px;
    --img-scale: 1.45;
  }
}

/* 1300px → 1440px */
@media (min-width: 1300px) and (max-width: 1440px) {
  .cta-bottom {
    --ctaSize: clamp(36px,
        calc(36px + (40 - 36) * ((100vw - 1300px) / (1440 - 1300))),
        40px);
    --img-top: -120px;
    --img-right: 0px;
    --img-scale: 1.45;
  }
}

/* Special adjustments for specific ranges */
@media (min-width: 1441px) and (max-width: 1500px) {
  .cta-bottom {
    --ctaSize: 38px;
    --img-top: -120px;
    --img-right: 70px;
    --img-scale: 1.95;
  }
}

@media (min-width: 1501px) and (max-width: 1680px) {
  .cta-bottom {
    --ctaSize: clamp(40px,
        calc(40px + (42 - 40) * ((100vw - 1501px) / (1680 - 1501))),
        42px);
    --img-top: -120px;
    --img-right: 70px;
    --img-scale: 1.95;
  }
}

@media (min-width: 1680px) and (max-width: 1706px) {
  .cta-bottom {
    --ctaSize: 38px;
    --img-top: -180px;
    --img-right: 70px;
    --img-scale: 1.75;
  }
}

@media (min-width: 1706px) and (max-width: 1880px) {
  .cta-bottom {
    --ctaSize: 38px;
    --img-top: -180px;
    --img-right: 70px;
    --img-scale: 1.75;
  }
}

@media (min-width: 1880px) and (max-width: 1920px) {
  .cta-bottom {
    --ctaSize: clamp(38px,
        calc(38px + (44 - 38) * ((100vw - 1880px) / (1920 - 1880))),
        44px);
    --img-top: -180px;
    --img-right: 70px;
    --img-scale: 1.75;
  }
}

@media (min-width: 1920px) {
  .cta-bottom {
    --ctaSize: 44px;
    --img-top: -250px;
    --img-right: 70px;
    --img-scale: 1.75;
  }
}

/* Fine-tune text width to maintain 3 lines at larger sizes */
@media (min-width: 768px) {
  .clamp-text-cta {
    max-width: calc(var(--ctaSize) * 16.5);
  }
}

@media (min-width: 1440px) and (max-width: 1680px) {
  .clamp-text-cta {
    max-width: calc(var(--ctaSize) * 17.25);
  }
}

@media (min-width: 1681px) and (max-width: 1920px) {
  .clamp-text-cta {
    max-width: calc(var(--ctaSize) * 17.5);
  }
}

/* Fix narrow wrap windows */
@media (min-width: 1501px) and (max-width: 1572px) {
  .clamp-text-cta {
    max-width: calc(var(--ctaSize) * 18);
  }
}

@media (min-width: 1441px) and (max-width: 1488px) {
  .clamp-text-cta {
    max-width: calc(var(--ctaSize) * 18);
  }
}