/* Footprints Media — theme overrides. Loaded last, so this file wins. */
/* ======================================================================
   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; }

/* Team profiles sit on a light background, so names and intros stay ink.
   Outline buttons turn light on dark heroes. */
/* Team profile pages use light bg-background, but .hero-title is forced white globally -> invisible name */
.team-profile-hero .hero-title {
  color: #10100f !important;
}
.team-profile-hero .hero-description {
  color: rgba(16, 16, 15, 0.72) !important;
}
/* Dark heroes (ink bg) + .btn-outline dark ink text -> invisible "Talk to Our Experts" */
.hero-section .btn-outline,
.about-hero-section .btn-outline,
.services-hero-section .btn-outline,
.team-hero-section .btn-outline,
.contact-hero-section .btn-outline,
.blog-hero .btn-outline {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
}
.hero-section .btn-outline:hover,
.about-hero-section .btn-outline:hover,
.services-hero-section .btn-outline:hover,
.team-hero-section .btn-outline:hover,
.contact-hero-section .btn-outline:hover,
.blog-hero .btn-outline:hover {
  background: #fff !important;
  color: #10100f !important;
  border-color: #fff !important;
}
.hero-section .btn-outline .btn-text,
.about-hero-section .btn-outline .btn-text,
.services-hero-section .btn-outline .btn-text,
.team-hero-section .btn-outline .btn-text,
.contact-hero-section .btn-outline .btn-text {
  color: inherit !important;
}

/* Site-wide refinements. */
/* Nav call-to-action renders italic (synthesis is off elsewhere, so it is re-enabled here). */
.site-header .header-actions .btn-primary .btn-text {
  font-style: italic !important;
  font-synthesis: style !important;
}
/* Keep the CTA watermark centered instead of bleeding off the left edge. */
.cta-section::before {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -3vw !important;
  font-size: clamp(5rem, 13vw, 14rem) !important;
}
.blog-card .blog-card-category {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
}
/* Cards and articles ship without photos; hide any photo markup as a backstop. */
.blog-card-image-link,
.blog-card-image,
.article-cover,
.product-card-image {
  display: none !important;
}
/* Card system: warm surface, tinted border, orange top edge. */
.blog-card,
.product-card {
  border: 1px solid rgba(200, 90, 23, 0.18) !important;
  border-top: 3px solid #f58a0b !important;
  border-radius: 22px !important;
  background: #fffdf9 !important;
  box-shadow: 0 18px 50px rgba(20, 20, 18, 0.08) !important;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.blog-card:hover,
.product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200, 90, 23, 0.38) !important;
  box-shadow: 0 26px 70px rgba(200, 90, 23, 0.14) !important;
}
/* Listing cards show pill + date only; hide any legacy photo/kicker markup. */
.blog-card {
  flex-direction: column !important;
}
.blog-card-kicker,
.blog-card-top,
.blog-card-brand,
.blog-card-image-link,
.blog-card-image,
.blog-card-image-placeholder {
  display: none !important;
}
/* Header hairline. */
.site-header {
  border-bottom: 1px solid rgba(200, 90, 23, 0.12) !important;
}