/* Live London traffic strip (js/traffic-banner.js), full width just under the fixed nav - David, 29 Oct 2026.
   One calm line in the brand colours, not a racing ticker. Hidden until there is something true to show, and takes
   no space when hidden. The script sets its top (the nav's height) and pushes the first section down. */
.xm-traffic {
  position: absolute; left: 0; right: 0; top: 0; z-index: 998;   /* under the nav (1000) and the mobile menu (999) */
  display: flex; align-items: center; gap: 6px 12px; box-sizing: border-box;
  padding: 8px max(24px, calc((100% - 1400px) / 2 + 24px));     /* lines up with the nav's content */
  background: #163456; color: #e8eef6;   /* a step lighter than the nav and hero, so it reads as its own bar */
  font: 500 13px/1.4 var(--font-body, 'DM Sans', sans-serif);
  border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(0, 224, 194, 0.35);
}
.xm-traffic[hidden] { display: none; }
/* Solid teal tab, navy text (Cavell, 29 Oct). */
.xm-traffic-label {
  order: 1; flex: none; background: var(--teal, #00E0C2); color: var(--navy, #0B1F3A); font-weight: 800; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding: 4px 9px; border-radius: 5px;
}
.xm-traffic-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  background: var(--navy, #0B1F3A); vertical-align: 1px;
}
/* One line on wider screens (full text in its tooltip). */
.xm-traffic-msg {
  order: 2; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity .35s ease;
}
.xm-traffic-msg.xm-fade { opacity: 0; }
.xm-traffic-sev { font-weight: 700; margin-right: 6px; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.xm-traffic-sev.sev-severe { background: #fbe3e6; color: #a1122b; }
.xm-traffic-sev.sev-serious { background: #fdf0d5; color: #7a4d00; }
.xm-traffic-road { font-weight: 700; color: #fff; }
.xm-traffic-area { color: #9fb0c5; }
.xm-traffic-ctrl { order: 3; flex: none; display: flex; align-items: center; gap: 6px; }
.xm-traffic-ctrl button {
  border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #e8eef6; border-radius: 6px;
  font: 600 11px/1 var(--font-body, 'DM Sans', sans-serif); padding: 5px 8px; cursor: pointer;
}
.xm-traffic-ctrl button:hover, .xm-traffic-ctrl button:focus-visible { border-color: var(--teal, #00E0C2); color: #fff; }
.xm-traffic-src { order: 4; flex: none; color: #9fb0c5; font-size: 11px; text-decoration: none; white-space: nowrap; }
.xm-traffic-src:hover { color: #fff; text-decoration: underline; }
/* Phones and small tablets: label + buttons, then the message on 2 lines (always 2 lines tall, so the page below
   doesn't jump as messages change), then the TfL credit. */
@media (max-width: 760px) {
  .xm-traffic { flex-wrap: wrap; padding: 7px 16px; }
  .xm-traffic-ctrl { margin-left: auto; }
  .xm-traffic-msg {
    order: 4; flex: 1 1 100%; white-space: normal; min-height: 2.8em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .xm-traffic-src { order: 5; flex-basis: 100%; text-align: right; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .xm-traffic-msg { transition: none; } }