/* ==========================================================================
   Locations page — Injury Care Associates
   Scoped under .lcp. Tokens map to the site's Bootstrap custom properties;
   hex fallbacks are the live values so the page also works standalone.

   Section 1 is the design export shipped in full and untrimmed
   (BUILD-RECIPE: "Ship the design CSS in full").
   Section 2 restates values the ICA theme would otherwise win by specificity.
   ========================================================================== */

/* === 1. design export =================================================== */

/* Locations page — Injury Care Associates. Scoped under .lcp. */
.lcp {
  --lcp-primary: var(--bs-primary-hex, #0072bc); --lcp-primary-dark: #005b96;
  --lcp-navy: var(--bs-tertiary-hex, #1e2d3b); --lcp-light: var(--bs-light-hex, #f2f8fc);
  --lcp-ink: var(--bs-heading-color-hex, #212124); --lcp-body: #495356;
  --lcp-line: var(--bs-secondary-border-hex, #e7e7e7); --lcp-field: #cfd8de; --lcp-accent: #80b7e3;
  --lcp-warning: var(--bs-warning-hex, #ffd240);
  --lcp-radius: var(--bs-border-radius, 10px);
  --lcp-heading: 'Catamaran', sans-serif; --lcp-body-font: 'Nunito Sans', system-ui, sans-serif;
  font-family: var(--lcp-body-font); color: var(--lcp-ink); background: #fff; overflow-x: clip; -webkit-font-smoothing: antialiased;
}
.lcp *, .lcp *::before, .lcp *::after { box-sizing: border-box; }
.lcp img { max-width: 100%; }
.lcp a:not([class]) { color: var(--lcp-navy); } .lcp a:not([class]):hover { color: var(--lcp-primary); }
.lcp button { font: inherit; }
.lcp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.lcp-h1 { font-family: var(--lcp-heading); font-weight: 800; font-size: clamp(34px, 5vw, 58px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; max-width: 18ch; text-wrap: balance; }
.lcp-h2 { font-family: var(--lcp-heading); font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 10px; }
.lcp-kicker { font-family: var(--lcp-heading); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--lcp-primary); margin: 0 0 10px; }
.lcp-kicker--accent { color: var(--lcp-accent); }
.lcp-sub { font-size: 17px; line-height: 1.55; color: var(--lcp-body); margin: 0; }
.lcp-head--narrow { max-width: 60ch; margin-bottom: 30px; }

/* Buttons */
.lcp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; font-size: 17px; padding: 15px 26px; border-radius: var(--lcp-radius); border: 2px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .18s, border-color .18s, color .18s; }
.lcp-btn--primary { background: var(--lcp-primary); border-color: var(--lcp-primary); color: #fff; }
.lcp-btn--primary:hover { background: var(--lcp-primary-dark); border-color: var(--lcp-primary-dark); color: #fff; }
.lcp-btn--ghost { background: transparent; border-color: rgba(255,255,255,.45); color: #fff; }
.lcp-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.lcp-btn--sm { font-size: 15px; padding: 10px 16px; }
.lcp-btn--outline { background: #fff; border-color: var(--lcp-field); color: var(--lcp-navy); }
.lcp-btn--outline:hover { border-color: var(--lcp-navy); }
.lcp-btn--yellow { background: var(--lcp-warning); border-color: var(--lcp-warning); color: var(--lcp-ink); }
.lcp-btn--yellow:hover { background: #f5c51e; border-color: #f5c51e; color: var(--lcp-ink); }
.lcp-btn--round { border-radius: 999px; font-weight: 600; padding: 13px 22px; display: flex; }
.lcp-btn--outline-blue { background: transparent; border-color: var(--lcp-primary); color: var(--lcp-primary); }
.lcp-btn--outline-blue:hover { background: var(--lcp-primary); color: #fff; }
.lcp-btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Hero */
.lcp-hero { position: relative; background: var(--lcp-navy); color: #fff; overflow: hidden; }
.lcp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .6; }
.lcp-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,45,59,.92) 0%, rgba(30,45,59,.7) 55%, rgba(30,45,59,.25) 100%); }
.lcp-hero__inner { position: relative; padding-top: 64px; padding-bottom: 56px; }
.lcp-hero__lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--lcp-light); max-width: 52ch; margin: 0 0 28px; }
.lcp-hero__note { font-size: 14px; line-height: 1.5; color: #c9d6e2; margin: 14px 0 0; max-width: 60ch; }
.lcp-hero .lcp-btn--primary { box-shadow: 0 6px 18px rgba(0,114,188,.35); }
.lcp-hero .lcp-btn--primary.is-done { background: var(--lcp-warning); border-color: var(--lcp-warning); color: var(--lcp-ink); }
.lcp-status { display: inline-flex; align-items: center; font-weight: 700; font-size: 15px; padding: 9px 14px; border-radius: 999px; white-space: nowrap; background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.lcp-status.is-open { background: #e3f4e8; color: #1b6b3a; border-color: #9fd6b1; }
@keyframes lcpIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lcp-anim { animation: lcpIn .7s cubic-bezier(.2,.7,.3,1) both; }
.lcp-anim--2 { animation-delay: .08s; } .lcp-anim--3 { animation-delay: .16s; } .lcp-anim--4 { animation-delay: .24s; }

/* Sections */
.lcp-sec { border-bottom: 1px solid var(--lcp-line); }
.lcp-sec--white { background: #fff; } .lcp-sec--light { background: var(--lcp-light); }

/* Clinic finder */
.lcp-clinics { padding: 56px 24px 72px; }
.lcp-clinics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.lcp-clinics__list { display: flex; flex-direction: column; gap: 12px; }
.lcp-clinics__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 2px 4px; }
.lcp-clinics__head .lcp-h2 { font-size: clamp(24px, 3vw, 32px); margin: 0; }
.lcp-clinics__note { font-size: 14px; color: var(--lcp-body); }
.lcp-clinic { cursor: pointer; background: #fff; border: 2px solid var(--lcp-line); border-radius: var(--lcp-radius); padding: 20px 22px; transition: border-color .2s; }
.lcp-clinic.is-active { border-color: var(--lcp-primary); }
.lcp-clinic__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.lcp-clinic__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lcp-clinic h3 { font-family: var(--lcp-heading); font-weight: 800; font-size: 24px; line-height: 1.1; margin: 0; }
.lcp-clinic__dist { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--lcp-light); color: var(--lcp-body); }
.lcp-clinic__dist.is-closest { background: #e3f4e8; color: #1b6b3a; }
.lcp-clinic__addr { font-size: 15px; color: var(--lcp-body); line-height: 1.45; margin: 4px 0 0; }
.lcp-clinic__landmark { font-size: 14.5px; line-height: 1.5; color: var(--lcp-body); margin: 10px 0 0; }
.lcp-clinic__badge { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--lcp-light); color: var(--lcp-body); }
.lcp-clinic.is-active .lcp-clinic__badge { background: var(--lcp-primary); color: #fff; }
.lcp-clinic__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.lcp-clinic__fax { font-size: 14px; color: var(--lcp-body); font-weight: 600; margin-left: auto; white-space: nowrap; }

/* Sticky map — requires no ancestor with overflow:hidden */
.lcp-mapcol { align-self: stretch; }
.lcp-map { position: sticky; top: 20px; background: var(--lcp-navy); border-radius: var(--lcp-radius); padding: 18px; }
.lcp-map__frame { position: relative; width: 100%; aspect-ratio: 4 / 3.6; background: #243d52; border-radius: var(--lcp-radius); overflow: hidden; }
.lcp-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.92) brightness(1.04); }
.lcp-map__foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.lcp-map__name { font-family: var(--lcp-heading); font-weight: 800; font-size: 22px; color: #fff; line-height: 1.1; margin: 0; }
.lcp-map__addr { font-size: 14.5px; color: #c9d6e2; margin: 3px 0 0; }
@media (max-width: 720px) { .lcp-map { position: static; } }

/* Same at every clinic */
.lcp-same { padding: 64px 24px 68px; }
.lcp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.lcp-fact { background: var(--lcp-light); border: 1.5px solid var(--lcp-line); border-radius: var(--lcp-radius); padding: 22px 22px 20px; }
.lcp-fact h3 { font-family: var(--lcp-heading); font-weight: 800; font-size: 22px; line-height: 1.15; color: var(--lcp-navy); margin: 0 0 6px; }
.lcp-fact p { font-size: 15px; line-height: 1.5; color: var(--lcp-body); margin: 0; }
.lcp-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 26px; font-size: 15px; font-weight: 700; }
.lcp-links a { color: var(--lcp-primary); text-decoration: none; }
.lcp-links a:hover { text-decoration: underline; }

/* Transportation band */
.lcp-band { background: var(--lcp-warning); overflow: hidden; }
.lcp-band__inner { max-width: 1320px; margin: 0 auto; padding: 40px 24px 0; display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: center; }
.lcp-band__img { flex: 0 1 240px; min-width: 170px; align-self: flex-end; margin-bottom: -40px; }
.lcp-band__img img { width: 100%; display: block; }
.lcp-band__text { flex: 1 1 380px; min-width: 0; }
.lcp-band__title { font-family: var(--lcp-heading); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--lcp-primary); margin: 0 0 10px; max-width: 22ch; }
.lcp-band__sub { font-style: oblique; font-size: 16px; line-height: 1.5; color: var(--lcp-primary); margin: 0; max-width: 60ch; }
.lcp-band__btns { flex: 0 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }

@media (prefers-reduced-motion: reduce) { .lcp * { animation: none !important; transition: none !important; } }
@media print { .lcp-map, .lcp-hero__bg, .lcp-hero__scrim { display: none; } }

/* === 2. ICA theme collision restatements ================================
   The theme sets h1/h2/h3 colour directly on the element, and a direct rule
   beats the colour these headings would otherwise inherit from their section.
   Every heading that sits on a coloured ground is restated here.
   (BUILD-RECIPE: "Headline invisible, dark on dark".)
   ======================================================================== */

.lcp-hero .lcp-h1,
.lcp-hero .lcp-hero__lede { color: #fff; }
.lcp-hero .lcp-hero__lede { color: var(--lcp-light); }
.lcp-hero .lcp-kicker--accent { color: var(--lcp-accent); }

.lcp-clinics__head .lcp-h2,
.lcp-same .lcp-h2 { color: var(--lcp-ink); }
.lcp-clinic h3 { color: var(--lcp-ink); }
.lcp-fact h3 { color: var(--lcp-navy); }
.lcp-map__name { color: #fff; }
.lcp-band__title { color: var(--lcp-primary); }

/* The map panel sits on navy; its own foot text must not inherit theme ink. */
.lcp-map__addr { color: #c9d6e2; }

/* === 3. progressive enhancement ========================================
   The distance button and the per-clinic status pill are JS-only. They stay
   hidden until locations.js marks the root, so a JS failure leaves no dead
   control and no empty pill behind. Fail-open, per the task brief.
   ====================================================================== */

.lcp-locate,
.lcp-clinic__status,
.lcp-status { display: none; }
.lcp-js .lcp-locate,
.lcp-js .lcp-clinic__status { display: inline-flex; }
.lcp-js .lcp-status { display: inline-flex; }

/* Per-clinic open/closed pill, same vocabulary as the hero pill. */
.lcp-clinic__status { align-items: center; font-weight: 700; font-size: 13px;
  padding: 3px 9px; border-radius: 999px; background: var(--lcp-light);
  color: var(--lcp-body); }
.lcp-clinic__status.is-open { background: #e3f4e8; color: #1b6b3a; }

/* No-JS map fallback: the keyless embed is rendered server-side and simply
   stays put if the Maps JS API never loads. */
.lcp-map__frame iframe { display: block; }
.lcp-js .lcp-map__frame iframe[data-lcp-fallback] { display: none; }
.lcp-map__canvas { position: absolute; inset: 0; display: none; }
.lcp-js .lcp-map__canvas { display: block; }

/* === 4. integration with site chrome and richtext =======================
   Three corrections that only matter once the design runs inside the ICA
   theme rather than standalone.
   ======================================================================== */

/* bottom-text is a richtext TV, so the section lede arrives already wrapped
   in its own <p>. The lede is a <div class="lcp-sub"> in loc-same for valid
   markup; the inner paragraph has to inherit the lede's type, not reset to
   browser defaults. */
.lcp-sub > p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.lcp-sub > p + p { margin-top: .6em; }

/* The privacy note describes the distance button, which does not exist
   without JavaScript. Hide them together. */
.lcp-hero__note { display: none; }
.lcp-js .lcp-hero__note { display: block; }

/* The transportation band is site chrome carried over unchanged from the
   previous template and still uses Bootstrap classes. `.lcp` switches the
   page's body font to Nunito Sans, which would otherwise leak into it —
   restore the theme's own font inside the band only. */
.lcp .cta-one { font-family: var(--bs-font-sans-serif, 'Catamaran', sans-serif); }

/* .lcp-band* from the design export is deliberately unused: Gate 2 kept the
   existing band markup. The rules are left in place because the export ships
   whole, and because they are the fallback if the band is ever swapped. */

/* === 5. transportation band — pill width in Bootstrap's xl range ==========
   Responsive audit 2026-10-04, item L1. Between 1200 and 1399px the band's
   row gives the text column col-xl-8 and the button column col-xl-4 with no
   spare margin (ms-md-auto only has room once col-xxl-6 applies at 1400px).
   The shared row tpl joins each label's words with &nbsp;, so a label cannot
   wrap, and "How transportation works" ran 14px past its pill at 1280px.
   In that range let the button column take its content width and let the
   text column flex into the remainder: the pill follows the label, whatever
   the MIGX value says. Outside 1200–1399px nothing changes.
   ======================================================================== */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .lcp .cta-one .row > .col-xl-8 { flex: 1 1 0; width: auto; min-width: 0; }
  .lcp .cta-one .row > .col-xl-4.ms-md-auto { flex: 0 0 auto; width: auto; }
}