/* ============================================================
   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; }
/* Feature-card icons: large, light, free-standing ("airy") — adopted kit-wide
   2026-08-07, replacing the grey icon tiles. Needs the wght axis in the
   Material Symbols font request (300..400). */
.ms-airy { font-size: 2.75rem; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; }

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

/* Keyboard focus: Mariner ring with a 2px white gap so it reads on white cards,
   the Orient nav, and the Midnight footer alike. Inputs keep Tailwind's focus:ring. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--iw-mariner, #2A7DE1);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Skip link: visually hidden until keyboard focus */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: #005187; color: #fff; font-weight: 700; font-size: .875rem;
  padding: 12px 20px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

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

/* ---- FAQ accordion ----
   Height animates via grid-template-rows (0fr -> 1fr), so long answers are
   never clipped and nothing is measured in JS. landing.js wraps each panel's
   children in .iw-collapse-inner (the single grid item). Collapsed panels are
   visibility:hidden (delayed until the close finishes) so links inside them
   leave the tab order. */
.faq-content { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease-out, visibility 0s linear .3s; }
.faq-item.active .faq-content { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s, 0s; }
.iw-collapse-inner { min-height: 0; overflow: hidden; }
.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);
}
/* The strip collapses on a grid row (1fr -> 0fr) plus a fade; its top gap
   lives on the white card (mt-2) so nothing but the row height animates. */
.utility-bar { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s ease, opacity .3s ease; }
.utility-bar > div { min-height: 0; overflow: hidden; width: 100%; } /* grid item + auto margins would otherwise shrink-wrap and center the pill */
.nav-wrapper.scrolled .utility-bar { grid-template-rows: 0fr; opacity: 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; }

/* ---- Persona sub-nav: hidden at top, full-width bar when scrolled ---- */
.persona-subnav{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s ease,opacity .3s ease}
.persona-subnav-clip{min-height:0;overflow:hidden}
.nav-wrapper.scrolled .persona-subnav{grid-template-rows:1fr;opacity:1}
.persona-subnav-inner{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;justify-content:center;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;transition:border-radius .3s ease,margin .3s ease,max-width .3s ease}

/* Scrolled: full-width flush bar under the blue nav */
.nav-wrapper.scrolled .persona-subnav-inner{max-width:80rem;margin:0 auto;padding:0 16px;border-radius:0;box-shadow:none}
.nav-wrapper.scrolled .persona-subnav{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.persona-subnav-inner::-webkit-scrollbar{display:none}
.persona-subnav a{display:flex;align-items:center;gap:7px;padding:14px 18px;font-size:.875rem;font-weight:700;color:#666666;white-space:nowrap;border-bottom:3px solid transparent;transition:color .2s ease,background .2s ease}
.persona-subnav a .material-symbols-outlined{font-size:1.25rem}
.persona-subnav a:hover{color:#005187;background:rgba(0,81,135,.06)}
.persona-subnav a.current{color:#fff;background:#005187;border-bottom-color:#FFC10E}
@media (max-width:640px){.persona-subnav-inner{justify-content:flex-start}.persona-subnav a{padding:14px 14px}.persona-subnav a:not(.current) span.psn-label{display:none}}

/* ---- Mobile nav: hamburger + dropdown (injected by landing.js) ---- */
.mobile-menu-btn { display: none; }
@media (max-width: 767px) {
  .utility-bar { display: none; }
  /* No floating card at the top on mobile: always the full-width scrolled look.
     !important: must beat the Tailwind utilities (rounded-lg etc.) injected after this sheet. */
  .main-nav { margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .mobile-menu { margin: 0; border-radius: 0; }
  .mobile-menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; margin: -6px -8px -6px 0;
    background: none; border: none; cursor: pointer;
  }
  .mobile-menu-btn span {
    display: block; height: 2px; border-radius: 9999px; background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  .menu-open .mobile-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .mobile-menu-btn span:nth-child(2) { opacity: 0; }
  .menu-open .mobile-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.mobile-menu {
  display: none; margin: 0 16px; border-radius: 0 0 8px 8px; overflow: hidden;
  background: var(--iw-midnight-blue, #003366);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.25);
}
.menu-open .mobile-menu { display: block; }
.nav-wrapper.scrolled .mobile-menu { margin: 0; border-radius: 0; }
.mobile-menu > a {
  display: block; padding: 14px 24px; color: rgba(255,255,255,.85);
  font-weight: 700; font-size: 1rem; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu > a.active { color: #fff; box-shadow: inset 4px 0 0 var(--iw-amber, #FFC10E); }
.mobile-menu > a:hover { background: rgba(255,255,255,.06); color: #fff; }
.mobile-menu-util { display: flex; flex-wrap: wrap; gap: 0 20px; padding: 8px 24px 12px; }
.mobile-menu-util a {
  display: inline-block; padding: 6px 0;
  color: rgba(255,255,255,.6); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
}
.mobile-menu-util a:hover { color: var(--iw-amber, #FFC10E); }
@media (min-width: 768px) { .mobile-menu { display: none !important; } }

/* ---- "Where We Serve" desktop dropdown (markup injected by build.mjs) ----
   CSS disclosure on :hover / :focus-within, progressively enhanced by
   initServeMenu() in landing.js (click, .is-open, ESC, arrow keys). The trigger
   matches the nav link look; the panel is a light surface so links use the
   dove-gray → Orient + amber-underline rule. Lives inside the fixed header, so
   the scroll-collapse needs nothing extra. */
.iw-serve { position: relative; }
.iw-serve-trigger {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: rgba(255,255,255,.7); font-weight: 700; font-size: .875rem;
}
.iw-serve-trigger:hover { color: #FFC10E; }
.iw-serve-trigger.active { color: #fff; position: relative; }
.iw-serve-trigger.active::before { content: ""; position: absolute; left: 0; right: 0; bottom: -.5rem; height: 2px; background: #FFC10E; }
.iw-serve-trigger .material-symbols-outlined { transition: transform .2s ease; }
.iw-serve:hover .iw-serve-trigger .material-symbols-outlined,
.iw-serve.is-open .iw-serve-trigger .material-symbols-outlined { transform: rotate(180deg); }

.iw-serve-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: .75rem; z-index: 60;
  min-width: 640px; max-width: calc(100vw - 32px);
  background: #fff; color: #111; border-radius: .75rem; padding: 1.5rem 1.75rem;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.35), 0 8px 16px -8px rgba(0,0,0,.2);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s;
}
/* Transparent bridge over the trigger gap so hover doesn't drop the menu. */
.iw-serve-menu::before { content: ""; position: absolute; top: -.75rem; left: 0; right: 0; height: .75rem; }
.iw-serve:hover > .iw-serve-menu,
.iw-serve:focus-within > .iw-serve-menu,
.iw-serve.is-open > .iw-serve-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.iw-serve-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 2rem; }
.iw-serve-region { color: #666666; font-size: .6875rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 .4rem; }
.iw-serve-col > .iw-serve-region ~ .iw-serve-region { margin-top: 1.1rem; }
.iw-serve-menu ul { list-style: none; margin: 0 0 .25rem; padding: 0; }
.iw-serve-menu a {
  display: block; padding: .25rem 0; color: #666666; font-size: .875rem; font-weight: 700;
  text-decoration: none; transition: color .15s ease;
}
.iw-serve-menu a:hover { color: #005187; text-decoration: underline; text-decoration-color: #FFC10E; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.iw-serve-menu a.current { color: #005187; margin-left: -.75rem; padding-left: .75rem; box-shadow: inset 3px 0 0 #FFC10E; } /* bar sits in the gutter; text stays put */
.iw-serve-foot { display: flex; gap: 1.75rem; margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid #eee; }
.iw-serve-foot a { color: #005187; font-size: .8125rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; }
.iw-serve-foot a:hover { text-decoration: underline; text-decoration-color: #FFC10E; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Compact single-column variant (the "Internet" product menu): left-aligned under its trigger. */
.iw-serve--compact .iw-serve-menu { left: 0; transform: none; min-width: 15rem; padding: 1.1rem 1.25rem; }
.iw-serve--compact .iw-serve-menu ul { margin: 0; }
.iw-serve--compact .iw-serve-foot { margin-top: .8rem; padding-top: .7rem; }
@media (max-width: 767px) { .iw-serve-menu { display: none; } }

/* ---- Mobile menu "Where We Serve" group (button + nested list, built by
   initMobileMenu()). The speeds page carries its own <details> variant inline. */
.mobile-menu-group {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 24px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  color: rgba(255,255,255,.85); font-weight: 700; font-size: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mobile-menu-group:hover { background: rgba(255,255,255,.06); color: #fff; }
.mobile-menu-group .material-symbols-outlined { transition: transform .2s ease; }
.mobile-menu-group[aria-expanded="true"] .material-symbols-outlined { transform: rotate(180deg); }
.mobile-menu-group-list { list-style: none; margin: 0; padding: 0; display: none; background: rgba(0,0,0,.15); }
.mobile-menu-group-list.open { display: block; }
.mobile-menu-group-list .mmg-region { padding: 10px 24px 3px; color: rgba(255,255,255,.5); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.mobile-menu-group-list a { display: block; padding: 7px 24px 7px 36px; color: rgba(255,255,255,.8); font-size: .95rem; font-weight: 700; text-decoration: none; }
.mobile-menu-group-list a:hover { color: #fff; background: rgba(255,255,255,.06); }
.mobile-menu-group-list a.active { color: #fff; box-shadow: inset 4px 0 0 var(--iw-amber, #FFC10E); }
.mobile-menu-group-list .mmg-foot a { color: rgba(255,255,255,.6); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }

/* ---- Hero: pinned background so content passes over it ---- */
.hero-stage { position: relative; }
/* Homepage hero backdrop framing. The aerial photo is exactly 16:9, so at
   16:9-and-narrower viewports object-fit:cover has no vertical crop to give —
   a slight bottom-anchored zoom is the only way to trade sky for city.
   Wider than 16:9, cover already crops vertically; the zoom would stack and
   feel zoomed-in, so drop it and just bias the framing toward the city. */
.hero-bg-img { object-position: center bottom; transform: scale(1.12); transform-origin: center bottom; }
@media (min-aspect-ratio: 16/9) {
  .hero-bg-img { transform: none; object-position: center 70%; }
}
/* On tall viewports (1440p-class monitors) the section after the persona strip
   peeks its white card above the fold; give the hero a little more room so only
   the blue of that band shows. 1080p-class screens (<1250px tall) are unaffected. */
@media (min-height: 1250px) {
  .hero-stage { min-height: 730px !important; }
}
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; } }
/* Pause control (injected by landing.js — WCAG 2.2.2 for the 25s auto-rotation) */
.hero-rotator.paused .hero-headline { animation-play-state: paused; }
.hero-rotate-toggle {
  position: absolute; bottom: 0; right: 0; z-index: 5;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.hero-rotate-toggle:hover { background: rgba(255,255,255,.3); }
.hero-rotate-toggle .material-symbols-outlined { font-size: 1.25rem; }

/* ---- Progressive address form ---- */
/* Grid-row reveal; landing.js moves the field group into .iw-collapse-inner.
   Collapsed fields are visibility:hidden so they leave the tab order. */
.form-transition { display: grid; transition: grid-template-rows .3s ease-out, opacity .2s ease-out, visibility 0s linear .3s; }
.address-form-collapsed { grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.address-form-expanded { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s; }

/* ---- Reviews: equal-height cards come from the grid; no line clamp —
   truncating a real customer's words mid-sentence is worse than a
   slightly taller card. ---- */

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

/* ---- Mobile sticky footer: slide away while the real footer is on
   screen (IntersectionObserver in landing.js) so it never covers the
   legal links. ---- */
.mobile-sticky-footer { transition: transform .25s ease; }
.mobile-sticky-footer.is-hidden { transform: translateY(100%); }

/* ---- Comparison table: below 640px the 3-column grid starves the
   text columns (~96px each at 320px). Stack: feature label spans the
   full row, the two value cells share the row beneath it. ---- */
@media (max-width: 639px) {
  .iw-compare .grid.grid-cols-3 { grid-template-columns: 1fr 1fr; }
  .iw-compare .grid.grid-cols-3 > div:first-child {
    grid-column: 1 / -1;
    padding-bottom: 2px;
  }
  /* Header row: the empty corner cell collapses, brand cells keep their
     left borders from the markup. */
  .iw-compare .grid.grid-cols-3 > div:first-child:empty { display: none; }
  .iw-compare .grid.grid-cols-3 > div { border-left-width: 0; }
  .iw-compare .grid.grid-cols-3 > div + div + div { border-left-width: 1px; }
}

/* ---- Honest-speed additions (persona speed redesign, 2026-07) ---- */
.iw-confirm-chip { display: inline-block; background: #FFC10E; color: #111; font-size: .6875rem; 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 and auto-rotation, keep state changes */
@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, .form-transition, .utility-bar, .persona-subnav, .mobile-sticky-footer,
  .iw-serve-menu, .iw-serve-trigger .material-symbols-outlined, .mobile-menu-group .material-symbols-outlined { transition: none; }
  .group:hover .group-hover\:translate,
  .hover\:-translate-y-1:hover,
  .hover\:-translate-y-2:hover { transform: none !important; }
  /* Freeze the hero carousel on its first headline */
  .hero-headline { animation: none; }
  .hero-headline:first-child { opacity: 1; }
  .hero-rotate-toggle { display: none; }
}

/* ---- Coverage pages (generated from build/cities.json) ----
   Service-status rows and neighborhood status tags. Tones map to the
   status enum: live/available = Orient, building/partial = Amber,
   wireless/nearby = Dove Gray, none = muted. Color never carries the
   meaning alone — every dot sits beside its label. */
.iw-svc-status { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: #005187; white-space: nowrap; }
.iw-svc-dot, .iw-tag-dot { width: 10px; height: 10px; border-radius: 9999px; background: #005187; flex: none; }
.iw-svc-partial .iw-svc-dot, .iw-svc-building .iw-svc-dot { background: #FFC10E; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #FFC10E; width: 8px; height: 8px; }
.iw-svc-nearby .iw-svc-status { color: #666666; }
.iw-svc-nearby .iw-svc-dot { background: #666666; }
.iw-svc-none h3, .iw-svc-none p { color: #666666; }
.iw-svc-none .iw-svc-status { color: #999999; }
.iw-svc-none .iw-svc-dot { background: transparent; border: 2px solid #999999; }
.iw-svc-none .ms-airy { color: #999999; }

.iw-tag { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 9999px; background: #F3F4F6; color: #005187; }
.iw-tone-live .iw-tag-dot, .iw-tag-dot.iw-tone-live { background: #005187; }
.iw-tone-building .iw-tag { color: #7a5200; background: #FFF4CC; }
.iw-tone-building .iw-tag-dot, .iw-tag-dot.iw-tone-building { background: #FFC10E; }
.iw-tone-fiberwave .iw-tag { color: #1a5aa8; background: #E8F1FB; }
.iw-tone-fiberwave .iw-tag-dot, .iw-tag-dot.iw-tone-fiberwave { background: #2A7DE1; }
.iw-tone-wireless .iw-tag { color: #666666; }
.iw-tone-wireless .iw-tag-dot, .iw-tag-dot.iw-tone-wireless { background: #666666; }
.iw-hood { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.iw-hood:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.06); border-color: rgba(0,81,135,.4); }
@media (prefers-reduced-motion: reduce) { .iw-hood, .iw-hood:hover { transition: none; transform: none; } }