@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700;900&family=Open+Sans:wght@400;600&display=swap');

:root {
  --color-dark: #1a2f4a;
  --color-primary: #1e3a5f;
  --color-accent: #e85d04;
  --color-accent-hover: #c94e03;
  --color-light: #f0f4f8;
  --color-body: #374151;
  --color-muted: #6b7280;
  /* Fallback before js/main.js measures the real header height; kept in sync via ResizeObserver */
  --header-height: 148px;
}

html {
  scroll-behavior: smooth;
}

/* Offset anchor targets so the fixed header never covers the section heading on smooth scroll */
[id] {
  scroll-margin-top: var(--header-height);
}

body {
  font-family: 'Open Sans', sans-serif;
  color: var(--color-body);
  font-size: 16px;
  line-height: 1.7;
}

@media (min-width: 768px) {
  body {
    font-size: 17px;
  }
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Roboto', sans-serif;
}

/* Sticky header shadow after the page scrolls */
#site-header.scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Hero overlay */
.hero-overlay {
  background-color: rgba(26, 47, 74, 0.75);
}

/* Service / feature card hover lift */
.lift-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lift-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(26, 47, 74, 0.15);
}

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* City pill hover */
.city-pill {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Testimonial mobile toggle */
.testimonial-hidden {
  display: none;
}

/* Emergency banner marquee-free tight styling */
.emergency-banner {
  background-color: var(--color-accent);
}