/* Prices and trends (/trends, price-trends.cfm) in the site reskin preview (15 Oct 2026).
   Loaded by includes/header.cfm only when request.reskin is true. The page is already
   the new look and has no photo, so this file only brings it into line with the rest:
   - the one dark green #194F35 for links, buttons, the chosen range and green text
     (it had five shades: #286b3e, #44843c, #174c30, #245d39, #3c6247);
   - the cream page colour of the new look;
   - squared corners on laptops (4px from 992px) on the cards and every control, rounder cards
     on phones, as reskin.css; the live dot is the same dark green. The keyboard ring is
     reskin.css's own dark green (nothing needed here).
   Rules start with :where(body.ft-reskin) so they weigh the same as price-trends.css and
   never beat its more specific rules (the button text stays white). */
:where(body.ft-reskin) .ft-prices { background: #F7F8F3; }
:where(body.ft-reskin) .ft-prices a { color: #194F35; }
:where(body.ft-reskin) .ft-prices h1 span { color: #194F35; }
:where(body.ft-reskin) .ft-prices .pt-button { background: #194F35; }
:where(body.ft-reskin) .ft-prices .pt-button:hover { background: #0E3D24; color: #fff; }
:where(body.ft-reskin) .ft-prices .pt-ranges button[aria-pressed=true] { background: #194F35; }
:where(body.ft-reskin) .ft-prices .pt-data summary { color: #194F35; }
:where(body.ft-reskin) .ft-prices .pt-change[data-direction=down] { color: #194F35; }
:where(body.ft-reskin) .ft-prices .pt-dot { background: #194F35; }

@media (min-width: 992px) {
    /* Squared like the cards: the three cards, the Compare button, both range switches (and
       their buttons), the change chip and the table box all take 4px (2px for the buttons
       inside a switch). The live dot stays round. */
    :where(body.ft-reskin) .ft-prices :is(.pt-today, .pt-panel, .pt-quote-next, .pt-button, .pt-ranges, .pt-change, .pt-table-wrap) { border-radius: 4px; }
    :where(body.ft-reskin) .ft-prices .pt-ranges button { border-radius: 2px; }
}

/* ---------- Content as wide as the menu and footer (Rhys 15 Oct) ----------
   price-trends.css centres a 1,140px block inset by 24px, so the page started further in than
   the logo. Here .pt-wrap takes Bootstrap's .container widths and 12px sides, the same as the menu. */
body.ft-reskin .ft-prices .pt-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 .ft-prices .pt-wrap { max-width: 540px; } }
@media (min-width: 768px) { body.ft-reskin .ft-prices .pt-wrap { max-width: 720px; } }
@media (min-width: 992px) { body.ft-reskin .ft-prices .pt-wrap { max-width: 960px; } }
@media (min-width: 1200px) { body.ft-reskin .ft-prices .pt-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { body.ft-reskin .ft-prices .pt-wrap { max-width: 1320px; } }

/* "Behind the numbers" and "Useful data, free to share" sat 4px in from the logo at every width:
   price-trends.css gives .pt-info 4px of side padding inside the (already inset) .pt-wrap. */
body.ft-reskin .ft-prices .pt-info { padding-left: 0; padding-right: 0; }