/* M1 Traffic — responsive, mobile-first stylesheet (2026 rebuild)
   Replaces: styles/main.css, mainslider, clock.css, cookiecuttr.css cruft.
   Single responsive column. No framework, no jQuery. */

:root{
  --brand:#0058a8;        /* UK motorway-sign blue */
  --brand-dark:#003f7d;
  --accent:#ffd200;       /* sign yellow */
  --ink:#1a1a1a;
  --muted:#5b6670;
  --line:#e2e6e9;
  --bg:#ffffff;
  --bg-soft:#f5f7f8;
  --maxw:1000px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg-soft);
}
img{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* ---------- Header ---------- */
.site-header{background:var(--bg);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px}
.site-header img.logo{height:44px;width:auto}
.tagline{color:var(--muted);font-size:.9rem;margin:0}
@media (max-width:520px){.tagline{display:none}}

/* ---------- Nav (sticky top menu) ---------- */
.site-nav{background:var(--brand);position:sticky;top:0;z-index:200;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.site-nav ul{max-width:var(--maxw);margin:0 auto;padding:0 8px;list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end}
.site-nav li{margin:0}
.site-nav a{display:block;color:#fff;padding:13px 18px;font-weight:600;font-size:1rem;text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{background:var(--brand-dark);text-decoration:none}
.nav-short{display:none}
@media (max-width:560px){
  /* one line, short labels, evenly spread (fits 5 items) */
  .nav-full{display:none}
  .nav-short{display:inline}
  .site-nav ul{padding:0;flex-wrap:nowrap;justify-content:space-between}
  .site-nav a{padding:11px 6px;font-size:.8rem;white-space:nowrap}
}
@media (max-width:360px){
  .site-nav a{padding:10px 4px;font-size:.72rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:#00305c}
.hero picture{display:block}
/* Predictable crop at every width: aspect-ratio sets the shape, object-fit does the cropping,
   and the vh cap stops the hero eating the screen on short/landscape viewports. */
.hero img{
  display:block;width:100%;
  aspect-ratio:16/5;          /* desktop shape */
  height:auto;
  max-height:min(300px,42vh); /* never more than ~2/5 of the screen */
  object-fit:cover;
  /* CHANGED 29/08/2026: was center bottom, to protect a plate baked into the photo.
     The hero no longer carries a baked plate - it is overlaid in CSS below, the M25/M4
     pattern. Nothing to protect at the bottom any more, so centre-anchor. */
  object-position:center center;
}
/* Phones (portrait): slightly deeper shape so the image still reads at narrow widths */
@media (max-width:520px){
  .hero img{aspect-ratio:16/7;max-height:min(230px,32vh)}
}
/* SHORT viewports — phone landscape is the worst case: vertical space is scarce,
   so cap hard and let the ticker + content stay above the fold. */
@media (max-height:600px) and (orientation:landscape){
  .hero img{aspect-ratio:auto;height:34vh;max-height:34vh}
}
/* LAPTOP LANDSCAPE — wide but short (typical 1366x768 / 1920x1080 laptop lid, and the
   Surface Book in landscape). 42vh is still too much here: hero + nav + status strip ate
   most of the first screen. Cap tighter so real content appears without scrolling. */
@media (min-width:1000px) and (max-height:1000px){
  .hero img{max-height:min(260px,30vh)}
}
@media (min-width:1000px) and (max-height:800px){
  .hero img{max-height:min(215px,27vh)}
}
.hero .hero-cap{position:absolute;left:0;bottom:0;right:0;padding:14px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));color:#fff}
.hero .hero-cap h1,.hero .hero-cap .hero-cap__t{margin:0;font-size:1.5rem;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* Caption text lines up with the body copy below instead of hugging the window edge */
.hero .hero-cap>*{max-width:var(--maxw);margin-left:auto;margin-right:auto}
/* TOP-RIGHT caption variant (M5 pattern): use when the brand plate sits bottom-left in the
   image, so caption and plate balance diagonally instead of fighting for one corner.
   Gradient runs downward because the top of these crops is usually sky/pale fields. */
.hero .hero-cap--tr{position:absolute;top:0;left:0;right:0;bottom:auto;padding:16px 20px;
  background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));color:#fff}
.hero .hero-cap--tr>*{max-width:var(--maxw);margin:0 auto;text-align:right}
.hero .hero-cap--tr h1,.hero .hero-cap--tr .hero-cap__t{margin:0;font-size:1.5rem;text-shadow:0 1px 4px rgba(0,0,0,.7)}
@media (max-width:520px){.hero .hero-cap h1,.hero .hero-cap--tr h1,.hero .hero-cap--tr .hero-cap__t{font-size:1.15rem}}
/* Landscape phones: tighten the caption so it doesn't crowd the shortened hero.
   MUST come after the base .hero-cap rules above or the cascade overrides it. */
@media (max-height:600px) and (orientation:landscape){
  .hero .hero-cap,.hero .hero-cap--tr{padding:8px 16px}
  .hero .hero-cap h1,.hero .hero-cap--tr h1,.hero .hero-cap--tr .hero-cap__t{font-size:1.1rem}
}

/* ---------- Main ---------- */
main{background:var(--bg)}
main .wrap{padding-top:22px;padding-bottom:32px}
main h1{font-size:1.7rem;line-height:1.25;margin:.2em 0 .5em}
main h2{font-size:1.3rem;margin:1.4em 0 .4em}
main h3{font-size:1.12rem;margin:1.2em 0 .3em}
main h4{font-size:1rem;margin:1.1em 0 .2em}
main p{margin:0 0 1em}
main ul{margin:0 0 1em;padding-left:1.3em}
main li{margin:.2em 0}
/* body images: give them breathing room so text/headings never touch them */
main img{margin:0 14px 12px 0;vertical-align:middle}
main h1 img,main h2 img,main h3 img{vertical-align:middle}
/* respect intended inline floats (e.g. the UKTN image) — float + padding + size cap; stack on mobile */
main img[style*="float: right"],main img[style*="float:right"]{float:right;margin:4px 0 12px 18px;max-width:45%;height:auto}
main img[style*="float: left"],main img[style*="float:left"]{float:left;margin:4px 18px 12px 0;max-width:45%;height:auto}
@media (max-width:520px){main img[style*="float"]{float:none !important;display:block;margin:0 auto 14px;max-width:100%}}
main iframe{max-width:100%}
.m1-sign{width:70px;height:35px}

/* Related box (folded-in former sidebar) */
.related{margin-top:28px;padding:16px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px}
.related h3:first-child{margin-top:0}

/* ---------- Ad slots (TEST placeholders — fixed, tidy, never dominate) ---------- */
.ad-slot{margin:18px auto;height:90px;max-width:728px;
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#fafafa,#fafafa 10px,#f2f2f2 10px,#f2f2f2 20px);
  border:1px dashed #cfd6da;border-radius:8px}
.ad-slot__label{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:#9aa4ac}
/* when real AdSense goes live: collapse any unfilled unit so no empty gap */
ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important}

/* ---------- News (RTN engine injects between markers) ---------- */
#column_l_trafficnews{margin:14px 0}
#column_l_trafficnews > div > *{margin-left:auto !important;margin-right:auto !important}
.warnbar{display:block;max-width:100%;height:auto;margin:8px auto}

/* ---------- Footer ---------- */
.site-footer{background:var(--brand-dark);color:#cfe0f2;font-size:.92rem;position:relative;overflow:hidden}
.site-footer .wrap{padding-top:24px;padding-bottom:28px;text-align:center;position:relative;z-index:2}
/* Flashing road cones, bottom corners. Decorative only — empty alt so screen readers skip them,
   and hidden on narrow screens where they'd crowd the footer links. */
.site-footer .cone{position:absolute;bottom:8px;z-index:1;pointer-events:none;display:block;
  height:78px;width:auto}
.site-footer .cone--l{left:14px}
.site-footer .cone--r{right:14px}
@media (max-width:820px){.site-footer .cone{bottom:6px;height:58px}}
/* Hidden on narrow screens only, where they would crowd the footer links.
   NOTE: do NOT hide these for prefers-reduced-motion - that setting is common on Windows
   (Accessibility > Visual effects > Animation effects OFF) and it made the cones vanish on a
   normal desktop. The <picture> element serves a STATIC frame instead, which is the polite fix. */
@media (max-width:560px){.site-footer .cone{display:none}}
.site-footer a{color:#fff}
.site-footer nav{margin-bottom:12px;line-height:2}
.site-footer .social img{height:36px;width:auto;margin-right:6px;vertical-align:middle}
.site-footer .fine{color:#9db8d6;font-size:.85rem;margin-top:10px}

/* ---------- Vertical junction map (STANDARD across all CAL sites) ---------- */
/* Renamed from .m1map to .jmap 08/08/2026 so it's motorway-agnostic (M1/M5/M6/M60/M61...). */
.jmap{max-width:640px;margin:20px auto;font-size:.98rem}
.jmap__end{text-align:center;font-weight:600;margin:0;padding:12px;border-radius:8px;
  background:var(--brand);color:#fff}
.jmap__end--bottom{margin-top:0}
.jmap__dir{display:inline-block;font-weight:800;letter-spacing:.06em;margin-right:8px}
.jmap__list{list-style:none;margin:0;padding:0 0 0 4px;position:relative}
/* the motorway line */
.jmap__list::before{content:"";position:absolute;left:31px;top:0;bottom:0;width:6px;
  background:var(--brand);border-radius:3px}
.jmap__jn{position:relative;display:flex;align-items:center;gap:12px;
  padding:9px 0 9px 0;min-height:44px}
.jmap__badge{position:relative;z-index:1;flex:0 0 auto;width:46px;height:32px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;font-weight:700;font-size:.82rem;
  border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 2px var(--brand)}
.jmap__info{display:flex;flex-direction:column;line-height:1.3}
.jmap__road{font-weight:700;color:var(--brand-dark)}
.jmap__place{color:var(--muted);font-size:.9rem}
.jmap__note{margin:14px 0 0;font-size:.85rem;color:var(--muted);text-align:center}
/* --- Connecting motorway (interchange) rows: GREEN badge, stand out as an exit onto another site --- */
.jmap__jn--connect .jmap__badge{background:#00703c;box-shadow:0 0 0 2px #00703c}
.jmap__jn--connect .jmap__road{color:#00703c}
.jmap__jn--connect .jmap__road a{color:#00703c;text-decoration:underline}
/* --- Service-area rows: AMBER badge + fuel/food symbol, slotted BETWEEN junctions --- */
.jmap__svc{position:relative;display:flex;align-items:center;gap:12px;
  padding:6px 0;min-height:36px}
.jmap__svc .jmap__badge{background:#f47738;box-shadow:0 0 0 2px #f47738;
  width:46px;font-size:1.1rem}
.jmap__svc .jmap__road{color:#b8500f;font-weight:700}
.jmap__svc .jmap__place{color:var(--muted);font-size:.85rem}
/* Legend under the map */
.jmap__legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin:14px 0 0;font-size:.85rem;color:var(--muted)}
.jmap__legend span{display:inline-flex;align-items:center;gap:6px}
.jmap__key{width:16px;height:16px;border-radius:4px;display:inline-block}
.jmap__key--jn{background:var(--brand)}
.jmap__key--connect{background:#00703c}
.jmap__key--svc{background:#f47738}
/* ---------- Scrolling news ticker (blue band under hero) ---------- */
.ticker{background:var(--brand);color:#fff;overflow:hidden;white-space:nowrap;
  border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}
.ticker__track{display:inline-flex;will-change:transform;
  animation:ticker 28s linear infinite}
.ticker__item{padding:10px 45px;font-weight:600;font-size:.98rem;line-height:1.3}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* page-title M1 sign (sits inline next to the h1) */
.pagesign{height:40px;width:auto;vertical-align:middle;margin:0 12px 4px 0 !important;float:none !important;display:inline !important}
/* footer FREE line */
.site-footer .freeline{font-weight:700;color:#fff;margin:0 0 8px}

/* ---------- Ad zones (M5 placed-unit experiment) ---------- */
.adzone{margin:22px 0;min-height:0;text-align:center}
.adzone:empty{display:none}                    /* no gap before the units are pasted in */
.adzone--top{margin-top:8px}
ins.adsbygoogle[data-ad-status="unfilled"]{display:none}

/* ---------- Services list (index page) ---------- */
.svc-list{list-style:none;margin:18px 0 8px;padding:0;border-top:1px solid var(--line)}
.svc-list__item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  padding:11px 4px;border-bottom:1px solid var(--line)}
.svc-list__item a{font-size:1.05rem}
.svc-list__meta{color:var(--muted);font-size:.9rem}
.svc-nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin:.4em 0}
.svc-nav a{font-weight:600}

/* ---------- Button ---------- */
.btn{display:block;background:var(--brand);color:#fff;font-weight:700;text-align:center;
  padding:14px 18px;border-radius:6px;text-decoration:none;text-transform:uppercase;
  letter-spacing:.02em;font-size:.98rem}
.btn:hover{background:var(--brand-dark);text-decoration:none}

/* ---------- Live status strip (written by CAL-RTN into the marker) ---------- */
.cs{background:var(--brand);border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}
.cs__inner{max-width:var(--maxw);margin:0 auto;padding:0 8px;display:flex;align-items:stretch;gap:1px}
.cs__item{flex:1 1 0;display:flex;align-items:center;gap:12px;padding:11px 14px;min-width:0;
  color:#fff;text-decoration:none}
.cs__item+.cs__item{box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}
.cs__item:hover{background:rgba(0,0,0,.18);text-decoration:none}
.cs__num{font-size:2.1rem;line-height:1;font-weight:800;flex:none;letter-spacing:-.02em}
.cs__lab{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  opacity:.9;line-height:1.3}
.cs__sub{display:block;font-size:.88rem;line-height:1.3;opacity:.95}
.cs--bad .cs__num{color:#ff8f8f}
.cs--warn .cs__num{color:var(--accent)}
.cs--ok .cs__num,.cs--ok .cs__tick{color:#7ee2a8}
.cs__tick{font-size:1.9rem;line-height:1;flex:none}
.cs__time{max-width:var(--maxw);margin:0 auto;padding:0 22px 8px;font-size:.72rem;
  color:rgba(255,255,255,.75);text-align:center}
@media (max-width:760px){
  .cs__inner{flex-direction:column;gap:0;padding:0}
  .cs__item{padding:9px 14px}
  .cs__item+.cs__item{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
  .cs__num{font-size:1.8rem}
  .cs__time{padding:2px 14px 8px}
}

/* Interchange rows read "M6 MOTORWAY" — bigger, greener, harder to miss. They break the
   junction rail up visually AND give a stronger, more descriptive anchor for the cross-site links. */
.jmap__jn--connect .jmap__road{font-size:1.12rem;font-weight:800;letter-spacing:.02em;color:#00703c}
.jmap__jn--connect .jmap__road a{color:#00703c;text-decoration:underline;text-underline-offset:3px}
.jmap__jn--connect .jmap__road a:hover{color:#00512b}
.jmap__jn--connect{background:#f2f9f4;border-radius:6px}

/* Count-free state: shown until CAL-RTN can supply real counts. Same three doorways,
   same look, no numbers — because a placeholder number would be a fabricated number.
   A chevron replaces the count so the panel still has a visual anchor on the left. */
.cs--none{gap:10px}
.cs--none .cs__wrap{min-width:0}
.cs--none:before{content:"\203A";font-size:1.9rem;line-height:1;font-weight:800;
  color:var(--accent);flex:none;opacity:.9}
.cs--none .cs__lab{font-size:.72rem}
.cs--none .cs__sub{font-size:.92rem}

/* ---------- Quick-links variant of the status band ----------
   Used until CAL-RTN can write real counts into the RTNSTATUSSTRIP marker.
   Deliberately reads as NAVIGATION, not as a status readout: icons, fuller
   labels, a descriptive second line. An empty-looking status bar reads as
   broken; a quick-links bar is useful whether or not there is news today.
   When the engine supplies counts, .cs--links is dropped and the count-led
   version (large number + label) takes over with no other change. */
.cs--links .cs__item{gap:13px;padding:12px 16px;align-items:center}
.cs--links .cs__ico{width:26px;height:26px;flex:none;fill:var(--accent);opacity:.95}
.cs--links .cs__lab{font-size:.82rem;letter-spacing:.05em;margin-bottom:1px}
.cs--links .cs__sub{font-size:.9rem;opacity:.92}
.cs--links .cs__item:hover{background:rgba(0,0,0,.2)}
.cs--links .cs__item:hover .cs__ico{opacity:1}
@media (max-width:760px){
  .cs--links .cs__item{padding:11px 14px}
  .cs--links .cs__ico{width:22px;height:22px}
}


/* ############################################################################
   BRAND PLATE OVERLAID IN CSS - migrated to the M25/M4 pattern, 29/08/2026.
   JC's own note in m25traffic's stylesheet: "the brand plate overlaid in CSS,
   never baked into the photo." The M5 plate is 640x116, exactly the shape that
   block was written for, so the sizing is used as-is.
   ############################################################################ */
.hero::after{
  content:""; position:absolute; z-index:2; pointer-events:none;
  background-repeat:no-repeat; background-size:contain;
  top:10px; right:14px;
  width:min(30%,260px);
  aspect-ratio:640/116;
  background-image:url(/images/m5-plate.webp);
  background-position:right top;
}
.hero .hero-cap{z-index:3}
@media (max-width:520px){.hero::after{width:min(46%,190px); top:7px; right:8px}}
@media (max-width:360px){.hero::after{width:min(52%,160px)}}


/* PORTED VERBATIM FROM m25traffic.co.uk/assets/site.css, 29/08/2026,
   including JC's measured note on why the badge sits OUTSIDE the heading. */
/* ============================================================================
   ROAD BADGE — the blue motorway-sign block that sits in front of a page heading.
   JC, 23/08/2026: "the blue rectangle is a quick visual motorway-sign type image
   ... immediately tunes to the visitor's brain 'yes it looks like this is a
   motorway site' - and hence reduces bounce rate."
   Same argument as the hero: DENSITY CARRIES SCOPE. Judged on what it signals in
   one second, not on legibility.

   ⭐ TEXT, NOT AN IMAGE. It renders identically at any size, needs no file, costs
   no request, and the road number comes from the markup - so one rule serves every
   site in the estate and there is no per-road GIF to forget to make.
   ⚠ RECONSTRUCTED FROM A SCREENSHOT OF M5, not copied from M5's stylesheet. The
   blue is sampled exactly (#0058a8, which is already --brand). If M5's own CSS is
   to hand, diff it against this and take M5's numbers - matching the estate matters
   more than my reconstruction being close.
   ============================================================================ */
.roadbadge{
  display:inline-block; vertical-align:middle;
  background:var(--brand); color:#fff;
  font-weight:800; font-size:.95em; line-height:1;
  padding:.34em .62em; margin:0 .55em .12em 0;
  border:2px solid #fff; border-radius:7px;
  box-shadow:0 0 0 2px var(--brand);   /* blue outside the white keyline, as on a real sign */
  letter-spacing:.01em;
}
h1 .roadbadge,h2 .roadbadge{font-size:.8em}
/* ⭐ THE BADGE SITS BESIDE THE HEADING, NOT INSIDE IT (23/08/2026).
   Measured, not assumed - this is what a crawler reads as the heading text:
     GIF inside the heading   -> "M4 motorway sign M4 Roadworks"   (alt text pollutes it)
     badge inside the heading -> "M4 M4 Roadworks"                 (road number twice)
     badge OUTSIDE it         -> "M4 Roadworks"                    (clean)
   Identical to the eye, and the heading says exactly what it means. The badge is
   decoration and now sits in the markup as decoration. */
.pagehead{display:flex;align-items:center;gap:.55em;flex-wrap:nowrap}
.pagehead h2{margin:.2em 0 .5em}
.pagehead .roadbadge{margin:0;flex:none;font-size:1rem}
@media (max-width:400px){.pagehead .roadbadge{font-size:.85rem}}


/* ############################################################################
   PORTED FROM M6 29/08/2026 - dropdown sub-navigation, WHOLE SECTION VERBATIM.
   First attempt extracted the rules WITHOUT their @media wrappers, which would
   have applied the phone-only "display:none !important" at every width - the
   dropdown would never have opened on desktop. M6's own comment below records
   the same failure happening once before. Taken as one contiguous block this time.
   ############################################################################ */

/* ---------- Dropdown sub-navigation ----------
   PORTED VERBATIM FROM m25traffic.co.uk/assets/site.css, 29/08/2026.
   Includes JC's 15/08 phone rule: submenus are NOT rendered on phones,
   so the nav stays one line and the hero is not pushed down. */
.site-nav li.has-sub{position:relative}
.site-nav li.has-sub>a::after{content:"";display:inline-block;margin-left:7px;
  border:5px solid transparent;border-top-color:currentColor;vertical-align:2px}
.site-nav .subnav{position:absolute;top:100%;left:0;min-width:230px;margin:0;padding:6px 0;
  list-style:none;display:none;flex-direction:column;background:var(--brand-dark);
  box-shadow:0 6px 16px rgba(0,0,0,.28);border-radius:0 0 6px 6px;z-index:250}
.site-nav li.has-sub:hover>.subnav,
.site-nav li.has-sub:focus-within>.subnav{display:flex}
.site-nav .subnav a{padding:11px 18px;font-weight:500;white-space:nowrap}
.site-nav .subnav a:hover,.site-nav .subnav a:focus{background:#00305c;text-decoration:none}

/* MOBILE: no hover, no floating panel. The group expands in flow so it
   is tappable and scannable - NOT one long endless dropdown. */
@media (max-width:760px){
  .site-nav ul{justify-content:center}
  .site-nav li.has-sub{position:static}
  .site-nav .subnav{position:static;min-width:0;display:flex;flex-direction:row;
    flex-wrap:wrap;justify-content:center;background:var(--brand-dark);
    box-shadow:none;border-radius:0;width:100%;padding:2px 0}
  .site-nav .subnav a{padding:10px 12px;font-size:.92rem}
  .site-nav li.has-sub>a::after{display:none}
}

/* ============================================================================
   MOBILE NAV - RECLAIM THE FIRST SCREEN (15/08/2026, JC: "menu on mobile
   takes up too much space")
   ROOT CAUSE: the <=760px block above sets .subnav{display:flex} with NO
   hover/focus condition, so on a phone every sub-link is PERMANENTLY EXPANDED
   inside the nav - a large share of the first screen, above the hero, before
   the visitor sees a word of traffic news.
   FIX: on phones the submenu is not rendered at all. "Services" and "Maps" stay
   normal links to their hub pages, which list everything - and the footer lists
   them too. Nothing becomes unreachable; the nav stops shouting.
   ⭐ This is the 10-second window: on mobile (~77% of revenue) the nav was
   spending it on itself.
   ============================================================================ */
@media (max-width:760px){
  .site-nav .subnav{display:none !important}
  .site-nav li.has-sub:hover>.subnav,
  .site-nav li.has-sub:focus-within>.subnav{display:none !important}
  /* the caret implied a dropdown that no longer opens here */
  .site-nav li.has-sub>a::after{display:none}
  /* tighter bar: less chrome, same tap target (>=44px high) */
  .site-nav a{padding:12px 10px}
}


/* ---------- NAV FIT (29/08/2026) ----------
   The mobile bar was authored for 5 items ("fits 5 items"). It now carries 6.
   Two changes, both additive:
   1. 1px less horizontal padding buys 12px - the bar was 7px over at 390px.
   2. overflow-x on the UL means the NAV may scroll, but the PAGE never does,
      however many items are added later. Measured, not assumed. */
@media (max-width:560px){
  .site-nav ul{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .site-nav ul::-webkit-scrollbar{display:none}
  .site-nav a{padding:11px 5px}
}


/* ############################################################################
   PORTED FROM M6 29/08/2026 - the live news ticker (.nt), WHOLE REGION VERBATIM.
   An earlier port extracted rules WITHOUT their @media wrappers, so phone-only
   rules applied at every width (the info band stacked instead of sitting three
   across). Taken as one contiguous block this time.
   ############################################################################ */
/* ============================================================================
   LIVE NEWS TICKER (.nt) — ABOVE THE MENU   (15/08/2026, JC spec)
   A scrolling headline strip between the site header and the main nav: three
   latest incidents, three active roadworks, three planned. Darker blue than the
   nav so it reads as a separate live band rather than part of the menu.
   ⚠ Every entry carries its REPORTED TIME IN FRONT. An undated headline implies
   "now", which we cannot know.
   ⚠ Renders nothing at all when there is no news — see NewsTicker.cs.
   ============================================================================ */
.nt{
  background:#00305c;               /* a shade darker than --brand (#0058a8) */
  color:#fff;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:2px solid var(--accent);
}
.nt__track{display:inline-flex;will-change:transform;animation:ntscroll 70s linear infinite}
.nt:hover .nt__track,
.nt:focus-within .nt__track{animation-play-state:paused}
@keyframes ntscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.nt__item{display:inline-flex;align-items:baseline;gap:.5rem;
  padding:8px 26px;font-size:.9rem;line-height:1.35;
  border-right:1px solid rgba(255,255,255,.18)}

/* ⭐ 17/08/2026 (JC): TWO PILLS, THEN THE WORDS, THEN THE TIME.
   The strip is narrow. One long tag ("LIVE Roadworks") ate the width the summary
   needs, so LIVE and the CATEGORY are now separate pills:
     [ LIVE ]  [ Incident ]  summary text …  14:32
   LIVE is one fixed red so the eye locks onto it without reading; the category
   pill carries its own colour, matching the cards and section headers.
   ⚠ Two different reds sitting side by side would read as one blob, so the
   INCIDENT pill is inverted (white pill, red text) against the solid red LIVE. */
.nt__live{flex:0 0 auto;font-size:.7rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:3px;
  background:#d62828;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}

/* Category pill: colour carries the state, exactly as on the map template. */
.nt__tag{flex:0 0 auto;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:2px 7px;border-radius:3px;color:#fff}
.nt__item--inc .nt__tag{background:#fff;color:#a51f1f}  /* incident  — inverted red */
.nt__item--act .nt__tag{background:#f0a500;color:#241a05} /* roadworks — amber      */
.nt__item--pln .nt__tag{background:#2d6ca8;color:#fff}  /* planned   — blue         */

/* The reported time — now the LAST thing in every entry. It is what proves the
   headline is current, so it stays prominent, but it no longer delays the words. */
.nt__time{font-weight:700;font-variant-numeric:tabular-nums;color:#ffd54a;flex:0 0 auto}
.nt__time::before{content:"·";color:rgba(255,255,255,.45);margin-right:.5rem}

.nt__txt{color:#fff;font-weight:500}
.nt__item--all{border-right:0}
.nt__item--all a{color:#ffd54a;font-weight:700;text-decoration:underline}

/* Mobile: mobile is ~77% of revenue, so the strip must not shout. Slightly
   smaller, tighter, and it still scrolls. */
@media (max-width:560px){
  .nt__item{padding:7px 16px;font-size:.82rem;gap:.4rem}
  .nt__tag,.nt__live{font-size:.62rem;padding:1px 5px}
}
/* Anyone who has asked for less motion gets a static, readable strip instead of


/* ############################################################################
   PORTED FROM M6 29/08/2026 - the column footer (.ft), WHOLE REGION VERBATIM.
   An earlier port extracted rules WITHOUT their @media wrappers, so phone-only
   rules applied at every width (the info band stacked instead of sitting three
   across). Taken as one contiguous block this time.
   ############################################################################ */
/* ============================================================================
   MAIN FOOTER — CAL BRAND FOOTER   (approved 17/08/2026, JC)
   ----------------------------------------------------------------------------
   Category links in VERTICAL COLUMNS, a road cone each side, the network
   statement and an auto-updating copyright year.
   ⭐ WHY A GRID WITH auto-fit: TNE is a HUB heading for hundreds of pages.
      Adding a fifth section later needs NO CSS CHANGE - it just becomes another
      column, and collapses to one-per-row on a phone.
   ⭐ align-items:start so unequal-length columns line up on their HEADINGS
      rather than floating to their middles.
   ⚠ This is BRAND design, not per-site design (durable rule, 15/08). When it
     rolls to M5/M6/M60 and then the earners, only the link lists change.
   ============================================================================ */
.ft{background:#00305c;color:#cfe0f2;position:relative;overflow:hidden;
    border-top:3px solid var(--accent)}
.ft__wrap{max-width:var(--maxw);margin:0 auto;padding:26px 20px 22px;position:relative;z-index:2}

.ft__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:22px 26px;text-align:left;align-items:start}
.ft__h{font-size:.72rem;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:#ffd54a;margin:0 0 9px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.22)}
.ft__cols ul{list-style:none;margin:0;padding:0}
.ft__cols li{margin:0 0 6px;line-height:1.45}
.ft__cols a{color:#fff;text-decoration:none;font-size:.9rem;
  display:inline-block;padding:2px 0;border-bottom:1px solid transparent}
.ft__cols a:hover,.ft__cols a:focus{border-bottom-color:#ffd54a;text-decoration:none}

/* STATEMENT + COPYRIGHT - centred, and deliberately NOT LINKS.
   ⭐ JC's rule of 15/08: "statement in the site-wide footer (editorial, not
   linking); the LIST OF SITES on ONE page only." An identical cross-domain link
   in the footer of all 31 pages reads as a link scheme. The hub is linked from
   About Us instead. */
.ft__rule{border:0;border-top:1px solid rgba(255,255,255,.22);margin:20px 0 14px}
.ft__free{text-align:center;margin:0 0 2px;font-size:.85rem;color:#9db8d6}
.ft__stmt{text-align:center;margin:0 0 6px;font-size:.95rem;color:#fff;font-weight:600}
.ft__copy{text-align:center;margin:0;font-size:.85rem;color:#9db8d6}
.ft__nh{text-align:center;margin:8px 0 0;font-size:.8rem;color:#9db8d6}
.ft a{color:#fff}

/* CONES - bottom corners. Hidden under 700px so they never crowd the links.
   ⚠ Do NOT gate these on prefers-reduced-motion: the SVG already handles it
   correctly by rendering the beacon PERMANENTLY LIT rather than hiding it. */
.ft .cone{position:absolute;bottom:8px;z-index:1;pointer-events:none;display:block;
  height:104px;width:auto}
.ft .cone--l{left:16px}
.ft .cone--r{right:16px}
@media (max-width:1080px){.ft .cone{height:78px}}
@media (max-width:820px){.ft__wrap{padding-left:16px;padding-right:16px}}
@media (max-width:700px){.ft .cone{display:none}}


/* PORTED VERBATIM FROM m25traffic.co.uk/assets/site.css, 29/08/2026 -
   the live status band. Markup without its stylesheet renders as a run-on

/* v2.3.4 (10/09/2026): ported VERBATIM from m6traffic.co.uk/assets/site.css */
/* Site-news strip — RELOCATED 15/08/2026 (JC) to sit between the body and the
   footer, and recoloured to match the live news ticker. Two scrolling strips in
   one eyeful competed; separated, each has its own job:
     · .nt   (under the hero) = LIVE traffic headlines
     · .ticker (above footer) = OUR site messages
   Same darker blue as .nt, keeping the yellow rules top and bottom. */
.ticker{background:#00305c;
  border-top:3px solid var(--accent);border-bottom:3px solid var(--accent)}


/* v2.3.4 (10/09/2026): ported VERBATIM from m6traffic.co.uk/assets/site.css */
/* Sister-site links in the site-message strip (JC, 21/08/2026). */
.ticker__item a{color:#ffd54a;font-weight:700;text-decoration:underline}
.ticker__item a:hover{color:#fff}

/* ---------- NAV SPACING (v2.3.4, 10/09/2026) ----------
   JC: "The top menus can be moved a bit closer together but enough gap to see they are separate".
   On phones the items are spread EVENLY (the dropdown block's justify-content:center put all the spare
   space at the two ends, and clipped both end items when the bar was full), with a little less padding,
   so the space shows BETWEEN items. Measured on all eight sites at 360/375/390/412: every item visible,
   page never wider than the screen. Appended LAST so it wins over the earlier phone rules. */
@media (max-width:420px){
  .site-nav ul{justify-content:space-between}
  .site-nav a{padding:11px 3px;font-size:.76rem}
}
@media (max-width:370px){
  .site-nav a{padding:11px 2px;font-size:.72rem}
}

/* v2.3.4 (10/09/2026): ported VERBATIM from m3traffic.co.uk/assets/site.css - the licence link in the footer */
.ft__nh a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(157,184,214,.35)}
.ft__nh a:hover{color:#fff;border-bottom-color:#fff}


/* ---------- v2.5.0 FIX, 14/09/2026 ----------
   JC: "on most sites if there is a large top menu the far right menu gets
   push of the page (some of the sub-menus)."  The panel is absolutely
   positioned at left:0 of its parent, so the RIGHT-MOST parent opens off the
   right edge of the viewport.  Anchor the last one to its own right edge.
   Desktop only: below 761px the panel is not rendered at all, so the rule
   would have nothing to act on. */
@media (min-width:761px){
  .site-nav li.has-sub:last-child>.subnav{left:auto;right:0}

  /* AND THE SECOND HALF OF THE SAME COMPLAINT: "it does not sit neatly on one
     line".  MEASURED on M6 at 1280px - seven items totalling 1,004px inside a
     1,000px bar.  FOUR PIXELS, and the whole "Traffic Statistics" item drops
     to a second row for it.  Trimming 3px a side off the top-level links
     returns 42px across seven items, which clears it with room to spare and
     leaves every other site's bar looking the same.
     ⚠ Top-level only (>ul>li>a): the sub-menu panel keeps its 11px/18px, and
     the phone bar below 761px is untouched - tap targets stay >=44px. */
  .site-nav>ul>li>a{padding-left:15px;padding-right:15px}

  /* ⭐ ONE ALIGNMENT ACROSS THE ESTATE (JC, 14/09/2026): "its our brand and
     consistency show attention to detail... it is better and easier to align
     the top menu centre same as mobile... as the items in the top menu is
     growing so central aligned might be better anyway."
     The bar was right-aligned on desktop and centred on phones - two rules for
     one thing, and a reader moving between our sites saw the menu move.
     CENTRE, everywhere, at every width. */
  .site-nav>ul{justify-content:center}
}


/* ---------- v2.5.0 FIX2b, 14/09/2026 — THE MIDDLE WIDTHS ----------
   JC, 02:45: "the M6 website, the main menu, it now goes on to two lines."
   MEASURED, not guessed. Item widths against the bar, all eight sites:
     M6 877px (wrapped below 895)  ·  M25 893 (911)  ·  M60 891 (907)
     TNE 846 (726)  ·  M5 765 (679)  ·  M1/M4 731 (671)  ·  M3 904 (362)
   Three sites wrapped in the 761–911px band — a window that is not maximised,
   or a 1280 screen at 150% Windows scaling (= 853 CSS px). Shortening one
   label moves the cliff; it does not remove it, and the next label we add puts
   it back. So the bar gets a size down in that band instead.
   ⚠ Top-level only. The dropdown panel and the phone bar below 761px are
   untouched, so tap targets stay >= 44px. */
@media (min-width:900px) and (max-width:1023px){
  .site-nav>ul>li>a{padding-left:10px;padding-right:10px;font-size:.94rem}
}
@media (min-width:761px) and (max-width:899px){
  .site-nav>ul>li>a{padding-left:7px;padding-right:7px;font-size:.88rem;letter-spacing:-.01em}
}