/* ============================================================================
   financing.css — Roofing Financing page styles
   Liberty Roof Group
   All values use CSS custom properties. No hardcoded colors or sizes.
   ============================================================================ */

/* ── HERO ── */
.financing-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  background-image: url('https://connect.mediaserve.io/storage/v1/object/public/media/78dba5ff-e514-44fd-bc2d-1f49dd7a0a6f/f4523b1a-7fe7-4198-b28d-08d172eb2245/media/images/full-roof2.webp');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding-top: calc(var(--header-height, 140px) + var(--space-20));
  padding-bottom: var(--space-20);
}

@media (max-width: 768px) {
  .financing-hero {
    padding-top: calc(var(--header-height, 80px) + var(--space-10));
    padding-bottom: var(--space-10);
    min-height: 380px;
  }
}

.financing-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,40,104,0.91) 0%, rgba(17,24,39,0.82) 100%);
  z-index: 0;
}

.financing-hero-content {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  gap: var(--space-5);
}

.financing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  align-self: flex-start;
  width: fit-content;
}

.financing-hero-title {
  color: #ffffff;
  margin: 0;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
}

.financing-hero-title span {
  color: var(--accent-400, #f87171);
}

.financing-hero-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.88);
  max-width: 640px;
  line-height: var(--leading-relaxed);
  margin: 0;
}

.financing-hero-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.financing-hero-service-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--duration-150) var(--ease-default);
}

.financing-hero-service-tag:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.financing-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ── FEATURES SECTION ── */
.financing-features-section {
  background: var(--light-bg, #F9FAFB);
}

.financing-features-header {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: var(--space-12);
  align-items: center;
  gap: var(--space-4);
}

.financing-features-header .section-label {
  align-self: center;
}

.financing-features-title {
  color: var(--heading-light, #111827);
  margin: 0;
  text-align: center;
}

.financing-features-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-light, #374151);
  max-width: 600px;
  text-align: center;
  line-height: var(--leading-relaxed);
  margin: 0 auto;
}

.financing-feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-base, #E5E7EB);
  transition: box-shadow var(--duration-200) var(--ease-default), transform var(--duration-200) var(--ease-default);
}

.financing-feature-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.financing-feature-card-title {
  color: var(--heading-light, #111827);
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-family: var(--font-heading);
}

.financing-feature-card-text {
  color: var(--text-light, #374151);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ── PROGRAMS SECTION ── */
.financing-programs-section {
  background: var(--dark-bg, #111827);
}

.financing-programs-header {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: var(--space-12);
  align-items: center;
  gap: var(--space-4);
}

.financing-programs-header .section-label {
  align-self: center;
  color: var(--accent-400, #f87171);
}

.financing-programs-title {
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.financing-programs-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  text-align: center;
  line-height: var(--leading-relaxed);
  margin: 0 auto;
}

.financing-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: center;
}

.financing-cards-grid > * {
  flex: 0 0 calc(33.333% - var(--space-6) * 2 / 3);
  min-width: 280px;
}

@media (max-width: 1024px) {
  .financing-cards-grid > * {
    flex: 0 0 calc(50% - var(--space-6) / 2);
  }
}

@media (max-width: 640px) {
  .financing-cards-grid > * {
    flex: 0 0 100%;
  }
}

.financing-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  position: relative;
  transition: border-color var(--duration-200) var(--ease-default), box-shadow var(--duration-200) var(--ease-default);
}

.financing-card:hover {
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.financing-card.featured {
  background: linear-gradient(135deg, var(--primary-700, #003580) 0%, var(--primary-800, #002868) 100%);
  border-color: rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px rgba(0,40,104,0.4);
}

.financing-card-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-500, #ef4444);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.financing-card-interest {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  font-family: var(--font-heading);
  color: #ffffff;
  line-height: 1;
}

.financing-card-term {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-body);
}

.financing-card-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 0;
}

.financing-card-title {
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.financing-card-desc {
  color: rgba(255,255,255,0.75);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.financing-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.financing-card-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: rgba(255,255,255,0.88);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.financing-card-feature svg {
  flex-shrink: 0;
  color: var(--accent-400, #f87171);
  margin-top: 1px;
}

.financing-card.featured .financing-card-feature svg {
  color: rgba(255,255,255,0.9);
}

.financing-card-cta {
  margin-top: auto;
}

/* ── WHY US SECTION ── */
.financing-why-section {
  background: #fff;
}

.financing-why-header {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: var(--space-12);
  align-items: center;
  gap: var(--space-4);
}

.financing-why-header .section-label {
  align-self: center;
}

.financing-why-title {
  color: var(--heading-light, #111827);
  margin: 0;
  text-align: center;
}

.financing-why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-base, #E5E7EB);
  background: var(--light-bg, #F9FAFB);
  transition: box-shadow var(--duration-200) var(--ease-default), transform var(--duration-200) var(--ease-default);
}

.financing-why-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.financing-why-card-title {
  color: var(--heading-light, #111827);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.financing-why-card-text {
  color: var(--text-light, #374151);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ── FAQ SECTION ── */
.financing-faq-section {
  background: var(--light-bg, #F9FAFB);
}

.financing-faq-header {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-bottom: var(--space-10);
  align-items: center;
  gap: var(--space-4);
}

.financing-faq-header .section-label {
  align-self: center;
}

.financing-faq-title {
  color: var(--heading-light, #111827);
  margin: 0;
  text-align: center;
}

.financing-faq-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-light, #374151);
  text-align: center;
  margin: 0;
}

.financing-faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* ── CTA SECTION ── */
.financing-cta-section {
  background: linear-gradient(135deg, var(--primary-900, #002868) 0%, var(--primary-800, #003580) 100%);
  position: relative;
  overflow: hidden;
}

.financing-cta-section::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}

.financing-cta-content {
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

.financing-cta-title {
  color: #ffffff;
  margin: 0;
  text-align: center;
}

.financing-cta-text {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.85);
  max-width: 600px;
  text-align: center;
  line-height: var(--leading-relaxed);
  margin: 0;
}

.financing-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}



/* ── FINANCING CARD BUTTON OVERRIDES ── */

/* ── FINANCING CARD APPLY BUTTON (outline on dark bg) ── */
.financing-card .btn-outline {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

.financing-card .btn-outline:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  color: #fff;
}

/* ── TABLET HERO TITLE SCALE ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .financing-hero-title {
    font-size: var(--text-4xl);
  }
}

/* ── HERO MOBILE PADDING ── */
@media (max-width: 480px) {
  .financing-hero {
    padding-top: calc(var(--header-height, 80px) + var(--space-8));
    padding-bottom: var(--space-8);
  }
  .financing-hero-title {
    font-size: var(--text-4xl);
  }
}

/* ── HERO DESKTOP PADDING (consistent with service/area hero pattern) ── */
@media (min-width: 1025px) {
  .financing-hero {
    padding-top: calc(var(--header-height, 140px) + var(--space-24));
    padding-bottom: var(--space-24);
  }
}