/* H&H Pump — Custom CSS */

/* ── Scroll-reveal animations ── */
.section-fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.section-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Card hover lift ── */
.card-hover {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card-hover:hover {
  box-shadow: 0 12px 32px rgba(27, 61, 111, 0.15);
  transform: translateY(-3px);
}

/* ── Nav active link underline ── */
nav a.nav-active {
  color: #5B9EC9 !important;
  position: relative;
}
nav a.nav-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #5B9EC9;
  border-radius: 1px;
}

/* ── Sticky header shadow transition ── */
header {
  transition: box-shadow 0.3s ease;
}
header.scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* ── FAQ accordion ── */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.accordion-chevron {
  transition: transform 0.3s ease;
}
.accordion-item.open .accordion-chevron {
  transform: rotate(180deg);
}

/* ── Contact form validation highlight ── */
.field-error {
  border-color: #e53e3e !important;
}
.field-error-msg {
  color: #e53e3e;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

/* ── Honeypot ──
   Hidden from people, still in the DOM for bots. Not display:none, which some
   bots skip. Pushed off-screen and out of the tab order instead. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Submission failure (network or server), as opposed to field validation ── */
.form-error-banner {
  display: none;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  background: #fdecea;
  border: 1.5px solid #e53e3e;
  color: #a52218;
  font-size: 0.9rem;
  line-height: 1.5;
}
.form-error-banner.visible {
  display: block;
}

#formSubmit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── Mobile menu drawer ── */
#mobile-menu {
  transition: max-height 0.35s ease, opacity 0.3s ease;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}
#mobile-menu.open {
  max-height: 640px;
  opacity: 1;
}

/* ── Hero overlay gradient ── */
.hero-overlay {
  background: linear-gradient(135deg, rgba(15, 42, 74, 0.90) 0%, rgba(27, 61, 111, 0.60) 100%);
}

/* ── Anchor offset below fixed header ── */
section[id],
article[id] {
  scroll-margin-top: 7.5rem;
}

/* ── Timeline (about.html) ── */
.timeline {
  position: relative;
  padding-left: 2rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #C8DCF0;
}
.timeline-item {
  position: relative;
  padding-bottom: 2.5rem;
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -2rem;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #5B9EC9;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #5B9EC9;
}

/* ── Sticky mobile call bar ── */
.mobile-call-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
}
.mobile-call-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #2C6499;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.9rem 1rem;
  text-decoration: none;
}
.mobile-call-bar svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
@media (max-width: 767px) {
  .mobile-call-bar { display: block; }
  body { padding-bottom: 3.25rem; }
}

/* ── Photo slots ──
   Each slot is blank until its file exists in /images. The expected filename is
   pre-wired per element via the --photo custom property, so dropping a correctly
   named file in makes it appear with no code change. A missing file simply fails
   to paint and the background-color shows through — never a broken-image icon.

   Paths must be ROOT-relative (leading slash). A relative url() inside a custom
   property resolves against the stylesheet, not the document. */
.ph-label {
  background-color: #EBF4FB;
  background-image: var(--photo, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The hero keeps its gradient underneath the photo layer: the headline is white
   over a dark overlay, so a light blank would wash it out. */
.ph-hero {
  background-image: var(--photo, none), linear-gradient(160deg, #1B3D6F 0%, #0F2A4A 70%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ── Google Maps embed ── */
.map-embed {
  background-color: #C8DCF0;
}
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Print styles ── */
@media print {
  header, footer, .cta-banner, .mobile-call-bar { display: none; }
  .print-phone {
    font-size: 2rem;
    font-weight: bold;
    display: block;
  }
}