/* ==========================================================================
   PLACE PAGES in the new look (site reskin, 15 Oct 2026). Loaded only in the
   preview, through request.reskinCss = "place", by: town-search.cfm (town
   pages, and the /towns list it hands to includes/towns-index.cfm),
   county-search.cfm, subregion.cfm and the four regional/<nation>.cfm pages.
   Their layouts are includes/inc_rs_town.cfm, inc_rs_county.cfm,
   inc_rs_towns_index.cfm, inc_rs_subregion.cfm, inc_rs_subregion_missing.cfm
   and inc_rs_nation.cfm. Everything here sits under main.rs-place.

   Built on the shared blocks in reskin.css. No coloured edge bars (DECISIONS
   8 Oct), icons only in the one dark green, no new fonts.
   ========================================================================== */

/* No treatment of the photos on any page (Rhys, 15 Oct): the photos themselves
   are the fix, so the photo slots are shown exactly as they are. */

/* Links in the hero copy: reskin.css already makes the breadcrumb and hero links
   white on the photo. Here only the underline on a link in the copy, and the link
   inside the white not-found card, which keeps the dark green. */
body.ft-reskin .rs-page.rs-place .rs-hero--photo .rs-hero-copy a { color: #fff; text-decoration: underline; }
body.ft-reskin .rs-page.rs-place .rs-hero--photo .rs-hero-copy .rs-notice a { color: var(--rs-green); }

/* Long place names (Welsh and Gaelic) and long lists must wrap on a phone */
body.ft-reskin .rs-place h1,
body.ft-reskin .rs-place h2,
body.ft-reskin .rs-place .breadcrumb,
body.ft-reskin .rs-place .rs-links,
body.ft-reskin .rs-place .rs-outcodes,
body.ft-reskin .rs-place .rs-statement { overflow-wrap: anywhere; }
body.ft-reskin .rs-place .rs-fact span { overflow-wrap: anywhere; }

/* Postcode area lists: some regions list 270 codes, so calm text, not a headline */
.rs-place .rs-outcodes {
    font-size: 15px;
    line-height: 1.8;
    color: var(--rs-ink);
    margin: 0 0 12px;
    word-spacing: 2px;
}

/* Small print under a list, and the "all towns" arrow link */
.rs-place .rs-more { margin: 16px 0 0; font-size: 14.5px; }
.rs-place .rs-count { font-size: 13px; color: var(--rs-label); white-space: nowrap; }

/* How it works beside a photo: the steps stay readable at any width */
.rs-place .rs-split > div > .rs-steps { margin-top: 4px; }

/* Areas of a nation (North Wales, Mid Wales ...): white cards with an arrow */
.rs-area-grid {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.rs-area-grid a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--rs-hair);
    border-radius: var(--rs-radius);
    padding: 14px 16px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: var(--rs-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}
/* beats reskin.css's dark green page-link rule (0,4,1) */
body.ft-reskin .rs-page.rs-place .rs-area-grid a { color: var(--rs-ink); }
.rs-area-grid a::after { content: "\2192"; color: var(--rs-green); flex-shrink: 0; }
.rs-area-grid a:hover,
.rs-area-grid a:focus { border-color: var(--rs-green); }
/* Four stored area names start with a lower-case "the" ("the East Midlands"). On their own
   as a card or a crumb that reads as a typo, so the first letter is shown in capitals; the
   stored words are untouched. ::first-letter needs a block-level box: the card's span is a flex
   item (so already one) and the crumb's span is made inline-block, with nowrap so the last crumb
   ("North Wales") never splits onto two lines inside its flex item. */
.rs-area-grid .rs-area-name,
.rs-place .rs-cap { overflow-wrap: anywhere; }
.rs-place .rs-cap { display: inline-block; white-space: nowrap; max-width: 100%; }
.rs-area-grid .rs-area-name::first-letter,
.rs-place .rs-cap::first-letter { text-transform: uppercase; }

/* Unknown place (the 404 view of /towns): a plain white card with an icon.
   Never an edge stripe (DECISIONS 8 Oct). */
.rs-place .rs-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    color: var(--rs-ink);
    border: 1px solid var(--rs-hair);
    border-radius: var(--rs-radius);
    padding: 14px 16px;
    margin: 0 0 18px;
    max-width: 40em;
    font-size: 15px;
    line-height: 1.6;
}
.rs-place .rs-notice .rs-icon { width: 34px; height: 34px; font-size: 16px; }
.rs-place .rs-notice > div { padding-top: 5px; }

/* A photo hero with no quote box (the /towns list): its text runs to the bottom of the
   photo, where the shared overlay is lightest, so the overlay stays dark all the way down. */
body.ft-reskin .rs-place .rs-hero--short::before {
    background: linear-gradient(180deg, rgba(12,34,23,0.84) 0%, rgba(12,34,23,0.74) 100%);
}

/* Towns list: one block per nation */
.rs-place .rs-nation + .rs-nation { border-top: 1px solid var(--rs-hair); }

/* ---------- Bigger screens ---------- */
@media (min-width: 768px) {
    .rs-area-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (min-width: 992px) {
    .rs-area-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .rs-area-grid a { padding: 18px 20px; font-size: 16px; }
    .rs-place .rs-outcodes { font-size: 15.5px; }
    /* A hero without the quote box (the /towns list) needs less height */
    .rs-place .rs-hero--photo.rs-hero--short { min-height: 360px; }
    body.ft-reskin .rs-place .rs-hero--short::before {
        background: linear-gradient(90deg, rgba(12,34,23,0.86) 0%, rgba(12,34,23,0.68) 55%, rgba(12,34,23,0.22) 100%);
    }
}

/* ==========================================================================
   Review round, 15 Oct 2026 (Rhys: "centering issues" = columns that leave big gaps)
   ========================================================================== */

/* Today's prices (left) beside the postcode areas card (right): one section of two columns,
   col-lg-7 + col-lg-5, so nothing leaves an empty right-hand side. Both columns open with
   the small label and a heading, so their tops line up. The prose keeps a reading width. */
body.ft-reskin .rs-place .rs-two > * { min-width: 0; }
body.ft-reskin .rs-place .rs-today p,
body.ft-reskin .rs-place .rs-areas .rs-small { max-width: 72ch; }
body.ft-reskin .rs-place .rs-areas .rs-card { padding: 20px 22px; }
body.ft-reskin .rs-place .rs-areas .rs-card > :last-child { margin-bottom: 0; }

/* Stacked on a phone or tablet: a clear gap before the second label */
@media (max-width: 991.98px) {
    body.ft-reskin .rs-place .rs-two { --bs-gutter-y: 2rem; }
}

/* Long lists of links on a phone (the towns of a county, the counties of a nation): the first 24
   show and a button reveals the rest. The script adds .rs-collapsible; without it (script blocked
   or failed) nothing here applies and every link shows. Every link is in the HTML at every width. */
body.ft-reskin .rs-place .rs-showmore { display: none; margin: 16px 0 0; }
@media (max-width: 767.98px) {
    body.ft-reskin .rs-place .rs-collapsible:not(.rs-open) .rs-links li:nth-child(n+25) { display: none; }
    body.ft-reskin .rs-place .rs-collapsible:not(.rs-open) .rs-showmore { display: block; }
    body.ft-reskin .rs-place .rs-showmore .rs-btn { width: 100%; }
}

/* Nearby towns by distance (SEO plan rank 8): the distance follows the name, small and muted,
   and stays whole on one line. On a phone (two narrow columns) it sits under the name, so every
   row is the same height instead of only the long names wrapping. */
body.ft-reskin .rs-place .rs-links .rs-dist { font-size: 13px; color: var(--rs-label); white-space: nowrap; }
@media (max-width: 575.98px) {
    body.ft-reskin .rs-place .rs-links--near .rs-dist { display: block; line-height: 1.3; margin: -5px 0 7px; }
}

/* ---------- Review fixes, 16 Oct ---------- */

/* The postcode link line under "Today's prices" (includes/postcode-link-line.cfm, a deliberate line for
   AI assistants; its words and its URL are unchanged). Here it is a quiet small caption, no box: small
   muted text in the page's label green (Bootstrap's .text-muted is !important, so this needs it too).
   The URL breaks only where a URL naturally can (after the slash, after the "?"), and anywhere as a last
   resort. On a phone the type is 12px, which keeps "Prices for your exact postcode: https://www.fueltool.co.uk/"
   on one line and the rest of the URL on the next (two even lines, no word split mid-token). */
body.ft-reskin .rs-place .rs-today > p.small.text-muted {
    font-size: 13px;
    line-height: 1.55;
    color: var(--rs-label) !important;
    margin-top: 14px;
    overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
    body.ft-reskin .rs-place .rs-today > p.small.text-muted { font-size: 12px; }
}

/* Long postcode area lists (a county can list 90 codes, a region 270) on a phone: the first 40 codes
   show and a button reveals the rest. Same pattern as the town lists above: the script adds
   .rs-collapsible; without it nothing here applies and every code shows. Every code is in the HTML at
   every width. The list is one run of text, so it is two spans: the first 40 and the rest. */
/* The button is the last thing in the card in the HTML (after the small print, so every sentence keeps
   today's order); on a phone the card is a column and the button is moved up under the codes. */
@media (max-width: 767.98px) {
    body.ft-reskin .rs-place .rs-card.rs-codes-fold { display: flex; flex-direction: column; }
    body.ft-reskin .rs-place .rs-areas .rs-card.rs-codes-fold > .rs-showmore { order: 1; margin: 4px 0 16px; }
    body.ft-reskin .rs-place .rs-card.rs-codes-fold > .rs-outcodes ~ .rs-small { order: 2; }
}
@media (max-width: 767.98px) {
    body.ft-reskin .rs-place .rs-collapsible:not(.rs-open) .rs-oc-rest { display: none; }
    /* the closing full stop is inside the hidden part, so the folded list ends "PL26..." */
    body.ft-reskin .rs-place .rs-collapsible:not(.rs-open) .rs-oc-head::after { content: "\2026"; }
}