/* ============================================================
   InfoWest Persona Landing Pages — shared styles
   Layered on top of Tailwind CDN + the iw-* color config that
   each page declares inline. Keep this lean: only the bits
   Tailwind utilities can't express cleanly live here.
   ============================================================ */

html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400;
  vertical-align: middle;
}
.ms-fill { font-variation-settings: 'FILL' 1, 'wght' 400; }

::selection { background: #FFC10E; color: #111; }

/* The signature 80x4 amber rule above section titles */
.iw-amber-rule { display: block; width: 80px; height: 4px; background: #FFC10E; border-radius: 2px; }

/* Uppercase tracked eyebrow/kicker */
.iw-eyebrow {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
}

/* ---- FAQ accordion ---- */
.faq-content { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; }
.faq-item.active .faq-content { max-height: 600px; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform .2s ease; }

/* ---- Two-tier nav (ported from the InfoWest website kit) ---- */
.nav-wrapper { transition: background .3s ease, backdrop-filter .3s ease; }
.nav-wrapper.scrolled {
  background: rgba(0, 81, 135, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.utility-bar { transition: max-height .3s ease, opacity .3s ease, padding .3s ease; max-height: 60px; opacity: 1; overflow: hidden; }
.nav-wrapper.scrolled .utility-bar { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
.main-nav { transition: background .3s ease, box-shadow .3s ease, border-radius .3s ease, margin .3s ease; }
.nav-wrapper.scrolled .main-nav { border-radius: 0; background: transparent; box-shadow: none; }

/* ---- Hero: pinned background so content passes over it ---- */
.hero-stage { position: relative; }
main > section { position: relative; z-index: 10; }
main > section.hero-stage { z-index: auto; }
/* Footer sits outside <main>, so lift it above the pinned hero bg too. */
footer { position: relative; z-index: 10; }

/* ---- Rotating hero headlines (index hub) ---- */
.hero-headline { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; animation: headline-fade 25s infinite; }
.hero-headline:nth-child(1) { animation-delay: 0s; }
.hero-headline:nth-child(2) { animation-delay: 5s; }
.hero-headline:nth-child(3) { animation-delay: 10s; }
.hero-headline:nth-child(4) { animation-delay: 15s; }
.hero-headline:nth-child(5) { animation-delay: 20s; }
@keyframes headline-fade { 0%,16% { opacity: 1; } 20%,100% { opacity: 0; } }

/* ---- Progressive address form ---- */
.form-transition { transition: max-height .3s ease-out, opacity .2s ease-out; }
.address-form-collapsed { max-height: 0; opacity: 0; overflow: hidden; }
.address-form-expanded { max-height: 520px; opacity: 1; }

/* ---- Reviews: equal-height cards, tidy quote clamp ---- */
.review-quote {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Leave room for the mobile sticky footer */
@media (max-width: 767px) {
  main { padding-bottom: 76px; }
}

/* ---- Honest-speed additions (persona speed redesign, 2026-07) ---- */
.iw-confirm-chip { display: inline-block; background: #FFC10E; color: #111; font-size: 10px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; border-radius: 4px; padding: 2px 7px; vertical-align: middle; white-space: nowrap; }
.iw-spinner { display: block; width: 44px; height: 44px; border-radius: 50%; border: 4px solid #E5E7EB; border-top-color: #005187; animation: iw-spin 1s linear infinite; }
@keyframes iw-spin { to { transform: rotate(360deg); } }

/* Honor reduced-motion: kill transforms, keep opacity/extent */
@media (prefers-reduced-motion: reduce) {
  .iw-spinner { animation: none; border-color: #005187; border-top-color: #E5E7EB; }
  #iw-m-use { transition: none !important; }
  * { scroll-behavior: auto !important; }
  .faq-content { transition: none; }
  .group:hover .group-hover\:translate,
  .hover\:-translate-y-1:hover,
  .hover\:-translate-y-2:hover { transform: none !important; }
}