/* ============================================================================
   Contact page — Injury Care Associates. Scoped under .ctp (resource 83).
   Built from design/contact/css/contact.css, with four deliberate departures:

   1. Heading colours are restated explicitly. The ICA theme sets h1/h2 colour
      directly, which beats an inherited colour from an ancestor — the home
      build shipped headings at 1.14:1 against the navy hero before this was
      caught (docs/BUILD-RECIPE.md). Every heading over a dark ground below
      names its own colour.
   2. The design's .ctp-form* rules are dropped. The form is the site's
      existing Bootstrap form chunk, reused unmodified; restyling it here
      would fight the theme and break the Spanish twin. Only the column
      wrapper is styled.
   3. .ctp-clinic__hours styles the output of the status_check snippet, which
      replaced the design's JS pill.
   4. Band buttons take a sibling rule instead of a MIGX variant field.

   New file — no existing stylesheet is touched (CLAUDE.md, append-only).
   ========================================================================= */

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

/* Type. Colour is stated, never inherited — see note 1. */
.ctp .ctp-h1 { font-family: var(--ctp-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; color: #fff; }
.ctp .ctp-h2 { font-family: var(--ctp-heading); font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin: 0 0 10px; color: var(--ctp-ink); }
.ctp-kicker { font-family: var(--ctp-heading); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ctp-primary); margin: 0 0 10px; }
.ctp-kicker--accent { color: var(--ctp-accent); }
.ctp-sub { font-size: 17px; line-height: 1.55; color: var(--ctp-body); margin: 0; }
.ctp-sub--lg { font-size: 18px; margin-bottom: 14px; max-width: 52ch; }
.ctp-sub--lg p:last-child { margin-bottom: 0; }
.ctp-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 30px; }
.ctp-head--narrow { max-width: 60ch; }

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

/* Hero */
.ctp-hero { position: relative; background: var(--ctp-navy); color: #fff; overflow: hidden; }
.ctp-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .65; }
.ctp-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,45,59,.9) 0%, rgba(30,45,59,.65) 55%, rgba(30,45,59,.2) 100%); }
.ctp-hero__inner { position: relative; padding-top: 64px; padding-bottom: 56px; }
.ctp-hero__lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--ctp-light); max-width: 52ch; margin: 0 0 28px; }
.ctp-hero .ctp-btn--primary { box-shadow: 0 6px 18px rgba(0,114,188,.35); }

/* Entrance animation. Fails open: with animations unsupported or reduced,
   nothing is left at opacity 0. */
@keyframes ctpIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.ctp-anim { animation: ctpIn .7s cubic-bezier(.2,.7,.3,1) both; }
.ctp-anim--2 { animation-delay: .08s; }
.ctp-anim--3 { animation-delay: .16s; }
.ctp-anim--4 { animation-delay: .24s; }

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

/* Router */
.ctp-routes { padding: 40px 24px 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.ctp-route { display: flex; flex-direction: column; gap: 8px; background: var(--ctp-light); border: 1.5px solid var(--ctp-line); border-radius: var(--ctp-radius); padding: 22px 22px 20px; text-decoration: none; color: var(--ctp-navy); transition: border-color .18s, transform .18s; }
.ctp-route:hover { border-color: var(--ctp-primary); transform: translateY(-2px); color: var(--ctp-navy); }
.ctp-route__kicker { font-family: var(--ctp-heading); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ctp-primary); margin: 0; }
.ctp .ctp-route h3 { font-family: var(--ctp-heading); font-weight: 800; font-size: 20px; line-height: 1.2; margin: 0; color: var(--ctp-navy); }
.ctp-route p { font-size: 15px; line-height: 1.45; color: var(--ctp-body); margin: 0; }
.ctp-route__cta { font-size: 15px; font-weight: 700; color: var(--ctp-primary); margin-top: 4px; }

/* Clinics */
.ctp-clinics { padding: 64px 24px 72px; }
.ctp-status { display: inline-flex; align-items: center; font-weight: 700; font-size: 15px; padding: 9px 14px; border-radius: 999px; white-space: nowrap; background: #fff; color: var(--ctp-body); border: 1.5px solid var(--ctp-field); }
.ctp-clinics__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: stretch; }
.ctp-clinics__list { display: flex; flex-direction: column; gap: 12px; }
.ctp-clinic { cursor: pointer; background: #fff; border: 2px solid var(--ctp-line); border-radius: var(--ctp-radius); padding: 20px 22px; transition: border-color .2s; }
.ctp-clinic.is-active { border-color: var(--ctp-primary); }
.ctp-clinic__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.ctp .ctp-clinic h3 { font-family: var(--ctp-heading); font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0; color: var(--ctp-ink); }
.ctp-clinic__addr { font-size: 15px; color: var(--ctp-body); line-height: 1.45; margin: 3px 0 0; }
.ctp-clinic__badge { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ctp-light); color: var(--ctp-body); }
.ctp-clinic.is-active .ctp-clinic__badge { background: var(--ctp-primary); color: #fff; }
.ctp-clinic__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.ctp-clinic__fax { font-size: 14px; color: var(--ctp-body); font-weight: 600; margin-left: auto; white-space: nowrap; }

/* status_check output. The snippet emits bare <span class="open"> /
   <span class="closed"> alongside the hours text. */
.ctp-clinic__hours { font-size: 15px; color: var(--ctp-body); margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctp-clinic__hours .open,
.ctp-clinic__hours .closed { font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.ctp-clinic__hours .open { background: #e3f4e8; color: #1b6b3a; }
.ctp-clinic__hours .closed { background: #fdecea; color: #8e1b1b; }

/* Map — progressive enhancement, static and useful without JS. */
.ctp-mapcol { align-self: stretch; }
.ctp-map { position: sticky; top: 20px; background: var(--ctp-navy); border-radius: var(--ctp-radius); padding: 18px; }
.ctp-map__frame { position: relative; width: 100%; aspect-ratio: 4 / 3.4; background: #243d52; border-radius: var(--ctp-radius); overflow: hidden; }
.ctp-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.92) brightness(1.04); }
.ctp-map__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; font-size: 15px; font-weight: 700; }
.ctp-map__foot span { color: var(--ctp-light); }
.ctp-map__foot a { color: var(--ctp-accent); text-decoration: none; }
.ctp-map__foot a:hover { color: #fff; }
@media (max-width: 720px) { .ctp-map { position: static; } }

/* Transportation band */
.ctp-band { background: var(--ctp-warning); overflow: hidden; }
.ctp-band__inner { max-width: 1320px; margin: 0 auto; padding: 40px 24px 0; display: flex; flex-wrap: wrap; gap: 28px 36px; align-items: center; }
.ctp-band__img { flex: 0 1 240px; min-width: 170px; align-self: flex-end; margin-bottom: -40px; }
.ctp-band__img img, .ctp-band__svg { width: 100%; display: block; height: auto; }
.ctp-band__text { flex: 1 1 380px; min-width: 0; }
.ctp .ctp-band__title { font-family: var(--ctp-heading); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--ctp-primary); margin: 0 0 10px; max-width: 22ch; }
.ctp-band__sub { font-style: oblique; font-size: 16px; line-height: 1.5; color: var(--ctp-primary); margin: 0; max-width: 60ch; }
.ctp-band__btns { flex: 0 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
/* MIGX carries no variant: first button filled, any later one outlined. */
.ctp-band__btns .ctp-btn + .ctp-btn { background: transparent; border-color: var(--ctp-primary); color: var(--ctp-primary); }
.ctp-band__btns .ctp-btn + .ctp-btn:hover { background: var(--ctp-primary); color: #fff; }

/* Message section */
.ctp-two { padding-top: 68px; padding-bottom: 68px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: start; }
.ctp-callout { background: var(--ctp-warning-tint); border: 1px solid var(--ctp-warning); border-radius: var(--ctp-radius); padding: 14px 18px; font-size: 16px; line-height: 1.5; max-width: 52ch; }
.ctp-callout b { font-family: var(--ctp-heading); }
.ctp-callout a { color: var(--ctp-primary); font-weight: 700; }
.ctp-ways { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 52ch; }
.ctp-ways li { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--ctp-line); padding-top: 14px; }
.ctp-ways li > div { flex: 1; }
.ctp .ctp-ways h3 { font-family: var(--ctp-heading); font-weight: 800; font-size: 17px; line-height: 1.25; margin: 0; color: var(--ctp-ink); }
.ctp-ways p { font-size: 15px; line-height: 1.5; color: var(--ctp-body); margin: 2px 0 0; }
.ctp-ways a { flex: none; font-size: 15px; font-weight: 700; color: var(--ctp-primary); text-decoration: none; white-space: nowrap; }
.ctp-ways a:hover { text-decoration: underline; }

/* Form column. The form itself is the site's Bootstrap chunk, reused
   unmodified — only the column around it is this page's business. */
.ctp-formcol { min-width: 0; }
.ctp-formcol .form { border-radius: var(--ctp-radius); }

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

/* ===========================================================================
   FIX 1 — sticky map. Appended override, not an edit (CLAUDE.md append-only).

   `.ctp { overflow-x: hidden }` above makes .ctp a scroll container, and a
   scroll-container ancestor disables position:sticky for everything inside it.
   The map computed `position: sticky` correctly and never moved. `clip` does
   the same overflow job without establishing a scroll container.
   ======================================================================== */
.ctp { overflow-x: clip; }

/* The sticky element needs a track to travel: the column must be as tall as
   the card list beside it, and must not itself be a flex/grid stretch target
   that collapses to content height. */
.ctp-mapcol { align-self: stretch; height: 100%; }
.ctp-map { position: sticky; top: 92px; }
@media (max-width: 720px) { .ctp-map { position: static; top: auto; } }

/* ===========================================================================
   FIX 2 — form card styled to the design.

   contact-form-en is reused UNMODIFIED (Gate 1 decision 2) — it carries the
   FormIt call, hCaptcha, the HubSpot hook and has a Spanish twin. So the
   design's form appearance is applied here, from outside, by overriding the
   chunk's Bootstrap classes. Nothing in the chunk changes, and contact-form-es
   will inherit the same styling when Babel lands.
   ======================================================================== */
.ctp-formcol .form {
  background: var(--ctp-light);
  border: 1px solid var(--ctp-line);
  border-radius: var(--ctp-radius);
  padding: 28px;
}

/* The chunk renders its own h2 + subtitle block as the first .col-12. The
   design puts the heading in the left column, and form-title currently
   duplicates that heading word for word, so the page showed it twice. Hidden
   rather than removed: the markup is shared with the Spanish twin, and
   form-title / form-subtitle stay populated for any other consumer. */
.ctp-formcol .form .row > .col-12:first-child { display: none; }

.ctp-formcol .form label {
  display: block;
  font-family: var(--ctp-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--ctp-navy);
  margin-bottom: 6px;
}
.ctp-formcol .form label span[aria-hidden="true"] { color: var(--ctp-primary); margin-left: 2px; }

.ctp-formcol .form .form-control,
.ctp-formcol .form .form-select {
  padding: 12px 14px;
  border: 1.5px solid var(--ctp-field);
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
  color: var(--ctp-ink);
  box-shadow: none;
}
.ctp-formcol .form .form-control:focus,
.ctp-formcol .form .form-select:focus {
  border-color: var(--ctp-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 114, 188, .15);
}
.ctp-formcol .form textarea.form-control { min-height: 120px; resize: vertical; }

/* FormIt's per-field error span, and the validation summary above the form. */
.ctp-formcol .form .error,
.ctp-formcol .error {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #c62828;
  margin-bottom: 4px;
}
.ctp-formcol .form .form-control.error-field { border-color: #c62828; }

/* Submit is an <input type="submit"> from hCaptchaRender, so it cannot take
   the .ctp-btn markup — match the design's primary button here instead. */
.ctp-formcol .form .btn-primary {
  background: var(--ctp-primary);
  border: 2px solid var(--ctp-primary);
  border-radius: var(--ctp-radius);
  font-weight: 700;
  font-size: 17px;
  padding: 14px 26px;
  color: #fff;
}
.ctp-formcol .form .btn-primary:hover {
  background: var(--ctp-primary-dark);
  border-color: var(--ctp-primary-dark);
}

/* Bootstrap spacing utilities are declared !important, so the chunk's `p-3`
   beats a plain padding here regardless of specificity. This is the one place
   this stylesheet needs !important, and only because the class it is
   overriding uses it. */
.ctp-formcol .form.p-3 { padding: 28px !important; }
@media (max-width: 575px) { .ctp-formcol .form.p-3 { padding: 20px !important; } }

/* ===========================================================================
   The theme uses CSS cascade layers — index.styles.css declares
   `@layer framework, resets, utils, intern, connor, zoe` — and its `p-3`
   padding utility lives in one of them with !important.

   For !important declarations the layer order is REVERSED: an earlier layer
   beats a later one, and any layered !important beats an UNLAYERED one no
   matter how specific. That is why `.ctp-formcol .form.p-3 { padding:28px
   !important }` above loses to `.p-3`, and why raising specificity, adding an
   element qualifier and injecting the rule last all failed to move it.

   This stylesheet is loaded before index.styles.css, so declaring a layer here
   registers it FIRST — making it the earliest layer, which wins for
   !important. Everything else in this file stays unlayered, where normal
   declarations already beat the theme's layered ones.
   ======================================================================== */
@layer ica-contact {
  .ctp-formcol .form.p-3 { padding: 28px !important; }
}
@layer ica-contact {
  @media (max-width: 575px) {
    .ctp-formcol .form.p-3 { padding: 20px !important; }
  }
}

/* ===========================================================================
   Form layout — the design's two-column grid.

   contact-form-en is now a file-backed chunk carrying this markup, so the
   Bootstrap row/col classes and the p-3 utility are gone. That also retires
   the cascade-layer override above: with no `p-3` on the form there is no
   layered !important left to fight. The @layer block is kept as a no-op
   because the trap it documents is real and will recur on the next page.
   ======================================================================== */
.ctp-formcol .form.ctp-form { padding: 28px; }
.ctp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.ctp-form__field { display: flex; flex-direction: column; min-width: 0; }
.ctp-form__field--full { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .ctp-formcol .form.ctp-form { padding: 20px; }
  .ctp-form__grid { grid-template-columns: 1fr; }
}

.ctp-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.ctp-form__note { flex: 1 1 220px; font-size: 14px; line-height: 1.45; color: var(--ctp-body); margin: 0; }
.ctp-formcol .form .ctp-form__submit { flex: 0 0 auto; }

/* Honeypot: off-screen rather than type="hidden", so a bot fills it and a
   human never sees it. FormIt validates it :blank. */
.ctp-form__hp {
  position: absolute !important;
  left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}