/* Smartfix's own styles, loaded after the kit's (2 Oct 2026). */

@media (min-width: 1024px) {
  /* The wide chameleon lockup a size up on laptops, where the header has the room (56px to 64px). */
  #siteHeader .nav-logo-lg { height: 4rem; }
  #siteHeader.is-scrolled .nav-logo-lg { height: 3rem; }
  /* The hero's two buttons a little further apart (12px to 24px; Mike, 2 Oct). */
  #hero .ph-hero-ctas { column-gap: 1.5rem; }
}
@media (min-width: 1280px) {
  /* The Gas Safe triangle in the hero's corner bigger (Mike, 7-8 Oct): 80px to 112px here, 128px from 1440px.
     Below 1280px it keeps the kit's 68px, which is what clears the counters at 1024. */
  #hero .ph-hero-mark { height: 7rem; }
}
@media (min-width: 1440px) {
  #hero .ph-hero-mark { height: 8rem; }
}

/* The footer's line under the logo on one line on a laptop (Mike, 8 Oct). */
@media (min-width: 768px) {
  #siteFooter p.max-w-sm { max-width: none; }
}

@media (max-width: 639px) {
  /* The pull quote smaller on phones: four lines from 360px wide up, not five (23px to 20px; Mike, 2 Oct). */
  section[aria-label="Customer quote"] blockquote p.display { font-size: 1.25rem; }
}

@media (max-width: 639px) {
  /* No button left stranded on the left on a phone (Mike, 7 Oct): full width, like every other button there,
     so either thumb reaches it. "All services" under the services intro... */
  #services a.btn[href="/services/"], #offer a.btn { width: 100%; justify-content: center; }
  /* Things that look like buttons sat on the left too (Mike, 7 Oct): the town chips under the map centred. */
  #areas ul.flex.flex-wrap { justify-content: center; }
}

@media (max-width: 1023px) {
  /* The "On this page" jump list is a laptop sidebar; on a phone it fell to the foot of the page, after the
     sections it points to. */
  nav[aria-label="On this page"] { display: none; }
}

@media (max-width: 767px) {
  /* The phone footer without "Areas we cover": the Areas section above already lists the towns (Mike, 2 Oct). */
  #siteFooter .md\:hidden .text-center > .border-t { display: none; }
  /* Its "Get in touch" button as wide as the icon row under it: three 6.5rem icons and two 0.5rem gaps. */
  #siteFooter .md\:hidden > .btn-primary { width: 20.5rem; max-width: 100%; }
}

/* The rating counter as "5" and a star, not the words "star rated" (Mike, 7 Oct). Decoration only: the
   empty alternative text keeps screen readers to "5, customer rating". */
#hero .ph-hero-stats > div:nth-child(2) dd::after { content: "\2605" / ""; color: var(--color-star-bright); font-size: 0.78em; margin-left: 0.12em; vertical-align: 0.06em; }

/* The coverage map softer (Mike, 2 Oct: "a bit harsh"): pale brand tints in place of the solid brand and
   navy, white rings on the dots instead of navy ones. */
.ph-coverage { background: #f4f7fc; }
.cov-near { fill: #e8eff9; stroke: #fff; stroke-width: 1.5; }
.cov-covered { fill: color-mix(in srgb, var(--color-brand) 26%, white); stroke: #fff; stroke-width: 1.5; }
.cov-home { fill: color-mix(in srgb, var(--color-brand) 62%, white); stroke: #fff; stroke-width: 1.5; }
.cov-dot { fill: var(--color-star); stroke: #fff; stroke-width: 2.5; }
.cov-label { font-weight: 600; }
.cov-label-home { font-weight: 800; }

/* Round 9 (Mike, 7 Oct). */
/* The Gas Safe section from 640px (Mike, 7 Oct): "Gas Safe registered" on top as the section's label, then the
   triangle beside the heading, the two centred on each other (Mike: the foot-on-baseline version looked high). On a phone it stays stacked, where beside it
   would squeeze "On the Gas Safe Register." into three short lines. */
@media (min-width: 640px) {
  #gas-safe .ph-panel > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; }
  #gas-safe .ph-panel > div:first-child > * { grid-column: 1 / -1; }
  #gas-safe .ph-panel > div:first-child > .eyebrow { grid-row: 1; margin-top: 0; }
  #gas-safe .ph-panel > div:first-child > img { grid-column: 1; grid-row: 2; align-self: center; margin-top: 1.25rem; }
  #gas-safe .ph-panel > div:first-child > h2 { grid-column: 2; grid-row: 2; align-self: center; margin-top: 1.25rem; }
}

/* "Our work" on a laptop: all six photos in one row of smaller portrait tiles (the kit's two rows of three ran to
   about 1,000px). Every photo still opens full size; phones and tablets keep their swipe row and grid. */
@media (min-width: 1024px) {
  #work .rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #work .rail > figure { grid-column: span 1 / span 1; }
}

/* No "Prefer to talk it through?" line in the form (Mike, 7 Oct): the number is in the contact section beside it. */
.qs .qs-call { display: none; }

/* The offer on phones and tablets: its button after the card of what's included, so it no longer follows
   "Ask about a new boiler" straight after the section above. */
@media (max-width: 1023px) {
  #offer > .grid { gap: 0; }
  #offer > .grid > div:first-child { display: contents; }
  #offer > .grid > dl { margin-top: 1.75rem; }
  #offer > .grid > div:first-child > a.btn { order: 2; margin-top: 1.5rem; }
}


/* The Gas Safe section on a phone (Mike, 7 Oct): its two buttons under the register check, side by side at
   half width each, so the check reads straight after the words and the actions close the section. */
@media (max-width: 639px) {
  #gas-safe .ph-panel { row-gap: 0; padding-left: 1.1rem; padding-right: 1.1rem; }
  #gas-safe .ph-panel > div:first-child { display: contents; }
  #gas-safe .ph-panel > .ph-check { margin-top: 1.75rem; }
  #gas-safe .ph-panel > div:first-child > div.flex { order: 2; flex-direction: row; margin-top: 1rem; gap: 0.6rem; }
  #gas-safe .ph-panel > div:first-child > div.flex > a { flex: 1 1 auto; min-width: 0; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.9rem; white-space: nowrap; }
  /* Each button its own width plus an equal share of what's left, so both get the same padding (Mike, 7 Oct). */
  /* Room for the words at 360px: the arrow and the phone icon go on a phone. */
  #gas-safe .ph-panel > div:first-child > div.flex > a svg { display: none; }
}
/* Under 360px (the oldest small phones) half width can't hold "Check the register": stacked, full width. */
@media (max-width: 359px) {
  #gas-safe .ph-panel > div:first-child > div.flex { flex-direction: column; }
}