/* =========================================================================
   location.css — a single location page.

   These are conversion pages, not articles. No TOC rail, no share rail, no
   read time, no "last updated". The shape is: hero with a form beside it,
   the local argument (unique per page), FAQ, the UK map, then a closing form.
   Nothing between the forms is templated furniture — it is all the page's own
   copy.

   Loaded only on single location posts. Tokens come from styles.css.
   ========================================================================= */

/* ---------- hero ----------------------------------------------------- */

.loc-hero {
  padding: var(--space-12) 0 var(--space-12);
}

/* The hero already carries the intro, so the body starts close underneath it
   rather than adding a second full section's worth of top padding. */
.loc-body-section { padding-top: var(--space-4); }

.loc-hero__crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--mid);
  margin-bottom: var(--space-6);
}

.loc-hero__crumb a { color: var(--mid); text-decoration: none; }
.loc-hero__crumb a:hover { color: var(--ink); }
.loc-hero__crumb .sep { color: var(--warm-2); }

.loc-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-16);
  align-items: start;
}

.loc-hero__title {
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin-bottom: var(--space-6);
}

.loc-hero__title b { font-weight: 700; }

.loc-hero__lede {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

/* The opening paragraphs, sitting under the lede in the hero column so it fills
   beside the form instead of leaving a gap. */
.loc-hero__intro { max-width: 46ch; }

.loc-hero__intro p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 var(--space-4);
}

.loc-hero__intro p:last-child { margin-bottom: 0; }

/* ---------- the form card -------------------------------------------- */

.loc-form {
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 16px;
  padding: var(--space-8);
  box-shadow: 0 1px 2px rgba(13, 13, 11, 0.03), 0 12px 32px rgba(13, 13, 11, 0.04);
}

/* Matches .section-eyebrow exactly. The brand does not set copy in capitals,
   so no text-transform here. */
.loc-form__eye {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.loc-form__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-6);
}

.loc-form__fields { display: grid; gap: var(--space-4); }

.loc-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}

.loc-form input,
.loc-form textarea {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.loc-form textarea { resize: vertical; min-height: 120px; }

/* matches every other field on the site: ink, not orange */
.loc-form input:focus,
.loc-form textarea:focus {
  outline: none;
  border-color: var(--black);
  box-shadow: 0 0 0 4px rgba(13, 13, 11, 0.05);
}

.loc-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* A field the visitor has actually left invalid, after they have interacted
   with it. :user-invalid rather than :invalid so an untouched empty required
   field is not red on page load. */
.loc-form input:user-invalid,
.loc-form textarea:user-invalid {
  border-color: #b00020;
  box-shadow: 0 0 0 4px rgba(176, 0, 32, 0.06);
}

.loc-form__optional { color: var(--mid); font-weight: 300; }

.loc-form__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* The global .btn--orange:hover turns white, which is meant for the dark
   .cta-strip. On this white card it would vanish, so light contexts override
   it exactly as .contact-form and .hero__cta already do. */
.loc-form .btn--orange:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.loc-form__trust {
  font-size: 12.5px;
  color: var(--mid);
  line-height: 1.5;
}

.loc-form__trust b { color: var(--ink); font-weight: 600; }

/* ---------- body: editorial two-column sections ---------------------- */

/* Desktop uses the full page: each section is a heading rail on the left and a
   wider reading column on the right. On narrow screens it collapses to the
   single centred column — which is the mobile treatment, not the desktop one. */
.loc-body { margin: 0; }


.loc-section {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: var(--space-10);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--rule);
}

/* first section flows straight out of the hero — no rule, no extra top gap */
.loc-section:first-child { border-top: none; padding-top: 0; }

.loc-section__head h2 {
  font-size: clamp(24px, 2.2vw, 31px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  position: sticky;
  top: calc(var(--nav-h) + 28px);
}

.loc-section__body { max-width: 74ch; }

.loc-section__body > h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: var(--space-8) 0 var(--space-3);
}

.loc-section__body p {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 var(--space-5);
}

.loc-section__body p:last-child { margin-bottom: 0; }
.loc-section__body strong { color: var(--ink); font-weight: 600; }

.loc-section__body ul { margin: 0 0 var(--space-5); padding-left: 20px; }
.loc-section__body li {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

/* ---------- offering cards (the services section) -------------------- */

.loc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.loc-card {
  padding: var(--space-6);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.loc-card h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
  padding-left: 16px;
  position: relative;
}

.loc-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--orange);
}

.loc-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* Inline prose links use the house chip treatment, not a bespoke one: a plain
   underlined link at rest, with the brand-orange box appearing on hover/focus.
   This mirrors the canonical rule in styles.css that already covers
   .post__body, .svc-detail__*, .faq__a-inner, .page-head__intro and
   .section-aside — .loc-body is simply the next body-copy context. Kept here
   rather than added to that selector list because the root and theme copies of
   styles.css have diverged; if they are ever reconciled, fold this in there. */
.loc-section__body a {
  color: var(--ink);
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-color: var(--black);
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.loc-section__body a:hover,
.loc-section__body a:focus-visible {
  background: var(--orange);
  color: var(--black);
  text-decoration-color: var(--black);
  outline: none;
}


/* Bulleted lists in body copy (industry pages use them). Orange dot markers,
   spacing tuned to the body paragraph rhythm. Before the parser gained list
   support these items folded into one long dash-run paragraph. */
.loc-body ul,
.loc-section__body ul {
  margin: var(--space-4) 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 74ch;
}
.loc-body li,
.loc-section__body li {
  position: relative;
  padding-left: 1.5em;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.loc-body li::before,
.loc-section__body li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.loc-body li strong,
.loc-section__body li strong { font-weight: 600; }

/* ---------- nearby: coverage + interactive map ----------------------- */

.loc-nearby__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-16);
  align-items: center;
}

.loc-nearby__intro .section-title { margin-bottom: var(--space-5); }

.loc-nearby__note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
  margin-bottom: var(--space-8);
}

.loc-nearby__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.loc-nearby__list a {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.loc-nearby__list a:hover { background: var(--paper); border-color: var(--ink); }

/* ---------- the map --------------------------------------------------- */

.loc-map { position: relative; }

.loc-map .ukmap__svg {
  width: 100%;
  height: auto;
  max-height: 560px;
  display: block;
  overflow: visible;
}

.ukmap__land {
  fill: var(--paper);
  stroke: var(--warm-2);
  stroke-width: 3;
  stroke-linejoin: round;
}

.ukmap__hit { fill: transparent; }          /* a comfortable tap target */

.ukmap__dot {
  fill: var(--orange);
  stroke: var(--cream);
  stroke-width: 4;
  transition: opacity 0.35s var(--ease);
}

.ukmap__label {
  font-family: var(--font);
  font-size: 30px;
  font-weight: 500;
  fill: var(--ink-soft);
  transition: fill 0.2s var(--ease), opacity 0.3s var(--ease);
}

.ukmap__pin { cursor: pointer; }
.ukmap__pin:focus-visible { outline: none; }
.ukmap__pin:hover .ukmap__label { fill: var(--ink); font-weight: 600; }

/* neighbourhood dots: hidden until their city is the active one */
.ukmap__hood { opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.ukmap__hood.is-active { opacity: 1; }
.ukmap__hood-dot { fill: var(--orange); fill-opacity: 0.55; }

/* while zoomed, quiet everything except the city in focus */
.loc-map.is-zoomed .ukmap__dot { opacity: 0.12; }
.loc-map.is-zoomed .ukmap__label { opacity: 0; }
.loc-map.is-zoomed .ukmap__pin.is-active .ukmap__dot { opacity: 1; }

/* the neighbourhood name panel, over the map */
.loc-map__panel {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 60%;
  padding: var(--space-5) var(--space-6);
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(13, 13, 11, 0.06);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}

.loc-map__panel.is-visible { opacity: 1; transform: translateY(0); }

.loc-map__panel-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

.loc-map__panel-hoods { display: flex; flex-wrap: wrap; gap: 6px; }

.loc-map__panel-hoods span {
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 4px 10px;
  background: var(--cream);
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .ukmap__dot, .ukmap__label, .ukmap__hood, .loc-map__panel { transition: none; }
}

@media (max-width: 900px) {
  .loc-nearby__grid { grid-template-columns: 1fr; gap: var(--space-10); }
  .loc-map { max-width: 420px; margin: 0 auto; }
  /* touch has no hover: keep the panel out of the way and the map static */
  .loc-map__panel { display: none; }
}

.loc-nearby__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-6);
}

.loc-nearby__list a {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.loc-nearby__list a:hover { background: var(--cream); border-color: var(--ink); }

/* ---------- closing band ---------------------------------------------- */

.loc-close__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-16);
  align-items: start;
}

.loc-close__title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: var(--space-5);
}

.loc-close__title b { font-weight: 700; }

.loc-close__text {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 1000px) {
  .loc-hero__grid,
  .loc-close__grid { grid-template-columns: 1fr; gap: var(--space-10); }

  /* the mobile treatment: one centred column, heading above its content */
  .loc-section {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-10) 0;
  }
  .loc-section__head h2 { position: static; }
  .loc-section__body { max-width: 68ch; }
}

@media (max-width: 640px) {
  .loc-hero { padding: var(--space-8) 0 var(--space-10); }
  .loc-form { padding: var(--space-6); }
  .loc-form__row { grid-template-columns: 1fr; }
  .loc-body > h2 { margin-top: var(--space-12); }
}