/**
 * LSC New Theme - Typography (Kunco Style)
 * Detailed HTML Element Styles based on Kunco Website Analysis
 */

/* ===== HERO HEADLINES ===== */
/* H1 in Hero Sections */
.hero-content h1,
.gva-slider h1,
.hero-headline {
  font-family: var(--font-family-heading);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: -0.3px;
}

@media (min-width: 768px) {
  .hero-content h1,
  .gva-slider h1,
  .hero-headline {
    font-size: 4.5rem;
  }
}

@media (min-width: 1200px) {
  .hero-content h1,
  .gva-slider h1,
  .hero-headline {
    font-size: 5.5rem;
    line-height: 1.15;
  }
}

/* Hero Subtitle/Lead Paragraph */
.hero-content p,
.hero-subline {
  font-family: var(--font-family-base);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1.5rem;
}

/* ===== SECTION TITLES (H2) ===== */
/* Main H2 Section Titles */
h2,
.section-title h2,
.block-title h2 {
  font-family: var(--font-family-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2C2C2C;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  h2,
  .section-title h2,
  .block-title h2 {
    font-size: 2.75rem;
  }
}

@media (min-width: 1200px) {
  h2,
  .section-title h2,
  .block-title h2 {
    font-size: 3.25rem;
  }
}

/* Two-Tone Section Titles (Orange + Black) */
.section-title h2 span.text-orange,
.section-title h2 span.text-accent,
h2 span.highlight {
  color: #FDB714;
  font-weight: 700;
}

/* Section Title with Mixed Typography */
.section-title .title-line-1 {
  color: #FDB714;
  font-size: 2rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

.section-title .title-line-2 {
  color: #2C2C2C;
  font-size: 2.75rem;
  font-weight: 800;
  display: block;
}

@media (min-width: 768px) {
  .section-title .title-line-1 {
    font-size: 2.5rem;
  }
  .section-title .title-line-2 {
    font-size: 3.5rem;
  }
}

/* ===== H3 HEADINGS ===== */
h3,
.h3,
.widget-title h3,
.block-title h3 {
  font-family: var(--font-family-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: #2C2C2C;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  h3,
  .h3 {
    font-size: 2rem;
  }
}

/* ===== H4 HEADINGS ===== */
h4,
.h4,
.card-title h4 {
  font-family: var(--font-family-heading);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2C2C2C;
  margin-bottom: 1rem;
}

/* ===== H5 & H6 HEADINGS ===== */
h5,
.h5 {
  font-family: var(--font-family-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2C2C2C;
  margin-bottom: 0.875rem;
}

h6,
.h6 {
  font-family: var(--font-family-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: #2C2C2C;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== PARAGRAPH & BODY TEXT ===== */
p,
.text-body {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: #4A4A4A;
  margin-bottom: 1.25rem;
}

/* Lead Paragraphs */
.lead,
p.lead {
  font-size: 1.25rem;
  line-height: 1.75;
  color: #2C2C2C;
  font-weight: 400;
}

/* Section Description */
.section-description p,
.section-title p {
  font-size: 1rem;
  line-height: 1.75;
  color: #7F7F7F;
  max-width: 700px;
  margin: 0 auto 2rem;
}

/* ===== STATISTICS & NUMBERS ===== */
/* Large Numbers */
.counter,
.stat-number,
.number-display {
  font-family: var(--font-family-heading);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}

@media (min-width: 768px) {
  .counter,
  .stat-number,
  .number-display {
    font-size: 3.5rem;
  }
}

/* Colored Stats */
.stat-box.orange .counter,
.counter.text-orange { color: #FDB714; }

.stat-box.green .counter,
.counter.text-green { color: #61C376; }

.stat-box.yellow .counter,
.counter.text-yellow { color: #F5B800; }

.stat-box.blue .counter,
.counter.text-blue { color: #0074D9; }

.stat-box.purple .counter,
.counter.text-purple { color: #9B59B6; }

.stat-box.pink .counter,
.counter.text-pink { color: #E74C3C; }

/* Stat Labels */
.stat-label,
.counter-label {
  font-family: var(--font-family-base);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: #2C2C2C;
  display: block;
}

/* ===== BANNER & CTA SECTIONS ===== */
/* Banner Headlines (Blue/Colored Backgrounds) */
.cta-banner h2,
.call-to-action h2,
.banner-title {
  font-family: var(--font-family-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .cta-banner h2,
  .call-to-action h2,
  .banner-title {
    font-size: 3rem;
  }
}

/* Banner Description */
.cta-banner p,
.call-to-action p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 1.5rem;
}

/* ===== CARD COMPONENTS ===== */
.card-title,
.box-title,
.item-title {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #2C2C2C;
  margin-bottom: 0.875rem;
}

.card-title a,
.box-title a,
.item-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.card-title a:hover,
.box-title a:hover,
.item-title a:hover {
  color: #0074D9;
}

.card-text,
.box-description {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #7F7F7F;
  margin-bottom: 1rem;
}

/* ===== SPAN ELEMENTS - SPECIAL TYPOGRAPHY ===== */
/* Accent Spans */
span.text-accent,
span.highlight,
span.color-primary {
  color: #FDB714;
  font-weight: inherit;
}

span.text-white {
  color: #FFFFFF;
}

span.text-dark {
  color: #2C2C2C;
}

/* Price/Amount Spans */
span.price,
span.amount {
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #2C2C2C;
}

/* Badge/Tag Spans */
span.badge,
span.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 2px;
  background-color: #FDB714;
  color: #FFFFFF;
}

/* ===== DIV CONTAINERS WITH SPECIFIC TYPOGRAPHY ===== */
/* Info Boxes */
.info-box-content h4,
.service-box h4 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #2C2C2C;
}

.info-box-content p,
.service-box p {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: #7F7F7F;
}

/* Text Blocks on Colored Backgrounds */
.bg-primary .text-content h2,
.bg-primary .text-content h3,
.bg-secondary .text-content h2,
.bg-secondary .text-content h3 {
  color: #FFFFFF;
}

.bg-primary .text-content p,
.bg-secondary .text-content p {
  color: rgba(255, 255, 255, 0.9);
}

/* ===== UTILITY TEXT CLASSES ===== */
.text-large {
  font-size: 1.25rem;
  line-height: 1.8;
}

.text-small {
  font-size: 0.875rem;
  line-height: 1.6;
}

.text-tiny {
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Font Weights */
.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fw-extrabold { font-weight: 800; }
.fw-black { font-weight: 900; }

/* Text Colors - Kunco Style */
.text-orange { color: #FDB714; }
.text-blue { color: #0074D9; }
.text-purple { color: #9B59B6; }
.text-pink { color: #E74C3C; }
.text-green { color: #61C376; }

/* Button Typography */
.btn {
  font-family: var(--font-family-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.btn-lg {
  font-size: 1rem;
  padding: 1rem 2.5rem;
}

/* Link Styles */
a.link-underline {
  position: relative;
  text-decoration: none;
  font-weight: 600;
}

a.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--transition-fast);
  transform-origin: right;
  transform: scaleX(0);
}

a.link-underline:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* Quote / Testimonial */
.testimonial-text {
  font-family: var(--font-family-base);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.8;
  font-style: italic;
  color: var(--color-text-secondary);
}

/* List Styles */
.custom-list {
  list-style: none;
  padding-left: 0;
}

.custom-list li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--space-sm);
  font-size: 1rem;
  line-height: 1.7;
}

.custom-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #61C376;
  font-weight: 700;
  font-size: 1.2rem;
}

/* Uppercase Decorative Text */
.text-uppercase-small {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-text-light);
}