/* Homepage in the site reskin preview (15 Oct 2026). Loaded by includes/header.cfm only
   when request.reskin is true, so customers never get it.
   The homepage is already the new look, so this file only moves its photos onto the
   photo registry slots (includes/inc_reskin.cfm, --rs-photo-<slot>): when the autumn set
   is swapped in there, these pictures change with it. Each rule keeps the original
   shade, position and size; only the picture is swapped. The quote box is not touched. */

/* ---------- Phones and tablets (under 992px), as home-mobile.css ---------- */
@media (max-width: 991.98px) {
    /* Hero: cottage */
    body.ft-reskin .ft-home-mobile .hero-home::before {
        background-image: linear-gradient(90deg, rgba(12,35,25,.82), rgba(12,35,25,.46) 65%, rgba(12,35,25,.22)), var(--rs-photo-cottage);
    }
    /* "From quote to doorstep" photo: tanker, the same picture as the laptop How it works band
       (one picture per section) */
    body.ft-reskin .ft-home-mobile .hm-delivery-photo {
        background-image: var(--rs-photo-tanker);
    }
    /* Price updates by email: room */
    body.ft-reskin .ft-home-mobile .hm-alert-photo {
        background-image: var(--rs-photo-room);
    }
}

/* ---------- Laptops and up (992px+), as home-desktop.css ---------- */
@media (min-width: 992px) {
    /* Hero: cottage */
    body.ft-reskin .ft-home-desktop .hero-home {
        background-image: linear-gradient(90deg, rgba(12,34,23,.83), rgba(12,34,23,.54) 46%, rgba(12,34,23,.12)), var(--rs-photo-cottage);
    }
    /* How it works band: tanker */
    body.ft-reskin .ft-home-desktop .hd-how::before {
        background-image: var(--rs-photo-tanker);
    }
    /* Price updates by email: room */
    body.ft-reskin .ft-home-desktop .hd-alert-photo {
        background-image: var(--rs-photo-room);
    }
}

/* ---------- Keyboard ring on the dark "Price updates by email" panel ----------
   reskin.css makes the keyboard ring the dark green on every page; on this dark green panel
   (phone and laptop) it would vanish, so the ring there is white. */
body.ft-reskin .price-alerts-panel :is(a, button, input):focus-visible { outline-color: #fff; }

/* ---------- Content as wide as the menu and footer (Rhys 15 Oct, "content narrower than the menu") ----------
   home-desktop.css sets a 1,240px block with 28px sides; here the homepage uses Bootstrap's own
   .container widths and sides, the same as the menu, so the left edge of the heading lines up with
   the logo at every laptop width. */
@media (min-width: 992px) {
    body.ft-reskin .ft-home-desktop .container { max-width: 960px; padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1200px) {
    body.ft-reskin .ft-home-desktop .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    body.ft-reskin .ft-home-desktop .container { max-width: 1320px; }
}

/* ---------- One alignment: the numbers strip under the hero is left-aligned (Rhys 15 Oct) ----------
   home-ticker.css centres each figure and its label while the headings and text around the strip
   are left-aligned. Here each cell reads from its own left edge, the first one lining up with the
   logo and the hero heading. */
body.ft-reskin .hm-tick-cell,
body.ft-reskin .hm-tick-more { text-align: left; }
body.ft-reskin .hm-tick-more a { justify-content: flex-start; }
@media (min-width: 992px) {
    body.ft-reskin .ft-home-desktop .hm-tick-cell,
    body.ft-reskin .ft-home-desktop .hm-tick-more { align-items: flex-start; padding: 0 16px 0 28px; }
    body.ft-reskin .ft-home-desktop .hm-tick-cell:first-child { padding-left: 0; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    body.ft-reskin .ft-home-desktop .hm-tick-cell,
    body.ft-reskin .ft-home-desktop .hm-tick-more { padding: 0 10px 0 20px; }
    body.ft-reskin .ft-home-desktop .hm-tick-cell:first-child { padding-left: 0; }
}

/* Phones and tablets: home-mobile.css insets the homepage by 20px (16px on small phones) while the
   menu sits 12px in. Same 12px sides and Bootstrap widths as the menu here, so the logo and the
   hero heading line up on a phone too. */
@media (max-width: 991.98px) {
    body.ft-reskin .ft-home-mobile .container { max-width: none; padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
    body.ft-reskin .ft-home-mobile .container { max-width: 540px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    body.ft-reskin .ft-home-mobile .container { max-width: 720px; }
}

/* ---------- Review fixes, 15 Oct (CSS only: index.cfm is not changed) ---------- */

/* "Are you a heating oil supplier?" band: the same look as the /about supplier band. Heading in
   Bricolage Grotesque 700, everything left-aligned at every width (it was centred on a phone), and
   the one dark green button of the site (.rs-btn style) with an arrow where the building icon was.
   The button's words are the page's own. The phone layout stacks heading, line and button; from
   768px the heading and line sit on the left and the button on the right. */
body.ft-reskin .hm-supplier-cta > .container {
    text-align: left !important;
    color: var(--rs-ink) !important;
}
body.ft-reskin .hm-supplier-cta h5 {
    font-family: 'Bricolage Grotesque', 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: normal;
    color: var(--rs-ink);
    text-wrap: balance;
    margin: 0 0 4px !important;
}
body.ft-reskin .hm-supplier-cta p {
    font-size: 14.5px !important;
    line-height: 1.6;
    color: var(--rs-body);
    opacity: 1 !important;
    margin: 0 0 14px !important;
}
body.ft-reskin .hm-supplier-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--rs-green);
    border-color: var(--rs-green);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 20px;
    min-height: 0;
    margin: 0;
    border-radius: var(--rs-radius-sm) !important;
    box-shadow: none;
    white-space: nowrap;
}
body.ft-reskin .hm-supplier-cta .btn:hover,
body.ft-reskin .hm-supplier-cta .btn:focus {
    background: var(--rs-green-deep);
    border-color: var(--rs-green-deep);
    color: #fff;
}
body.ft-reskin .hm-supplier-cta .btn i { display: none; }
body.ft-reskin .hm-supplier-cta .btn::after {
    font-family: bootstrap-icons;
    content: "\f138";
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}
@media (min-width: 768px) {
    body.ft-reskin .hm-supplier-cta > .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 30px;
        align-items: center;
    }
    body.ft-reskin .hm-supplier-cta h5 { grid-column: 1; grid-row: 1; align-self: end; }
    body.ft-reskin .hm-supplier-cta p { grid-column: 1; grid-row: 2; align-self: start; margin: 0 !important; }
    body.ft-reskin .hm-supplier-cta .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* "Join the list" (Price updates by email, phone and laptop panel): the only clickable thing that
   was mint green. White with the one dark green text, as it sits on the dark green panel. */
body.ft-reskin .price-alerts-section .price-alerts-submit {
    background-color: #fff;
    border-color: #fff;
    color: #194F35;
}
body.ft-reskin .price-alerts-section .price-alerts-submit:hover,
body.ft-reskin .price-alerts-section .price-alerts-submit:focus {
    background-color: var(--rs-wash);
    border-color: var(--rs-wash);
    color: #194F35;
}

/* Laptop: the county block and the Price updates panel are both on the cream page, so their paddings
   add up to 112px of nothing between "See all counties" and the panel (other section gaps are 70-100px).
   A shorter bottom padding on the county block makes it 84px. */
@media (min-width: 992px) {
    body.ft-reskin .ft-home-desktop .rs-county-home { padding-bottom: 28px; }
}

/* ---------- Review fixes, 16 Oct (CSS only) ---------- */

/* Phones and tablets: the "Free to use / 100% independent / 58m+ litres" strip under the quote box was
   centred while the numbers strip straight below it is left-aligned (one alignment per section). Each
   cell now reads from its own left edge, the first one lining up with the logo and the quote box. */
@media (max-width: 991.98px) {
    body.ft-reskin .hm-trust .hero-stats > div { text-align: left; }
    body.ft-reskin .hm-trust .hero-stats > div:first-child { padding-left: 0; }
}

/* Laptop: home-desktop.css (line 126) strips the grey pill from "Log in" on the homepage only; every
   other page keeps fueltool.css's pill (a 7% tint of the dark green, 50px corners, a slightly deeper
   tint on hover). Same look back here. Under 992px the phone menu's own flat row is left alone. */
@media (min-width: 992px) {
    body.ft-reskin:has(.ft-home-desktop) .navbar-ft .nav-link-login { background: rgba(14,61,36,.07); border-radius: 50px; }
    body.ft-reskin:has(.ft-home-desktop) .navbar-ft .nav-link-login:hover { background: rgba(30,122,60,.16); }
}

/* ---------- Phones: the two strips under the quote box centred again (Rhys 16 Oct 04:52: "This is off
   centre on mobile") ----------
   Left-aligned, the right-hand cells started at the middle of the screen and stopped well short of the
   edge (about 65px empty on the right against 12px on the left). Both strips are centred in their own
   cells now, as home-mobile.css and home-ticker.css drew them, so they read evenly between the edges and
   still share one alignment. Laptops keep the left-aligned numbers strip. */
@media (max-width: 991.98px) {
    body.ft-reskin .hm-trust .hero-stats > div { text-align: center; }
    body.ft-reskin .hm-trust .hero-stats > div:first-child { padding-left: 6px; }
    body.ft-reskin .hm-tick-cell,
    body.ft-reskin .hm-tick-more { text-align: center; }
    body.ft-reskin .hm-tick-more a { justify-content: center; }
    body.ft-reskin.rs-next .hm-tick-cell::before { margin-left: auto; margin-right: auto; }
}

/* Phone price chart (index.cfm draws it 132px tall now, with dates along the bottom): let it take its
   own height instead of the old 84-90px box. */
body.ft-reskin .ft-spark { height: auto; min-height: 0; }
body.ft-reskin .ft-spark svg { height: auto; }