/* 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;
  /* Anchored to the BOTTOM, not the middle: these heroes carry the brand plate baked into the
     bottom-left of the image, and the shorter caps below crop vertically. Centre-anchoring cut
     the plate off on laptop screens. Bottom-anchoring loses sky instead, which costs nothing. */
  object-position:center bottom;
}
/* 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{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{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{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{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}
}
/* ============================================================
   CAL TEMPLATE — NAV DROPDOWN (added for TNE, 15/08/2026)
   CSS-ONLY. No JavaScript — keeps INP clean per the mega-menu brief.
   Opens on :hover (desktop mouse) AND :focus-within (tap + keyboard),
   because :hover alone does not exist on touch — and mobile is ~77%
   of revenue. The parent item is a REAL link (/trafficengland/), so
   there is no javascript:void(0) to typo.
   ============================================================ */
.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}
}

/* Regions map + text-link list side by side (links do the SEO work) */
.regionbox{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;margin:18px 0}
.regionbox img{max-width:100%;height:auto;flex:0 1 320px}
.regionbox ul{flex:1 1 260px;list-style:none;margin:0;padding:0}
.regionbox li{margin:0 0 8px}
.regionbox li a{display:block;padding:10px 14px;background:#eef4fb;border-left:4px solid var(--brand);
  border-radius:3px;font-weight:600;text-decoration:none}
.regionbox li a:hover,.regionbox li a:focus{background:#dbe8f7;text-decoration:none}

/* Footer region row — added 15/08/2026 (JC: show all pages, there is room) */
.site-footer .footregions{font-size:.88rem;opacity:.92;margin-top:-4px}