/* Fountainhead Construction Group — Roofing Division */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
}

.font-display {
  font-family: 'Barlow Condensed', sans-serif;
}

.font-mono {
  font-family: 'IBM Plex Mono', monospace;
}

/* Header shadow on scroll */
#site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#site-header.scrolled {
  box-shadow: 0 10px 30px -16px rgba(10, 14, 17, 0.55);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ridge-glow { animation: none !important; }
}

/* Shingle-lap divider: small repeating tabs, echoes overlapping shingle courses */
.shingle-divider {
  height: 16px;
  background-image:
    linear-gradient(135deg, currentColor 24%, transparent 24.5%),
    linear-gradient(225deg, currentColor 24%, transparent 24.5%);
  background-size: 22px 16px;
  background-repeat: repeat-x;
  background-position: 0 0;
}

/* Guarantees hero copy stays legible over any photo */
.hero-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Ambient ridge glow behind hero headline */
.ridge-glow {
  animation: ridgeGlow 7s ease-in-out infinite;
}
@keyframes ridgeGlow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

/* FAQ accordion */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq-panel > div {
  overflow: hidden;
}
.faq-item[data-open="true"] .faq-panel {
  grid-template-rows: 1fr;
}
.faq-item[data-open="true"] .faq-chevron {
  transform: rotate(45deg);
}
.faq-chevron {
  transition: transform 0.3s ease;
}

/* Form focus ring in brand rust */
.input-field:focus {
  outline: none;
  border-color: #c1531b;
  box-shadow: 0 0 0 3px rgba(193, 83, 27, 0.18);
}

::selection {
  background: #c1531b;
  color: #f7f5f1;
}