/* =====================================================================================================
   UK Pump Prices - site.css                                                        SITE v0.7.0
   -----------------------------------------------------------------------------------------------------
   PORTED FROM m1traffic.co.uk/assets/site.css (the current RTN template, supplied by JC 27/08/2026).
   The LAYOUT is M1's, unchanged and deliberately so: header - sticky nav - hero with brand plate -
   live ticker - status band - main - site-message strip - brand footer. It is the estate's brand
   layout, not per-site design, and it has already been debugged on six live sites.

   WHAT CHANGED, AND ONLY THIS:
     1. COLOUR. Motorway-sign blue becomes OIL BLACK. JC, 27/08: "black instead of blue (as oil is
        black that fuel comes from)."
     2. A DROPDOWN on the Fuel Types menu item (M1's nav is flat).
     3. Fuel-specific pieces: the price tiles, the fuel-type pill colours, the pump SVG in place of
        M1's road cones.
   Everything else - the breakpoints, the sticky nav, the hero crop box, the ticker keyframes, the
   footer grid, the alignment overrides - is M1's, comments included, so a fix made on one estate
   template still reads true on the other.

   ⚠ THE COLOUR NOTE THAT MATTERS. M1 gets three tones of blue for free: nav #0058a8, bands #00305c,
   hover #003f7d. Black has no such ladder - "darker than black" does not exist. So the ladder runs
   the other way: the NAV is the LIGHTEST black (graphite), the LIVE BANDS are the deepest, and hover
   goes to true #000. Pure #000 is deliberately NOT used for large areas: at 17px on a phone in
   sunlight it smears. Measured against the plate: the logo's own black is what the nav uses.
   ===================================================================================================== */

:root{
  --brand:#1c2126;        /* OIL BLACK - graphite. The nav, the headings, the plate's own black.   */
  --brand-dark:#000000;   /* hover, and only hover. True black is a state, not a surface.          */
  --band:#0c0e11;         /* the two LIVE bands under the hero - deeper than the nav so they read  */
                          /* as separate strips rather than as more menu.                          */
  --accent:#ffc801;       /* PLATE YELLOW, sampled from the UK Pump Prices logo JC supplied.       */
  --green:#00703c;        /* cheapest / good news                                                  */
  --green-lite:#7ee2a8;
  --red:#c62828;
  --ink:#1a1a1a;
  --muted:#5b6670;
  --line:#e2e6e9;
  --bg:#ffffff;
  --bg-soft:#f5f7f8;
  --maxw:1000px;
  /* From M1: ONE VALUE controls the generated block's column width. */
  --newsw:100%;
}

*{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:underline}
a:hover{text-decoration:underline}
/* ⚠ WHY BODY LINKS ARE UNDERLINED HERE AND NOT ON M1. M1's link colour is #0058a8 - blue against
   near-black text, which carries the "this is a link" signal on colour alone. Our brand colour IS
   the text colour, so colour cannot do that job. Underline does. */

.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}
/* TOP MESSAGE AS TEXT, not an image (JC, 21/08/2026, M1). Anchor text on every page pointing home,
   no layout shift while an image loads, crisp at any zoom. THE IDENTIFYING WORD IS BOLD. */
.site-header .logo-text{color:var(--ink);text-decoration:none;font-size:1.15rem;
  line-height:1.2;white-space:nowrap}
.site-header .logo-text b{color:var(--brand);font-weight:800}
.site-header .logo-text span{color:var(--muted);font-weight:600}
.site-header .logo-text:hover{text-decoration:none}
.site-header .logo-text:hover b{text-decoration:underline}
.tagline{color:var(--muted);font-size:.9rem;margin:0}
@media (max-width:640px){.tagline{display:none}}

/* ---------- Test-site bar ----------
   🛑 A TEST SITE MUST NOT TALK: it says it is a prototype and nothing else. No server, no IP, no
   machine code, no publishing method. Delete this ONE div when the site goes public. */
.testbar{background:#2b2000;color:#ffdf8a;text-align:center;
  padding:6px 14px;font-size:.78rem;border-bottom:2px solid var(--accent)}
.testbar b{color:#fff}

/* ---------- 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}

/* ---------- The Fuel Types dropdown (NEW - M1's nav is flat) ----------
   ⭐ NO JAVASCRIPT. It opens on hover AND on keyboard focus, so a keyboard user reaches it too.
   ⭐ THE PARENT IS A REAL LINK TO A REAL PAGE (/fuel-types/). That is the whole safety net: if the
      dropdown never opens - old browser, touch device, screen reader, a stylesheet that failed to
      load - tapping the menu item still lands somewhere useful that lists all six fuels.
   ⚠ ON A PHONE THE DROPDOWN IS SWITCHED OFF ENTIRELY (see the 640px block below), and the tap goes
      straight to the hub page. A hover menu on a touch screen either needs a double-tap nobody
      knows about, or it swallows the first tap. Mobile is ~77% of revenue - the hub page wins. */
.has-sub{position:relative}
.has-sub>a::after{content:"\25BE";font-size:.7em;margin-left:.45em;vertical-align:.12em;opacity:.85}
.subnav{list-style:none;margin:0;padding:6px 0;position:absolute;right:0;top:100%;min-width:270px;
  background:var(--brand-dark);border-top:3px solid var(--accent);
  box-shadow:0 8px 18px rgba(0,0,0,.34);
  /* Hidden by CLIP, not display:none - the links stay in the accessibility tree and stay focusable,
     which is what makes the keyboard path below work at all. */
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .12s,transform .12s}
.has-sub:hover>.subnav,.has-sub:focus-within>.subnav{opacity:1;visibility:visible;transform:none}
.subnav a{padding:10px 18px;font-size:.92rem;font-weight:500;white-space:nowrap}
.subnav a:hover,.subnav a:focus{background:#2a3138}
.subnav .sub-code{color:var(--accent);font-weight:700;font-size:.82rem;margin-left:.4em}

/* ⚠ RAISED FROM 640px TO 860px WHEN THE MENU WENT FROM FOUR ITEMS TO FIVE (JC, 27/08/2026).
   "Search Local Prices" and "Fuel Statistics" are long labels; five of them wrap onto a second
   line well above the old breakpoint, and a wrapped sticky nav eats a third of a small screen. */
@media (max-width:860px){
  /* 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:.82rem;white-space:nowrap}
  .subnav{display:none}                 /* see the note above - the hub page takes over */
  .has-sub>a::after{content:""}         /* no caret where there is nothing to open      */
}
@media (max-width:360px){
  .site-nav a{padding:10px 4px;font-size:.74rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--brand)}
.hero picture{display:block}
/* M1's brand crop box, unchanged. Centre-anchored - nothing is baked into the photo, so there is no
   plate to protect at the bottom. */
.hero img{display:block;width:100%;aspect-ratio:16/5;height:auto;
  max-height:min(300px,42vh);object-fit:cover;object-position:center center}
@media (max-width:520px){.hero img{aspect-ratio:16/7}}
.hero .hero-cap{position:absolute;left:0;bottom:0;right:0;padding:14px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0));color:#fff;z-index:3}
.hero .hero-cap h1{margin:0;font-size:1.5rem;text-shadow:0 1px 3px rgba(0,0,0,.5)}
@media (max-width:520px){.hero .hero-cap h1{font-size:1.15rem}}

/* HERO FIX B - the brand plate overlaid in CSS, NEVER baked into the photo (M1 rule, 21/08/2026).
   The plate is 640x116 = 5.52:1, which is TNE's ratio, not M1's 3.3:1 - so it takes TNE's 30%/290px
   sizing rather than M1's 22%/200px. Ratio decides the numbers; it is not a taste call. */
.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%,290px);
  aspect-ratio:640/116;
  background-image:url(/images/ukpumpprices-plate.png);
  background-position:right top;
}
@media (max-width:520px){.hero::after{width:min(46%,210px); top:7px; right:8px}}
@media (max-width:360px){.hero::after{width:min(50%,175px)}}

/* ============================================================================
   LIVE PRICE TICKER (.nt) - directly UNDER THE HERO, above the status band.
   M1's .nt, recoloured. Structure and keyframes untouched.
   ⚠ Every entry carries its REPORTED TIME. An undated price implies "now", which we cannot know.
   ⚠ Renders NOTHING at all when there is no data - an empty strip is honest; a strip with a
     placeholder price in it is a claim about a forecourt.
   ⭐ THE ONE DELIBERATE DIFFERENCE FROM RTN: the LIVE pill is GREEN, not red. On a traffic site red
     means "there is a problem on the road". A price is not an incident, and a red flash next to a
     number reads as a warning about that number. Same pill, same job, different meaning.
   ============================================================================ */
.nt{background:var(--band);color:#fff;overflow:hidden;white-space:nowrap;
    border-top:2px solid var(--accent);border-bottom:0}
.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)}

.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:var(--green);color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset}

/* Fuel-type pill: the colour carries WHICH FUEL, so a diesel driver can find their line without
   reading every entry. Codes are the dataset's own (⭐ USE THE DATASET'S OWN WORD, 19/08) with the
   everyday name in front, because a driver looking for diesel does not search for "B7". */
.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--e10 .nt__tag{background:#e8f5ec;color:#0b4a26}   /* unleaded        */
.nt__item--e5  .nt__tag{background:#e6efff;color:#123a7a}   /* super unleaded  */
.nt__item--b7s .nt__tag{background:#f0a500;color:#241a05}   /* diesel          */
.nt__item--b7p .nt__tag{background:#e9defa;color:#4a2d8f}   /* premium diesel  */
.nt__item--avg .nt__tag{background:#fff;color:#1c2126}      /* UK average      */

.nt__price{font-weight:800;color:#fff}
.nt__txt{color:#fff;font-weight:500}
.nt__where{color:#cfd6dd;font-weight:500}
.nt__time{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);flex:0 0 auto}
.nt__time::before{content:"\00B7";color:rgba(255,255,255,.45);margin-right:.5rem}
.nt__item--all{border-right:0}
.nt__item--all a{color:var(--accent);font-weight:700;text-decoration:underline}

@media (max-width:560px){
  .nt__item{padding:7px 16px;font-size:.82rem;gap:.4rem}
  .nt__tag,.nt__live{font-size:.62rem;padding:1px 5px}
}
/* M1 rule, 17/08: reduced motion makes it GENTLER, never frozen - a frozen live strip beside a
   moving marketing strip made the page look broken while telling drivers it was live. */
@media (prefers-reduced-motion:reduce){
  .ticker__track,.nt__track{animation-duration:120s}
}

/* ---------- Live status band (written into the marker by the app) ---------- */
.cs{background:var(--band);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(255,255,255,.10);text-decoration:none}
/* ⚠ M1 hovers with rgba(0,0,0,.18) - black on blue. Black on near-black is invisible, so the
   fuel band hovers LIGHTER. Same intent, opposite direction, because the surface changed. */
.cs__num{font-size:2.1rem;line-height:1;font-weight:800;flex:none;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cs__num small{font-size:.5em;font-weight:700;letter-spacing:0}
.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--cheap .cs__num{color:var(--green-lite)}
.cs--warn  .cs__num{color:var(--accent)}
.cs--count .cs__num{color:#fff}
.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}
}

/* ---------- 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;color:var(--brand)}
main h2{font-size:1.3rem;margin:1.4em 0 .4em;color:var(--brand)}
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}
main img{margin:0 14px 12px 0;vertical-align:middle}
main h1 img,main h2 img,main h3 img{vertical-align:middle}
main img[style*="float"]{float:none !important;display:block;margin:0 0 14px}
main iframe{max-width:100%}

/* Related box (M1's 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}

/* Boxes, tables, callouts - carried from the v0.6.x fuel pages so the About page keeps its look. */
.box{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:15px 18px;margin:0 0 16px}
.box h2:first-child,.box h3:first-child{margin-top:0}
.box table{width:100%;border-collapse:collapse;font-size:.95rem;margin:8px 0 10px}
.box th,.box td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.box th{background:var(--bg-soft);font-weight:700}
.warn{background:#fff8e6;border-left:4px solid var(--accent);padding:11px 14px;margin:12px 0;
  font-size:.95rem;border-radius:0 6px 6px 0}
.note{background:var(--bg-soft);border-left:4px solid var(--brand);padding:11px 14px;margin:12px 0;
  font-size:.95rem;border-radius:0 6px 6px 0}
a.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;
  border-radius:6px;padding:12px 18px;margin:6px 0 0}
a.btn:hover{background:var(--brand-dark);text-decoration:none;color:#fff}
a.btn--go{background:var(--green)}
a.btn--go:hover{background:#00512b}

/* ---------- THE GENERATED PRICE BLOCK (app writes between the markers) ---------- */
#calfuel{margin:14px 0}
#calfuel>*{margin-left:auto !important;margin-right:auto !important;max-width:var(--newsw)}
/* M1 lesson, 17/08: the generator writes its own scoped stylesheet into the page and an ID selector
   beats a plain class, so the centring has to be stated where the generator cannot outrank it. */

.pf{background:var(--bg);border:2px solid var(--brand);border-radius:10px;overflow:hidden;margin:0 0 18px}
.pf__hd{background:var(--brand);color:#fff;padding:10px 16px}
.pf__hd h2{margin:0;font-size:1.05rem;color:#fff;text-transform:uppercase;letter-spacing:.02em}
.pf__hd .pf__sub{display:block;font-size:.8rem;font-weight:500;color:#c8cfd6;margin-top:2px;
  text-transform:none;letter-spacing:0}
.pf__body{padding:4px 16px 12px}
.pfrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;
  padding:11px 0;border-top:1px solid var(--line)}
.pfrow:first-child{border-top:0}
.pfnm{flex:1 1 58%;font-size:1rem;font-weight:700;min-width:0}
.pfwh{display:block;font-size:.82rem;font-weight:400;color:var(--muted)}
.pfwh b{color:var(--ink);font-weight:700}
.pfpr{flex:0 0 auto;font-size:1.15rem;font-weight:800;color:var(--green);white-space:nowrap;
  text-align:right;font-variant-numeric:tabular-nums}
.pfpr span{display:block;font-size:.72rem;font-weight:600;color:var(--muted)}
.pfrow .pills{flex:0 0 100%;margin-top:5px}
.pfstamp{font-size:.8rem;color:var(--muted);margin:0;padding:10px 16px;
  border-top:1px dashed var(--line);background:var(--bg-soft)}
.pfnote{font-size:.82rem;color:var(--muted);margin:8px 0 0}

/* Pillboxes (approved in v0.6.1, carried forward unchanged - loudest first). */
.pills{margin:7px 0 0}
.pill{display:inline-block;font-size:11px;font-weight:600;line-height:1;padding:5px 8px;
  border-radius:11px;border:1px solid;margin:0 4px 4px 0;white-space:nowrap}
.p-open{background:#e3f5e8;color:#14572a;border-color:#9ed4b0}   /* status               */
.p-type{background:#ece7fa;color:#4a2d8f;border-color:#c0b0ea}   /* site type            */
.p-spec{background:#fdefd9;color:#8a4f00;border-color:#efc584}   /* specialist fuel      */
.p-fuel{background:#eef1f5;color:#57616e;border-color:#cdd5de;font-weight:500}

/* ---------- Directory index (brands / towns) ---------- */
.dircols{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 18px;
  list-style:none;margin:10px 0 4px;padding:0}
.dircols li{margin:0;padding:5px 0;border-bottom:1px solid var(--line);font-size:.95rem;
  display:flex;justify-content:space-between;gap:10px}
.dircols .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.86rem}

/* ---------- Fuel-type cards on the hub page ---------- */
.ftgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:16px 0}
.ftcard{border:2px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);
  display:flex;flex-direction:column}
.ftcard__hd{background:var(--brand);color:#fff;padding:10px 14px;font-weight:800;font-size:1rem}
.ftcard__hd .code{float:right;color:var(--accent);font-size:.82rem;font-weight:800;
  letter-spacing:.04em;padding-top:.2em}
.ftcard__body{padding:12px 14px;font-size:.93rem;flex:1 1 auto}
.ftcard__body p{margin:0 0 10px}
.ftcard a.more{display:block;padding:10px 14px;background:var(--bg-soft);border-top:1px solid var(--line);
  font-weight:700;font-size:.9rem;text-decoration:none;color:var(--brand)}
.ftcard a.more:hover{background:var(--accent);color:var(--brand-dark)}

/* ---------- Site-message strip (OUR messages, above the footer) ---------- */
.ticker{background:var(--band);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 40s 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}
.ticker__item a{color:var(--accent);font-weight:700;text-decoration:underline}
.ticker__item a:hover{color:#fff}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ============================================================================
   MAIN FOOTER - CAL BRAND FOOTER (approved 17/08/2026, JC). M1's, recoloured.
   ⭐ auto-fit grid: adding a fifth column later needs NO CSS change.
   ⭐ align-items:start so unequal columns line up on their HEADINGS.
   ⚠ BRAND design, not per-site design. Only the link lists change between sites.
   ============================================================================ */
.ft{background:var(--band);color:#cfd6dd;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:var(--accent);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:var(--accent);text-decoration:none}
.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:#9aa5b1}
.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:#9aa5b1}
.ft__src{text-align:center;margin:8px 0 0;font-size:.8rem;color:#9aa5b1}
.ft a{color:#fff}
.ft__src a{color:var(--accent)}

/* PUMPS - bottom corners, in place of M1's road cones. Hidden under 700px so they never crowd the
   links. Same rule, same reason; only the object changed. */
.ft .pump{position:absolute;bottom:8px;z-index:1;pointer-events:none;display:block;
  height:104px;width:auto;opacity:.9}
.ft .pump--l{left:16px}
.ft .pump--r{right:16px;transform:scaleX(-1)}
@media (max-width:1080px){.ft .pump{height:78px}}
@media (max-width:820px){.ft__wrap{padding-left:16px;padding-right:16px}}
@media (max-width:700px){.ft .pump{display:none}}

/* ---------- 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}
ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important}

/* =====================================================================================================
   ADDED FOR SITE v0.8.0 - THE M25 HOME-PAGE PATTERN, PORTED
   -----------------------------------------------------------------------------------------------------
   JC, 27/08/2026: "where on page 1 of RTN sites we have the latest news item for a) incidents
   b) active roadworks and c) planned roadworks on the home page of the fuel sites we could have
   1. Latest cheapest Unleaded E5, 2. Latest Cheapest Unleaded E10, diesel etc."
   Structure copied from the M25 home page: coloured section bar - grey sub-line - card - "+ more"
   line - big CTA - updated stamp - attribution - the numbers panel.

   ⚠ THE ONE THING THAT COULD NOT BE COPIED IS WHAT THE COLOURS MEAN.
   On M25 the three bars are RED (incident), AMBER (active works), BLUE (planned) - the colour is
   SEVERITY, and it is doing real work: red means there is a problem on the road right now.
   A PRICE HAS NO SEVERITY. A red bar over a petrol price would be inventing an alarm.
   So the colour carries the FUEL instead - and it is the SAME three colours already used by the
   ticker pills, so a driver who has learned green=unleaded at the top of the page has not been
   taught a second, contradictory code further down. ⭐ THE ARTEFACT MUST AGREE WITH ITSELF.
   ===================================================================================================== */

/* ---- the coloured section bar + its grey sub-line ---- */
.fsec{color:#fff;font-weight:700;font-size:1rem;padding:10px 16px;border-radius:6px;margin:26px 0 0}
.fsec--e10{background:#00703c}      /* unleaded       - green, as the ticker pill */
.fsec--b7 {background:#a05a00}      /* diesel         - amber, as the ticker pill */
.fsec--e5 {background:#1b4f8f}      /* super unleaded - blue,  as the ticker pill */
.fsec__sub{color:var(--muted);font-size:.92rem;margin:6px 2px 10px}

/* ---- the price card. M25's card, with the fuel code on the rail where the road name sits ---- */
.fcard{display:flex;align-items:stretch;border:2px solid var(--brand);border-radius:10px;
  background:var(--bg);overflow:hidden;margin:0 0 4px}
.fcard--e10{border-color:#00703c}.fcard--b7{border-color:#a05a00}.fcard--e5{border-color:#1b4f8f}
.fcard__rail{flex:0 0 58px;width:58px;display:flex;flex-direction:column;align-items:center;
  padding:0 0 12px;background:var(--brand)}
.fcard--e10 .fcard__rail{background:#00703c}
.fcard--b7  .fcard__rail{background:#a05a00}
.fcard--e5  .fcard__rail{background:#1b4f8f}
.fcard__sign{width:100%;height:38px;background:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:.92rem;line-height:1;color:var(--brand)}
.fcard--e10 .fcard__sign{color:#00703c}
.fcard--b7  .fcard__sign{color:#a05a00}
.fcard--e5  .fcard__sign{color:#1b4f8f}
.fcard__railtxt{flex:1 1 auto;display:flex;align-items:center;justify-content:center}
.fcard__railtxt span{writing-mode:vertical-rl;color:#fff;font-weight:700;font-size:.9rem;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.fcard__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.fcard__head{padding:10px 16px;color:#fff;background:var(--brand)}
.fcard--e10 .fcard__head{background:#00854a}
.fcard--b7  .fcard__head{background:#b8680a}
.fcard--e5  .fcard__head{background:#215fa8}
.fcard__title{margin:0;font-size:1rem;line-height:1.3;font-weight:700;text-transform:uppercase;color:#fff}
.fcard__price{display:inline-block;background:#fff;color:var(--brand);font-weight:800;
  border-radius:5px;padding:2px 8px;margin-right:.5em;text-transform:none}
.fcard__now{display:flex;align-items:center;gap:7px;background:var(--bg-soft);
  border-bottom:1px solid var(--line);padding:7px 16px;font-size:.85rem;color:#33485f}
.fcard__now b{color:var(--brand)}
.fcard__body{padding:10px 16px 14px}
.fcard__stamp{display:inline-flex;align-items:baseline;gap:8px;background:#14181f;color:#fff;
  padding:5px 12px;border-radius:999px;line-height:1;margin:0 0 10px;font-variant-numeric:tabular-nums}
.fcard__stamp .t{font-size:1.02rem;font-weight:800}
.fcard__stamp .d{font-size:.78rem;font-weight:600;color:#c4ccd6}
.fcard__stamp .a{font-size:.74rem;font-weight:700;color:var(--accent);
  border-left:1px solid #3a4350;padding-left:9px}
.fcard__fields{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;
  font-size:.94rem;line-height:1.4}
.fcard__fields dt{color:var(--brand);font-weight:700}
.fcard__fields dd{margin:0}
/* 🛑 NOT display:flex. It was, and every <b> inside became a FLEX ITEM - the sentence came apart
   into columns: "This is the price the forecourt | reported | , and the time it reported it".
   Caught by looking at the render, not by reading the CSS. A block is what a sentence needs. */
.fcard__foot{display:block;border-top:3px solid var(--accent);
  background:#fffaf0;padding:10px 16px;font-size:.9rem;line-height:1.45}
@media (max-width:600px){
  .fcard__rail{flex:0 0 44px;width:44px}
  .fcard__sign{height:32px;font-size:.74rem}
  .fcard__railtxt span{font-size:.78rem;letter-spacing:.07em}
  .fcard__fields{grid-template-columns:1fr;gap:0}
  .fcard__fields dt{margin-top:6px}
}

/* ---- "+ more" line and the big call to action, both straight off the M25 page ---- */
.fmore{background:#f1f5f9;border-radius:6px;padding:11px 16px;margin:0 0 14px;font-size:.94rem}
.fmore a{font-weight:700}
a.fcta{display:block;background:var(--brand);color:#fff;text-align:center;text-decoration:none;
  font-weight:800;letter-spacing:.02em;padding:16px 18px;border-radius:6px;margin:14px 0;
  text-transform:uppercase;font-size:1rem}
a.fcta:hover{background:var(--brand-dark);color:#fff;text-decoration:none}
.fstamp{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;
  font-size:.82rem;color:var(--muted);margin:0 0 6px}

/* ---- THE NUMBERS PANEL (M25's "in numbers" red box) ---- */
.numbers{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;
  padding:18px 18px 4px;margin:26px 0 6px}
.numbers h2{margin:0 0 6px;font-size:1.35rem}
.numbers__lead{color:var(--muted);margin:0 0 14px;font-size:.98rem}
.ntiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0 0 16px}
.ntile{background:var(--bg);border:1px solid var(--line);border-top:4px solid var(--brand);
  border-radius:6px;padding:14px 14px 12px}
.ntile .n{font-size:1.75rem;line-height:1.1;font-weight:800;color:var(--brand);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ntile .lab{display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
.ntile p{margin:0;font-size:.92rem;line-height:1.5}
.numbers__quote{background:var(--bg);border-left:5px solid var(--accent);border-radius:0 6px 6px 0;
  padding:14px 16px;margin:0 0 16px;font-size:.98rem;line-height:1.6}
.numbers__src{font-size:.8rem;color:var(--muted);margin:0 0 20px;line-height:1.5}
/* ⚠ THE SOURCE LINE SITS OUTSIDE THE PANEL, exactly as it does on the M25 page. A figure whose
   source is inside the same box reads as part of the claim; outside, it reads as the receipt. */

/* ---- Fuel Statistics page ---- */
.stab{width:100%;border-collapse:collapse;font-size:.93rem;margin:10px 0 8px;
  display:block;overflow-x:auto;white-space:nowrap}
/* ⚠ THE TABLE SCROLLS INSIDE ITSELF, THE PAGE DOES NOT SCROLL SIDEWAYS. Seven columns of numbers
   cannot fit a 320px phone, and squeezing them makes both the table and the page unreadable.
   overflow-x on the table keeps the body column intact - mobile is ~77% of revenue. */
.stab th,.stab td{border:1px solid var(--line);padding:8px 11px;text-align:left;vertical-align:top}
.stab th{background:var(--brand);color:#fff;font-weight:700;font-size:.78rem;
  letter-spacing:.03em;text-transform:uppercase;line-height:1.3}
.stab tr:nth-child(even) td{background:var(--bg-soft)}
.stab td b{font-variant-numeric:tabular-nums}
.stab .pfnote{font-size:.78rem}
.dircols--1{grid-template-columns:1fr}