/* Areas page (/areas/). Rebuilt 15 Oct 2026 in the home page's branding with its own layout (James: "now same with
   areas we cover page", after the prices and reviews pages). Markup: areasHub() in src/pages/areas.mjs.

   The home page's brand, used here as on the prices page: daylight sky fading to white at the top, white and pale blue
   sections taking turns, the sun gradient (the logo's ring) and the faded sun arc, the sun ring round icons, white
   cards with a soft shadow on pale blue, the ratings pill and "Get My Free Solar Quote".
   What's the page's own: the postcode check as the hero's answer to "do you cover me?", and the map, where the
   100-mile circle is drawn as the logo's ring. */

.page-areas { --ar-radius: 20px; --ar-shadow: 0 1px 2px rgba(38, 40, 42, .06), 0 18px 40px -28px rgba(38, 40, 42, .4); }

/* ---------- Hero: the answer, and the postcode check beside it ---------- */
.ar-hero { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 44px) 0 clamp(40px, 5vw, 64px);
  background: linear-gradient(180deg, var(--sky) 0%, #f5f8fa 52%, var(--paper) 100%); }
.ar-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ar-hero h1 { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; }
.ar-hero h1 .kicker { font: 500 1.125rem/1.4 var(--text); color: var(--ink-soft); }
.ar-hero h1 .display { font-size: clamp(2.375rem, 1.45rem + 3.1vw, 4rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.ar-hero .page-lede { max-width: 36rem; }
.ar-hero .crumbs ol { margin-bottom: 20px; }
.ar-call { display: flex; flex-direction: column; line-height: 1.3; }
.ar-call a { font-weight: 600; font-size: 1.125rem; color: var(--ink); text-decoration: none; }
.ar-call a:hover { text-decoration: underline; text-decoration-color: var(--sun-coral); }
.ar-call span { color: var(--ink-soft); font-size: 1rem; }

/* The accreditation logos, quietly, under the phone number. Never recoloured (the schemes' rules). */
.ar-acc { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; max-width: 34rem; }
.ar-acc li { display: flex; align-items: center; }
.ar-acc img { display: block; width: auto; height: calc(var(--h) * .78); max-width: none; }

/* The quote card sits in the sun: the faded ring rising behind its top right corner. */
.ar-hero-card { position: relative; }
.ar-hero-card::before { content: ""; position: absolute; z-index: 0; width: 560px; height: 560px; right: -230px; top: -200px;
  background: url("sun-arc.svg") center / contain no-repeat; pointer-events: none; }
.ar-hero-card .qcard-wrap { position: relative; z-index: 1; }
.ar-hero-card .hero-form { box-shadow: 0 1px 3px rgba(38, 40, 42, .08), 0 24px 56px -16px rgba(38, 40, 42, .32); }

@media (min-width: 1000px) {
  .ar-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text card" "act card";
    column-gap: clamp(48px, 6vw, 96px); row-gap: 30px; align-items: start; }
  .ar-hero-text { grid-area: text; }
  .ar-hero-card { grid-area: card; margin-top: 30px; }
  .ar-hero-act { grid-area: act; }
}
@media (max-width: 999px) {
  .ar-hero-card { max-width: 30rem; }
  .ar-hero-card::before { width: 380px; height: 380px; right: -170px; top: -150px; }
}
@media (max-width: 700px) {
  .ar-hero-card::before { width: 300px; height: 300px; right: -200px; top: -40px; }
}

/* ---------- Find your area: the map, the key and popular areas beside it, then the lists ---------- */
.ar-find-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) { .ar-find-top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); } }
.ar-map-side h3 { margin: 28px 0 12px; font-size: 1.25rem; }
.ar-popular { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.ar-popular a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -12px rgba(38, 40, 42, .4); color: var(--ink); font-weight: 500; text-decoration: none; }
.ar-popular a:hover { box-shadow: 0 0 0 2px var(--sun-coral); }
.ar-map-side .page-actions { margin-top: 28px; }

/* The map card */
.am { margin: 0; padding: clamp(10px, 1.4vw, 16px); border-radius: var(--ar-radius); background: var(--paper); box-shadow: var(--ar-shadow); }
.am-svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.am-sea { fill: #e3ecf2; }
.am-land { fill: #fff; }
.am-coast { fill: none; stroke: #b9c6d0; stroke-width: 1; stroke-linejoin: round; }
.am-ring { fill: none; stroke-width: 4; }
.am-radius { stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .55; }
.am-radius-label { font: 600 13px/1 var(--text); fill: var(--ink); letter-spacing: .02em; }
.am-town { fill: var(--ink); stroke: #fff; stroke-width: 1.4; }
.am-town:not(.am-town--named) { fill: #5b6168; }
.am-label { font: 500 13.5px/1 var(--text); fill: var(--ink); paint-order: stroke; stroke: rgba(255, 255, 255, .9); stroke-width: 3.5px; stroke-linejoin: round; }
.am-label--base { font-weight: 700; font-size: 14.5px; }
.am-job { fill: #fff; stroke: var(--sun-coral); stroke-width: 3; }
.am-base { fill: #fff; stroke-width: 4.5; }
.am-base-glow { fill: rgba(245, 178, 84, .35); }
/* Phones: the map is a third of its drawn size, so labels and dots are drawn larger, and the minor labels go. */
@media (max-width: 600px) {
  .am-label { font-size: 23px; stroke-width: 5px; }
  .am-label--base { font-size: 24px; }
  .am-label--minor, .am-sea-label, .am-radius-label { display: none; }
  .am-town { r: 6px; }
  .am-town:not(.am-town--named) { r: 4.5px; }
  .am-job { r: 9px; stroke-width: 4; }
}
.am-sea-label { font: italic 500 13px/1 var(--text); fill: #7d8b96; letter-spacing: .08em; }
.am svg a:hover .am-town, .am svg a:hover .am-job { stroke: var(--sun-amber); stroke-width: 3; }
.am svg a { cursor: pointer; }

.am-key { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 28px; margin: 0; padding: 0; font-size: 1rem; color: var(--ink-soft); }
@media (max-width: 420px) { .am-key { grid-template-columns: minmax(0, 1fr); } }
.am-key li { display: inline-flex; align-items: center; gap: 8px; }
.am-key span { flex: none; display: inline-block; border-radius: 50%; }
.am-key-ring { width: 18px; height: 18px; border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, var(--sun-coral), var(--sun-amber)) border-box; }
.am-key-base { width: 16px; height: 16px; border: 3px solid var(--sun-coral); box-shadow: 0 0 0 4px rgba(245, 178, 84, .35); background: #fff; }
.am-key-town { width: 9px; height: 9px; background: var(--ink); }
.am-key-job { width: 13px; height: 13px; border: 3px solid var(--sun-coral); background: #fff; }

/* The lists by region: white cards on the pale blue, in columns that fill top to bottom */
.ar-regions { margin-top: clamp(32px, 4vw, 56px); column-count: 3; column-gap: clamp(16px, 1.8vw, 24px); }
.ar-region { break-inside: avoid; margin: 0 0 clamp(16px, 1.8vw, 24px); padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px) clamp(8px, 1vw, 12px);
  border-radius: 16px; background: var(--paper); box-shadow: var(--ar-shadow); }
.ar-region h3 { margin: 0 0 4px; padding-bottom: 12px; font-size: 1.125rem; line-height: 1.3; border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--sun-coral), var(--sun-amber) 40%, transparent 40%) 1; }
.ar-region h3 a { color: var(--ink); text-decoration: none; }
.ar-region h3 a:hover { text-decoration: underline; text-decoration-color: var(--sun-coral); text-underline-offset: 4px; }
.ar-region ul { list-style: none; margin: 0; padding: 0; }
.ar-region li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ar-region li:last-child { border-bottom: 0; }
.ar-region li a { flex: 1 1 auto; min-width: 0; font-weight: 500; color: var(--ink); }
.ar-region li span { flex: none; color: var(--ink-soft); font-size: .9375rem; white-space: nowrap; }
.ar-region li.ar-base span { font-weight: 600; color: var(--star); }
@media (max-width: 999px) { .ar-regions { column-count: 2; } }
@media (max-width: 600px) { .ar-regions { column-count: 1; } }

/* ---------- Recent installs: photo cards ---------- */
.ar-jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ar-jobs a { display: block; color: var(--ink); text-decoration: none; }
.ar-jobs img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--line);
  box-shadow: var(--ar-shadow); transition: transform .2s ease; }
.ar-jobs a:hover img { transform: translateY(-2px); }
.ar-job-place { display: block; margin-top: 12px; font: 600 1.0625rem/1.3 var(--text); }
.ar-jobs a:hover .ar-job-place { text-decoration: underline; text-decoration-color: var(--sun-coral); text-underline-offset: 3px; }
.ar-job-date { display: block; margin-top: 2px; font-size: .9375rem; color: var(--ink-soft); }
@media (max-width: 800px) { .ar-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Not on the list? ---------- */
.ar-notlisted { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 900px) { .ar-notlisted { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 96px); } }
.ar-notlisted-text p { margin-top: 14px; max-width: 38rem; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.6; }
.ar-notlisted-text h2 { margin-top: 18px; }
.ar-ring { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 3px solid transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, linear-gradient(135deg, var(--sun-coral), var(--sun-amber)) border-box; }
.ar-ring svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ar-ring svg .warm { stroke: var(--sun-coral); stroke-width: 2; }
.ar-notlisted .page-actions { margin-top: 26px; }
.page-areas .ar-notlisted .address-card { padding: clamp(22px, 2.6vw, 30px); border-top: 0; border-radius: var(--ar-radius); background: var(--paper); box-shadow: var(--ar-shadow); }