/*
 * Fixes from the 26 September 2026 afternoon audit (theme copy pass).
 * Loaded on every page after style.css (functions.php). Kept out of style.css,
 * which other sessions edit and deploy, so these rules land and roll back on
 * their own. Each block names the finding it answers.
 */

/* ── /websites/ estimator ─────────────────────────────────────────────
   The page-count slider was a 6px strip to aim at on a phone. The input is
   now 44px tall; the track still looks 6px because it is painted as a
   centred band. Firefox draws its own track, so it gets the band there. */
.est-slider input#est-pages[type="range"] {
  height: 44px;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(var(--border), var(--border)) center / 100% 6px no-repeat;
  cursor: pointer;
}
@supports (-moz-appearance: none) {
  .est-slider input#est-pages[type="range"] { background: none; }
}
.est-slider input#est-pages[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}

/* "Your estimate" (pinned phone card) and the "Recommended" flag were 10.5px. */
@media (max-width: 900px) {
  .est-card .est-card-label { font-size: 12px; }
}
.exs-plan-flag { font-size: 12px; }

/* ── Pause/play for moving content (WCAG 2.2.2) ────────────────────────
   Home showcase videos (inc/home-showcase.php, js/home-showcase.js) and
   the scrolling client logos (template-parts/client-strip.php). Plum on a
   7% plum tint, like the site's other chips; 44px tall for touch. Both are
   hidden in the markup and shown by their script. */
.as-motion-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(92, 36, 65, .18); border-radius: 999px;
  background: rgba(92, 36, 65, .07); color: var(--plum);
  font: 600 14px/1 'Work Sans', system-ui, sans-serif; cursor: pointer;
  transition: background-color .2s;
}
.as-motion-btn:hover { background: rgba(92, 36, 65, .13); }
.as-motion-btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.as-motion-btn[hidden] { display: none; }
.as-motion-ico { flex: none; }
.as-motion-ico--play,
.as-motion-btn.is-paused .as-motion-ico--pause { display: none; }
.as-motion-btn.is-paused .as-motion-ico--play { display: block; }

.hs-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* Logos: a round icon button level with the "Businesses we work with" line. */
.as-clients-inner { position: relative; }
.as-motion-btn--logos { position: absolute; top: -13px; right: 24px; width: 44px; padding: 0; }
.as-clients-marquee.is-paused .as-clients-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .as-motion-btn--logos { display: none; }
}

/* /drone-surveys/ hero is now the roof from our sample chimney report. On a
   wide screen the text column covers the left half, so show the photo from
   its left edge: that puts the chimney stack beside the words, not under them. */
@media (min-width: 901px) {
  .offer-hero--photo-survey .offer-hero-media img { object-position: 0% 45%; }
}

/* For Home price strip: "/half hour", "/hr", "/mo" and "from" were 0.4em of
   the figure, 10.4px on a phone. Never below 12px. */
.as-hp-amt .as-hp-per { font-size: max(12px, 0.4em); }
.as-hp-amt .as-hp-from { font-size: max(12px, 0.42em); }

/* /licensing/ hero: "Licences in your account" was a 25px-tall tap target. */
.offer-hero-actions > a.offer-text-link[href="#your-account"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em; min-height: 44px;
}

/* Reduced motion, audit 2 Oct. The logo strip on /about/ and the branding
   key on /branding/ kept looping. The homepage strip moves by choice. */
@media (prefers-reduced-motion: reduce) {
  body:not(.home) .as-clients-track { animation: none; }
  .bw-key-item { animation: none; }
  .bw-key--van { color: var(--plum); background: rgba(92, 36, 65, .10); }
}

/* Footer trust strip: four items since the ICO line came off (2 Oct). Two
   across below 1040px so the fourth never sits alone on a row. */
.trust-banner-items { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .trust-banner-items { grid-template-columns: repeat(2, 1fr); } }

/* Reviews on phones (audit 2 Oct): the swipe row is as tall as the longest
   review, which left ~200px of blank page under the shorter cards. Cards now
   share that height, with the name pinned to the foot of each. */
@media (max-width: 900px) {
  .as-rv-stage { align-items: stretch; }
  .as-rv-card, .as-rv-card:nth-child(4) { display: flex; flex-direction: column; align-self: stretch; }
  .as-rv-card figcaption { margin-top: auto; padding-top: 16px; }
}
.as-rv-stage:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; border-radius: 8px; }

/* Keeps a short phrase on one line, e.g. "pop-up" in the first-aid heading. */
.as-nowrap { white-space: nowrap; }

/* /websites/ estimator on phones (audit 2 Oct): the running total sat above
   "Build your quote" and, pinned to the top, covered the first add-on as you
   scrolled. It now sits after the options and pins to the foot of the screen
   while you choose, then settles in place. The itemised lines are left to the
   wider layout so the pinned bar stays short. */
@media (max-width: 900px) {
  .as-estimate .est-right { order: 0; top: auto; bottom: 0; margin: 22px 0 0; }
  .as-estimate .est-right .est-card-detail { display: none; }
}

/* Accessibility, audit 2 Oct (axe, WCAG 2.1 AA).
   Links inside running text were told apart from the words around them by
   colour alone (1.4:1 to 1.8:1 against the text). Underline them. Buttons and
   cards carry a class, so only plain text links change. */
main :is(p, li, td, dd, figcaption) a:not([class]) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
/* The hero price card's rows are whole-row links, not running text
   (2026-10-10). */
main .hero-v2-rows li > a:not([class]) { text-decoration: none; }
/* Contrast: each was just under 4.5:1. */
.hero-v2-urgent__cta.is-open .hero-v2-urgent__status { color: #17703d; }
.home-project-starter .lead, .home-project-note,
.fh-problem--question > p, .is-best .offer-route-terms { color: #46494e; }
.work-pause { opacity: 1; color: #5a5e63; }
.air .lsr-card--no > .lsr-q { color: #4f5257; }
/* Struck-through "was" prices were faded with opacity, which axe counts. */
.startup-hero__price .startup-hero__price-fig s, .tier-card .tier-card-top .tier-pages s { color: #4a4e53; opacity: 1; }
.tier-card--featured .tier-card-top .tier-pages s { color: #e2cdd8; }
.tier-card:not(.tier-card--featured) .tier-card-top .tier-pages { opacity: 1; color: #3a3e43; }