/* ==========================================================================
   Brisbane Best Movers — accessible step markers
   --------------------------------------------------------------------------
   Isolated contrast layer for the numbered "how it works" stops.

   Why this file exists
   The expressive layer paints steps 02 and 03 with a copper and an olive
   gradient, but the enhancement layer still supplies dark ink for those
   markers. The computed result was 1.64:1 and 1.52:1 — far below WCAG AA.
   The olive also read as green, which the palette is moving away from.

   What it does
   - three coordinated, blue-led hues: harbour blue, copper, indigo
   - white numerals on every stop; both gradient ends stay >= 5.9:1
   - no green or olive hue anywhere in the markers or their accents
   - keeps the 44px minimum target at every breakpoint (the phone home rail
     had drifted down to 40px)
   - colour plus that touch-target correction: no type, radius or motion
     changes

   Palette note: these are screen RGB tokens chosen for measured contrast,
   not Pantone-matched colours. No Pantone reference is claimed.
   ========================================================================== */

:root {
  /* Stop 01 — harbour blue (existing brand family). */
  --bbm-step-01-from: #255f8d;
  --bbm-step-01-to: #123a5a;
  --bbm-step-01-ring: #e7f1fb;
  --bbm-step-01-edge: #123a5a;

  /* Stop 02 — copper, the warm complement already used by the brand. */
  --bbm-step-02-from: #9b4a26;
  --bbm-step-02-to: #78341a;
  --bbm-step-02-ring: #f8e6d8;
  --bbm-step-02-edge: #6f2f14;

  /* Stop 03 — indigo blue, replacing the olive/green stop. Kept close to the
     blue family rather than a purple so the set still reads blue-led. */
  --bbm-step-03-from: #4a4e7a;
  --bbm-step-03-to: #3b3f66;
  --bbm-step-03-ring: #e8eaf5;
  --bbm-step-03-edge: #35395c;

  --bbm-step-ink: #ffffff;
}

/* ---------- Process rail and generic step grids ------------------------- */
.steps .step:nth-child(1) .step__num,
.guide-phase:nth-child(1) .step__num {
  border-color: var(--bbm-step-01-ring);
  background: linear-gradient(155deg, var(--bbm-step-01-from), var(--bbm-step-01-to));
  color: var(--bbm-step-ink);
  box-shadow:
    0 0 0 1px var(--bbm-step-01-edge),
    0 12px 22px -14px rgba(12, 34, 56, .55);
}

.steps .step:nth-child(2) .step__num,
.guide-phase:nth-child(2) .step__num {
  border-color: var(--bbm-step-02-ring);
  background: linear-gradient(155deg, var(--bbm-step-02-from), var(--bbm-step-02-to));
  color: var(--bbm-step-ink);
  box-shadow:
    0 0 0 1px var(--bbm-step-02-edge),
    0 12px 22px -14px rgba(80, 36, 16, .50);
}

.steps .step:nth-child(3) .step__num,
.guide-phase:nth-child(3) .step__num {
  border-color: var(--bbm-step-03-ring);
  background: linear-gradient(155deg, var(--bbm-step-03-from), var(--bbm-step-03-to));
  color: var(--bbm-step-ink);
  box-shadow:
    0 0 0 1px var(--bbm-step-03-edge),
    0 12px 22px -14px rgba(40, 30, 64, .48);
}

/* The home rail sets a 3px ring; keep it and let the shared colours above
   supply the fill. */
.steps--side .step__num {
  border-width: 3px;
}

/* Guide phase heads are flex rows; stop the marker shrinking into an oval on
   narrow screens. */
.guide-phase__head .step__num {
  flex: 0 0 auto;
}

/* Guide-phase accent rules follow the same three hues. */
.guide-phase:nth-child(1)::before { background: var(--bbm-step-01-from); }
.guide-phase:nth-child(2)::before { background: var(--bbm-step-02-from); }
.guide-phase:nth-child(3)::before { background: var(--bbm-step-03-from); }

/* The phone layout reduced the home markers to 40px. Restore the 44px
   minimum without changing the desktop 56px / guide 46px sizes. */
.steps .step .step__num {
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 760px) {
  /* Give the restored 44px marker a track that fits it. Higher specificity
     than the home-only sheet, which is injected after this file. */
  .page-home .steps--side .step:nth-child(n) {
    grid-template-columns: 44px minmax(0, 1fr);
  }
}

/* Forced colours: the system palette owns fill and ink. Keep a visible
   boundary and full target size; do not force author colours through. */
@media (forced-colors: active) {
  .step__num {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
}

/* No motion is introduced here, but keep the marker static when the visitor
   asks for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .step__num {
    transition: none;
    animation: none;
  }
}