/* ======================================================================
   FOOTPRINTS MEDIA · PREMIUM CORRECTIONS
   Stability + hierarchy pass. No backend / data / interaction changes.
   ====================================================================== */

/* ---------- Header: compact, deliberate, never a giant floating slab ---------- */
.site-header {
  top: 18px !important;
  padding: 0 !important;
  height: 84px !important;
  min-height: 84px !important;
  display: block;
}

.site-header.scrolled {
  top: 10px !important;
}

.header-container {
  height: 84px !important;
  min-height: 84px !important;
  padding-inline: 24px !important;
}

.brand-logo {
  width: 205px !important;
  height: 48px !important;
  flex: 0 0 205px !important;
  display: flex !important;
  align-items: center !important;
}

.brand-logo img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 48px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

.nav-links {
  gap: clamp(20px, 2.35vw, 34px) !important;
}

.nav-link {
  font-size: .79rem !important;
  letter-spacing: .075em !important;
}

.header-actions .btn {
  min-height: 50px !important;
  padding-inline: 28px !important;
}

/* ---------- Page rhythm: hero copy always starts below the header ---------- */
.hero-section {
  padding-top: 132px !important;
}

.about-hero-section,
.services-hero-section,
.team-hero-section,
.contact-hero-section {
  padding-top: 172px !important;
  padding-bottom: 105px !important;
  min-height: 64vh !important;
  align-items: flex-end !important;
}

.blog-hero {
  padding-top: 165px !important;
  padding-bottom: 92px !important;
  min-height: 68vh !important;
}

.products-hero,
.product-detail-hero {
  padding-top: 155px !important;
}

.team-profile-hero {
  padding-top: 165px !important;
}

/* ---------- Dark surfaces: no more charcoal text disappearing into charcoal ---------- */
.hero-section .section-text,
.hero-section .hero-description,
.about-hero-section .section-text,
.about-hero-section .hero-description,
.services-hero-section .section-text,
.services-hero-section .hero-description,
.team-hero-section .section-text,
.team-hero-section .hero-description,
.contact-hero-section .section-text,
.contact-hero-section .hero-description,
.blog-hero p {
  color: rgba(255,255,255,.74) !important;
}

.hero-section h1,
.hero-section h2,
.hero-section h3,
.about-hero-section h1,
.about-hero-section h2,
.about-hero-section h3,
.services-hero-section h1,
.services-hero-section h2,
.services-hero-section h3,
.team-hero-section h1,
.team-hero-section h2,
.team-hero-section h3,
.contact-hero-section h1,
.contact-hero-section h2,
.contact-hero-section h3,
.blog-hero h1 {
  color: #fff !important;
}

.bg-dark .section-text,
.bg-dark p,
.bg-dark li,
.bg-dark .step-text,
.bg-dark .service-description,
.bg-dark .feature-item {
  color: rgba(255,255,255,.76) !important;
}

.comparison-section .service-card:last-child .service-description,
.comparison-section .service-card:last-child .section-text {
  color: rgba(255,255,255,.76) !important;
}

.comparison-section .service-card:last-child .feature-item {
  color: rgba(255,255,255,.84) !important;
}

/* Keep dark hero labels vivid but readable. */
.hero-section .section-label,
.about-hero-section .section-label,
.services-hero-section .section-label,
.team-hero-section .section-label,
.contact-hero-section .section-label,
.blog-hero .eyebrow {
  color: var(--lux-orange) !important;
}

/* ---------- Product/blog custom hero copy follows the same contrast rules ---------- */
.products-hero p,
.product-detail-hero p {
  color: #5e5b55 !important;
}

/* ---------- Mobile: smaller header, larger logo relative to available space ---------- */
@media (max-width: 980px) {
  .site-header {
    top: 10px !important;
    height: 68px !important;
    min-height: 68px !important;
  }

  .header-container {
    height: 68px !important;
    min-height: 68px !important;
    padding-inline: 18px !important;
  }

  .brand-logo {
    width: 170px !important;
    height: 42px !important;
    flex-basis: 170px !important;
  }

  .brand-logo img {
    max-height: 42px !important;
  }

  .about-hero-section,
  .services-hero-section,
  .team-hero-section,
  .contact-hero-section {
    padding-top: 122px !important;
  }

  .blog-hero,
  .products-hero,
  .product-detail-hero,
  .team-profile-hero {
    padding-top: 120px !important;
  }
}

@media (max-width: 760px) {
  .site-header {
    width: calc(100% - 16px) !important;
    border-radius: 16px !important;
  }

  .header-container {
    padding-inline: 13px !important;
  }

  .brand-logo {
    width: 148px !important;
    height: 38px !important;
    flex-basis: 148px !important;
  }

  .brand-logo img {
    max-height: 38px !important;
  }

  .about-hero-section,
  .services-hero-section,
  .team-hero-section,
  .contact-hero-section {
    padding-top: 108px !important;
    padding-bottom: 78px !important;
    min-height: 0 !important;
  }

  .blog-hero,
  .products-hero,
  .product-detail-hero,
  .team-profile-hero {
    padding-top: 105px !important;
  }
}

@media (max-width: 420px) {
  .brand-logo {
    width: 132px !important;
    height: 34px !important;
    flex-basis: 132px !important;
  }

  .brand-logo img {
    max-height: 34px !important;
  }

  .header-container {
    padding-inline: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.scrolled {
    transition: none !important;
  }
}

/* ---------- Dark sections: lift secondary copy without turning everything white ---------- */
.stats-section .stat-label { color: rgba(255,255,255,.68) !important; }
.site-footer .footer-desc { color: rgba(255,255,255,.68) !important; }
.site-footer .footer-links a,
.site-footer .footer-contact-info a { color: rgba(255,255,255,.78) !important; }
.site-footer .footer-contact-info .address { color: rgba(255,255,255,.56) !important; }
.site-footer .copyright { color: rgba(255,255,255,.52) !important; }