/* ============================================================
   CivicSmart v9.1 — Responsive + accessibility refinements
   Layered ON TOP of main.css. Do not edit main.css for these
   changes; everything lives here so the diff vs v9 is auditable.
   ============================================================ */

/* --- Larger guaranteed tap targets on touch devices ---------- */
@media (hover: none) and (pointer: coarse) {
  .btn--sm        { padding: .7rem 1.1rem; min-height: 44px; }
  .nav__link      { min-height: 44px; padding: .75rem .9rem; }
  .nav__mega a    { min-height: 48px; padding: .8rem .85rem; }
  .footer a,
  .indexnav a,
  .pagenav a      { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- Hero on phones: drop the autoplay video, keep the poster --- */
@media (max-width: 640px) {
  .hero--video .hero__video { display: none; }
  .hero { min-height: auto; padding: 4rem 0 2.5rem; }
  .hero h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); }
  .hero__sub { font-size: 1rem; line-height: 1.55; }
  .hero__actions .btn--lg { padding: .85rem 1.25rem; font-size: .95rem; }
  .hero__cue { display: none; }
}
@media (prefers-reduced-data: reduce) {
  .hero--video .hero__video { display: none; }
}

/* --- Sticky offset for sub-nav and anchor jumps -------------- */
:root { --header-h: 64px; }
.indexnav { top: var(--header-h); }
section[id], main [id] { scroll-margin-top: calc(var(--header-h) + 56px); }

/* --- Mobile nav (≤1100px) ----------------------------------- */
/* main.css already does the basic hamburger swap. These rules:
     1) make the open menu scrollable on small phones;
     2) override main.css so each mega-menu stays collapsed until
        its parent .nav__item gets .is-open (toggled by main.js);
     3) rotate the chevron when a section opens.
   Without (2), tapping the hamburger showed all 14 items at once. */
@media (max-width: 1100px) {

  .nav__links.is-open {
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: .5rem .25rem 1.25rem;
    background: rgba(255,255,255,.98);
    border-top: 1px solid var(--line);
  }

  .nav__mega a { padding: .9rem .75rem; }

  .nav__link[aria-haspopup="true"] {
    display: flex !important;
    align-items: center;
    width: 100%;
  }
  .nav__link[aria-haspopup="true"] > svg {
    margin-left: auto !important;
    transition: transform .2s;
    width: 14px !important;
    height: 14px !important;
    opacity: 1 !important;
  }
  .nav__item.is-open > .nav__link[aria-haspopup="true"] > svg {
    transform: rotate(180deg);
  }

  .nav__mega {
    display: none !important;
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 .5rem .85rem;
    min-width: 0;
    grid-template-columns: 1fr;
  }
  .nav__item.is-open > .nav__mega {
    display: grid !important;
  }
  .nav__item:hover > .nav__mega,
  .nav__item:focus-within > .nav__mega { display: none !important; }
  .nav__item.is-open:hover > .nav__mega,
  .nav__item.is-open:focus-within > .nav__mega { display: grid !important; }
}

/* --- Small phones (≤420px) ---------------------------------- */
@media (max-width: 420px) {
  .container, .container--wide, .container--tight { padding: 0 1rem; }
  h1 { font-size: clamp(1.6rem, 6.5vw, 2rem); }
  h2 { font-size: clamp(1.4rem, 5.5vw, 1.8rem); }
  .section { padding: 3.5rem 0; }
  .section--tight { padding: 2.5rem 0; }
  .btn { font-size: .92rem; padding: .75rem 1.1rem; }
  .btn--lg { font-size: .95rem; padding: .85rem 1.25rem; }
}

/* --- Long-form pages: no horizontal scrollbar -------------- */
table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

.compare, .formfactors, .lanes, .solutions { container-type: inline-size; }

img { height: auto; }

/* --- Focus states ----------------------------------------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Skip-to-content ------------------------------------ */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: .75rem 1rem; border-radius: 0 0 8px 0;
  font-weight: 600; z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }

.indexnav__inner { scrollbar-width: thin; }
.indexnav__inner::-webkit-scrollbar { height: 0; }

@supports (padding: max(0px)) {
  .nav, .footer .container, main .container, main .container--wide {
    padding-left:  max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
}

/* --- Hamburger close affordance --------------------------- */
.nav__toggle[aria-expanded="true"]::before { content: "\2715"; }
.nav__toggle[aria-expanded="true"] { font-size: 1.3rem; }