/* Phase 2 - fixes from the Phase 1 UI/UX audit (30 Sept 2026).
   Loaded after gm.css / gm-extra.css on every page (v7/p2.py adds the link). */

:root {
  /* Shaz, 30 Sept: "a clean simple font like arial". System font, nothing to download. */
  --font-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* one section rhythm (audit C-04): three bands, one vw coefficient family */
  --band-sm: clamp(2rem, 4vw, 3rem);
  --band-md: clamp(3rem, 6vw, 5rem);
  --band-lg: clamp(4rem, 7vw, 6rem);
  --section-pad: var(--band-lg);

  --measure: 56ch;   /* about 70-75 characters of Arial */
  --flame-ink: #b33000;   /* orange TEXT under 24px on white/paper: 5.6:1+ (audit M-01) */
}

/* ---- floating WhatsApp + "Book" pill (desktop) and the mobile bottom bar: removed (Shaz, 30 Sept) */
.wa-float, .float-cta, #float-cta, .sticky-bar { display: none !important; }
@media (max-width: 899px) { body { padding-bottom: 0 !important; } }

/* ---- phone number in the header on phones (audit H-02). The desktop chip already shows it. */
.nav__tel-m { display: none; }
@media (max-width: 899px) {
  .nav__tel-m {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
    border-radius: 999px; background: var(--hot); color: #1a0700; font-weight: 700; font-size: var(--fs-sm);
    text-decoration: none; white-space: nowrap;
  }
  .nav__tel-m .ic { width: 16px; height: 16px; }
}
/* small phones: logo, number and menu button share 320-400px without sideways scroll */
@media (max-width: 400px) {
  .nav { gap: 8px; }
  .nav__actions { gap: 6px !important; }
  .brand { gap: 8px; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: var(--fs-md); }
  .brand__sub { font-size: 0.58rem; letter-spacing: 0.12em; }
  .nav__tel-m { padding: 0 10px; font-size: var(--fs-xs); gap: 4px; }
  .nav__tel-m .ic { width: 14px; height: 14px; }
}
@media (max-width: 359px) {
  .brand__sub { display: none; }
  .nav__tel-m .ic { display: none; }
  .nav__tel-m { padding: 0 8px; font-size: var(--fs-xs); }
}

/* ---- headings (audit C-01): line-height under 1.0 clipped descenders */
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.015em; }
h1, .hx__title, .pst__title, .h2--xl { line-height: 1.1 !important; letter-spacing: -0.01em !important; }
.h2, .h2--sm { letter-spacing: -0.01em; }
.hot, .cold, .hw--hi { padding-bottom: 0.08em; }
.hw { padding-bottom: 0.06em; }

/* no H2 larger than the page H1 (audit H-04) */
.h2 { font-size: var(--fs-f-2xl); }
.h2--xl { font-size: var(--fs-f-2xl); }

/* ---- section rhythm (audit C-04) */
.sec { padding-block: var(--band-md); }
.section { padding-block: var(--band-lg); }
.sec--strip { padding-block: var(--band-sm); }
/* same-tone sections back to back read as one band: collapse the double gap, keep a hairline */
.sec--dark + .sec--dark { padding-top: 0; }
.sec--dark + .sec--dark > .container { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: var(--band-md); }

/* ---- line length (audit H-01) */
main p, main li, .pst-prose p, .pst-prose li, .prose p { max-width: var(--measure); }
.pkgs__note, .sec-head p, .center p, [class*="__head"] p, .cta-band p, .text-center p { margin-inline: auto; }
.bc p, .review p, .tbl p, td p, .mega p, .footer p, .kt li { max-width: none; }
.lead, .section-head .lead, .pst-hero__lead, .hero .lead { max-width: var(--measure) !important; }
.qa p, .pst-faq__a p, .pst-faq__a li { max-width: var(--measure); }

/* ---- small orange text passes AA (audit M-01); dark sections keep their own lighter colours */
.eyebrow, .link-arrow, .text-link, .pst-author__k, .bl-kicker, .sec__head .eyebrow { color: var(--flame-ink); }
.text-link { text-decoration-color: rgba(179, 48, 0, 0.35); }
:is(.sec--dark, .section--dark, .hero, .hx, .phero, .pst-hero, .cta-band, .footer, .emergency, .winter, .inside, .contact, .how, .areas-sec, .reviews-sec) :is(.eyebrow, .link-arrow, .text-link, .bl-kicker) { color: var(--flame-400); }
/* sections that already set their own amber eyebrow keep it */
:is(.areas-sec, .reviews-sec, .how, .inside, .contact, .winter) .eyebrow { color: var(--amber); }

/* ---- tap targets (audit H-05) */
.link-arrow { min-height: 44px; }
.cov-chip, .btn--sm, .bl-chip, .cov-card__link { min-height: 44px !important; }
.pst-author__l a, .pst-book__tel { display: inline-flex; align-items: center; min-height: 44px; }
.area-check input { min-height: 54px; }

/* ---- focus ring on form fields too (audit M-06) */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.area-check input:focus-visible, .bl-search input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* ---- 1 Oct 2026, type/breakpoint tidy (v7/tidy.py) */
/* nav labels never break onto two lines (1200-1320 was the tight band) */
.nav__links a, .nav__trigger, .nav__tel small, .brand__sub { white-space: nowrap; }
/* the counter <span> inside .stat strong was caught by the ".stat span" label rule: 4.9 / 2005 / 29 showed at 14px */
.stat strong span { display: inline; margin: 0; font-size: inherit; color: inherit; line-height: inherit; }
/* blog posts: the post title is the H1, so the page's section headings step down one size (audit H-04) */
main:has(.pst__title) .h2 { font-size: var(--fs-f-xl); }
/* the winter offer heading snapped to the H1 step; it is an H2 (audit H-04) */
.winter h2 { font-size: var(--fs-f-2xl); }
/* the two ORANGE bands (.emergency, .cta-band) were caught by the dark-section rule above and got light-orange
   links/eyebrows on orange (unreadable, live 30 Sept-1 Oct). Dark ink, as the designer had them. */
:is(.emergency, .cta-band) :is(.eyebrow, .text-link, .link-arrow, .bl-kicker) { color: #1a0700; }
:is(.emergency, .cta-band) .text-link { text-decoration-color: rgba(26,7,0,0.4); }
/* .cta-band is left-aligned: its paragraph sat indented under the heading after the measure rule centred it */
.cta-band p { margin-inline: 0; }

/* ---- 1 Oct 2026, core-page audit (v7/p3.py; 4 visual audits in /root/gasmaster-work/audit-20261001/) */
/* gm.css collapsed the top padding of EVERY cream section that follows any section (.sec + .sec--paper), so
   headings, form cards and images sat right on the white/dark -> cream edge ("touching the top", /new-boiler/,
   /areas-we-cover/, every town page...). Keep the collapse only for cream after cream. */
.sec + .sec--paper { padding-top: var(--band-md); }
.sec--paper + .sec--paper { padding-top: 0; }
/* home "The short answer": the blog-post .qa (cream card) overrode the dark home version -> white on white */
.inside__answer .qa { background: linear-gradient(135deg, rgba(255,90,31,0.14), rgba(255,255,255,0.03)); border-color: rgba(255,122,46,0.4); }
.inside__answer .qa::before { display: none; }
.inside__answer .qa__lab { color: var(--amber); }
/* map section clipped on phones: the grid had no column template below 1200px, so it grew to its content */
@media (max-width: 1199px) { .areas { grid-template-columns: minmax(0, 1fr); } .areas > * { min-width: 0; } }
/* home bento: the "last even card spans 2" rule pushed the 8th card onto a 4th row (the 8 cards fill 12 cells) */
@media (min-width: 900px) { .bento:has(> .bento__item--feature) > .bento__item:last-child:nth-child(even) { grid-column: auto; } }
/* /reviews/ big rating: ".rv-big span" made the stars a grey vertical stack */
.rv-big .stars { display: inline-flex; gap: 2px; color: var(--amber); margin-top: 0; }
/* section heads are left-aligned: the measure rule centred their lead/eyebrow, so they sat indented under the H2 */
.sec__head p, .sec__head .eyebrow, .sec__head .lead { margin-inline: 0; }
/* real job photos in card tops were letterboxed in a square; product cut-outs (square) keep "contain" */
.card__pic--photo { aspect-ratio: 5 / 4; }
.card__pic--photo img { object-fit: cover; padding: 0; }
/* contact/quotation checkboxes shrank to 13-16px wide and stretched tall where the label wrapped */
.chk input[type="checkbox"], .chk input[type="radio"] { flex: 0 0 18px; width: 18px !important; height: 18px !important; min-height: 0 !important; }
/* two lead paragraphs ran together */
.lead + .lead, .lead p + p { margin-top: 0.9em; }
/* dark boxes: restored lists (p3.py), and breathing room between stacked boxes */
.pull + .pull { margin-top: 16px; }
.pull .achips { margin-top: 14px; }
.pull .achip { background: var(--white-06); border-color: var(--white-12); color: var(--white); }
.pull .achip .ic { color: var(--flame-300); }
.pull__list { margin: 12px 0 0; padding-left: 1.15em; display: grid; gap: 6px; color: var(--mist); }
.prose + .achips, .prose + .brands, .prose + .checks { margin-top: 20px; }
.grid-note { margin-top: 22px; color: var(--ink-soft); }
/* a single card left alone on the last row spans the row instead (not photo cards) */
@media (min-width: 600px) and (max-width: 899px) { .cards > :last-child:nth-child(odd):not(:has(.card__pic)) { grid-column: 1 / -1; } }
@media (min-width: 900px) {
  .cards:not(.cards--2):not(.cards--4) > :last-child:nth-child(3n+1):not(:has(.card__pic)) { grid-column: 1 / -1; }
  .cards--4 > :last-child:nth-child(4n+1):not(:has(.card__pic)) { grid-column: 1 / -1; }
  .cards--2 > :last-child:nth-child(odd):not(:has(.card__pic)) { grid-column: 1 / -1; }
  /* one or two reviews no longer leave an empty third column */
  .quotes:has(> :only-child) { grid-template-columns: minmax(0, 760px); }
  .quotes:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.chk-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* FAQ splits: the heading column was centred against a tall accordion (300px+ of blank above it) */
.split:has(details) { align-items: start; }
/* privacy/cookie/terms text block centred instead of hugging the left */
.legal-doc { margin-inline: auto; }
/* word-split headings: the reveal mask clipped descenders mid-animation */
.sw { padding-bottom: 0.14em; margin-bottom: -0.14em; }
/* blog "On this page" box looked empty when closed */
details.pst-toc-m > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 200ms; }
details.pst-toc-m[open] > summary::after { transform: rotate(-135deg); }
/* hero side card is never hidden before the intro (it only slides now; see p3.py) */
.motion-pending .hero__side > * { opacity: 1; }