/* ==========================================================================
   /search in the new look (site reskin, 15 Oct 2026). Loaded by
   includes/header.cfm ONLY in preview (named after search.cfm). Markup in
   includes/inc_rs_search.cfm. Shared blocks come from reskin.css; these are
   the page's own touches. One dark green for everything you click or read;
   no coloured edge bars; the quote box is not touched.
   ========================================================================== */

/* "Your account has been deleted" (only after ?deleted=1): a plain white strip */
body.ft-reskin .rs-search-notice {
    background: #fff;
    border-bottom: 1px solid var(--rs-hair);
    padding: 12px 0;
}
body.ft-reskin .rs-search-notice p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rs-ink);
    overflow-wrap: anywhere;
}
body.ft-reskin .rs-search-notice i { color: var(--rs-green); }

/* Hero: keep the heading block from crowding the quote box on a laptop */
body.ft-reskin .rs-search-hero h1 { overflow-wrap: anywhere; }

/* How It Works */
body.ft-reskin .rs-search-how .rs-steps strong { color: var(--rs-ink); }
body.ft-reskin .rs-search-tanker-line {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
body.ft-reskin .rs-search-tanker-line > span:last-child { min-width: 0; }
/* Full width, so its edges meet the four step columns above it (15 Oct review: it was two thirds wide) */
body.ft-reskin .rs-search-tanker { margin-top: 24px; max-width: none; }
body.ft-reskin .rs-search-tanker .rs-search-tanker-line { margin: 0; font-size: 15px; color: var(--rs-body); }
/* The "Learn more" link keeps its class; re-point its green to the one dark green */
body.ft-reskin .rs-search .text-ft-green { --ft-green: #194F35; font-weight: 700; }
body.ft-reskin .rs-search-sizes {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--rs-hair);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--rs-body);
}
body.ft-reskin .rs-search-sizes strong { color: var(--rs-ink); }

/* Browse by Region: the map in a white card, the four countries as buttons */
body.ft-reskin .rs-search-map {
    background: #fff;
    border: 1px solid var(--rs-hair);
    border-radius: var(--rs-radius);
    padding: 20px 20px 12px;
    width: 100%;
    max-width: 282px;
    margin: 0;
}
/* The map's four greens (one of them the bright brand green) become the one
   dark green, with white borders between the countries. The SVG sets its fill
   inline, so this needs !important. Hover still lightens a country (the
   page script sets opacity). The border is a steady 1px at any map size
   (the map is drawn 240px wide from a 675-unit drawing, so a plain stroke
   width in drawing units came out at about half a pixel); 1.5px ate the
   small Scottish islands. */
body.ft-reskin .rs-search-map .map-country { fill: var(--rs-green) !important; }
body.ft-reskin .rs-search-map .map-country path {
    stroke: #fff;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}
/* Hold the map's height (viewBox 675 x 810) before the script fetches it, so
   the card and the text beside it do not jump when it arrives */
body.ft-reskin .rs-search-map #ukMapContainer { aspect-ratio: 675 / 810; }
body.ft-reskin .rs-search-map #ukMapContainer svg { display: block; }
body.ft-reskin .rs-search-map #roi { opacity: 1; fill: var(--rs-field); }
body.ft-reskin .rs-search-map .map-hover-label {
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--rs-ink);
    text-align: center;
    min-height: 1.4em;
    margin-top: 6px;
}
body.ft-reskin .rs-search-regions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}
body.ft-reskin .rs-search-regions .rs-btn { min-width: 0; padding: 11px 12px; }
body.ft-reskin .rs-search-regions .rs-btn i { font-size: 14px; }

/* Phones: the map card runs the full width of the column with the map centred in it (it was a
   282px box in a 366px column, lopsided) */
@media (max-width: 767.98px) {
    body.ft-reskin .rs-search-map { max-width: none; }
}

/* Map and text side by side, centred on each other, close together (no wide gap between them) */
@media (min-width: 768px) {
    body.ft-reskin .rs-search-regions-band .row { display: grid; grid-template-columns: 282px minmax(0, 1fr); column-gap: 56px; row-gap: 0; margin: 0; }
    body.ft-reskin .rs-search-regions-band .row > * { width: auto; max-width: none; padding: 0; margin: 0; }
}
@media (min-width: 992px) {
    body.ft-reskin .rs-search-regions { grid-template-columns: repeat(4, 1fr); gap: 12px; }
    body.ft-reskin .rs-search-map { padding: 20px 20px 14px; }
}