/* ============================================================
   Samm Construction & Design — custom styles
   Most styling lives in Tailwind utility classes; this file
   covers things Tailwind can't (or shouldn't) do inline.
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #1a2640;
  background: #ffffff;
}

h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, serif;
  letter-spacing: -0.01em;
}

/* Hero gradient overlay on background image */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(10, 16, 26, 0.55) 0%,
    rgba(10, 16, 26, 0.65) 60%,
    rgba(10, 16, 26, 0.85) 100%
  );
}

/* Section divider — short gold accent under headings */
.gold-rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  background: #b8862f;
  margin-top: 14px;
}

.gold-rule.center::after { margin-left: auto; margin-right: auto; }

/* Card hover lift */
.card-lift {
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -16px rgba(10, 16, 26, 0.35);
}

/* Image zoom on hover (portfolio tiles) */
.zoom-frame { overflow: hidden; }
.zoom-frame img {
  transition: transform 600ms ease;
}
.zoom-frame:hover img { transform: scale(1.05); }

/* Fixed-aspect responsive media (avoids CLS) */
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-16-9 { aspect-ratio: 16 / 9; }

/* iOS input zoom prevention (16px minimum) */
input, select, textarea { font-size: 16px; }

/* Mobile sticky CTA bar (injected by main.js) — leave space at bottom of every page */
@media (max-width: 767px) {
  body { padding-bottom: 76px; }
}