/* === walk-in-injury-care ==============================================
   The Claude Design export, shipped IN FULL. An earlier build kept only
   51 of these 157 rules and rebuilt the page out of the site's Bootstrap
   components, which produced the right content wearing the wrong design.
   Everything is scoped under .wic / wic- and cannot leak into the theme.
   Append-only: nothing in the site's existing stylesheets is touched.
   ==================================================================== */

/* ==========================================================================
   Walk-In Injury Care page
   Injury Care Associates — injurycareco.com
   Tokens map to the site's existing Bootstrap custom properties; the hex
   fallbacks are the live values so the page also works standalone.
   ========================================================================== */

.wic {
  --wic-primary: var(--bs-primary-hex, #0072bc);
  --wic-primary-dark: #005b96;
  --wic-navy: var(--bs-tertiary-hex, #1e2d3b);
  --wic-navy-soft: #243d52;
  --wic-light: var(--bs-light-hex, #f2f8fc);
  --wic-ink: var(--bs-heading-color-hex, #212124);
  --wic-body: #495356;
  --wic-muted: var(--bs-secondary-hex, #808992);
  --wic-line: var(--bs-secondary-border-hex, #e7e7e7);
  --wic-accent: #80b7e3;
  --wic-warning: var(--bs-warning-hex, #ffd240);
  --wic-danger: #ec3b3b;
  --wic-green: #9fd086;
  --wic-radius: var(--bs-border-radius, 10px);
  --wic-heading: 'Catamaran', sans-serif;
  --wic-body-font: 'Nunito Sans', system-ui, sans-serif;

  font-family: var(--wic-body-font);
  color: var(--wic-ink);
  background: #fff;
}
.wic *, .wic *::before, .wic *::after { box-sizing: border-box; }
.wic img { max-width: 100%; }

.wic-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wic-wrap--narrow { max-width: 880px; }

/* ---------- type ---------- */
.wic-h1 {
  font-family: var(--wic-heading); font-weight: 800;
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 18px; max-width: 17ch; text-wrap: balance;
}
.wic-h2 {
  font-family: var(--wic-heading); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 12px;
}
.wic-h2--invert { color: #fff; }
.wic-h3 { font-family: var(--wic-heading); font-weight: 800; font-size: 24px; line-height: 1.15; margin: 0 0 6px; }
.wic-kicker {
  font-family: var(--wic-heading); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wic-primary); margin: 0 0 10px;
}
.wic-sub { font-size: 18px; line-height: 1.55; color: var(--wic-body); margin: 0; }
.wic-sub--sm { font-size: 16px; line-height: 1.5; margin: 0 0 18px; }
.wic-head { max-width: 62ch; margin-bottom: 34px; }

/* ---------- buttons ---------- */
.wic-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--wic-body-font); font-weight: 700; font-size: 16px;
  padding: 11px 18px; border-radius: var(--wic-radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .18s, border-color .18s, color .18s;
}
.wic-btn--lg { font-size: 17px; padding: 15px 26px; }
.wic-btn--round { border-radius: 999px; }
.wic-btn--primary { background: var(--wic-primary); border-color: var(--wic-primary); color: #fff; }
.wic-btn--primary:hover { background: var(--wic-primary-dark); border-color: var(--wic-primary-dark); color: #fff; }
.wic-btn--navy { background: var(--wic-navy); border-color: var(--wic-navy); color: #fff; }
.wic-btn--outline { background: #fff; border-color: var(--wic-line); color: var(--wic-navy); }
.wic-btn--outline:hover { border-color: var(--wic-navy); color: var(--wic-navy); }
.wic-btn--outline-blue { background: transparent; border-color: var(--wic-primary); color: var(--wic-primary); }
.wic-btn--outline-blue:hover { background: var(--wic-primary); color: #fff; }
.wic-btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.wic-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.wic-btnrow { display: flex; flex-wrap: wrap; gap: 12px; }
.wic-btnrow--center { justify-content: center; }
.wic-linkbtn {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 15px;
  color: var(--wic-primary); text-decoration: underline; cursor: pointer;
}

/* ---------- hero ---------- */
.wic-hero { position: relative; background: var(--wic-navy); color: #fff; overflow: hidden; }
.wic-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.wic-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--wic-navy) 18%, rgba(30,45,59,.78) 70%, rgba(30,45,59,.5) 100%);
}
.wic-hero__inner { position: relative; padding-top: 64px; padding-bottom: 56px; }
.wic-hero__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.wic-hero__hours { font-size: 15px; font-weight: 600; color: var(--wic-accent); }
.wic-hero__lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--wic-light); max-width: 56ch; margin: 0 0 28px; }
.wic-status {
  display: inline-flex; align-items: center; gap: 8px; background: var(--wic-green); color: var(--wic-navy);
  font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
}
.wic-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wic-status.is-closed { background: var(--wic-light); }
.wic-alert911 {
  display: block; margin: 0; max-width: 640px; font-size: 16px; line-height: 1.45; color: var(--wic-light);
  background: rgba(236,59,59,.18); border-left: 4px solid var(--wic-danger);
  padding: 14px 18px; border-radius: 0 var(--wic-radius) var(--wic-radius) 0;
}
.wic-alert911 strong { color: #ff9b9b; font-size: 15px; letter-spacing: .05em; margin-right: 6px; }

/* ---------- value band ---------- */
.wic-band { background: var(--wic-primary); color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
.wic-band__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px;
  padding-top: 22px; padding-bottom: 22px;
}
.wic-band__item { display: flex; gap: 12px; align-items: flex-start; }
.wic-band__n { font-family: var(--wic-heading); font-weight: 800; font-size: 26px; line-height: 1; color: var(--wic-accent); }
.wic-band__item b { display: block; font-size: 16px; }
.wic-band__item span { display: block; font-size: 15px; line-height: 1.4; color: var(--wic-light); }

/* ---------- sections ---------- */
.wic-sec { padding: 68px 0; border-bottom: 1px solid var(--wic-line); }
.wic-sec--white { background: #fff; }
.wic-sec--light { background: var(--wic-light); }

.wic-card { background: #fff; border: 1px solid var(--wic-line); border-radius: var(--wic-radius); padding: 26px; }
.wic-card--muted { background: var(--wic-light); }

/* ---------- triage ---------- */
.wic-triage { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; align-items: start; }
.wic-q { font-family: var(--wic-heading); font-weight: 700; font-size: 18px; margin: 0 0 6px; }
.wic-qhint { font-size: 15px; color: var(--wic-body); margin: 0 0 16px; line-height: 1.45; }
.wic-checks { display: flex; flex-direction: column; gap: 2px; margin-bottom: 26px; }
.wic-check {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px;
  border-radius: var(--wic-radius); cursor: pointer; font-size: 16px; line-height: 1.4;
}
.wic-check:hover { background: var(--wic-light); }
.wic-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--wic-primary); }
.wic-checks--boxed { margin-bottom: 20px; }
.wic-checks--boxed .wic-check { background: #fff; border: 1px solid var(--wic-line); }
.wic-checks--boxed .wic-check:hover { border-color: var(--wic-navy); }
.wic-checks--boxed input { accent-color: var(--wic-navy); }
.wic-check.is-done span { text-decoration: line-through; color: var(--wic-muted); }
.wic-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.wic-pill {
  font: inherit; font-weight: 700; font-size: 16px; padding: 11px 18px; border-radius: 999px;
  cursor: pointer; border: 2px solid var(--wic-line); background: #fff; color: var(--wic-navy);
  transition: background-color .18s, border-color .18s, color .18s;
}
.wic-pill.is-active { background: var(--wic-navy); border-color: var(--wic-navy); color: #fff; }
.wic-reset { margin: 18px 0 0; }

.wic-verdict {
  border: 1px solid var(--wic-line); border-radius: var(--wic-radius); overflow: hidden;
  position: sticky; top: 20px;
}
.wic-verdict__head { background: var(--wic-navy); color: #fff; padding: 22px 26px; transition: background-color .3s ease; }
.wic-verdict--danger .wic-verdict__head { background: var(--wic-danger); }
.wic-verdict--walkin .wic-verdict__head { background: var(--wic-primary); }
.wic-verdict--other .wic-verdict__head { background: var(--wic-body); }
.wic-verdict__kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin: 0 0 6px; }
.wic-verdict__title { font-family: var(--wic-heading); font-weight: 800; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; margin: 0; }
.wic-verdict__body { background: #fff; padding: 24px 26px; }
.wic-verdict__copy { font-size: 17px; line-height: 1.55; color: var(--wic-body); margin: 0 0 20px; }
.wic-fineprint {
  font-size: 14px; line-height: 1.5; color: var(--wic-body);
  margin: 20px 0 0; border-top: 1px solid var(--wic-line); padding-top: 16px;
}

/* ---------- clinics ---------- */
.wic-locate { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; }
.wic-locate__note { font-size: 15px; line-height: 1.4; color: var(--wic-body); }
.wic-clinics { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.wic-mapcard { background: var(--wic-navy); border-radius: var(--wic-radius); padding: 20px; position: sticky; top: 20px; }
.wic-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.wic-tab {
  font-family: var(--wic-heading); font-weight: 700; font-size: 15px; padding: 8px 16px;
  border-radius: 999px; cursor: pointer; transition: all .18s;
  border: 2px solid rgba(128,183,227,.4); background: transparent; color: var(--wic-light);
}
.wic-tab.is-active { background: var(--wic-accent); border-color: var(--wic-accent); color: var(--wic-navy); }
.wic-mapframe {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--wic-navy-soft); border-radius: var(--wic-radius); overflow: hidden;
}
.wic-mapframe iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(.92) brightness(1.04);
}
.wic-mapcard__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 14px; flex-wrap: wrap; font-size: 15px; font-weight: 700; color: var(--wic-light);
}
.wic-mapcard__foot a { color: var(--wic-accent); text-decoration: none; white-space: nowrap; }
.wic-mapcard__foot a:hover { color: #fff; }

.wic-cards { display: flex; flex-direction: column; gap: 14px; }
.wic-clinic {
  background: #fff; border: 2px solid var(--wic-line); border-radius: var(--wic-radius); padding: 22px;
  cursor: pointer; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.wic-clinic.is-active { border-color: var(--wic-primary); box-shadow: 0 8px 22px rgba(30,45,59,.16); transform: translateY(-2px); }
.wic-clinic__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.wic-clinic__name { font-family: var(--wic-heading); font-weight: 800; font-size: 21px; line-height: 1.15; }
.wic-clinic__addr { font-size: 16px; color: var(--wic-body); line-height: 1.45; margin-top: 4px; }
.wic-clinic__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.wic-badge {
  font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; background: var(--wic-green); color: var(--wic-navy); white-space: nowrap;
}
.wic-badge.is-closed { background: var(--wic-light); color: var(--wic-body); }
.wic-dist { font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--wic-body); }
.wic-dist.is-closest { color: var(--wic-primary); }
.wic-clinic__hours { font-size: 15px; color: var(--wic-body); margin-bottom: 14px; }
.wic-clinic__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.wic-noride {
  background: var(--wic-light); border: 1px solid var(--wic-accent); border-radius: var(--wic-radius);
  padding: 18px 20px; font-size: 16px; line-height: 1.5; color: var(--wic-navy);
}
.wic-noride strong { font-family: var(--wic-heading); }

/* ---------- visit + checklist ---------- */
.wic-visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: start; }
.wic-steps { list-style: none; margin: 28px 0 0; padding: 0; }
.wic-steps li { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 26px; position: relative; }
.wic-steps li:not(:last-child)::before {
  content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--wic-line);
}
.wic-steps__n {
  width: 44px; height: 44px; border-radius: 50%; background: var(--wic-navy); color: #fff;
  font-family: var(--wic-heading); font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.wic-steps b { display: block; font-family: var(--wic-heading); font-weight: 700; font-size: 20px; margin: 8px 0 5px; }
.wic-steps p { font-size: 17px; line-height: 1.55; color: var(--wic-body); margin: 0; }
.wic-progress {
  font-size: 15px; line-height: 1.5; color: var(--wic-body);
  border-top: 1px solid var(--wic-line); padding-top: 16px; margin: 0;
}

/* ---------- transportation CTA ---------- */
.wic-transport { background: var(--wic-warning); overflow: hidden; }
.wic-transport__inner {
  max-width: 1320px; margin: 0 auto; padding: 40px 24px 0;
  display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: center;
}
.wic-transport__art { flex: 0 1 240px; min-width: 170px; align-self: flex-end; margin-bottom: -40px; }
.wic-transport__art img { display: block; width: 100%; }
.wic-transport__copy { flex: 1 1 380px; min-width: 0; }
.wic-transport__copy h2 {
  font-family: var(--wic-heading); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2; color: var(--wic-primary); margin: 0 0 10px; max-width: 22ch;
}
.wic-transport__copy p {
  font-style: oblique; font-size: 16px; line-height: 1.5; color: var(--wic-primary); margin: 0; max-width: 60ch;
}
.wic-transport__btns { flex: 0 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.wic-transport__btns .wic-btn { font-weight: 600; font-size: 17px; padding: 13px 22px; }

/* ---------- FAQ ---------- */
.wic-faq { border-top: 1px solid var(--wic-line); margin-top: 28px; }
.wic-faq__item { border-bottom: 1px solid var(--wic-line); }
.wic-faq__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: none; border: 0; padding: 20px 4px; cursor: pointer; text-align: left;
  font-family: var(--wic-heading); font-weight: 700; font-size: 19px; color: var(--wic-ink); line-height: 1.35;
}
.wic-faq__q:hover { color: var(--wic-primary); }
.wic-faq__i {
  flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--wic-light); color: var(--wic-navy);
  display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  transition: transform .18s, background-color .18s, color .18s;
}
.wic-faq__q[aria-expanded="true"] .wic-faq__i { background: var(--wic-primary); color: #fff; transform: rotate(45deg); }
.wic-faq__a { display: none; }
.wic-faq__q[aria-expanded="true"] + .wic-faq__a { display: block; }
.wic-faq__a p { font-size: 17px; line-height: 1.6; color: var(--wic-body); margin: 0 0 20px; max-width: 70ch; }

/* ---------- final CTA ---------- */
.wic-final { background: var(--wic-navy); color: #fff; padding: 64px 0; text-align: center; }
.wic-final__sub { font-size: 19px; line-height: 1.5; color: var(--wic-light); margin: 0 auto 28px; max-width: 56ch; }

/* ---------- mobile sticky bar ---------- */
.wic-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 8px; padding: 10px;
  background: rgba(30,45,59,.97); backdrop-filter: blur(6px); box-shadow: 0 -4px 18px rgba(0,0,0,.25);
}
.wic-sticky .wic-btn { flex: 1; font-size: 17px; padding: 15px 12px; }
@media (min-width: 760px) { .wic-sticky { display: none; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .wic-clinics { grid-template-columns: minmax(0, 1fr); }
  .wic-mapcard { position: static; }
  .wic-verdict { position: static; }
}
@media (max-width: 759px) {
  .wic-sec { padding: 48px 0; }
  .wic-hero__inner { padding-top: 48px; padding-bottom: 44px; }
  .wic-final { padding: 48px 0; }
  .wic-visit { gap: 36px; }
  body { padding-bottom: 76px; } /* clears the sticky bar */
}

/* ---------- scroll reveal ---------- */
@keyframes wicSlideUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
[data-reveal].is-hidden { opacity: 0; }
[data-reveal].is-revealed { animation: wicSlideUp .55s cubic-bezier(.2,.7,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .wic *, .wic *::before, .wic *::after { animation: none !important; transition: none !important; }
  [data-reveal].is-hidden { opacity: 1; }
}

/* ---------- print ---------- */
@media print {
  .wic-sticky, .wic-tabs, .wic-locate, .wic-mapframe { display: none !important; }
  [data-reveal] { opacity: 1 !important; animation: none !important; transform: none !important; }
  .wic-hero { color: #000; background: #fff; }
  .wic-hero__bg, .wic-hero__scrim { display: none; }
  .wic-faq__a { display: block !important; }
}


/* --- reveal fail-open ------------------------------------------------
   The site's SAL can leave [data-sal] elements at opacity:0 (it hid the
   hero headline and the whole triage form). This page carries safety
   guidance, so nothing here may depend on a reveal firing. The design's
   own [data-reveal] system is used instead and also fails open.
   -------------------------------------------------------------------- */
.wic [data-sal] { opacity: 1 !important; transform: none !important; }
@media print { .wic [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* --- after-hours section ---------------------------------------------
   Not part of the Claude Design export. The design replaced this block with
   the transportation CTA, but it is live published copy pointing at on-site
   response, so it was kept rather than dropped. Styled in the design's own
   tokens so it reads as part of the page rather than a leftover.
   -------------------------------------------------------------------- */
.wic-sec--navy { background: var(--wic-navy); color: #fff; }
.wic-head--left { text-align: left; max-width: 58ch; margin-left: 0; }
.wic-sub--invert { color: var(--wic-light); }
.wic-sub--invert p:last-child { margin-bottom: 0; }
.wic-afterhours .wic-btnrow { margin-top: 24px; }

/* free-text body region inside the "what to bring" card.
   Named .wic-freetext, not .wic-body — --wic-body is a colour token. */
.wic-freetext { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--wic-body); }
.wic-freetext p:last-child { margin-bottom: 0; }

/* Band numbering as a counter — see walkin-band-tpl for why. */
.wic-band__grid { counter-reset: wicband; }
.wic-band__item { counter-increment: wicband; }
.wic-band__n::before { content: counter(wicband, decimal-leading-zero); }

/* --- theme collision: heading colour ---------------------------------
   The design sets colour on .wic-hero and lets headings inherit it. The
   ICA theme sets `color` on h1/h2 directly, and a direct rule beats an
   inherited value, so the hero headline rendered dark-on-dark. Restoring
   the design's intent explicitly, scoped to the inverted contexts only.
   -------------------------------------------------------------------- */
.wic-hero .wic-h1,
.wic-hero .wic-hero__lede { color: #fff; }
.wic-final .wic-h2,
.wic-sec--navy .wic-h2 { color: #fff; }
.wic-band__item b { color: #fff; }

/* === 2026-10-05 status chip + badges: closing-soon state ==================
   Painted by walk-in-clinic.js in Denver time. The chip renders [hidden] until
   the script fills it, so JS-off visitors never see a wrong open/closed claim. */
.wic-status[hidden] { display: none; }
.wic-status.is-closing { background: var(--wic-warning); }
.wic-badge.is-closing { background: var(--wic-warning); color: var(--wic-navy); }

/* === 2026-10-05 transport band buttons, 768px and up ======================
   index.styles.css (site stylesheet, resource 7) forces
   `.wic-transport__btns { flex-direction: row !important }` from 768px. That was
   written when the buttons sat under the text. Now they are the band's third
   column, so the 300px basis squeezed both labels onto two lines. Size the column
   to its content and keep each label on one line; below 768px the buttons stay
   stacked full-width as before. */
@media (min-width: 768px) {
  .wic-transport__btns { flex: 0 0 auto; min-width: 0; }
  .wic-transport__btns .wic-btn { white-space: nowrap; }
}