/* ==========================================================================
   LOCATIONS HUB — page-templates/locations.php

   Rebuilt 8 September 2026 as a search-first directory. The previous
   stylesheet dressed a hero block of place names, a "what local means"
   ledger and an FAQ; all three sections were removed with the rebuild,
   because each repeated a page that owns its subject properly.

   The brief was explicit that this must not look like an SEO directory: no
   walls of tiny blue links, no cramped lists, no boxes around everything. So
   the furniture matches the rest of the site — hairline rules where a rule
   will do, the display face for names, one orange accent — and density is
   controlled by column count rather than by shrinking the type.

   Mobile is the primary interface here, not an afterthought: the search field
   is full width and 56px tall, every directory row is a 48px touch target,
   the chips and the alphabet scroll horizontally with momentum rather than
   wrapping into four cramped lines, and nothing can overflow sideways.
   ========================================================================== */

/* ---------- 1. Search ----------
   9 September 2026: the page now takes the standard shared hero
   (template-parts/layout/page-hero.php) with a photograph, and
   .loc-hero / .loc-hero-in / .loc-hero h1 / .loc-hero-sub are removed -
   that hero no longer exists on this page. .loc-search and everything
   below it move, unchanged, into their own section ("1b. SEARCH YOUR AREA"
   in locations.php) and keep every rule here: nothing about the search is
   hero-scoped. */
.loc-search{position:relative;margin:0;max-width:40rem}
.loc-search-field{position:relative;display:flex;align-items:center}
.loc-search-ico{position:absolute;left:20px;display:flex;color:var(--muted);pointer-events:none}
.loc-search-input{
  width:100%;height:64px;padding:0 56px;
  font-family:var(--fh);font-size:17px;font-weight:500;letter-spacing:-0.02em;color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:14px;
  transition:border-color .16s ease,box-shadow .16s ease;
  -webkit-appearance:none;appearance:none;
}
.loc-search-input::placeholder{color:var(--muted);font-weight:400}
.loc-search-input:hover{border-color:#cfd8e0}
.loc-search-input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(232,109,26,.14)}
/* The native clear affordance is inconsistent across browsers and we ship our own. */
.loc-search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.loc-search-clear{
  position:absolute;right:12px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:var(--muted);
  background:transparent;border:0;border-radius:50%;cursor:pointer;
}
/* [hidden] sets display:none, and the display:flex above is more specific,
   so without this the clear button shows on an empty field. Caught in
   rendered QA, not by any test - the markup was correct and the CSS won. */
.loc-search-clear[hidden]{display:none}
.loc-search-clear:hover{color:var(--ink);background:#f1eee9}
.loc-search-clear:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- 2. Results ---------- */
.loc-results{
  position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);
  list-style:none;margin:0;padding:6px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px -18px rgba(16,32,48,.28);
  max-height:min(56vh,420px);overflow-y:auto;overscroll-behavior:contain;
}
.loc-result{margin:0}
.loc-result-link{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:10px;text-decoration:none;color:inherit}
.loc-result.is-active .loc-result-link,
.loc-result-link:hover{background:#faf7f2}
.loc-result-name{font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.loc-result-area{font-size:14px;color:var(--muted)}
.loc-result-go{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--orange-dk);white-space:nowrap}

.loc-noresults{margin:14px 0 0;padding:22px;background:#faf7f2;border:1px solid var(--line);border-radius:14px}
.loc-noresults-h{margin:0;font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-0.03em;color:var(--ink)}
.loc-noresults p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.loc-noresults-btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}

/* ---------- 3. Popular ---------- */
.loc-sec-h{margin:0;font-size:clamp(24px,2.4vw,30px);letter-spacing:-0.035em}
.loc-pop{padding-top:64px}
.loc-pop-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 0;padding:0}
.loc-pop-card{
  display:flex;align-items:center;gap:10px;
  padding:18px;min-height:74px;
  background:#fff;border:1px solid var(--line);border-radius:13px;
  text-decoration:none;color:inherit;
  transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.loc-pop-card:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(16,32,48,.3)}
.loc-pop-card:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.loc-pop-name{display:block;font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.028em;color:var(--ink);line-height:1.25}
.loc-pop-area{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
.loc-pop-go{margin-left:auto;color:var(--orange-dk);font-size:17px;transition:transform .16s ease}
.loc-pop-card:hover .loc-pop-go{transform:translateX(3px)}

/* ---------- 4. Browse ---------- */
.loc-browse-head{max-width:46rem;margin:0 0 30px}
.loc-browse-sub{margin:12px 0 0;font-size:17px;line-height:1.6;color:var(--muted);max-width:56ch}

.loc-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
/* The chip itself is the one filter-chip pattern in primestart.css; what
   stays here is only what a region filter adds to it - a minimum height, its
   count, and the sub-region marker. */
.loc-chip{min-height:40px}
.loc-chip-n{font-size:12.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.loc-chip.is-on .loc-chip-n{color:var(--muted)}
/* A sub-region reads as a child of the region before it, not a peer. */
.loc-chip-sub{font-size:14px;color:var(--muted)}
.loc-chip-sub::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--line)}
.loc-chip-sub.is-on::before{background:var(--orange)}

.loc-az{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.loc-az-l{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 6px;
  font-family:var(--fh);font-size:14.5px;font-weight:700;color:var(--ink-2);
  text-decoration:none;border-radius:8px;
}
.loc-az-l:hover{background:#faf7f2;color:var(--ink)}
.loc-az-l:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.loc-count{margin:14px 0 26px;font-size:14.5px;color:var(--muted);font-variant-numeric:tabular-nums}

.loc-dir-block{margin:0 0 34px;scroll-margin-top:96px}
.loc-dir-letter{
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);
  font-family:var(--fh);font-size:14px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-dk);
}
.loc-dir-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 26px}
.loc-dir-list li{margin:0}
.loc-dir-link{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:11px 4px;min-height:44px;
  text-decoration:none;color:inherit;border-bottom:1px solid transparent;
  transition:color .14s ease,border-color .14s ease;
}
.loc-dir-link:hover{color:var(--orange-dk);border-bottom-color:var(--line)}
.loc-dir-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
.loc-dir-name{font-size:16px;font-weight:500;letter-spacing:-0.015em}
.loc-dir-area{font-size:13px;color:var(--muted)}

.loc-dir-empty{margin:8px 0 0;font-size:16px;color:var(--muted)}
.loc-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--orange-dk);text-decoration:underline;cursor:pointer}
.loc-linkbtn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- 5. Final ---------- */
/* REDONE 9 September 2026 (owner: "this cta thing at the bottom of locations
   needs re doing"). It was centred text floating in a 576px band of dark with
   a hundred and fifty empty pixels under the last line. It is a panel now -
   the block has edges, the words sit inside them, and the section stops when
   the content does. */
.loc-final{padding:96px 0}
.loc-final .wrap{
  max-width:760px;padding:48px 44px 44px;border-radius:22px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}
.loc-final h2{max-width:18ch}
.loc-final-note{color:#A3B5C4}

/* ==========================================================================
   NARROW
   ========================================================================== */

@media (max-width:1040px){
  .loc-pop-grid{grid-template-columns:repeat(3,1fr)}
  .loc-dir-list{grid-template-columns:repeat(3,1fr);gap:0 20px}
}

@media (max-width:820px){
  .loc-pop-grid{grid-template-columns:repeat(2,1fr)}
  .loc-dir-list{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  /* .loc-hero rules removed with the hero itself. */

  /* The search is the point of the page on a phone, so it takes the full
     width and a 56px target, and the dropdown gets most of the viewport
     without ever covering the field itself. */
  .loc-search{max-width:none}
  .loc-search-input{height:56px;font-size:16px;padding:0 48px;border-radius:12px}
  .loc-search-ico{left:16px}
  .loc-results{max-height:min(52vh,340px);top:calc(100% + 6px)}
  .loc-result-link{padding:14px 12px;min-height:52px;flex-wrap:wrap;gap:4px 10px}
  .loc-result-go{width:100%;margin-left:0;font-size:13px}
  .loc-noresults{padding:18px}
  .loc-noresults-btns .btn{width:100%}

  .loc-pop{padding-top:44px}
  .loc-pop-grid{grid-template-columns:1fr;gap:10px;margin-top:20px}
  .loc-pop-card{min-height:64px;padding:15px 16px}

  .loc-browse-head{margin-bottom:22px}
  .loc-browse-sub{font-size:16px}

  /* Chips and the alphabet scroll rather than wrap. Wrapping twelve chips
     into four rows pushes the directory itself off the first screen, and a
     wrapped alphabet is 26 tiny targets in a block. Both keep momentum
     scrolling and hide the scrollbar. */
  .loc-filters,.loc-az{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:10px;margin-left:-16px;margin-right:-16px;
    padding-left:16px;padding-right:16px;
  }
  .loc-filters::-webkit-scrollbar,.loc-az::-webkit-scrollbar{display:none}
  /* A scrolling row with no edge looks like a row that has ended. Found in
     rendered QA at 320px: the chips run off the right with nothing to say
     so, and a visitor has no reason to swipe. The mask fades the last few
     pixels so the row reads as continuing. Progressive: browsers without
     mask-image simply get the hard edge they had before. */
  .loc-filters,.loc-az{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent 100%);
  }
  /* 40px beats 38 for a thumb, and the alphabet is the one control here
     that is a single character wide. */
  .loc-az-l{min-width:40px;height:40px}
  .loc-chip{flex:0 0 auto}
  .loc-az{gap:2px;padding-top:12px}
  .loc-az-l{flex:0 0 auto;min-width:38px;height:38px}

  .loc-dir-list{grid-template-columns:1fr;gap:0}
  .loc-dir-link{padding:13px 2px;min-height:48px}
  .loc-dir-name{font-size:16.5px}
  .loc-dir-block{margin-bottom:26px;scroll-margin-top:72px}
  .loc-count{margin:12px 0 20px}
  .loc-final{padding:56px 0}
  .loc-final .wrap{padding:32px 22px 28px;border-radius:18px}
  .loc-final .btns .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .loc-pop-card,.loc-pop-go,.loc-dir-link,.loc-chip{transition:none}
  .loc-pop-card:hover{transform:none}
  .loc-pop-card:hover .loc-pop-go{transform:none}
}