/* Heating oil news (/news, /news/YYYY-MM-DD, /news/archive) in the site reskin preview
   (15 Oct 2026). Loaded by includes/header.cfm only when request.reskin is true.
   The page keeps its own flat broadsheet layout and the live top (photo masthead, ticker,
   brief beside the headlines: DECISIONS 29 Sept and 4 Oct). This file only:
   - puts the masthead photo on the registry slot "hills" (same shade and crop);
   - sets the cream page of the new look, with the two pale panels as white panels
     and the earlier-briefs band in the pale wash;
   - uses the one dark green #194F35 for links and green text (was a lighter #3c7a2c), and a
     white keyboard ring on the page's dark surfaces (last rule);
   - swaps the two coloured edge stripes (the explainer box and the "not the newest
     brief" notice) for a plain 1px border all round (DECISIONS 8 Oct).
   Rules start with :where(body.ft-reskin) so they weigh the same as the news.css rule
   they replace and never beat the more specific ones (headline links stay ink). The
   focus-ring rules at the end are the exception: they must beat reskin.css's own ring. */

/* Masthead photo: hills */
:where(body.ft-reskin) .nx-hero {
    background-image: linear-gradient(180deg, rgba(14,25,16,.10) 0%, rgba(14,25,16,.18) 55%, rgba(14,25,16,.62) 100%), var(--rs-photo-hills);
}
:where(body.ft-reskin) .nx-mast-date .u i { background: #9FD8B4; }

/* Cream page, white panels, wash band */
:where(body.ft-reskin) .nx-page { background: #F7F8F3; }
:where(body.ft-reskin) .nx-chart { background: #fff; border: 1px solid #DFE6D8; }
:where(body.ft-reskin) .nx-explain { background: #fff; border: 1px solid #DFE6D8; }
:where(body.ft-reskin) .nx-earlier { background: #E9EFE2; border-top-color: #DFE6D8; }
:where(body.ft-reskin) .nx-list li { border-top-color: #D8E0D2; }

/* The older-brief notice: a tinted border all round, no edge stripe */
:where(body.ft-reskin) .nx-notice { border: 1px solid #E6D3A3; }

/* One dark green for everything you click or read */
:where(body.ft-reskin) .nx-page a { color: #194F35; }
:where(body.ft-reskin) .nx-kicker { color: #194F35; }
:where(body.ft-reskin) .nx-tick-val.down { color: #194F35; }
:where(body.ft-reskin) .nx-tick-go { color: #194F35; }
:where(body.ft-reskin) .nx-page .nx-video-jump a { color: #194F35; }
:where(body.ft-reskin) .nx-page .nx-headline a:hover { color: #194F35; }
:where(body.ft-reskin) .nx-chart .nx-line { stroke: #194F35; }
:where(body.ft-reskin) .nx-chart summary { color: #194F35; }
:where(body.ft-reskin) .nx-page .nx-pager a:hover { color: #194F35; }
:where(body.ft-reskin) .nx-pager a span { color: #194F35; }
:where(body.ft-reskin) .nx-story:hover .t,
:where(body.ft-reskin) .nx-story-top:hover .t { color: #194F35; }
:where(body.ft-reskin) .nx-brief-link:hover .t { color: #194F35; }
:where(body.ft-reskin) .nx-brief-latest .d { color: #194F35; }
:where(body.ft-reskin) .nx-list a:hover .t { color: #194F35; }

/* Keyboard focus ring: reskin.css already makes it the dark green on every page, so the old
   copy of that rule is gone from here. The page has three dark surfaces (the photo masthead,
   the dark green quote band and, when there is one, the video poster) where a dark green
   ring would vanish, so there it is white. The poster's ring also moves inside its frame,
   which clips anything drawn outside. */
body.ft-reskin .nx-hero :is(a, summary, button, input):focus-visible,
body.ft-reskin .nx-band :is(a, summary, button, input):focus-visible,
body.ft-reskin .nx-video-frame :is(a, button):focus-visible { outline-color: #fff; }
body.ft-reskin .nx-video-frame a.nx-video-poster:focus-visible { outline-offset: -8px; }

/* ---------- Content as wide as the menu and footer (Rhys 15 Oct) ----------
   news.css centres a 1,140px block with 24px sides, so the page started further in than the
   logo. Here .nx-wrap takes Bootstrap's .container widths and 12px sides, the same as the menu. */
body.ft-reskin .nx-wrap { box-sizing: border-box; width: 100%; max-width: none; margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }
@media (min-width: 576px) { body.ft-reskin .nx-wrap { max-width: 540px; } }
@media (min-width: 768px) { body.ft-reskin .nx-wrap { max-width: 720px; } }
@media (min-width: 992px) { body.ft-reskin .nx-wrap { max-width: 960px; } }
@media (min-width: 1200px) { body.ft-reskin .nx-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { body.ft-reskin .nx-wrap { max-width: 1320px; } }