/* ==========================================================
   GLOBAL TYPOGRAPHY & HIERARCHY AUDIT
   Overrides oversized headings, card titles, and spacing
   to create a premium, enterprise-grade design system.
   ========================================================== */

:root {
  --tg-body-font-size: 16px;
  --audit-h1-size: 3.5rem;   /* 56px */
  --audit-h2-size: 2.5rem;   /* 40px */
  --audit-h3-size: 1.75rem;  /* 28px */
  --audit-h4-size: 1.25rem;  /* 20px */
  --audit-card-title: 1.25rem; /* 20px */
  --audit-body-size: 1.0625rem; /* 17px */
}

/* ==========================================================
   HEADINGS OVERRIDES
   ========================================================== */
h1, .hero-title, .page-title, .title.hero-heading {
  font-size: var(--audit-h1-size) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 20px !important;
  word-wrap: break-word !important;
}

h2, .section-title, .tg-heading-title, .sec-title, .section-heading, .feature-title, .about-title-2 {
  font-size: var(--audit-h2-size) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 24px !important;
  word-wrap: break-word !important;
}

h3, .sub-section-title, .service-title, .tg-sub-title, .about-title {
  font-size: var(--audit-h3-size) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 16px !important;
  word-wrap: break-word !important;
}

h4, h5, h6 {
  font-size: var(--audit-h4-size) !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
}

/* ==========================================================
   CARD TITLES
   ========================================================== */
.card-title, 
.card h3, 
.service-card h3, 
.feature-card h3, 
.box-title, 
.item-title,
.process-card h3,
.pricing-title,
.info-box-title,
.bento-title,
.bento-card h3,
.tk2-cap-title {
  font-size: var(--audit-card-title) !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
  letter-spacing: 0 !important;
  /* Prevent excessive wrapping */
  word-wrap: break-word !important;
  hyphens: auto !important;
}

/* ==========================================================
   BODY TEXT & PARAGRAPHS
   ========================================================== */
p, .text, .desc, .description, .card-text, .service-desc, .feature-desc, .about-desc, .hero-desc {
  font-size: var(--audit-body-size) !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
  color: inherit; 
}

/* Small text */
small, .small-text, .meta, .date {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

/* ==========================================================
   BUTTONS
   ========================================================== */
.btn, .button, .tg-btn, .theme-btn, a.btn, button {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.5px !important;
}

/* ==========================================================
   SPACING & VERTICAL RHYTHM
   ========================================================== */
.section, section, .tg-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

/* Reduced padding for cards to maintain balance with smaller text */
.card, .service-card, .feature-card, .bento-card, .info-box, .pricing-card {
  padding: 30px !important;
}

/* ==========================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================== */
@media (max-width: 991px) {
  :root {
    --audit-h1-size: 2.75rem; /* 44px */
    --audit-h2-size: 2.25rem; /* 36px */
    --audit-h3-size: 1.5rem;  /* 24px */
    --audit-h4-size: 1.125rem; /* 18px */
    --audit-card-title: 1.125rem; /* 18px */
  }
  
  .section, section, .tg-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  
  .card, .service-card, .feature-card, .bento-card, .info-box, .pricing-card {
    padding: 24px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --audit-h1-size: 2.25rem; /* 36px */
    --audit-h2-size: 1.75rem; /* 28px */
    --audit-h3-size: 1.375rem;  /* 22px */
    --audit-body-size: 1rem; /* 16px */
  }
  
  .section, section, .tg-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* Prevent broken words on small screens */
  h1, h2, h3, .hero-title, .section-title, .card-title {
    word-break: break-word !important;
    hyphens: auto !important;
  }
}

/* ==========================================================
   FORCE WHITE TEXT ON SPECIFIC SLIDERS
   ========================================================== */
body .swiper-slide .tk2-project-details h3, 
body .swiper-slide .ind-slide-content h3,
body .tk2-glass-card h3 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}