/* ============================================================
   365 Insurance Agency — custom styles
   (Tailwind via CDN handles most styling; this file adds the
   bits Tailwind utilities don't, like fonts and reveal anims.)
   ============================================================ */

:root {
  --navy: #1e3a8a;
  --navy-dark: #172f6e;
  --gold: #d4a017;
  --gold-dark: #b8870f;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: #334155;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
}

/* Hero background image + overlay */
.hero-bg {
  background-image:
    linear-gradient(110deg, rgba(23, 47, 110, 0.94) 0%, rgba(30, 58, 138, 0.85) 45%, rgba(30, 58, 138, 0.55) 100%),
    url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
}
/* ^ To change the hero photo: replace assets/img/hero.jpg with your own
   image (keep the file name "hero.jpg"). The dark-blue overlay is the
   gradient above it — leave that so the white headline stays readable. */

/* Subtle texture for the CTA band */
.cta-bg {
  background-image:
    linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
}

/* Reveal-on-scroll */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Card hover lift */
.card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px -20px rgba(30, 58, 138, 0.35);
}

/* Form field focus ring consistency */
.field {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12);
}
.field.field-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
}

/* ---- Article / blog post body ---- */
.article { color: #334155; font-size: 1.075rem; line-height: 1.8; }
.article > * + * { margin-top: 1.15rem; }
.article .lead { font-size: 1.25rem; line-height: 1.7; color: #1e293b; font-weight: 500; }
.article h2 {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; color: #1e3a8a;
  font-size: 1.6rem; line-height: 1.25; margin-top: 2.6rem; margin-bottom: .25rem;
}
.article h3 {
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; color: #1e3a8a;
  font-size: 1.2rem; margin-top: 1.8rem;
}
.article ul, .article ol { padding-left: 1.4rem; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-top: .5rem; }
.article li::marker { color: #d4a017; }
.article strong { color: #1e293b; }
.article a { color: #1e3a8a; text-decoration: underline; text-decoration-color: #d4a017; text-underline-offset: 2px; }
.article blockquote {
  border-left: 4px solid #d4a017; background: #f8fafc; border-radius: 0 .75rem .75rem 0;
  padding: 1rem 1.25rem; font-style: italic; color: #475569;
}
/* Callout box (key takeaways, tips) */
.callout {
  border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 1rem; padding: 1.4rem 1.5rem;
}
.callout h3 { margin-top: 0; }