/*
Theme Name: JB French Houses
Theme URI: https://jbfrenchhouses.co.uk
Author: SC Web Solutions
Description: Custom standalone property-portal theme for JB French Houses. Replicates the legacy /jbp/{region}/{town}/{reference}/{id} URL structure, property CPT templates, Leaflet map, IFP feed and buyer mailshot system.
Version: 0.129.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jbfrench
*/

/* ------------------------------------------------------------------
   Palette: limestone, slate, and the blue-grey of French shutters.
   Deliberately not cream + terracotta.
------------------------------------------------------------------ */
:root{
  --paper:      #FAF9F6;  /* warm white, not cream */
  --limestone:  #EEEBE3;  /* surface / cards */
  --ink:        #262B2C;  /* slate near-black */
  --ink-soft:   #5C6466;
  --hairline:   #D8D3C8;
  --shutter:    #4A6670;  /* the volet blue-grey — the accent */
  --shutter-dk: #2E464F;
  --brass:      #9C7A3C;  /* used once, sparingly */

  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Karla", -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1120px;
  --gap: clamp(1.5rem, 3vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--shutter-dk); }

.jbf-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 1.25rem; }

/* ---------------- property gallery (mosaic) ---------------- */
.jbf-gallery{
  position:relative;
  display:grid; gap:6px;
  grid-template-columns:1fr;
  max-width:var(--wrap); margin:var(--gap) auto var(--gap); padding:0 1.25rem;
}
@media (min-width:760px){
  .jbf-gallery{ grid-template-columns:2fr 1fr; }
}
.jbf-gallery button{
  padding:0; border:0; background:none; cursor:pointer; display:block;
  overflow:hidden; border-radius:2px;
}
.jbf-gal-main img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
@media (min-width:760px){ .jbf-gal-main img{ aspect-ratio:auto; height:420px; } }

.jbf-gal-side{ display:none; }
@media (min-width:760px){
  .jbf-gal-side{ display:grid; grid-template-rows:1fr 1fr; gap:6px; }
  .jbf-gal-thumb img{ width:100%; height:207px; object-fit:cover; }
}
.jbf-gallery button img{ transition:transform .35s ease; }
.jbf-gallery button:hover img{ transform:scale(1.02); }

.jbf-gal-count{
  position:absolute; right:2rem; bottom:1rem;
  background:rgba(38,43,44,.82); color:#fff;
  font-family:var(--mono); font-size:.75rem;
  padding:.4rem .7rem !important; border-radius:20px !important;
  backdrop-filter:blur(4px);
}
.jbf-gal-count:hover{ background:rgba(38,43,44,.95); }

/* ---------------- lightbox ---------------- */
.jbf-lightbox{
  position:fixed; inset:0; z-index:999;
  background:rgba(24,28,29,.96);
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto 1fr;
  align-items:center;
}
.jbf-lightbox[hidden]{ display:none; }
.jbf-lb-bar{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
}
.jbf-lb-counter{ font-family:var(--mono); font-size:.8125rem; color:#C9D1D3; }
.jbf-lb-close{
  background:none; border:0; color:#fff; font-size:2rem; line-height:1;
  cursor:pointer; padding:.25rem .5rem;
}
.jbf-lb-stage{ margin:0; padding:0 .5rem 2rem; text-align:center; }
.jbf-lb-stage img{
  max-width:100%; max-height:calc(100vh - 8rem);
  margin:0 auto; object-fit:contain; border-radius:2px;
}
.jbf-lb-nav{
  background:none; border:0; color:#fff; cursor:pointer;
  font-size:3rem; line-height:1; padding:1rem; opacity:.7;
}
.jbf-lb-nav:hover{ opacity:1; }
@media (max-width:600px){
  .jbf-lb-nav{ font-size:2rem; padding:.5rem; }
}

/* =========== property page v2 =========== */

/* headings pick up the teal */
.jbf-title, .jbf-h2, .jbf-building dt{ color:var(--shutter-dk); }

/* --- head: title left, price panel right --- */
.jbf-fiche-head{
  display:grid; gap:1.5rem var(--gap);
  grid-template-columns:1fr;
  padding-bottom:2rem; border-bottom:1px solid var(--hairline);
}
@media (min-width:860px){
  .jbf-fiche-head{ grid-template-columns:minmax(0,1.6fr) minmax(240px,auto); align-items:start; }
  .jbf-head-right{ justify-self:end; width:100%; max-width:290px; }
}
.jbf-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.25rem,4vw,3.4rem); line-height:1.05;
  letter-spacing:-0.012em; margin:0; max-width:18ch;
}

/* price sits in a panel shaped like the button, but is not clickable */
.jbf-price-panel{
  display:block; text-align:center;
  background:var(--limestone); border:1px solid var(--hairline);
  border-radius:3px; padding:.9rem 1.25rem; margin-bottom:.6rem;
}
.jbf-price-eur{
  display:block; font-family:var(--body); font-weight:600;
  font-size:clamp(1.5rem,2.4vw,1.95rem); line-height:1.15;
  letter-spacing:-0.01em; color:var(--shutter-dk);
}
.jbf-price-gbp{ display:block; font-size:.8125rem; color:var(--ink-soft); margin-top:.15rem; }
.jbf-btn--enquire{ width:100%; }

/* --- overview band: glance left, description right --- */
.jbf-overview{
  margin:var(--gap) 0 0;
  background:var(--limestone);
  border:1px solid var(--hairline);
  border-radius:4px;
}
.jbf-overview-inner{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  padding:clamp(1.25rem,3vw,2rem);
}
@media (min-width:860px){
  .jbf-overview-inner{ grid-template-columns:minmax(240px,1fr) minmax(0,2fr); }
}
.jbf-glance dl{ margin:0; }
.jbf-glance dl > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--hairline);
}
.jbf-glance dl > div:last-child{ border-bottom:0; }
.jbf-glance dt{ color:var(--ink-soft); font-size:.9375rem; }
.jbf-glance dd{ margin:0; font-weight:500; text-align:right; }
.jbf-desc .jbf-prose{ max-width:none; }
.jbf-desc .jbf-prose p:last-child{ margin-bottom:0; }


/* --- two-column body, resumes below the overview band --- */
.jbf-fiche-body{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  padding-block:var(--gap);
}
@media (min-width:900px){
  .jbf-fiche-body{ grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); }
  .jbf-fiche-side{ position:sticky; top:2rem; align-self:start; }
}

.jbf-h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.25rem,4vw,3.4rem); line-height:1.05;
  letter-spacing:-0.012em; margin:0 0 1.25rem;
}

/* buildings */
.jbf-building-list{ margin:0; }
.jbf-building{ padding:1.1rem 0; border-top:1px solid var(--hairline); }
.jbf-building:last-child{ border-bottom:1px solid var(--hairline); }
.jbf-building dt{ font-family:var(--display); font-size:1.25rem; font-weight:600; margin-bottom:.25rem; }
.jbf-building dd{ margin:0; color:var(--ink-soft); max-width:64ch; }

/* sidebar cards */
.jbf-features, .jbf-dpe{
  background:var(--limestone);
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:1.25rem;
  margin-bottom:1.25rem;
}

/* features, now with icons */
.jbf-feature-list{ margin:0; padding:0; list-style:none; }
.jbf-feature-list li{
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem 0; font-size:.9375rem;
  border-bottom:1px solid var(--hairline);
}
.jbf-feature-list li:last-child{ border-bottom:0; padding-bottom:0; }
.jbf-feature-list svg{ color:var(--shutter); flex:0 0 auto; }

/* ---------------- signature: the DPE ladder ----------------
   The A–G diagnostic bar required on every French listing.    */
.jbf-ladder + .jbf-ladder{ margin-top:1.25rem; }
.jbf-ladder-label{ margin:0 0 .5rem; font-size:.8125rem; color:var(--ink-soft); }
.jbf-ladder-scale{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(7,1fr); gap:3px;
}
.jbf-grade{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:2rem; border-radius:2px;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  color:#fff; opacity:.28;
  transition:opacity .2s ease, transform .2s ease;
}
.jbf-grade--a{ background:#3B8C4B; }
.jbf-grade--b{ background:#57A03F; }
.jbf-grade--c{ background:#93B93B; }
.jbf-grade--d{ background:#D9C531; }
.jbf-grade--e{ background:#DE9A2E; }
.jbf-grade--f{ background:#D4682C; }
.jbf-grade--g{ background:#C1332B; }
.jbf-grade.is-current{
  opacity:1;
  transform:scaleY(1.35);
  box-shadow:0 0 0 2px var(--limestone), 0 0 0 3px var(--ink);
  z-index:1;
}

/* ---------------- CTA ---------------- */
.jbf-btn{
  display:block; text-align:center;
  background:var(--shutter-dk); color:#fff;
  text-decoration:none; font-weight:600; font-size:.9375rem;
  padding:.9rem 1.25rem; border-radius:3px;
  transition:background .18s ease;
}
.jbf-btn:hover, .jbf-btn:focus-visible{ background:var(--shutter); }

/* ---------------- a11y floor ---------------- */
:focus-visible{ outline:2px solid var(--shutter-dk); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .jbf-grade.is-current{ transform:none; }
}

/* ================= homepage ================= */
.jbf-hero-home{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:clamp(420px,72vh,720px);
  padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem);
  overflow:hidden;
}
.jbf-hero-media{ position:absolute; inset:0; z-index:-1; }
.jbf-hero-img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
/* scrim: darkest at the bottom where the copy sits, so the sky stays open */
.jbf-hero-scrim{
  position:absolute; inset:0; display:block;
  background:
    linear-gradient(to top, rgba(20,26,28,.86) 0%, rgba(20,26,28,.62) 38%, rgba(20,26,28,.22) 72%, rgba(20,26,28,.12) 100%),
    linear-gradient(to right, rgba(20,26,28,.42) 0%, rgba(20,26,28,0) 62%);
}
.jbf-hero-inner{ position:relative; width:100%; }
.jbf-hero-home .jbf-eyebrow{ color:#C6D0D3; }
.jbf-home-title{
  font-family:var(--display); font-weight:500; color:#FAF9F6;
  font-size:clamp(2.6rem,7vw,5rem); line-height:1.02;
  letter-spacing:-0.015em; margin:.5rem 0 1.25rem;
  text-wrap:balance;
}
.jbf-home-lede{ max-width:54ch; font-size:1.125rem; color:#DCE2E3; margin:0 0 2rem; }
.jbf-hero-actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:0; }
a.jbf-link-arrow--light{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
a.jbf-link-arrow--light:hover{ color:#fff; border-bottom-color:#fff; }
.jbf-btn--inline{ display:inline-block; }
.jbf-btn--light{ background:var(--paper); color:var(--shutter-dk); }
.jbf-btn--light:hover{ background:var(--limestone); }
.jbf-link-arrow{
  color:var(--shutter-dk); text-decoration:none; font-weight:600; font-size:.9375rem;
  border-bottom:1px solid transparent;
}
.jbf-link-arrow:hover{ border-bottom-color:var(--shutter); }

.jbf-sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;
}
.jbf-sec-lede{ color:var(--ink-soft); margin:0; }

/* --- 60 a week --- */
.jbf-stats{ border-top:1px solid var(--hairline); padding-block:clamp(1.25rem,2.5vw,1.75rem); }
.jbf-stats-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.25rem; }
.jbf-stat{ display:flex; align-items:center; justify-content:center; gap:1rem; }
.jbf-stat-num{
  font-family:var(--display); font-weight:600; color:var(--shutter-dk);
  font-size:clamp(3.5rem,8vw,5.5rem); line-height:.9;
}
.jbf-stat-label{ font-size:.9375rem; color:var(--ink-soft); line-height:1.3; text-align:left; }
.jbf-stats-note{ margin:0; color:var(--ink-soft); max-width:60ch; }

/* --- map --- */
.jbf-mapsec{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.jbf-mapsec-head{ max-width:60ch; margin-bottom:2rem; }
.jbf-mapsec-lede{ color:var(--ink-soft); margin:.5rem 0 0; }
.jbf-mapsec-body{ display:grid; gap:var(--gap); grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){ .jbf-mapsec-body{ grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr); } }

.jbf-map-svg{ width:100%; height:auto; display:block; }
.jbf-map-other path{ fill:#E6E3DB; stroke:var(--paper); stroke-width:.6; }
.jbf-map-region{ cursor:pointer; outline:none; }
.jbf-map-region path{
  fill:var(--shutter); stroke:var(--paper); stroke-width:.6;
  transition:fill .18s ease;
}
.jbf-map-region:hover path,
.jbf-map-region.is-active path,
.jbf-map-region:focus-visible path{ fill:var(--shutter-dk); }

.jbf-map-list{ list-style:none; margin:0; padding:0; }
.jbf-map-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.75rem .5rem; border-bottom:1px solid var(--hairline);
  text-decoration:none; color:var(--ink); transition:background .15s ease;
}
.jbf-map-list a:hover, .jbf-map-list a.is-active{ background:var(--limestone); }
.jbf-map-list-name{ font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--shutter-dk); }
.jbf-map-list-count{ font-family:var(--mono); font-size:.75rem; color:var(--ink-soft); white-space:nowrap; }
.jbf-map-list-week{ color:var(--brass); }

.jbf-latest{ padding-block:clamp(2rem,5vw,3.5rem); }

/* --- services: 2 x 3 tiles, first tile is the heading --- */
.jbf-services{ padding-block:clamp(2.5rem,6vw,4rem); }
.jbf-service-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .jbf-service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .jbf-service-grid{ grid-template-columns:repeat(3,1fr); } }

.jbf-service{
  background:var(--limestone); border:1px solid var(--hairline);
  border-radius:3px; padding:1.5rem;
  display:flex; flex-direction:column;
}
.jbf-service svg{ color:var(--shutter); margin-bottom:.9rem; }
.jbf-service-title{
  font-family:var(--display); font-size:1.25rem; font-weight:600;
  color:var(--shutter-dk); margin:0 0 .4rem;
}
.jbf-service-body{ margin:0; font-size:.9375rem; color:var(--ink-soft); }

/* the heading tile: same shape, no border, lets the type carry it */
.jbf-service--title{
  background:transparent; border-color:transparent;
  justify-content:center; padding-left:0; padding-top:0;
}
.jbf-service-heading{
  font-family:var(--display); font-weight:500; color:var(--shutter-dk);
  font-size:clamp(1.9rem,3vw,2.4rem); line-height:1.05;
  letter-spacing:-0.01em; margin:0 0 .75rem;
}
.jbf-service-sub{ margin:0; color:var(--ink-soft); font-size:.9375rem; max-width:34ch; }
@media (max-width:639px){
  .jbf-service--title{ padding-left:0; }
}

/* --- process: dark teal band --- */
.jbf-process{
  background:var(--shutter-dk); color:var(--paper);
  padding-block:clamp(2.75rem,6vw,4.5rem);
}
.jbf-process .jbf-h2{ color:var(--paper); margin-bottom:1.75rem; }

.jbf-steps{
  list-style:none; margin:0 0 clamp(2rem,5vw,3rem); padding:0;
  display:grid; gap:var(--gap); grid-template-columns:1fr;
}
@media (min-width:760px){ .jbf-steps{ grid-template-columns:repeat(3,1fr); } }
.jbf-step{ border-top:2px solid rgba(250,249,246,.35); padding-top:1rem; }
.jbf-step-n{
  display:block;
  font-family:var(--mono); font-size:1.5rem; font-weight:500;
  letter-spacing:.06em; line-height:1; color:#D8B978;
}
.jbf-step-title{
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--paper); margin:.4rem 0 .5rem;
}
.jbf-step-body{ margin:0; color:#C9D4D7; font-size:.9375rem; }

/* "worth knowing" panel, lifted off the teal */
.jbf-notes{
  background:rgba(250,249,246,.07);
  border:1px solid rgba(250,249,246,.16);
  border-radius:4px; padding:clamp(1.25rem,3vw,2rem);
}
.jbf-notes .jbf-eyebrow{ color:#A9BAC0; margin-bottom:1.25rem; }
.jbf-note-list{ margin:0; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px){ .jbf-note-list{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.jbf-note-list dt{
  font-family:var(--display); font-size:1.1rem; font-weight:600;
  color:var(--paper); margin-bottom:.3rem;
}
.jbf-note-list dd{ margin:0; font-size:.9375rem; color:#C9D4D7; }

/* --- closing strip --- */
.jbf-strip{ background:var(--shutter-dk); color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.5rem); }
.jbf-strip-title{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.75rem); margin:0 0 .75rem; line-height:1.1; }
.jbf-strip-body{ max-width:50ch; color:#D6DEE1; margin:0 0 1.75rem; }
.jbf-strip-actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:0; }
.jbf-strip-contact{ color:#D6DEE1; font-size:.9375rem; }

/* ================= header ================= */
.jbf-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--shutter-dk);
  padding:.75rem 1rem; font-weight:600;
}
.jbf-skip:focus{ left:1rem; top:1rem; }

.jbf-site-header{
  position:sticky; top:0; z-index:100;
  background:var(--shutter-dk);
  transition:box-shadow .2s ease;
}
.jbf-site-header.is-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.18), 0 6px 18px -12px rgba(0,0,0,.5); }

.jbf-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:68px;
}

/* wordmark */
.jbf-logo{
  display:inline-flex; align-items:baseline; gap:.55rem;
  text-decoration:none; color:var(--paper); white-space:nowrap;
}
.jbf-logo-mark{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:.02em; line-height:1;
  border:1.5px solid rgba(250,249,246,.55);
  border-radius:2px; padding:.15rem .35rem;
}
.jbf-logo-text{
  font-family:var(--display); font-size:1.35rem; font-weight:500;
  letter-spacing:.01em;
}

/* nav */
.jbf-nav{ display:flex; align-items:center; gap:2rem; }
.jbf-menu{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.jbf-menu a{
  color:rgba(250,249,246,.86); text-decoration:none;
  font-size:.9375rem; font-weight:500; letter-spacing:.005em;
  padding:.35rem 0; border-bottom:1.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.jbf-menu a:hover,
.jbf-menu .current-menu-item > a{ color:#fff; border-bottom-color:var(--brass); }

.jbf-header-actions{ display:flex; align-items:center; gap:1.25rem; }
.jbf-header-tel{
  display:inline-flex; align-items:center; gap:.45rem;
  color:rgba(250,249,246,.72); text-decoration:none;
  font-family:var(--mono); font-size:.8125rem;
  transition:color .15s ease;
}
.jbf-header-tel:hover{ color:#fff; }
.jbf-header-cta{
  display:inline-block; text-decoration:none; white-space:nowrap;
  color:var(--paper); border:1.5px solid rgba(250,249,246,.4);
  border-radius:3px; padding:.55rem 1rem;
  font-size:.875rem; font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.jbf-header-cta:hover{ background:var(--paper); color:var(--shutter-dk); border-color:var(--paper); }

/* burger */
.jbf-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.jbf-burger span{
  display:block; height:1.5px; width:22px; margin-inline:auto;
  background:var(--paper); transition:transform .22s ease, opacity .18s ease;
}
.jbf-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.jbf-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.jbf-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:899px){
  .jbf-burger{ display:flex; }
  .jbf-nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--shutter-dk);
    padding:.5rem 1.25rem 1.5rem;
    border-top:1px solid rgba(250,249,246,.14);
    max-height:calc(100dvh - 68px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .jbf-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .jbf-menu{ flex-direction:column; align-items:stretch; gap:0; }
  .jbf-menu a{
    display:block; padding:.9rem 0; font-size:1.05rem;
    border-bottom:1px solid rgba(250,249,246,.12);
  }
  .jbf-menu a:hover{ border-bottom-color:rgba(250,249,246,.12); }
  .jbf-header-actions{
    flex-direction:column; align-items:stretch; gap:1rem;
    margin-top:1.25rem;
  }
  .jbf-header-tel{ justify-content:center; font-size:.9375rem; }
  .jbf-header-cta{ text-align:center; padding:.8rem 1rem; }
  body.jbf-nav-open{ overflow:hidden; }
}

/* the hero sits directly under a solid header, so no extra top padding */
.jbf-hero-home{ margin-top:0; }

/* ================= footer ================= */
.jbf-site-footer{
  margin-top:0; background:var(--limestone);
  border-top:1px solid var(--hairline);
  padding-block:2rem; color:var(--ink-soft); font-size:.875rem;
}
.jbf-site-footer a{ color:var(--shutter-dk); }

/* ---------------- property cards (tile) ---------------- */
.jbf-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:3px;
  background:var(--paper); overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.jbf-card:hover{ border-color:var(--shutter); transform:translateY(-2px); }

.jbf-card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--limestone); }
.jbf-card-media img{ width:100%; height:100%; object-fit:cover; }
.jbf-card-noimg{ display:block; width:100%; height:100%; background:var(--limestone); }

.jbf-card-body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:.9rem 1rem 1rem;
}
.jbf-card-place{
  font-family:var(--body); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.jbf-card-title{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  line-height:1.2; color:var(--shutter-dk); margin:.2rem 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jbf-card-meta{
  margin:0 0 .65rem; font-size:.8125rem; color:var(--ink-soft);
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.jbf-card-price{
  margin-top:auto;
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--shutter-dk);
}

/* archive keeps a plain grid */
.jbf-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}

/* ---------------- carousel: 3 across, scroll for more ---------------- */
.jbf-carousel-nav{ display:flex; align-items:center; gap:.5rem; }
.jbf-cbtn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hairline); background:var(--paper);
  color:var(--shutter-dk); font-size:1.35rem; line-height:1;
  cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.jbf-cbtn:hover:not(:disabled){ background:var(--limestone); border-color:var(--shutter); }
.jbf-cbtn:disabled{ opacity:.32; cursor:default; }
.jbf-carousel-nav .jbf-link-arrow{ margin-left:.75rem; }

.jbf-carousel{ position:relative; }
.jbf-carousel-track{
  list-style:none; margin:0; padding:.25rem 0 .75rem;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc(100% - 2.5rem);
  column-gap:1.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
@media (min-width:640px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 1.5rem) / 2); } }
@media (min-width:980px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 3rem) / 3); } }
.jbf-carousel-item{ scroll-snap-align:start; display:flex; }
.jbf-carousel-item > .jbf-card{ width:100%; }
@media (max-width:639px){ .jbf-carousel-nav .jbf-cbtn{ display:none; } }

/* ================= restored / corrected ================= */

/* Small sub-block labels: simple face, uppercase, letterspaced.
   Section headings use .jbf-h2 (display face). This pairing is the hierarchy. */
.jbf-eyebrow{
  font-family:var(--body); font-size:1.03rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}

/* 60 new properties: two lines, one size, centred, tight */
.jbf-stats-inner{ display:block; text-align:center; }
.jbf-stat{ margin:0; }
.jbf-stat-line,
.jbf-stat-sub{
  display:block;
  font-family:var(--display); font-weight:600; color:var(--shutter-dk);
  font-size:clamp(2rem,3.5vw,2.6rem); line-height:1.12;
}

/* "worth knowing" panel, lifted off the teal */
.jbf-notes{
  background:rgba(250,249,246,.07);
  border:1px solid rgba(250,249,246,.16);
  border-radius:4px; padding:clamp(1.25rem,3vw,2rem);
}
.jbf-notes .jbf-eyebrow{ color:#A9BAC0; margin-bottom:1.25rem; }
.jbf-note-list{ margin:0; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px){ .jbf-note-list{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.jbf-note-list dt{
  font-family:var(--display); font-size:1.1rem; font-weight:600;
  color:var(--paper); margin-bottom:.3rem;
}
.jbf-note-list dd{ margin:0; font-size:.9375rem; color:#C9D4D7; }

/* --- closing strip --- */
.jbf-strip{ background:var(--shutter-dk); color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.5rem); }
.jbf-strip-title{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.75rem); margin:0 0 .75rem; line-height:1.1; }
.jbf-strip-body{ max-width:50ch; color:#D6DEE1; margin:0 0 1.75rem; }
.jbf-strip-actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:0; }
.jbf-strip-contact{ color:#D6DEE1; font-size:.9375rem; }

/* ================= header ================= */
.jbf-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--shutter-dk);
  padding:.75rem 1rem; font-weight:600;
}
.jbf-skip:focus{ left:1rem; top:1rem; }

.jbf-site-header{
  position:sticky; top:0; z-index:100;
  background:var(--shutter-dk);
  transition:box-shadow .2s ease;
}
.jbf-site-header.is-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.18), 0 6px 18px -12px rgba(0,0,0,.5); }

.jbf-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:68px;
}

/* wordmark */
.jbf-logo{
  display:inline-flex; align-items:baseline; gap:.55rem;
  text-decoration:none; color:var(--paper); white-space:nowrap;
}
.jbf-logo-mark{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:.02em; line-height:1;
  border:1.5px solid rgba(250,249,246,.55);
  border-radius:2px; padding:.15rem .35rem;
}
.jbf-logo-text{
  font-family:var(--display); font-size:1.35rem; font-weight:500;
  letter-spacing:.01em;
}

/* nav */
.jbf-nav{ display:flex; align-items:center; gap:2rem; }
.jbf-menu{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.jbf-menu a{
  color:rgba(250,249,246,.86); text-decoration:none;
  font-size:.9375rem; font-weight:500; letter-spacing:.005em;
  padding:.35rem 0; border-bottom:1.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.jbf-menu a:hover,
.jbf-menu .current-menu-item > a{ color:#fff; border-bottom-color:var(--brass); }

.jbf-header-actions{ display:flex; align-items:center; gap:1.25rem; }
.jbf-header-tel{
  display:inline-flex; align-items:center; gap:.45rem;
  color:rgba(250,249,246,.72); text-decoration:none;
  font-family:var(--mono); font-size:.8125rem;
  transition:color .15s ease;
}
.jbf-header-tel:hover{ color:#fff; }
.jbf-header-cta{
  display:inline-block; text-decoration:none; white-space:nowrap;
  color:var(--paper); border:1.5px solid rgba(250,249,246,.4);
  border-radius:3px; padding:.55rem 1rem;
  font-size:.875rem; font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.jbf-header-cta:hover{ background:var(--paper); color:var(--shutter-dk); border-color:var(--paper); }

/* burger */
.jbf-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.jbf-burger span{
  display:block; height:1.5px; width:22px; margin-inline:auto;
  background:var(--paper); transition:transform .22s ease, opacity .18s ease;
}
.jbf-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.jbf-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.jbf-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:899px){
  .jbf-burger{ display:flex; }
  .jbf-nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--shutter-dk);
    padding:.5rem 1.25rem 1.5rem;
    border-top:1px solid rgba(250,249,246,.14);
    max-height:calc(100dvh - 68px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .jbf-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .jbf-menu{ flex-direction:column; align-items:stretch; gap:0; }
  .jbf-menu a{
    display:block; padding:.9rem 0; font-size:1.05rem;
    border-bottom:1px solid rgba(250,249,246,.12);
  }
  .jbf-menu a:hover{ border-bottom-color:rgba(250,249,246,.12); }
  .jbf-header-actions{
    flex-direction:column; align-items:stretch; gap:1rem;
    margin-top:1.25rem;
  }
  .jbf-header-tel{ justify-content:center; font-size:.9375rem; }
  .jbf-header-cta{ text-align:center; padding:.8rem 1rem; }
  body.jbf-nav-open{ overflow:hidden; }
}

/* the hero sits directly under a solid header, so no extra top padding */
.jbf-hero-home{ margin-top:0; }

/* ================= footer ================= */
.jbf-site-footer{
  margin-top:0; background:var(--limestone);
  border-top:1px solid var(--hairline);
  padding-block:2rem; color:var(--ink-soft); font-size:.875rem;
}
.jbf-site-footer a{ color:var(--shutter-dk); }

/* ---------------- property cards (tile) ---------------- */
.jbf-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:3px;
  background:var(--paper); overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.jbf-card:hover{ border-color:var(--shutter); transform:translateY(-2px); }

.jbf-card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--limestone); }
.jbf-card-media img{ width:100%; height:100%; object-fit:cover; }
.jbf-card-noimg{ display:block; width:100%; height:100%; background:var(--limestone); }

.jbf-card-body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:.9rem 1rem 1rem;
}
.jbf-card-place{
  font-family:var(--body); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.jbf-card-title{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  line-height:1.2; color:var(--shutter-dk); margin:.2rem 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jbf-card-meta{
  margin:0 0 .65rem; font-size:.8125rem; color:var(--ink-soft);
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.jbf-card-price{
  margin-top:auto;
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--shutter-dk);
}

/* archive keeps a plain grid */
.jbf-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}

/* ---------------- carousel: 3 across, scroll for more ---------------- */
.jbf-carousel-nav{ display:flex; align-items:center; gap:.5rem; }
.jbf-cbtn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hairline); background:var(--paper);
  color:var(--shutter-dk); font-size:1.35rem; line-height:1;
  cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.jbf-cbtn:hover:not(:disabled){ background:var(--limestone); border-color:var(--shutter); }
.jbf-cbtn:disabled{ opacity:.32; cursor:default; }
.jbf-carousel-nav .jbf-link-arrow{ margin-left:.75rem; }

.jbf-carousel{ position:relative; }
.jbf-carousel-track{
  list-style:none; margin:0; padding:.25rem 0 .75rem;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc(100% - 2.5rem);
  column-gap:1.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
@media (min-width:640px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 1.5rem) / 2); } }
@media (min-width:980px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 3rem) / 3); } }
.jbf-carousel-item{ scroll-snap-align:start; display:flex; }
.jbf-carousel-item > .jbf-card{ width:100%; }
@media (max-width:639px){ .jbf-carousel-nav .jbf-cbtn{ display:none; } }

/* ================= restored / corrected ================= */

/* Small sub-block labels: simple face, uppercase, letterspaced.
   Section headings use .jbf-h2 (display face). This pairing is the hierarchy. */
.jbf-eyebrow{
  font-family:var(--body); font-size:1.03rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}

/* 60 new properties: two clean lines, centred against the note opposite */
.jbf-stats-inner{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1.5rem;
}
@media (min-width:860px){
  .jbf-stats-inner{ flex-direction:row; justify-content:center; align-items:center; gap:3rem; }
}
.jbf-stat{ margin:0; }
.jbf-stat-line,
.jbf-stat-sub{
  display:block;
  font-family:var(--display); font-weight:600; color:var(--shutter-dk);
  font-size:clamp(2rem,3.5vw,2.6rem); line-height:1.1;
}
.jbf-stat-num{ font-weight:600; }
.jbf-stat-label{ font-weight:600; }
.jbf-stats-note{
  margin:0; color:var(--ink-soft); max-width:46ch;
  font-size:.9375rem; text-align:center;
}
@media (min-width:860px){ .jbf-stats-note{ text-align:left; } }

/* "worth knowing" panel, lifted off the teal */
.jbf-notes{
  background:rgba(250,249,246,.07);
  border:1px solid rgba(250,249,246,.16);
  border-radius:4px; padding:clamp(1.25rem,3vw,2rem);
}
.jbf-notes .jbf-eyebrow{ color:#A9BAC0; margin-bottom:1.25rem; }
.jbf-note-list{ margin:0; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px){ .jbf-note-list{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.jbf-note-list dt{
  font-family:var(--display); font-size:1.1rem; font-weight:600;
  color:var(--paper); margin-bottom:.3rem;
}
.jbf-note-list dd{ margin:0; font-size:.9375rem; color:#C9D4D7; }

/* --- closing strip --- */
.jbf-strip{ background:var(--shutter-dk); color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.5rem); }
.jbf-strip-title{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.75rem); margin:0 0 .75rem; line-height:1.1; }
.jbf-strip-body{ max-width:50ch; color:#D6DEE1; margin:0 0 1.75rem; }
.jbf-strip-actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:0; }
.jbf-strip-contact{ color:#D6DEE1; font-size:.9375rem; }

/* ================= header ================= */
.jbf-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--shutter-dk);
  padding:.75rem 1rem; font-weight:600;
}
.jbf-skip:focus{ left:1rem; top:1rem; }

.jbf-site-header{
  position:sticky; top:0; z-index:100;
  background:var(--shutter-dk);
  transition:box-shadow .2s ease;
}
.jbf-site-header.is-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.18), 0 6px 18px -12px rgba(0,0,0,.5); }

.jbf-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:68px;
}

/* wordmark */
.jbf-logo{
  display:inline-flex; align-items:baseline; gap:.55rem;
  text-decoration:none; color:var(--paper); white-space:nowrap;
}
.jbf-logo-mark{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:.02em; line-height:1;
  border:1.5px solid rgba(250,249,246,.55);
  border-radius:2px; padding:.15rem .35rem;
}
.jbf-logo-text{
  font-family:var(--display); font-size:1.35rem; font-weight:500;
  letter-spacing:.01em;
}

/* nav */
.jbf-nav{ display:flex; align-items:center; gap:2rem; }
.jbf-menu{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.jbf-menu a{
  color:rgba(250,249,246,.86); text-decoration:none;
  font-size:.9375rem; font-weight:500; letter-spacing:.005em;
  padding:.35rem 0; border-bottom:1.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.jbf-menu a:hover,
.jbf-menu .current-menu-item > a{ color:#fff; border-bottom-color:var(--brass); }

.jbf-header-actions{ display:flex; align-items:center; gap:1.25rem; }
.jbf-header-tel{
  display:inline-flex; align-items:center; gap:.45rem;
  color:rgba(250,249,246,.72); text-decoration:none;
  font-family:var(--mono); font-size:.8125rem;
  transition:color .15s ease;
}
.jbf-header-tel:hover{ color:#fff; }
.jbf-header-cta{
  display:inline-block; text-decoration:none; white-space:nowrap;
  color:var(--paper); border:1.5px solid rgba(250,249,246,.4);
  border-radius:3px; padding:.55rem 1rem;
  font-size:.875rem; font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.jbf-header-cta:hover{ background:var(--paper); color:var(--shutter-dk); border-color:var(--paper); }

/* burger */
.jbf-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.jbf-burger span{
  display:block; height:1.5px; width:22px; margin-inline:auto;
  background:var(--paper); transition:transform .22s ease, opacity .18s ease;
}
.jbf-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.jbf-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.jbf-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:899px){
  .jbf-burger{ display:flex; }
  .jbf-nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--shutter-dk);
    padding:.5rem 1.25rem 1.5rem;
    border-top:1px solid rgba(250,249,246,.14);
    max-height:calc(100dvh - 68px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .jbf-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .jbf-menu{ flex-direction:column; align-items:stretch; gap:0; }
  .jbf-menu a{
    display:block; padding:.9rem 0; font-size:1.05rem;
    border-bottom:1px solid rgba(250,249,246,.12);
  }
  .jbf-menu a:hover{ border-bottom-color:rgba(250,249,246,.12); }
  .jbf-header-actions{
    flex-direction:column; align-items:stretch; gap:1rem;
    margin-top:1.25rem;
  }
  .jbf-header-tel{ justify-content:center; font-size:.9375rem; }
  .jbf-header-cta{ text-align:center; padding:.8rem 1rem; }
  body.jbf-nav-open{ overflow:hidden; }
}

/* the hero sits directly under a solid header, so no extra top padding */
.jbf-hero-home{ margin-top:0; }

/* ================= footer ================= */
.jbf-site-footer{
  margin-top:0; background:var(--limestone);
  border-top:1px solid var(--hairline);
  padding-block:2rem; color:var(--ink-soft); font-size:.875rem;
}
.jbf-site-footer a{ color:var(--shutter-dk); }

/* ---------------- property cards (tile) ---------------- */
.jbf-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:3px;
  background:var(--paper); overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.jbf-card:hover{ border-color:var(--shutter); transform:translateY(-2px); }

.jbf-card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--limestone); }
.jbf-card-media img{ width:100%; height:100%; object-fit:cover; }
.jbf-card-noimg{ display:block; width:100%; height:100%; background:var(--limestone); }

.jbf-card-body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:.9rem 1rem 1rem;
}
.jbf-card-place{
  font-family:var(--body); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.jbf-card-title{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  line-height:1.2; color:var(--shutter-dk); margin:.2rem 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jbf-card-meta{
  margin:0 0 .65rem; font-size:.8125rem; color:var(--ink-soft);
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.jbf-card-price{
  margin-top:auto;
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--shutter-dk);
}

/* archive keeps a plain grid */
.jbf-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}

/* ---------------- carousel: 3 across, scroll for more ---------------- */
.jbf-carousel-nav{ display:flex; align-items:center; gap:.5rem; }
.jbf-cbtn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hairline); background:var(--paper);
  color:var(--shutter-dk); font-size:1.35rem; line-height:1;
  cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.jbf-cbtn:hover:not(:disabled){ background:var(--limestone); border-color:var(--shutter); }
.jbf-cbtn:disabled{ opacity:.32; cursor:default; }
.jbf-carousel-nav .jbf-link-arrow{ margin-left:.75rem; }

.jbf-carousel{ position:relative; }
.jbf-carousel-track{
  list-style:none; margin:0; padding:.25rem 0 .75rem;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc(100% - 2.5rem);
  column-gap:1.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
@media (min-width:640px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 1.5rem) / 2); } }
@media (min-width:980px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 3rem) / 3); } }
.jbf-carousel-item{ scroll-snap-align:start; display:flex; }
.jbf-carousel-item > .jbf-card{ width:100%; }
@media (max-width:639px){ .jbf-carousel-nav .jbf-cbtn{ display:none; } }

/* ================= restored / corrected ================= */

/* Small sub-block labels: simple face, uppercase, letterspaced.
   Section headings use .jbf-h2 (display face). This pairing is the hierarchy. */
.jbf-eyebrow{
  font-family:var(--body); font-size:1.03rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}

/* 60 new properties: "60 new properties" on one line, "every week" below,
   vertically centred against the note opposite */
.jbf-stats-inner{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1.25rem;
}
@media (min-width:860px){
  .jbf-stats-inner{ flex-direction:row; justify-content:center; align-items:center; gap:2.5rem; }
}
.jbf-stat{ display:flex; flex-direction:column; align-items:center; margin:0; line-height:1.05; }
.jbf-stat-line{
  font-family:var(--display); font-weight:600; color:var(--shutter-dk);
  font-size:clamp(2rem,4vw,2.9rem); white-space:nowrap;
}
.jbf-stat-num{ font-size:1.35em; }
.jbf-stat-label{ font-family:var(--display); font-weight:500; }
.jbf-stat-sub{
  font-family:var(--display); font-weight:500; color:var(--ink-soft);
  font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.1;
}
.jbf-stats-note{
  margin:0; color:var(--ink-soft); max-width:46ch;
  font-size:.9375rem; text-align:center;
}
@media (min-width:860px){ .jbf-stats-note{ text-align:left; } }

/* "worth knowing" panel: no heading, tighter */
.jbf-notes{
  background:rgba(250,249,246,.07);
  border:1px solid rgba(250,249,246,.16);
  border-radius:4px;
  padding:1.25rem clamp(1rem,2.5vw,1.5rem);
}
.jbf-note-list{ gap:1.25rem; }
@media (min-width:860px){ .jbf-note-list{ gap:1.75rem; } }
.jbf-note-list dt{ font-size:1rem; margin-bottom:.25rem; }
.jbf-note-list dd{ font-size:.875rem; }

/* --- restored: reference badge + location breadcrumb --- */
.jbf-fiche-meta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.75rem 1.25rem; margin-bottom:1rem;
}
.jbf-ref{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--hairline); border-radius:2px;
  padding:.25rem .5rem; background:var(--limestone);
}
.jbf-place{ font-size:.875rem; color:var(--ink-soft); }
.jbf-place a{ color:var(--ink-soft); text-decoration:none; }
.jbf-place a:hover{ color:var(--shutter-dk); text-decoration:underline; }
.jbf-place span{ margin:0 .4rem; }

/* --- overview band on dark teal --- */
.jbf-overview{
  background:var(--shutter-dk);
  border-color:transparent;
  color:var(--paper);
}
.jbf-overview .jbf-eyebrow{ color:#A9BAC0; }

.jbf-overview .jbf-glance dl > div{ border-bottom-color:rgba(250,249,246,.18); }
.jbf-overview .jbf-glance dt{ color:#A9BAC0; }
.jbf-overview .jbf-glance dd{ color:var(--paper); }

.jbf-overview .jbf-desc .jbf-prose{ color:#D3DBDD; }
.jbf-overview .jbf-desc .jbf-prose a{ color:#fff; }

/* a hairline between the two columns on wide screens */
@media (min-width:860px){
  .jbf-overview .jbf-desc{
    border-left:1px solid rgba(250,249,246,.16);
    padding-left:var(--gap);
  }
}

/* ================================================================
   ARCHIVE + LOCATION PAGES  (v0.12.0)
   Appended as ONE block at the END of style.css on purpose: the
   cascade means these always win over the older duplicated sections
   above, and keeping them in a single marked section makes the
   coming dedupe pass easier, not harder. Do not scatter edits.
   ================================================================ */

/* ---- page head ---- */
.jbf-archive{ padding-top: clamp(1.5rem, 4vw, 3rem); }
.jbf-archive-title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.05;
  margin: .25rem 0 .5rem;
}
.jbf-archive-tools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .75rem 0 0;
}
.jbf-archive-count{
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.jbf-location-strap{
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--shutter-dk);
  margin: 0 0 .25rem;
}
.jbf-term-intro{ max-width: 70ch; color: var(--ink-soft); }
.jbf-term-intro p{ margin: .4rem 0; }

/* ---- filters + results layout ---- */
.jbf-archive-layout{
  display: grid;
  gap: var(--gap);
  align-items: start;
  margin: var(--gap) 0;
}
@media (min-width: 900px){
  .jbf-archive-layout{ grid-template-columns: 272px 1fr; }
  .jbf-archive-layout--nofilters{ grid-template-columns: 1fr; }
}
.jbf-filters{
  background: #fff;
  border: 1px solid var(--hairline);
  padding: 1.25rem 1.25rem 1rem;
}
@media (min-width: 900px){
  .jbf-filters{ position: sticky; top: 96px; }
}
.jbf-filter-block{ margin: 1rem 0 1.25rem; }
.jbf-filter-label{
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .4rem;
}
.jbf-selections{ margin: 0 0 1rem; }
.jbf-selections .facetwp-selections li{
  display: inline-block;
  background: var(--limestone);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .2rem .7rem;
  margin: 0 .35rem .35rem 0;
  font-size: .85rem;
}

/* ---- light FacetWP skinning (inherits the palette) ---- */
.facetwp-facet{ margin-bottom: 0; font-size: .95rem; }
.facetwp-facet select,
.facetwp-facet input[type="text"],
.facetwp-facet input[type="number"]{
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--hairline);
  background: var(--paper);
  font-family: var(--body);
  font-size: .95rem;
  color: var(--ink);
}
.facetwp-checkbox{ margin-bottom: .3rem; }
.facetwp-checkbox.checked{ color: var(--shutter-dk); font-weight: 700; }

/* ---- town quick-links (region pages) ---- */
.jbf-town-links{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 var(--gap);
}
.jbf-town-link{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--hairline);
  background: #fff;
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .9rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease;
}
.jbf-town-link:hover{ border-color: var(--shutter); }
.jbf-town-count{
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-soft);
}

/* ---- empty state + pagination ---- */
.jbf-none{
  grid-column: 1 / -1;
  background: var(--limestone);
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
}
.jbf-pagination{ margin: var(--gap) 0; }
.jbf-pagination .page-numbers,
.jbf-pagination .facetwp-page{
  display: inline-block;
  min-width: 2.2rem;
  text-align: center;
  padding: .4rem .6rem;
  margin: 0 .3rem .3rem 0;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: .85rem;
  cursor: pointer;
}
.jbf-pagination .page-numbers.current,
.jbf-pagination .facetwp-page.active{
  background: var(--shutter);
  border-color: var(--shutter);
  color: #fff;
}
.jbf-pagination .page-numbers.dots{ border: 0; background: none; }

/* ================================================================
   REGION SVG MAP  (v0.14.0) — appended block; additions live at the
   END of this file only, same rule as before.
   ================================================================ */
/* Region intro copy under the heading. */
.jbf-region-copy{ max-width: 68ch; color: var(--ink); margin-top: .5rem; }
.jbf-region-copy p{ margin: 0 0 .8rem; }

/* Region map section: big map + town list beside it, homepage proportions. */
.jbf-rmapsec{
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: start;
  margin: var(--gap) 0;
}
@media (min-width: 860px){
  .jbf-rmapsec{ grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); }
}
.jbf-rmap{ margin: 0; }
.jbf-rmap svg{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 620px;          /* tall regions scale down, ratio preserved */
  margin: 0 auto;
  overflow: visible;
}
.jbf-rmap-shape path{ fill:#DADFDE; stroke:#C3CAC9; stroke-width:1; }

/* Dots */
.jbf-rmap-dot circle{ transition: r .15s ease, opacity .15s ease; }
.jbf-rmap-dot.is-muted circle{ fill:#fff; opacity:.6; }
.jbf-rmap-dot.is-active{ cursor:pointer; }
.jbf-rmap-dot.is-active circle{ fill:#fff; }
.jbf-rmap-dot.is-active.is-hl circle,
.jbf-rmap-dot.is-active:hover circle{ fill:#fff; r: 8.5; }
.jbf-rmap-dot.is-muted.is-hl circle{ fill:#fff; opacity:1; r: 8.5; }

/* Town list — mirrors the homepage region list. */
.jbf-rmap-list{
  list-style:none; margin:0; padding:0;
  column-gap: 1.5rem;
}
@media (min-width: 1100px){
  .jbf-rmap-list{ columns: 2; }        /* long town lists stay compact */
}
.jbf-rmap-list li{ break-inside: avoid; }
.jbf-rmap-list a,
.jbf-rmap-list .jbf-rmap-list-static{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.5rem .5rem; border-bottom:1px solid var(--hairline);
  text-decoration:none; color:var(--ink);
  transition: background .15s ease;
}
.jbf-rmap-list a{ cursor:pointer; }
.jbf-rmap-list a:hover, .jbf-rmap-list a.is-hl{ background: var(--limestone); }
.jbf-rmap-list-name{ font-family:var(--display); font-size:1.05rem; }
.jbf-rmap-list li.is-active .jbf-rmap-list-name{ color: var(--shutter-dk); font-weight:600; }
.jbf-rmap-list li.is-muted .jbf-rmap-list-name{ color: var(--ink-soft); }
.jbf-rmap-list-count{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); white-space:nowrap; }
.jbf-rmap-list .jbf-rmap-list-static.is-hl{ background: var(--limestone); }

/* NA note on the three traditional-region pages (v0.15.0). */
.jbf-na-note{
  background: var(--limestone);
  border-left: 3px solid var(--shutter);
  padding: .6rem .9rem;
  margin: .75rem 0 0;
  max-width: 70ch;
  font-size: .95rem;
  color: var(--ink-soft);
}
.jbf-na-note a{ color: var(--shutter-dk); font-weight: 700; }

/* Softer map backdrop (v0.15.1): non-covered departements as a pale tint
   of the shutter blue instead of warm grey — gentler contrast, regions
   still clearly the highlight. Applies to homepage + region maps. */
.jbf-map-other path{ fill: #C5CDCE; }
.jbf-rmap-shape path{ fill: var(--shutter); stroke: var(--shutter-dk); stroke-width:1; }

/* ================================================================
   HEADER DROPDOWN — "Useful information" submenu (v0.20.0)
   ================================================================ */
.jbf-has-sub, .jbf-menu .menu-item-has-children{ position:relative; }
.jbf-submenu, .jbf-menu .sub-menu{ list-style:none; margin:0; padding:0; }
.jbf-sub-toggle{ display:none; background:none; border:0; color:inherit; cursor:pointer; }
@media (min-width:900px){
  .jbf-submenu, .jbf-menu .sub-menu{
    position:absolute; top:100%; left:0; min-width:210px;
    background:var(--shutter-dk); border:1px solid rgba(250,249,246,.14);
    padding:.4rem 0; margin-top:.5rem;
    opacity:0; visibility:hidden; transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
    z-index:60; box-shadow:0 12px 32px rgba(0,0,0,.20);
  }
  .jbf-has-sub:hover .jbf-submenu,
  .jbf-has-sub:focus-within .jbf-submenu,
  .jbf-menu .menu-item-has-children:hover .sub-menu,
  .jbf-menu .menu-item-has-children:focus-within .sub-menu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .jbf-submenu a, .jbf-menu .sub-menu a{
    display:block; padding:.5rem 1rem; white-space:nowrap; border-bottom:0 !important;
  }
  .jbf-submenu a:hover, .jbf-menu .sub-menu a:hover{ color:#fff; }
}
@media (max-width:899px){
  .jbf-submenu, .jbf-menu .sub-menu{ padding-left:1rem; }
  .jbf-submenu a, .jbf-menu .sub-menu a{ opacity:.82; }
}

/* ================================================================
   v0.21.0 — logo image, region bar, list stat + weekly tags,
   journey STAGE COLOURS. Appended block, additions at END only.
   ================================================================ */

/* Logo image (white artwork on the dark header). */
.jbf-logo-img{ display:block; height:26px; width:auto; }
@media (min-width:900px){ .jbf-logo-img{ height:30px; } }

/* Region bar — the second header row, brass against the blue. */
.jbf-region-bar{ background:var(--brass); }
.jbf-region-bar-inner{
  display:flex; gap:1.75rem; align-items:center;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  white-space:nowrap; padding-top:.4rem; padding-bottom:.4rem;
}
.jbf-region-bar a{
  color:rgba(250,249,246,.94); text-decoration:none;
  font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  flex:0 0 auto; padding:.1rem 0; border-bottom:1.5px solid transparent;
}
.jbf-region-bar a:hover{ color:#fff; border-bottom-color:rgba(250,249,246,.8); }

/* "60 new properties every week" at the top of the region list. */
.jbf-map-list-stat{
  padding:.7rem .5rem; border-bottom:2px solid var(--shutter-dk);
  font-family:var(--display); font-size:1.3rem; color:var(--shutter-dk);
}
.jbf-map-list-stat strong{ font-weight:600; }
.jbf-map-list-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:.1rem;
}
.jbf-map-list-week{
  font-family:var(--mono); font-size:.7rem; color:var(--brass); white-space:nowrap;
}

/* STAGE COLOURS — where you are in the journey.
   Stage 1 (home / region / department): shutter blue — the default.
   Stage 2 (town): olive green.  Stage 3 (property): terracotta.
   The whole accent system re-tints via these two variables. */
body.jbf-stage-town{
  --shutter:    #5E6F4E;
  --shutter-dk: #3E4B32;
}
body.jbf-stage-property{
  --shutter:    #96543F;
  --shutter-dk: #67392B;
}

/* Area headings in the merged-region town list (v0.23.0). */
.jbf-rmap-list-group{
  break-inside: avoid;
  margin-top: 1.1rem;
  padding: .35rem .5rem;
  border-bottom: 2px solid var(--shutter-dk);
}
.jbf-rmap-list-group:first-child{ margin-top: 0; }
.jbf-rmap-list-group a{
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--shutter-dk);
  text-decoration: none;
}
.jbf-rmap-list-group a:hover{ text-decoration: underline; }

/* ================================================================
   v0.24.0 — taller header, centred region PILLS, NA area chooser.
   Appended so it wins over the earlier header rules.
   ================================================================ */
/* Region bar: centred, larger, pill-shaped quick links. */
.jbf-region-bar{ background: #C5CDCE; }   /* matches the France-map backdrop */
.jbf-region-bar-inner{
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  overflow: visible;
  padding-top: .7rem; padding-bottom: .7rem;
}
.jbf-region-bar a{
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .85rem;
  color: var(--shutter-dk);
  font-weight: 600;
}
.jbf-region-bar a:hover{
  background: #f2f1ee;
  color: var(--ink);
}

/* Nouvelle-Aquitaine area chooser — cap the tall map, tidy the list. */
.jbf-choose-title{ font-family:var(--display); font-weight:500; font-size:1.5rem; color:var(--shutter-dk); margin:0 0 .2rem; }
.jbf-na-chooser .jbf-map svg{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:600px; margin:0 auto;
}
.jbf-na-chooser .jbf-map-list a{ padding:.6rem .5rem; }
.jbf-na-chooser .jbf-map-list-name{ font-family:var(--display); font-size:1.15rem; color:var(--ink); }
.jbf-na-chooser .jbf-map-list a:hover .jbf-map-list-name,
.jbf-na-chooser .jbf-map-list a.is-active .jbf-map-list-name{ color:var(--shutter-dk); }

/* ================================================================
   v0.26.0 — region bar as plain white | links, darker + wider hero,
   NA chooser title over the list, homepage "way we work" band.
   Appended so it wins over the earlier header/region-bar rules.
   ================================================================ */

/* Region bar: drop the pills. White text on the same dark as the
   header above it (re-tints with the stage colour), links divided by
   a thin vertical rule instead of a chip. */
.jbf-region-bar{
  background: var(--shutter-dk);
  border-top: 1px solid rgba(250,249,246,.14);
}
.jbf-region-bar-inner{
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;                       /* spacing comes from the separators */
  overflow: visible;
  padding-top: .55rem; padding-bottom: .55rem;
}
.jbf-region-bar a{
  background: none;
  border: 0;
  border-radius: 0;
  padding: .1rem 0;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(250,249,246,.94);
  border-bottom: 1.5px solid transparent;
}
.jbf-region-bar a:hover{
  background: none;
  color: #fff;
  border-bottom-color: rgba(250,249,246,.75);
}
/* thin " | " between consecutive links, centred in the space */
.jbf-region-bar-inner a + a::before{
  content: "|";
  margin: 0 1.1rem;
  color: rgba(250,249,246,.4);
  font-weight: 400;
}

/* Hero: wider lede column and a deeper scrim so the copy reads. */
.jbf-home-lede{ max-width: 64ch; }
.jbf-hero-scrim{
  background:
    linear-gradient(to top, rgba(18,23,25,.94) 0%, rgba(18,23,25,.78) 38%, rgba(18,23,25,.44) 72%, rgba(18,23,25,.26) 100%),
    linear-gradient(to right, rgba(18,23,25,.55) 0%, rgba(18,23,25,0) 66%);
}

/* NA chooser: the title + subtitle now live in the right column,
   directly above the area list (map stays on the left). */
.jbf-na-listcol{ min-width: 0; }
.jbf-na-chooser .jbf-mapsec-head{
  max-width: none;
  margin-bottom: 1rem;
}

/* Homepage "The way we work" band. */
.jbf-howwork{
  padding-block: clamp(2.5rem,6vw,4.5rem);
  border-top: 1px solid var(--hairline);
}
.jbf-howwork-inner{
  display: grid;
  gap: clamp(1.5rem,4vw,3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width:820px){
  .jbf-howwork-inner{ grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); }
}
.jbf-howwork-head{ max-width: 46ch; }
.jbf-howwork-note{ color: var(--ink-soft); margin: .75rem 0 0; }
.jbf-howwork-body p{ color: var(--ink-soft); margin: 0 0 1rem; max-width: 60ch; }
.jbf-howwork-sub{
  font-family: var(--display); font-weight: 600; color: var(--shutter-dk);
  font-size: 1.25rem; margin: 0 0 .6rem;
}
.jbf-howwork-list{
  list-style: none; margin: 0 0 1rem; padding: 0; max-width: 60ch;
}
.jbf-howwork-list li{
  position: relative; padding-left: 1.35rem; margin: 0 0 .55rem;
  color: var(--ink-soft);
}
.jbf-howwork-list li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--shutter);
}

/* Below phone width the long merged label wraps; swap the vertical
   rules for plain spacing so no stray "|" starts a wrapped line. */
@media (max-width:600px){
  .jbf-region-bar-inner{ gap: .35rem 1.1rem; }
  .jbf-region-bar-inner a + a::before{ content: none; }
}

/* ================================================================
   v0.27.0 — per-region colour on the region-page maps.
   Jean wants each region's view to have its own map colour. Scoped
   to the region-map component (silhouette + its town list) via a
   --rmap / --rmap-dk pair, so the header, region bar and the France
   homepage map are all untouched. Dots stay white throughout.
   Colours are a first pass for Jean — tweak the pairs below.
   Deliberately avoid the olive (town) and terracotta (property)
   stage hues so the map colour never reads as a journey stage.
   ================================================================ */

/* Region map keys off its own vars, falling back to the shutter blue
   so any region without a colour below still renders as before. */
.jbf-rmap-shape path{
  fill:   var(--rmap,    var(--shutter));
  stroke: var(--rmap-dk, var(--shutter-dk));
}
/* Keep the list beside the map in step with its silhouette. */
.jbf-rmapsec .jbf-rmap-list li.is-active .jbf-rmap-list-name{ color: var(--rmap-dk, var(--shutter-dk)); }
.jbf-rmapsec .jbf-rmap-list-group a{ color: var(--rmap-dk, var(--shutter-dk)); }

/* One pair per legacy region id. mid = fill, dk = stroke + list text. */
body.jbf-region-1  { --rmap:#2F7273; --rmap-dk:#1E5455; } /* Brittany — Atlantic teal */
body.jbf-region-3  { --rmap:#4F6E86; --rmap-dk:#33485A; } /* Normandy & Nord-Pas-de-Calais — slate blue */
body.jbf-region-2  { --rmap:#A9822F; --rmap-dk:#6B501C; } /* Poitou-Charentes / Loire / Vendée — golden ochre */
body.jbf-region-7  { --rmap:#4A7A55; --rmap-dk:#2E5136; } /* Limousin — forest green */
body.jbf-region-10 { --rmap:#8E4A5B; --rmap-dk:#5C2E3A; } /* Aquitaine — claret */
body.jbf-region-8  { --rmap:#6E5A8A; --rmap-dk:#453956; } /* Midi-Pyrénées — violet (off-nav) */
body.jbf-region-9  { --rmap:#4A5C8A; --rmap-dk:#2F3C5C; } /* Languedoc "Dordogne & Lot" — indigo (off-nav) */

/* ================================================================
   v0.29.0 — region colour identity, card redesign, gallery contain,
   howwork band, region-bar underline fix.
   ================================================================ */

/* --- REGION PALETTE follows through region → town → property.
   The old journey-stage tints (town olive / property terracotta) are
   retired: reset them to the default blue first, then let the
   region class re-tint everything via the accent variables. The
   header therefore only changes colour BETWEEN regions. */
body.jbf-stage-town,
body.jbf-stage-property{
  --shutter:    #4A6670;
  --shutter-dk: #2E464F;
}
body.jbf-region-1  { --shutter:#2F7273; --shutter-dk:#1E5455; } /* Brittany */
body.jbf-region-3  { --shutter:#4F6E86; --shutter-dk:#33485A; } /* Normandy & NPdC */
body.jbf-region-2  { --shutter:#A9822F; --shutter-dk:#6B501C; } /* P-C / Loire / Vendée */
body.jbf-region-7  { --shutter:#4A7A55; --shutter-dk:#2E5136; } /* Limousin */
body.jbf-region-10 { --shutter:#8E4A5B; --shutter-dk:#5C2E3A; } /* Aquitaine */
body.jbf-region-8  { --shutter:#6E5A8A; --shutter-dk:#453956; } /* Midi-Pyrénées (off-nav) */
body.jbf-region-9  { --shutter:#4A5C8A; --shutter-dk:#2F3C5C; } /* Languedoc "D&L" (off-nav) */

/* --- Region bar: fix the underline spilling across the "|".
   The separator is a ::before INSIDE each link, so the old
   border-bottom underline ran underneath it. Switch the hover
   underline to text-decoration (which skips atomic inlines) and
   make the separator inline-block so it is never underlined. */
.jbf-region-bar a{
  border-bottom: 0;
  text-decoration: none;
}
.jbf-region-bar a:hover{
  border-bottom: 0;
  text-decoration: underline;
  text-underline-offset: .4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(250,249,246,.75);
}
.jbf-region-bar-inner a + a::before{
  display: inline-block;
  text-decoration: none;
}

/* --- Property card: reference as the heading; footer row with the
   condition at a glance (left) and the price stack (right). */
.jbf-card-title{ letter-spacing:.02em; }
.jbf-card-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:.75rem; margin-top:auto; padding-top:.75rem;
}
.jbf-card-cond{
  font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft);
  padding:.25rem .5rem; border:1px solid var(--hairline); border-radius:2px;
  max-width: 55%;
}
.jbf-card-cond-3{ color:#8a5a2b; border-color:#D9C6A8; background:#F6EFE2; } /* to renovate */
.jbf-card-cond-2{ color:#3f5560; border-color:#C3D0D6; background:#EAF0F2; } /* partly habitable */
.jbf-card-cond:empty{ border:0; padding:0; }
.jbf-card-price{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.jbf-card-gbp{
  font-size:.72rem; color:var(--ink-soft); font-weight:400; letter-spacing:.01em;
}
/* the card body should flex so the footer pins to the bottom */
.jbf-card-body{ display:flex; flex-direction:column; }

/* --- Gallery: never upscale. The real photo is CONTAINED at up to
   its true size; a blurred copy of itself fills the letterbox space
   behind, so the frame still reads as a full gallery tile. */
.jbf-gal-main{ position:relative; overflow:hidden; background:#1f2425; }
.jbf-gal-main img.jbf-gal-blur{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(22px) saturate(.85) brightness(.72);
  transform:scale(1.12);              /* hide blur edge fringing */
  aspect-ratio:auto;
}
.jbf-gal-main img.jbf-gal-photo{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
  aspect-ratio:auto;
}
@media (min-width:760px){
  .jbf-gal-main img.jbf-gal-photo{ height:420px; }
}
/* side thumbs stay cover (small frames, mild crop reads fine) */

/* --- "The way we work": designed band. Limestone surface, three
   numbered panels divided by hairlines; the viewing panel carries
   its checklist. */
.jbf-howwork{
  background:var(--limestone);
  border-top:1px solid var(--hairline);
  padding-block: clamp(2.75rem,6vw,4.5rem);
}
.jbf-howwork-head{ margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.jbf-how-grid{
  display:grid; grid-template-columns:1fr;
  border-top:1px solid var(--hairline);
}
@media (min-width:820px){
  .jbf-how-grid{ grid-template-columns:1fr 1fr 1.35fr; border-left:1px solid var(--hairline); }
}
.jbf-how-item{
  padding: clamp(1.25rem,2.5vw,2rem);
  border-bottom:1px solid var(--hairline);
}
@media (min-width:820px){
  .jbf-how-item{ border-right:1px solid var(--hairline); }
}
.jbf-how-num{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em;
  color:var(--brass);
  display:block; margin-bottom:.9rem;
}
.jbf-how-title{
  font-family:var(--display); font-weight:600; font-size:1.35rem;
  color:var(--shutter-dk); margin:0 0 .6rem;
}
.jbf-how-item p{ color:var(--ink-soft); margin:0 0 .8rem; }
.jbf-how-item p:last-child{ margin-bottom:0; }
.jbf-how-list{ list-style:none; margin:0 0 .8rem; padding:0; }
.jbf-how-list li{
  position:relative; padding-left:1.2rem; margin-bottom:.45rem;
  color:var(--ink-soft);
}
.jbf-how-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.4rem; height:.4rem; border-radius:50%;
  background:var(--shutter);
}
.jbf-how-note{ font-size:.9rem; }

/* ================================================================
   v0.33.0 — horizontal filter bar (Rightmove-style dropdowns),
   scoped on town/region/archive, + homepage headline "windows".
   ================================================================ */

/* --- Filter bar --- */
.jbf-filterbar{
  margin: 0 0 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
}
.jbf-fb-row{
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: .4rem;
  padding: .55rem;
}
.jbf-fb-item{ position: relative; }
.jbf-fb-toggle{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: .9rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: 3px;
  padding: .55rem .8rem; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.jbf-fb-toggle:hover{ border-color: var(--shutter); }
.jbf-fb-toggle.is-active{
  border-color: var(--shutter); background: var(--shutter); color: var(--paper);
}
.jbf-fb-caret{
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7; transition: transform .15s ease;
}
.jbf-fb-item.is-open .jbf-fb-caret{ transform: rotate(180deg); }

/* the popover panel */
.jbf-fb-panel{
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 240px; max-width: 340px; max-height: 60vh; overflow: auto;
  background: #fff; border: 1px solid var(--hairline); border-radius: 4px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
  padding: 1rem;
}
.jbf-fb-panel[hidden]{ display: none; }
/* price slider needs a bit of breathing room inside the panel */
.jbf-fb-panel .facetwp-facet{ margin: 0; }
.jbf-fb-panel .facetwp-slider-wrap{ padding: .5rem .4rem 0; }
/* v0.108.0 — FacetWP range-slider handles (price + land size) were too
   large. Shrink them to neat squares and drop the internal grip lines so
   they read cleanly at the smaller size. Scoped to .facetwp-slider, so it
   applies to both sliders wherever they render. Vertical centring uses
   translateY so it holds whatever the track height is; the right offset is
   half the handle width, keeping the handle centred on its value. */
/* Keep FacetWP's original handle size, position and centring exactly as
   they are, and simply scale each handle down 10% about its own centre.
   transform-origin:center means the centre point does not move, so the
   handles stay aligned to the ends of the track and centred on the bar. */
.facetwp-slider .noUi-handle{
  transform: scale(0.9) !important;
  transform-origin: center center !important;
}

/* v0.108.4 — widen the Price and Land size popovers by 50% so the track is
   longer and easier to set precisely (Jean tightened the step, this gives the
   room to use it). Targets just those two panels by id; the sliders inside are
   full-width, so they grow with the panel. Desktop/tablet only: on phones the
   panel already opens full-width, so there is nothing to widen and forcing a
   min-width there would overflow the screen. */
@media (min-width: 641px){
  #fb-price_range,
  #fb-land_size{
    min-width: 360px;   /* base 240px + 50% */
    max-width: 510px;   /* base 340px + 50% */
  }
}

.jbf-fb-tail{ margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.jbf-fb-sort .facetwp-facet{ margin: 0; }
.jbf-fb-sort select{
  font-family: var(--body); font-size: .9rem; padding: .5rem .6rem;
  border: 1px solid var(--hairline); border-radius: 3px; background: #fff;
}

/* active-selection chips under the bar */
.jbf-fb-active{ padding: 0 .55rem; }
.jbf-fb-active:empty{ display: none; }
.jbf-fb-active .facetwp-selection-value{
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--limestone); border: 1px solid var(--hairline); border-radius: 999px;
  padding: .25rem .7rem; margin: 0 .4rem .55rem 0; font-size: .82rem;
}

@media (max-width: 640px){
  .jbf-fb-row{ gap: .35rem; position: relative; }   /* anchor panels to the row */
  .jbf-fb-toggle{ padding: .5rem .65rem; font-size: .85rem; }
  .jbf-fb-tail{ margin-left: 0; width: 100%; }
  /* the panel was inheriting the button's width (item was the positioned
     ancestor); anchor it to the whole row so it opens full-width beneath
     the filters and nothing gets clipped. */
  .jbf-fb-item{ position: static; }
  .jbf-fb-panel{
    left: 0; right: 0; top: calc(100% + 6px);
    min-width: 0; max-width: none;
  }
}

.jbf-archive-layout--bar{ display: block; }

/* --- Homepage headline "windows" --- */
.jbf-windows{ padding-block: clamp(2rem,5vw,3.5rem); }
.jbf-window-grid{
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px){ .jbf-window-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){ .jbf-window-grid{ grid-template-columns: 1fr 1fr 1fr 1fr; } }
.jbf-window{
  display: flex; flex-direction: column; gap: .2rem;
  height: 100%; padding: 1.1rem 1.2rem;
  background: var(--limestone); border: 1px solid var(--hairline); border-radius: 4px;
  text-decoration: none; color: var(--ink);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.jbf-window:hover{ transform: translateY(-2px); border-color: var(--shutter); background: #fff; }
.jbf-window-title{ font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--shutter-dk); line-height: 1.2; }
.jbf-window-sub{ font-size: .85rem; color: var(--ink-soft); }
.jbf-window-arrow{ margin-top: .5rem; color: var(--shutter); font-weight: 700; }

/* ================================================================
   v0.34.0 — design polish batch:
   card price beside beds (body font, larger); square selection
   chips; quick-filters head; blue "way we work" tiles; region bar
   as white buttons; ONE colour identity (blue everywhere, green
   region maps, lighter-blue NA chooser map).
   ================================================================ */

/* --- Card: title + price in the body font; price up beside beds. */
.jbf-card-title{
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
}
.jbf-card-mid{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem;
}
.jbf-card-mid .jbf-card-meta{ margin: 0; }
.jbf-card-mid .jbf-card-price{ margin-left: auto; }
.jbf-card-eur{
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.3rem;          /* ~20% up */
  line-height: 1.15;
  color: var(--ink);
}
.jbf-card-foot{
  justify-content: flex-start;
}

/* --- Filter selection chips: square, with the ✕ inside the chip.
   Style the whole selection item as the chip so label, value and the
   remove icon all sit inside one box. */
.jbf-fb-active .facetwp-selections li{
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--limestone);
  border: 1px solid var(--hairline);
  border-radius: 3px;                 /* square, like the buttons */
  padding: .35rem .65rem;
  margin: 0 .45rem .55rem 0;
  font-size: .82rem;
}
.jbf-fb-active .facetwp-selection-value{
  background: none; border: 0; border-radius: 0;
  padding: 0 .15rem 0 0; margin: 0;
  display: inline-flex; align-items: center; gap: .4rem;
}

/* --- Quick filters head: title left, label right. */
.jbf-windows-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.jbf-windows-head .jbf-eyebrow{ margin: 0; }

/* --- "The way we work": blue tiles, white writing. */
.jbf-how-grid{
  border: 0; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width:820px){
  .jbf-how-grid{ grid-template-columns: 1fr 1fr 1.35fr; border-left: 0; }
}
.jbf-how-item{
  background: var(--shutter-dk);
  border: 0; border-radius: 4px;
}
.jbf-how-item .jbf-how-title{ color: var(--paper); }
.jbf-how-item p,
.jbf-how-item .jbf-how-list li{ color: rgba(250,249,246,.85); }
.jbf-how-num{ color: #C9A85C; }
/* square bullets, centred to the middle of each point */
.jbf-how-list li{ padding-left: 1.3rem; }
.jbf-how-list li::before{
  border-radius: 0;
  width: .45rem; height: .45rem;
  background: rgba(250,249,246,.85);
  top: 50%; transform: translateY(-50%);
}

/* --- Region bar: white square buttons with blue text. */
.jbf-region-bar a{
  background: #fff;
  color: var(--shutter-dk);
  border-radius: 3px;
  padding: .45rem .95rem;
  font-weight: 600;
  text-decoration: none;
}
.jbf-region-bar a:hover{
  background: var(--limestone);
  color: var(--shutter-dk);
  text-decoration: none;
}
.jbf-region-bar-inner{ gap: .6rem; }
.jbf-region-bar-inner a + a::before{ content: none; }   /* buttons need no "|" */

/* --- ONE colour identity.
   Header/nav/accents: ALWAYS the blue — the per-region --shutter
   overrides from v0.29 are reset here (later block wins).
   Region-page dots-maps: ALL green.
   (The homepage France map is untouched; the NA chooser map gets its
   own lighter blue below.) */
body.jbf-region-1, body.jbf-region-2, body.jbf-region-3,
body.jbf-region-7, body.jbf-region-8, body.jbf-region-9,
body.jbf-region-10{
  --shutter:    #4A6670;
  --shutter-dk: #2E464F;
  --rmap:       #4A7A55;   /* the green — all region maps */
  --rmap-dk:    #2E5136;
}

/* --- NA chooser map: slightly lighter blue than the France map,
   keeping the hover/active darkening intact. */
.jbf-na-chooser .jbf-map-region path{
  fill: #62808C;
}
.jbf-na-chooser .jbf-map-region:hover path,
.jbf-na-chooser .jbf-map-region.is-active path,
.jbf-na-chooser .jbf-map-region:focus-visible path{
  fill: #44626E;
}

/* ================================================================
   v0.36.0 — region Town dropdown (real town list) + legacy
   filter-family redirects (PHP only).
   ================================================================ */
.jbf-fb-panel--towns{ min-width: 300px; max-width: 420px; }
.jbf-fb-towns{
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 1.25rem;
}
.jbf-fb-towns li{ break-inside: avoid; }
.jbf-fb-towns a{
  display: block; padding: .35rem .3rem;
  text-decoration: none; color: var(--ink);
  border-radius: 3px; font-size: .9rem;
}
.jbf-fb-towns a:hover{ background: var(--limestone); color: var(--shutter-dk); }
@media (max-width: 640px){ .jbf-fb-towns{ columns: 1; } }

/* ================================================================
   v0.39.0 — page templates: Register your search, About, Contact
   + shared native form styling.
   ================================================================ */
.jbf-page{ padding-block: clamp(2rem,5vw,3.5rem); }
.jbf-page-narrow{ max-width: 860px; }
.jbf-page-head{ margin-bottom: 1.75rem; }
.jbf-page-title{ font-family: var(--display); font-weight: 600; font-size: clamp(2rem,5vw,2.9rem); color: var(--shutter-dk); margin: .2rem 0 .6rem; line-height: 1.08; }
.jbf-page-lede{ font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; }

.jbf-page .jbf-prose p{ margin: 0 0 1.1rem; line-height: 1.7; color: var(--ink); }
.jbf-page .jbf-prose a{ color: var(--shutter-dk); text-decoration: underline; text-underline-offset: .2em; }

/* --- Forms --- */
.jbf-form{ margin-top: .5rem; }
.jbf-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
@media (max-width: 560px){ .jbf-form-grid{ grid-template-columns: 1fr; } }
.jbf-field{ margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.jbf-field--wide{ grid-column: 1 / -1; }
.jbf-field label,
.jbf-field legend{ font-family: var(--body); font-weight: 600; font-size: .9rem; color: var(--ink); }
.jbf-field label span,
.jbf-consent span{ color: var(--brass); }
.jbf-form input[type=text],
.jbf-form input[type=email],
.jbf-form input[type=tel],
.jbf-form select,
.jbf-form textarea{
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  padding: .65rem .75rem; border: 1px solid var(--hairline); border-radius: 3px;
  background: #fff; width: 100%;
}
.jbf-form input:focus,
.jbf-form select:focus,
.jbf-form textarea:focus{ outline: none; border-color: var(--shutter); box-shadow: 0 0 0 3px rgba(74,102,112,.15); }
.jbf-checks{ display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; margin-top: .5rem; }
@media (max-width: 560px){ .jbf-checks{ grid-template-columns: 1fr; } }
.jbf-checks label,
.jbf-consent label{ font-weight: 400; display: flex; align-items: flex-start; gap: .5rem; }
fieldset.jbf-field{ border: 0; padding: 0; margin: 0 0 1.1rem; }
.jbf-consent{ background: var(--limestone); border: 1px solid var(--hairline); border-radius: 3px; padding: .8rem 1rem; }
.jbf-form-actions{ margin-top: .5rem; }
.jbf-btn{
  font-family: var(--body); font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  color: var(--paper); background: var(--shutter-dk);
  border: 0; border-radius: 3px; padding: .8rem 1.6rem; cursor: pointer;
  transition: background .15s ease;
}
.jbf-btn:hover{ background: var(--shutter); }
.jbf-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jbf-form-note{ padding: .9rem 1.1rem; border-radius: 4px; margin: 0 0 1.25rem; font-size: .95rem; }
.jbf-form-note--ok{ background: #EBF1E8; border: 1px solid #C4D2C0; color: #2E5136; }
.jbf-form-note--err{ background: #F6ECEC; border: 1px solid #E0C4C4; color: #8A3B3B; }

/* --- Contact layout --- */
.jbf-contact-cols{ display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 800px){ .jbf-contact-cols{ grid-template-columns: 0.8fr 1.2fr; gap: 3rem; } }
.jbf-contact-list{ list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.jbf-contact-list li{ margin-bottom: 1rem; display: flex; flex-direction: column; }
.jbf-contact-k{ font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.jbf-contact-list a{ font-family: var(--display); font-size: 1.35rem; color: var(--shutter-dk); text-decoration: none; }
.jbf-contact-note{ font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }

/* ================================================================
   v0.40.0 — landscape listing ROWS (Rightmove/JB-list style) with
   an in-row mini gallery. Replaces the square tile grid on the
   archive + all location pages. 10 per page.
   ================================================================ */

/* stacked, full-width rows (override the tile grid) */
.jbf-list{
  display: block !important;
  grid-template-columns: none !important;
}
.jbf-row{
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.jbf-row:hover{ box-shadow: 0 12px 30px -18px rgba(0,0,0,.4); border-color: #cfc9bd; }
@media (max-width: 720px){
  .jbf-row{ grid-template-columns: 1fr; }
}

/* --- media / mini gallery --- */
.jbf-row-media{ position: relative; background: #1f2425; min-height: 240px; }
.jbf-row-gallery{ position: relative; width: 100%; height: 100%; }
.jbf-row-slide{
  position: absolute; inset: 0; display: none;
}
.jbf-row-slide.is-current{ display: block; }
.jbf-row-slide img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 720px){
  .jbf-row-media{ min-height: 0; aspect-ratio: 3 / 2; }
  .jbf-row-slide{ position: absolute; }
}
.jbf-row-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s ease; z-index: 2;
}
.jbf-row:hover .jbf-row-nav,
.jbf-row-media:focus-within .jbf-row-nav{ opacity: 1; }
.jbf-row-prev{ left: 10px; }
.jbf-row-next{ right: 10px; }
.jbf-row-nav:hover{ background: #fff; }
@media (max-width: 720px){ .jbf-row-nav{ opacity: 1; } }
.jbf-row-count{
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  background: rgba(38,43,44,.82); color: #fff;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  padding: .2rem .5rem; border-radius: 3px;
}

/* --- body --- */
.jbf-row-body{
  display: flex; flex-direction: column;
  padding: 1.25rem 1.4rem;
}
.jbf-row-main{ text-decoration: none; color: inherit; display: block; }
.jbf-row-body .jbf-card-place{
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.jbf-row-title{
  font-family: var(--body); font-weight: 700; font-size: 1.08rem; line-height: 1.3;
  color: var(--ink); margin: .2rem 0 .55rem;
  /* one or two lines max */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jbf-row-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .7rem; color: var(--ink-soft); font-size: .92rem;
}
.jbf-row-meta .jbf-card-cond{ margin-left: .25rem; }
.jbf-row-desc{
  color: var(--ink-soft); font-size: .92rem; line-height: 1.6; margin: 0 0 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.jbf-row-foot{
  margin-top: auto; padding-top: .5rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.jbf-row-foot .jbf-card-price{ display: flex; flex-direction: column; }
.jbf-row-cta{
  font-family: var(--body); font-weight: 600; font-size: .88rem;
  color: var(--shutter-dk); text-decoration: none;
  border: 1px solid var(--shutter); border-radius: 3px; padding: .55rem 1rem;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.jbf-row-cta:hover{ background: var(--shutter-dk); color: var(--paper); border-color: var(--shutter-dk); }

/* ================================================================
   v0.41.0 — row reference, homepage carousel mini-card, fiche
   description colour re-asserted, land/house title fix (PHP).
   ================================================================ */

/* re-assert the fiche description as light-on-blue (the About-page
   .jbf-page .jbf-prose p rule is now scoped away from it, but make it
   explicit on the paragraph so nothing global can flip it to black). */
.jbf-overview .jbf-desc .jbf-prose,
.jbf-overview .jbf-desc .jbf-prose p{ color: #D3DBDD; }
.jbf-overview .jbf-desc .jbf-prose a{ color: #fff; }

/* reference, top-right of a listing row */
.jbf-row-body{ position: relative; }
.jbf-row-ref{
  position: absolute; top: 1.25rem; right: 1.4rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--limestone);
  border: 1px solid var(--hairline); border-radius: 3px; padding: .2rem .5rem;
}
.jbf-row-main{ padding-right: 6.5rem; }   /* keep the H1 clear of the ref */

/* --- Homepage "Latest properties" carousel mini-card --- */
.jbf-mini{
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--hairline); border-radius: 5px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.jbf-mini:hover{ box-shadow: 0 12px 30px -18px rgba(0,0,0,.4); border-color: #cfc9bd; }
.jbf-mini-media{ aspect-ratio: 4 / 3; background: #1f2425; }
.jbf-mini-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.jbf-mini-body{ display: flex; flex-direction: column; padding: .9rem 1rem 1.1rem; gap: .1rem; }
.jbf-mini-body .jbf-card-place{ font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.jbf-mini-title{
  font-family: var(--body); font-weight: 700; font-size: .98rem; line-height: 1.3;
  color: var(--ink); margin: .15rem 0 .45rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jbf-mini-meta{ margin: 0 0 .7rem; color: var(--ink-soft); font-size: .88rem; display: flex; gap: .5rem; }
.jbf-mini-foot{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.jbf-mini-foot .jbf-card-eur{ font-family: var(--body); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.jbf-mini-foot .jbf-card-cond{ font-size: .68rem; }

/* ================================================================
   v0.42.0 — homepage "Latest properties" carousel now scrolls the
   REAL landscape rows (same tile as archive/towns), one per view
   with the next peeking, instead of a 3-up card grid.
   ================================================================ */
.jbf-latest .jbf-carousel-track{
  grid-auto-columns: calc(100% - 2.5rem);   /* one full row per view + peek */
}
@media (min-width: 640px){
  .jbf-latest .jbf-carousel-track{ grid-auto-columns: calc(100% - 3rem); }
}
@media (min-width: 980px){
  .jbf-latest .jbf-carousel-track{ grid-auto-columns: calc(100% - 5rem); }
}
/* the slide holds a .jbf-row now, not a .jbf-card */
.jbf-latest .jbf-carousel-item > .jbf-row{ width: 100%; margin-bottom: 0; }

/* ================================================================
   v0.43.0 — price stack side-by-side (larger £), row meta reorder,
   homepage carousel = preview image only (no in-row gallery).
   ================================================================ */

/* £ approx sits to the RIGHT of the € price, larger than before */
.jbf-card-price{ flex-direction: row !important; align-items: baseline; gap: .5rem; }
.jbf-card-gbp{ font-size: .95rem !important; color: var(--ink-soft); font-weight: 400; }

/* Homepage carousel = preview image only (NOT the in-row gallery). The
   base rules already show just the first slide; here we hide the gallery
   arrows + counter on the homepage so each card is a clean single preview
   that links to the property. (v0.52 briefly enabled the gallery here;
   reverted in v0.53 per client preference.) */
.jbf-latest .jbf-row-nav,
.jbf-latest .jbf-row-count{ display: none !important; }

/* ================================================================
   v0.44.0 — white register button, "Apply filters" arrow, and a
   proper multi-column footer with site map.
   ================================================================ */

/* the light button variant must beat the later plain .jbf-btn rule */
.jbf-btn.jbf-btn--light{ background: var(--paper); color: var(--shutter-dk); }
.jbf-btn.jbf-btn--light:hover{ background: var(--limestone); color: var(--shutter-dk); }

/* the quick-filter "Apply filters →" label */
.jbf-window-arrow{
  margin-top: .6rem; color: var(--shutter); font-weight: 600; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .35rem;
}

/* --- Footer --- */
.jbf-site-footer{ margin-top: clamp(3rem,7vw,5rem); background: var(--shutter-dk); color: rgba(250,249,246,.82); }
.jbf-footer-grid{
  display: grid; gap: 2rem clamp(1.5rem,4vw,3.5rem);
  grid-template-columns: 1fr; padding-block: clamp(2.5rem,5vw,3.5rem);
}
@media (min-width: 620px){ .jbf-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px){ .jbf-footer-grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.jbf-footer-name{ font-family: var(--display); font-size: 1.4rem; color: var(--paper); margin: 0 0 .5rem; }
.jbf-footer-tag{ font-size: .92rem; line-height: 1.6; max-width: 34ch; margin: 0 0 1rem; }
.jbf-footer-contact{ list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.jbf-footer-contact li{ margin-bottom: .35rem; }
.jbf-footer-contact span{ color: rgba(250,249,246,.55); font-size: .85rem; }

.jbf-footer-h{
  font-family: var(--body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(250,249,246,.55); margin: 0 0 .9rem; font-weight: 600;
}
.jbf-footer-col ul{ list-style: none; margin: 0; padding: 0; }
.jbf-footer-col li{ margin-bottom: .55rem; }
.jbf-site-footer a{ color: rgba(250,249,246,.82); text-decoration: none; transition: color .15s ease; }
.jbf-site-footer a:hover{ color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }

.jbf-footer-bar{ border-top: 1px solid rgba(250,249,246,.14); }
.jbf-footer-bar-inner{
  display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; justify-content: space-between;
  padding-block: 1.1rem; font-size: .82rem; color: rgba(250,249,246,.6);
}
.jbf-footer-bar-inner p{ margin: 0; }
.jbf-footer-fineprint{ color: rgba(250,249,246,.45); }

/* ================================================================
   v0.45.0 — "way we work" tiles WHITE with dark text + natural
   height; "Tell us what you're looking for" strip becomes a
   contained blue box (not full-bleed).
   ================================================================ */

/* tiles: white, contrasting text, only as tall as their content */
.jbf-how-grid{ align-items: start; }
.jbf-how-item{
  background: #fff;
  border: 1px solid var(--hairline);
}
.jbf-how-item .jbf-how-title{ color: var(--shutter-dk); }
.jbf-how-item p,
.jbf-how-item .jbf-how-list li{ color: var(--ink-soft); }
.jbf-how-num{ color: #B08D57; }               /* brass, readable on white */
.jbf-how-list li::before{ background: var(--shutter); }

/* strip: blue lives on a contained, rounded box inside the wrap
   (page background shows at the sides) instead of full-bleed */
.jbf-strip{ background: transparent; color: inherit; padding-block: clamp(2rem,5vw,3.5rem); }
.jbf-strip > .jbf-wrap{
  background: var(--shutter-dk);
  color: var(--paper);
  border-radius: 6px;
  padding: clamp(2rem,5vw,3.25rem) clamp(1.5rem,4vw,3rem);
}

/* ================================================================
   v0.47.0 — NA parent page uses landscape rows (PHP); "the way we
   work" section flips to WHITE bg with OFF-WHITE tiles.
   ================================================================ */
.jbf-howwork{ background: #fff; }
.jbf-how-item{ background: var(--limestone); border: 1px solid var(--hairline); }

/* ================================================================
   v0.48.0 — hero +20% taller; "way we work" section back to the
   page background; NA parent page gets the filter bar (4 areas as
   the location control).
   ================================================================ */
.jbf-hero-home{ min-height: clamp(504px, 86vh, 864px); }

/* section blends into the page like the others; tiles stay off-white */
.jbf-howwork{ background: transparent; border-top: 0; }

/* ================================================================
   v0.49.0 — region + town intros (and the NA callout) run full
   content-width instead of a narrow ~68ch column.
   ================================================================ */
.jbf-region-copy,
.jbf-term-intro,
.jbf-na-note{ max-width: none; }

/* ================================================================
   v0.51.0 — mobile polish. Hero copy starts below the header (was
   pinned to the bottom of a tall hero), with the scrim re-weighted
   so it stays legible higher up. Property tile (used on archive,
   town, region AND the homepage carousel): reference now stacks
   above the town instead of overlapping it top-right; dropping the
   ref's clearance padding lets the title/meta/description use the
   full tile width; the condition tag sits inline to the right of
   the size/beds; the price block is centred against the CTA. The
   register strip is inset from the screen edges on small screens.
   ================================================================ */

/* register strip: keep the blue box off the screen edges (a small
   page-background gutter shows each side). No effect on desktop,
   where the box is already centred within the wrap. */
.jbf-strip{ padding-inline: 1.25rem; }

@media (max-width: 720px){

  /* hero: copy starts just under the header, not at the foot of a
     tall hero. Re-weight the scrim darker at the top so the higher
     copy keeps its contrast over the brighter part of the photo. */
  /* copy starts below the header AND the hero is only as tall as its
     content — no dead image space under the buttons (was 86vh). */
  .jbf-hero-home{ align-items: flex-start; min-height: auto; }
  /* darker overlay on mobile so the copy reads over the photo */
  .jbf-hero-scrim{
    background:
      linear-gradient(to bottom,
        rgba(18,23,25,.86) 0%,
        rgba(18,23,25,.70) 42%,
        rgba(18,23,25,.62) 78%,
        rgba(18,23,25,.68) 100%);
  }

  /* reference: out of the top-right corner, onto its own line at the
     top of the text stack (it already sits first in the markup). */
  .jbf-row-ref{
    position: static; align-self: flex-start;
    margin: 0 0 .55rem;
  }
  /* with the ref no longer overlaid, the body no longer needs the
     right gutter — title, meta and description fill the tile width. */
  .jbf-row-main{ padding-right: 0; }

  /* condition tag: inline, to the right of the size/beds, centred. */
  .jbf-row-meta{ flex-wrap: wrap; align-items: center; }
  .jbf-row-meta .jbf-card-cond{ margin-left: .4rem; }

  /* price: € centred against the two-line "approx £", and the whole
     price block centred against the View-property button. */
  .jbf-row-foot{ align-items: center; }
  .jbf-row-foot .jbf-card-price{ align-items: center; }
}

/* ================================================================
   v0.52.0 — mobile: hero trimmed to its content with a darker
   overlay; homepage "Latest properties" now shows the full
   region-style tile (working in-row photo gallery) one per view
   with arrow buttons below to signal the horizontal scroll; the
   sticky header slides away on scroll-down and returns on scroll-up.
   ================================================================ */

/* header hide/reveal is driven inline by nav.js — scroll-linked on mobile so
   it tracks the gesture and settles when scrolling stops; desktop stays put.
   Only the shadow transition lives in CSS (nav.js sets the transform one). */
.jbf-site-header{ transition: box-shadow .2s ease; }

/* homepage carousel: one FULL-WIDTH card per view on phones (no peek). */
@media (max-width: 639px){
  .jbf-latest .jbf-carousel-track{ grid-auto-columns: 100%; }
}

/* carousel arrows below the track — shown on phones only, where the
   header arrows are hidden, to make the horizontal scroll obvious. */
.jbf-carousel-nav--below{ display: none; }
@media (max-width: 639px){
  .jbf-carousel-nav--below{
    display: flex; justify-content: center; align-items: center;
    gap: 1.25rem; margin-top: 1.1rem;
  }
  /* display:grid (not inline-flex) so the base .jbf-cbtn place-items:center
     keeps the glyph centred; slightly larger for a clean tap target. */
  .jbf-carousel-nav--below .jbf-cbtn{ display: grid; width: 44px; height: 44px; }
}

/* ================================================================
   v0.56.0 — Jean's feedback round, batch 1. Original yellow logo in
   the header; cloud-sky page background on the homepage and region
   pages (his original site's background, tiled); new hero photo via
   the theme fallback; exchange-rate note + search-by-reference in
   the listing toolbars; floor-by-floor description formatting is in
   inc/format.php (display-time only).
   ================================================================ */

/* Jean's yellow logo is a wide lockup (446x65) — a touch taller than
   the old white wordmark so the lettering stays legible. */
.jbf-logo-img{ height: 32px; }
@media (min-width: 900px){ .jbf-logo-img{ height: 38px; } }

/* cloud-sky background (tiled) on the homepage + region pages. The
   image is light, so default dark text stays readable; sections with
   their own solid backgrounds are unaffected. */
body.home,
body.jbf-stage-region{
  background-color: #eef4fb;
  /* cloud strong at the top, washed almost to white through the main body
     of the page, then strong again at the foot (v0.57.0). The white-ish
     gradient is one layer sized to the whole page; the cloud tiles beneath. */
  background-image:
    linear-gradient(to bottom,
      rgba(240,246,252,0)   0,
      rgba(240,246,252,.55) 16%,
      rgba(240,246,252,.88) 40%,
      rgba(240,246,252,.88) 60%,
      rgba(240,246,252,.55) 84%,
      rgba(240,246,252,0)   100%),
    url('assets/cloud-bg.jpg');
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 300px 300px;
  background-position: 0 0, 0 0;
}

/* toolbar additions: rate note + reference search */
.jbf-archive-tools{ display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.jbf-rate-note{
  font-family: var(--font-mono, monospace);
  font-size: .78rem; letter-spacing: .04em;
  color: var(--ink-soft, #5a6a72);
  white-space: nowrap;
}
.jbf-ref-search{
  display: inline-flex; align-items: center;
  border: 1px solid var(--line, #d8d4cb); border-radius: 999px;
  background: #fff; overflow: hidden;
}
.jbf-ref-search input{
  border: 0; outline: 0; background: transparent;
  padding: .45rem .2rem .45rem .85rem;
  font-size: .85rem; width: 11.5em;
  text-transform: uppercase;
}
.jbf-ref-search .jbf-ref-go{
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: .3rem .7rem .4rem .4rem;
  color: var(--blue, #2c4a55);
}
.jbf-ref-search .jbf-ref-go:hover{ color: var(--ink, #1d2b31); }

/* reference-not-found notice on the archive */
.jbf-ref-missing{
  margin: 0 0 1.2rem; padding: .8rem 1rem;
  background: #fff8e6; border: 1px solid #eadfbc; border-radius: 8px;
  font-size: .92rem;
}

@media (max-width: 720px){
  .jbf-town-tools{ margin: .5rem 0 .75rem; }
  .jbf-ref-search input{ width: 9.5em; }
}

/* ================================================================
   v0.57.0 — harmonising Jean's brand cues with the theme. Surfaces
   go crisp white (cards were already white; the beige limestone
   bands/tiles are lifted to white); the header deepens to a richer
   navy that flatters the yellow/red logo; and the logo sits in a
   white plaque so it reads as a framed nameplate, not pasted on.
   The cloud-background fade lives with the body rule above.
   ================================================================ */

:root{
  --paper:      #FFFFFF;   /* was #FAF9F6 — crisp white surfaces + light text */
  --shutter-dk: #213B4A;   /* was #2E464F — deeper navy; complements the logo */
}

/* beige (limestone) bands + tiles → white. Cards (.jbf-row) are already
   #fff; small chips/badges/hovers keep the limestone tint so they stay
   legible on the now-white surfaces. */
.jbf-how-item{ background: #fff; }
.jbf-howwork{ background: transparent; }
.jbf-consent{ background: #fff; }

/* --- logo: Jean's new self-framed design (blue-gradient badge baked into
   the image); the theme just displays it cleanly, no CSS frame. (v0.60) --- */
.jbf-logo{ display: inline-flex; align-items: center; }
.jbf-logo-img{ height: 40px; width: auto; box-shadow: 0 1px 5px -2px rgba(0,0,0,.3); }
@media (min-width: 900px){ .jbf-logo-img{ height: 46px; } }

/* ================================================================
   v0.58.0 — logo style A (pale-blue square badge, above); register
   form gains land-size range, gîte count and a water group, and
   loses the free-text "anything else" field.
   ================================================================ */
.jbf-range{ display: inline-flex; align-items: center; gap: .4rem; }
.jbf-range input{ width: 100%; min-width: 0; }
.jbf-range-sep{ color: var(--ink-soft); }

/* ================================================================
   v0.59.0 — toolbars unified (count + rate + reference) across
   archive/region/town, reference search is a larger pill pinned
   right, duplicate sort removed; town pages get a sage cloud
   background with the same fade; region bar becomes a "Regions"
   dropdown on mobile; logo re-framed (blue frame / white trim).
   ================================================================ */

/* reference search: bigger pill, pinned to the far right of the tools line */
.jbf-archive-tools .jbf-ref-search{ margin-left: auto; }
.jbf-ref-search input{ width: 15.5em; padding: .55rem .3rem .55rem 1rem; }
.jbf-ref-search .jbf-ref-go{ font-size: 1.4rem; padding: .4rem .9rem .5rem .4rem; }

/* town pages: sage cloud texture, same top/bottom-strong wash as home/region */
body.jbf-stage-town{
  background-color: #eef2ea;
  background-image:
    linear-gradient(to bottom,
      rgba(238,242,234,0)   0,
      rgba(238,242,234,.55) 16%,
      rgba(238,242,234,.88) 40%,
      rgba(238,242,234,.88) 60%,
      rgba(238,242,234,.55) 84%,
      rgba(238,242,234,0)   100%),
    url('assets/cloud-sage.jpg');
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 300px 300px;
  background-position: 0 0, 0 0;
}

/* region bar: inline pills on desktop; a compact "Regions" dropdown on mobile */
.jbf-region-bar-inner{ display: flex; }
.jbf-region-toggle{ display: none; }
.jbf-region-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

@media (max-width: 720px){
  .jbf-region-bar-inner{ justify-content: flex-start; flex-wrap: wrap; }
  .jbf-region-toggle{
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--body); font-size: .82rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--paper);
    padding: .55rem 0;
  }
  .jbf-region-caret{ transition: transform .18s ease; }
  .jbf-region-toggle[aria-expanded="true"] .jbf-region-caret{ transform: rotate(90deg); }
  .jbf-region-links{ display: none; width: 100%; flex-direction: column; }
  .jbf-region-links.is-open{ display: flex; padding-bottom: .55rem; }
}

/* ================================================================
   v0.60.0 — Jean's new self-framed logo (displayed clean); region
   pills re-spaced (gap restored); breathing room between the
   count/rate/reference line and the filter bar beneath it.
   ================================================================ */
.jbf-archive-tools{ margin-bottom: 1.1rem; }

/* ================================================================
   v0.61.0 — newest self-framed logo (logo-jb3.png); reference
   search added to the hero, under the buttons.
   ================================================================ */
.jbf-hero-search{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem .85rem; margin-top: 1.15rem;
}
.jbf-hero-search-label{
  color: var(--paper); font-size: .85rem; opacity: .92;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
/* the pill sits on the dark hero photo — keep it crisp white */
.jbf-hero-search .jbf-ref-search{ box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); }

/* ================================================================
   v0.62.0 — region/town page titles lifted into a white box so they
   read as titles against the textured background; reference search
   moved from the hero to under the region list on the home map;
   logo reverted to the blue-border version (header.php).
   ================================================================ */
body.jbf-stage-region .jbf-archive-title,
body.jbf-stage-town .jbf-archive-title{
  display: inline-block;
  background: #fff;
  padding: .3rem 1rem .4rem;
  border-radius: 6px;
  box-shadow: 0 1px 6px -2px rgba(0,0,0,.18);
}

/* reference search under the region list on the home map */
.jbf-map-search{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .75rem; margin: 1.1rem 0 0;
}
.jbf-map-search-label{ font-size: .82rem; color: var(--ink-soft); }

/* ================================================================
   v0.63.0 — region name labels on the homepage France map; town
   dots on the region/NA maps show the town name in a small white
   box above the dot on hover (avoids permanent-label overlap);
   About/Register/Contact templates made assignable (Template Name).
   ================================================================ */

/* region labels on the France map */
.jbf-map-label{
  fill: #fff;
  font-family: var(--head, Georgia, 'Times New Roman', serif);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  pointer-events: none;
}
.jbf-map-label-sub{ font-size: 8px; font-weight: 500; }
.jbf-map-label-sm{ font-size: 7.5px; }

/* town-dot hover tooltip on the region/NA maps */
.jbf-rmap{ position: relative; }
.jbf-rmap-tip{
  position: absolute; z-index: 5; left: 0; top: 0;
  transform: translate(-50%, calc(-100% - 9px));
  background: #fff; color: var(--ink, #262b2c);
  font-size: .78rem; line-height: 1; white-space: nowrap;
  padding: .35rem .6rem; border-radius: 5px;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.32);
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.jbf-rmap-tip::after{
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff;
}
.jbf-rmap-tip.is-shown{ opacity: 1; }

/* ================================================================
   v0.65.0 — Jean's confirmed batch: 5 region nav buttons + new
   homepage lede; two-way exchange rate under the property price;
   gallery lightbox is now a single vertical scroll of every photo
   (opens at the clicked one) instead of a flick-through.
   ================================================================ */

/* two-way rate under the price */
.jbf-price-rate{
  display: block; margin-top: .3rem;
  font-family: var(--font-mono, monospace);
  font-size: .72rem; letter-spacing: .02em;
  color: var(--ink-soft, #5c6466); white-space: nowrap;
}

/* lightbox: vertical scroll of all photos */
.jbf-lb-scroll{
  position: absolute; inset: 3.2rem 0 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: .75rem 1rem 2rem;
  scroll-behavior: smooth;
}
.jbf-lb-item{
  max-width: min(1100px, 100%); width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
}

/* ================================================================
   v0.66.0 — curated strips: "Properties of the week" (region + town
   pages) and "Bargain properties" (region pages), hand-picked via the
   ACF toggles, shown between the map and the listing. Reuses the
   carousel card in a horizontal scroll (native swipe, no arrows).
   Gîte filter slot added to the filter bars (needs its FacetWP facet).
   ================================================================ */
.jbf-curated{ margin: 1.5rem 0 2rem; }
.jbf-curated-title{ margin: 0 0 .9rem; }
.jbf-curated .jbf-carousel{ overflow: visible; }
.jbf-curated-carousel .jbf-carousel-track{
  display: flex; gap: 1.1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: .25rem .25rem 1rem; margin: 0; list-style: none;
}
.jbf-curated-carousel .jbf-carousel-item{
  scroll-snap-align: start;
  flex: 0 0 clamp(240px, 78%, 300px);
}
@media (min-width: 900px){
  .jbf-curated-carousel .jbf-carousel-item{ flex-basis: 300px; }
}
/* a subtle tint so the "Bargain" strip reads as its own thing */
.jbf-curated--bargain .jbf-curated-title::before{
  content: ""; display: inline-block; width: .6rem; height: .6rem;
  margin-right: .5rem; border-radius: 2px; background: var(--brass, #9c7a3c);
  transform: translateY(-1px);
}

/* ================================================================
   v0.67.0 — homepage map: the region list + reference search now
   share the right column (.jbf-map-side) instead of the search
   dropping into a new grid row under the map, which left a big gap
   before the "quick filters" section.
   ================================================================ */
.jbf-map-side{ display: flex; flex-direction: column; gap: 1rem; }
.jbf-map-side .jbf-map-search{ margin-top: .25rem; }

/* ================================================================
   v0.68.0 — region browse quick-links (option 1): condition + price
   band tiles that deep-link into the filtered archive. The curated
   "Properties of the week" / "Bargains" strips stay as they are.
   ================================================================ */
.jbf-browse{ margin: 1.5rem 0 2rem; }
.jbf-browse-title{ margin: 0 0 .9rem; }
.jbf-browse-grid{
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.jbf-browse-tile{
  display: block; padding: .7rem .9rem;
  background: #fff; border: 1px solid var(--hairline, #d8d3c8);
  border-radius: 6px; text-decoration: none;
  color: var(--shutter-dk, #213b4a);
  font-size: .9rem; line-height: 1.25;
  transition: border-color .15s ease, background .15s ease;
}
.jbf-browse-tile:hover{
  background: var(--limestone, #eeebe3);
  border-color: var(--shutter, #4a6670);
}
/* condition tiles get a brass edge so they read as their own group */
.jbf-browse-tile--cond{
  border-left: 3px solid var(--brass, #9c7a3c);
  font-weight: 600;
}

/* ================================================================
   v0.69.0 — region pages: the property strips + 12 browse tiles are
   replaced by two quick-link tiles (Properties of the week, Bargains)
   pointing at Jean's legacy browse URLs; price/condition browsing now
   lives in Advanced Search. Homepage map labels nudged; Normandy list
   name updated to the new region title.
   ================================================================ */
.jbf-quicklinks{
  display: grid; gap: .75rem; margin: 1.4rem 0 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.jbf-quicklink{
  display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 3.8rem;
  padding: .95rem 1.1rem;
  background: var(--shutter-dk, #213b4a); color: #fff;
  border-radius: 8px; text-decoration: none;
  font-family: var(--display, Georgia, serif); font-size: 1.3rem; font-weight: 600;
  transition: background .15s ease, transform .12s ease;
}
.jbf-quicklink:hover{ background: var(--shutter, #4a6670); transform: translateY(-1px); }
.jbf-quicklink--bargain{ background: var(--brass, #9c7a3c); }
.jbf-quicklink--bargain:hover{ background: #b08f4f; }

/* ================================================================
   v0.72.0 — curated views actually filter: the bargain /
   property_of_week facets are rendered hidden on the archive so
   their URL variables apply, and those views get their own titles.
   NA sub-area labels on the homepage map; Brittany/Normandy labels
   nudged once more; bridge department added to the Normandy
   region-page map (region-maps.json).
   ================================================================ */
.jbf-hidden-facets{ display: none !important; }
.jbf-map-sublabel{
  fill: #fff; opacity: .85;
  font-family: var(--body, 'Inter', sans-serif);
  font-size: 8px; font-weight: 500; letter-spacing: .03em;
  pointer-events: none;
}

/* ================================================================
   v0.74.0 — NA-page map labels match the homepage visually (that
   map's viewBox is ~1.7x taller, so the shared 11px renders small);
   scale them up on that map only.
   ================================================================ */
.jbf-na-chooser .jbf-map-label{ font-size: 19px; }

/* ================================================================
   v0.75.0 — Nouvelle-Aquitaine page map: bring the four area labels
   up to the homepage map's visual size. That map's viewBox is much
   taller (600x962 vs 600x558) so the shared 11px reads tiny; scope a
   larger size to this map only.
   ================================================================ */
.jbf-na-chooser .jbf-map-label{ font-size: 19px; }

/* =========================================================================
   v0.80.0 — no CSS changes (follows v0.79.0).
   PHP only this release: property-title i18n + barn-as-outbuilding fix
   (inc/seo.php), card "1 bed / 4 bedrooms" wording (content-property-card.php),
   facet option labels translated at render (inc/archive.php), IFP feed
   features mapped by legacy ID (inc/ifp-feed.php).
   ========================================================================= */

/* v0.80.0 — PHP only: split the bed-count property title into distinct
   singular ("1 bed ...") and plural ("%d bed ...") strings in inc/seo.php so
   WPML String Translation lists each as its own entry (the identical-form _n
   collapsed to a single box). No other changes since v0.79.0. */

/* =========================================================================
   v0.82.0 — FOOTER: rebuilt into four columns with no repeated links (was
   showing About + "About us" and Contact twice via a menu-fallback column),
   region list refreshed to the confirmed 5-set, text wordmark replaced with
   the logo image, and the em dash removed from the tagline.
   ========================================================================= */
.jbf-footer-logo{ display:inline-block; line-height:0; margin:0 0 .85rem; }
.jbf-footer-logo img{ height:48px; width:auto; display:block; }

/* v0.83.0 — homepage: quick-filters section title changed to "Quick filters"
   and its eyebrow removed (front-page.php); NA region map count 25 -> 31 a
   week so the three regions total the advertised 60 (home-map.php). No CSS. */

/* v0.84.0 — IFP feed: a ticked Gite feature now surfaces as a 'gite' entry in
   attributes.types (IFP classes gite as a type, not a feature), so gites are
   no longer dropped from the feed. inc/ifp-feed.php only. No CSS. */

/* v0.85.0 — forms: lead emails now route to jeanbernard@jbfrenchhouses.co.uk
   via the jbf_lead_recipient filter, with the site admin CC'd during testing
   (temporary jbf_lead_headers filter, remove before/after go-live). Both form
   handlers now pass headers through a jbf_lead_headers filter. inc/forms.php. */

/* v0.86.0 — new inc/sendgrid-sync.php: on registration (jbf_new_registration)
   upserts the contact into the SendGrid marketing list with search criteria as
   custom fields for segmentation. API key read from wp-config constant
   JBF_SENDGRID_MKTG_KEY (never in the theme); list id + custom-field names in
   the file header. Best-effort, never breaks registration. Loaded via
   functions.php. No CSS. */

/* ==================================================================
   v0.88.0 — Region maps: Poitou-Charentes (region 2) silhouette now
   includes Vendée + Maine-et-Loire (south Pays de la Loire); Normandy
   (region 3) silhouette now includes Sarthe (north Pays de la Loire).
   Geometry regenerated from IGN departement contours, Lambert-93,
   dissolved per region; affine/viewBox recomputed. No CSS change.
   Pairs with the departments.csv re-parent + jbf_taxonomy.php re-run.
   ================================================================== */

/* ==================================================================
   v0.89.0 — Pays de la Loire split across the bundle and homepage maps.
   na-map.svg (Nouvelle-Aquitaine chooser): rebuilt from three areas;
   the south of Pays de la Loire (Vendee + Maine-et-Loire) is folded
   into Poitou-Charentes and the separate Pays de la Loire shape/label
   is removed. page-nouvelle-aquitaine.php updated to match (three
   choices, no PdL entry).
   france-map.svg (homepage): Sarthe moved from the Nouvelle-Aquitaine
   group into Normandy (region 3), so the north of Pays de la Loire now
   links to the Normandy page and the south stays with the Nouvelle-
   Aquitaine / Poitou-Charentes bundle. All other shapes, the grey
   background and the labels are unchanged. No CSS change.
   ================================================================== */

/* ==================================================================
   v0.90.0 — Map corrections after review of v0.89.0.
   na-map.svg: Aquitaine restored in full (Gironde, Landes, Pyrenees-
   Atlantiques, Dordogne, Lot-et-Garonne); Loire-Atlantique restored;
   region 2 drawn as two bordered sub-shapes (Poitou-Charentes and
   Pays de la Loire South) inside one clickable area, labelled
   "Poitou-Charentes / Pays de la Loire South" to match the site nav.
   Rebuilt in the original shared Lambert-93 frame (top trimmed).
   france-map.svg: internal border restored inside the Nouvelle-
   Aquitaine group (Poitou-Charentes / PdL South vs Limousin +
   Aquitaine); Sarthe stays in Normandy.
   region-maps.json: region 2 silhouette gains Loire-Atlantique and is
   split into the same two sub-shapes. No CSS change.
   ================================================================== */

/* ==================================================================
   v0.91.0 — Map review round 2 (visual only; no config/click change).
   Homepage france-map.svg internal borders, drawn via the white path
   stroke by splitting each group into abutting sub-shapes (each group
   keeps ONE data-region, so clicks are unchanged):
     - Nouvelle-Aquitaine group: removed the Poitou-Charentes/Aquitaine
       line (PC + Limousin + Aquitaine are now one sub-shape); added a
       line between Pays de la Loire South and the Nouvelle-Aquitaine core.
     - Normandy group: added lines Normandy | Nord-Pas-de-Calais and
       Sarthe (Pays de la Loire North) | Normandy.
   Bundle na-map.svg: "/ Pays de la Loire South" sub-label enlarged and
   made readable; Aquitaine label moved up. The rule below scales the
   chooser sub-label to sit under the 19px area label. */
.jbf-na-chooser .jbf-map-label-sub{ font-size: 13px; font-weight: 500; }
/* ================================================================== */

/* ==================================================================
   v0.92.0 — Homepage map: removed the Sarthe | Normandy internal line
   (Sarthe folded back into the Normandy sub-shape). The Normandy |
   Nord-Pas-de-Calais line and the Pays de la Loire South | Nouvelle-
   Aquitaine line are kept. Visual only; no config/click change.
   ================================================================== */

/* ==================================================================
   v0.93.0 — Major reference towns on the region maps. Jean's black
   "major town" cities from the old region maps, overlaid on the
   silhouettes as a NON-clickable layer, projected through the same
   Lambert-93 affine as the property dots. Rendered as a light label
   with a dark halo + a small gold marker so they read on the dark
   silhouette (plain black would vanish) and stay distinct from the
   white property-town dots. Data per region in region-maps.json
   under "cities": [{ name, lat, lng }]. Regions 1, 2, 3, 7, 10.
   ================================================================== */
.jbf-rmap-cities{ pointer-events: none; }
.jbf-rmap-city-mark{ fill:#e8b84b; stroke:rgba(12,22,28,.5); stroke-width:.6; }
.jbf-rmap-city-label{
  fill:#fff; font-family: var(--head, Georgia, 'Times New Roman', serif);
  font-size: 14.3px; font-weight: 600; letter-spacing:.01em;
  paint-order: stroke; stroke: rgba(18,32,40,.60); stroke-width: 2.6px; stroke-linejoin: round;
}
/* ================================================================== */

/* ==================================================================
   v0.94.0 — Region-map major-town labels enlarged 30% (11 -> 14.3px),
   halo stroke nudged to match. No other change.
   ================================================================== */

/* ==================================================================
   v0.95.0 — Bedrooms facet now orders its choices numerically (was a
   text sort: 0,1,10,12,2,3...). Highest bedroom count first. PHP only
   (inc/archive.php, facetwp_facet_orderby); no CSS, no re-index.
   ================================================================== */

/* ==================================================================
   v0.96.0 — Bedrooms facet order changed to ascending (0,1,2,3,...,52).
   PHP only (inc/archive.php); no CSS, no re-index.
   ================================================================== */

/* ==================================================================
   v0.97.0 — Homepage rework.
   - Quick filters section and the property carousel removed (front-page.php).
   - "Latest properties" is now region shortcut boxes + a View all box,
     reusing the .jbf-window styling; 3 across on desktop (two tidy rows).
   - "The way we work" loses the card boxes and goes flat: steps 01 and 02
     share a two-column row, step 03 runs full width beneath.
   ================================================================== */
@media (min-width: 900px){
  .jbf-latest-links .jbf-window-grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.jbf-how-grid{
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  border-left: 0;
}
@media (min-width: 720px){
  .jbf-how-grid{ grid-template-columns: 1fr 1fr; }
  .jbf-how-viewing{ grid-column: 1 / -1; }
}
.jbf-how-item{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
/* ================================================================== */

/* ==================================================================
   v0.98.0 — Added Calais as a major reference town on the Normandy
   region map, anchoring the Nord-Pas-de-Calais part (region-maps.json,
   region 3 cities). No CSS, no re-index.
   ================================================================== */

/* ==================================================================
   v0.99.0 — Removed Nantes from the Brittany region map's major towns
   (region-maps.json, region 1 cities). No CSS, no re-index.
   ================================================================== */

/* ==================================================================
   v0.100.0 — Homepage map: Pays de la Loire shown in full and labelled.
   A solid dark base (.jbf-map-base) sits under the region shapes and
   fills the seam that was letting the page background show through the
   middle of Pays de la Loire, so the region now reads as one full area.
   The north/south split (Sarthe etc. -> Normandy, the south -> Nouvelle-
   Aquitaine) and all click targets are unchanged; the divide line still
   shows. The Nouvelle-Aquitaine label drops its "& Pays de la Loire"
   suffix now that Pays de la Loire has its own (smaller) label.
   Also: exchange-rate note flipped site-wide from "EUR1 ~ GBPx" to
   "GBP1 ~ EURx" (archive, taxonomy, single property).
   ================================================================== */
.jbf-map-base path{ fill: var(--shutter); }
/* ================================================================== */

/* ==================================================================
   v0.101.0 — Homepage map: Pays de la Loire drawn as one FULL region.
   Visible borders now come from a dedicated outline layer
   (.jbf-map-outline) tracing the administrative regions (Brittany,
   Normandy, Nord-Pas-de-Calais, Nouvelle-Aquitaine, and the WHOLE
   Pays de la Loire). The clickable/hover buttons (.jbf-map-region)
   still split Pays de la Loire north/south (north -> Normandy button,
   south -> Nouvelle-Aquitaine button), but no longer draw their own
   outline, so the split shows only as the edge of the hover highlight,
   never as a static line. Scoped away from the NA chooser (bundle map)
   which still wants its area borders. Buttons/base fill unchanged.
   ================================================================== */
.jbf-mapsec:not(.jbf-na-chooser) .jbf-map-region path{ stroke: none; }
.jbf-mapsec:not(.jbf-na-chooser) .jbf-map-outline{ pointer-events: none; }
.jbf-mapsec:not(.jbf-na-chooser) .jbf-map-outline path{ fill: none; stroke: var(--paper); stroke-width: .6; }
/* ================================================================== */

/* ==================================================================
   v0.102.0 — Homepage map: "Pays de la Loire" label now uses the same
   style as the other region labels (dropped the smaller --pdl variant).
   ================================================================== */

/* ==================================================================
   v0.103.0 — Homepage map: "Pays de la Loire" label set on two lines
   (Pays de la / Loire) so it fits the region width.
   ================================================================== */

/* ==================================================================
   v0.104.0 — Bundle map (na-map.svg): split the region-2 label so
   "Pays de la Loire South" sits over its own area (top, Vendée /
   Loire-Atlantique) and "Poitou-Charentes" labels the southern part,
   instead of both stacking in the Poitou-Charentes area.
   ================================================================== */

/* ==================================================================
   v0.105.0 — Bundle map: "Pays de la Loire South" label moved up and
   set to the standard region-label style (matches the other labels).
   ================================================================== */

/* ==================================================================
   v0.106.0 — IFP feed: the room-by-room breakdown (our "Buildings and
   rooms" layouts) is now appended to the description sent to IFP, the
   way the old ifp.php feed did, so adverts regain the room detail that
   was showing as missing (inc/ifp-feed.php, jbf_ifp_full_description).
   ================================================================== */

/* ==================================================================
   v0.107.0 — Homepage map: Nord-Pas-de-Calais now named and bordered.
   Two-line "Nord-Pas-de-Calais" label (.jbf-map-label-sm) sits over
   the northern part of region 3, and an internal divider line (the
   real Nord-Pas-de-Calais / Somme boundary, projected to the map's
   affine) is added to the .jbf-map-outline layer so it reads as its
   own bordered area, matching the other inter-region lines. The
   clickable region is unchanged (still one region-3 link).
   ================================================================== */

/* ==================================================================
   v0.108.0 — Header "Regions" nav link replaced with "Search" pointing
   at the all-properties archive (/jbp/), per Jean. Plus FacetWP range-
   slider handles (price + land size) made smaller (see .facetwp-slider
   rules above). Slider max values are unchanged (they are per-filter
   maxima, set by FacetWP from the current result set).
   ================================================================== */


/* ================================================================
   v0.109.0 — Mobile filter bar tidy-up (Jean: filters looked messy).
   On phones the buttons wrapped into ragged rows of mixed widths.
   Now they sit in a neat two-column grid: every button is the same
   width, label on the left, caret on the right, and "Sort by" is
   styled to match the buttons. With the usual seven filters, Sort by
   takes the eighth cell so the grid ends square. If a page has an
   extra control (the Town button on region pages), Sort by would sit
   alone, so it spans the full width instead.
   Phones only; the desktop bar is untouched.
   ================================================================ */
@media (max-width: 640px){
  .jbf-filterbar .jbf-fb-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
    padding: .6rem;
  }
  .jbf-filterbar .jbf-fb-item{ min-width: 0; }
  .jbf-filterbar .jbf-fb-toggle{
    width: 100%;
    justify-content: space-between;
    font-size: 1rem;              /* matches the Sort by box */
    padding: .65rem .75rem;
    min-height: 2.75rem;          /* comfortable thumb target */
  }
  .jbf-filterbar .jbf-fb-toggle-label{
    overflow: hidden; text-overflow: ellipsis;
  }

  /* Sort by: one grid cell, full width of that cell */
  .jbf-filterbar .jbf-fb-tail{ width: auto; margin: 0; min-width: 0; display: block; }
  .jbf-filterbar .jbf-fb-tail:nth-child(odd){ grid-column: 1 / -1; }
  .jbf-filterbar .jbf-fb-sort,
  .jbf-filterbar .jbf-fb-sort .facetwp-facet{ display: block; width: 100%; }
  .jbf-filterbar .jbf-fb-sort select{
    width: 100%;
    min-height: 2.75rem;
    font-family: var(--body);
    font-size: 16px;              /* 16px stops iPhone zooming in on tap */
    font-weight: 600;
    color: var(--ink);
    padding: .6rem 2rem .6rem .75rem;
    border: 1px solid var(--hairline);
    border-radius: 3px;
    -webkit-appearance: none; appearance: none;
    /* small down-caret to match the filter buttons */
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23333' fill-opacity='.7'/%3E%3C/svg%3E") no-repeat right .8rem center;
  }
}

/* ================================================================
   v0.110.0 — three small fixes from Sam's review.
   ================================================================ */

/* 1. Gîtes (and any number box in a filter popover): the focus outline
   drew OUTSIDE the box, so it overlapped the Min/Max box above or below.
   A negative outline-offset pulls the outline inside the box's own edge,
   so nothing overlaps. Applies to every text/number input in a panel. */
.jbf-fb-panel input[type="text"],
.jbf-fb-panel input[type="number"],
.jbf-fb-panel input.facetwp-number{
  box-sizing: border-box;
}
.jbf-fb-panel input[type="text"]:focus,
.jbf-fb-panel input[type="number"]:focus,
.jbf-fb-panel input.facetwp-number:focus{
  outline: 2px solid var(--shutter-dk);
  outline-offset: -2px;
  box-shadow: none;
}

/* 2. Sort by: dark blue with white text, phone and desktop. The native
   arrow is replaced with a small white caret matching the filter buttons.
   The dropdown options keep a white background so the list stays readable
   on every browser. */
.jbf-filterbar .jbf-fb-sort select{
  -webkit-appearance: none; appearance: none;
  background: var(--shutter-dk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right .8rem center;
  color: #fff;
  border: 1px solid var(--shutter-dk);
  font-weight: 600;
  padding-right: 2rem;
  cursor: pointer;
}
.jbf-filterbar .jbf-fb-sort select:hover{
  background-color: var(--shutter);
  border-color: var(--shutter);
}
.jbf-filterbar .jbf-fb-sort select:focus-visible{
  outline: 2px solid var(--shutter);
  outline-offset: 2px;
}
.jbf-filterbar .jbf-fb-sort select option{
  background: #fff; color: var(--ink);
}

/* 3. Long region titles on phones. The name is split at its first " / "
   (see jbf_title_html in inc/names.php). On desktop the parts sit inline
   and the title reads exactly as before. On phones the separator is hidden
   and the second part drops to its own smaller line, so e.g.
   "Normandy" / "Pays de la Loire North / Nord-Pas-de-Calais" fits in two
   lines. max-width + overflow-wrap are a safety net so no title can ever
   push out of its white box. */
.jbf-archive-title{
  max-width: 100%;
  overflow-wrap: break-word;
}
/* Desktop: if the full name is too long for one line, the second part
   moves down as a whole ("Normandy /" then "Pays de la Loire North /
   Nord-Pas-de-Calais") instead of breaking mid-word. Names that fit on
   one line are unchanged. */
.jbf-archive-title .jbf-title-sub{ display: inline-block; }
@media (max-width: 640px){
  .jbf-archive-title .jbf-title-sep{ display: none; }
  .jbf-archive-title .jbf-title-main{ display: block; }
  .jbf-archive-title .jbf-title-sub{
    display: block;
    /* .52em normally; for the longest name (Normandy's) this shrinks with
       the screen width so the second line never breaks mid-word. The
       18.5 divisor is that line's measured width in ems, and 72px is the
       page padding plus the white box's padding. */
    font-size: min(.52em, calc((100vw - 72px) / 18.5));
    line-height: 1.2;
    margin-top: .2rem;
  }
}


/* ================================================================
   v0.111.0 — Mobile region dropdown laid out as a neat grid.
   The buttons were set never to wrap, so the long Normandy label ran
   off the screen. On phones the open dropdown is now three rows:
     row 1  Normandy / Pays de la Loire North  (full width, two lines,
            Nord-Pas-de-Calais on the second)
     row 2  Brittany | Limousin | Aquitaine    (three equal buttons)
     row 3  Poitou-Charentes / Pays de la Loire South  (full width)
   Placement uses the per-region classes from header.php
   (jbf-rb-3 Normandy, 1 Brittany, 7 Limousin, 10 Aquitaine,
   2 Poitou), so it does not depend on the order in the markup.
   All labels are centred. Desktop is untouched.
   ================================================================ */
@media (max-width: 720px){
  .jbf-region-bar .jbf-region-links.is-open{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
  }
  .jbf-region-bar .jbf-region-links .jbf-rb{
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    white-space: normal;           /* allow wrapping as a last resort */
    min-width: 0;
    padding: .6rem .5rem;
    line-height: 1.3;
  }
  .jbf-region-bar .jbf-rb-3 { grid-column: 1 / -1; grid-row: 1; }
  .jbf-region-bar .jbf-rb-1 { grid-column: 1; grid-row: 2; }
  .jbf-region-bar .jbf-rb-7 { grid-column: 2; grid-row: 2; }
  .jbf-region-bar .jbf-rb-10{ grid-column: 3; grid-row: 2; }
  .jbf-region-bar .jbf-rb-2 { grid-column: 1 / -1; grid-row: 3; }

  /* Normandy: hide the last " / " and put Nord-Pas-de-Calais underneath */
  .jbf-region-bar .jbf-rb-sep{ display: none; }
  .jbf-region-bar .jbf-rb-l1,
  .jbf-region-bar .jbf-rb-l2{ display: block; }
}

/* v0.112.0 — no CSS change. Homepage "Latest properties" Normandy box now
   reads "... / Nord-Pas-de-Calais" (front-page.php). */

/* v0.113.0 — no CSS change. Nouvelle-Aquitaine note on the Poitou region
   page now names only Poitou-Charentes (taxonomy-location.php). */

/* =========================================================================
   v0.114.0 — Translations dropped (client decision, Oct 2026). The WPML
   language switcher has been removed: jbf_language_switcher() deleted from
   inc/format.php, both calls removed from header.php, and the v0.76.0 and
   v0.81.0 switcher CSS blocks deleted. No other changes.
   ========================================================================= */

/* =========================================================================
   v0.115.0 — Jean's final round. No CSS changes. Filter-bar labels now read
   "Price (€)" and "Land size (m²)" (labels live in the page templates, not
   FacetWP); Condition "Not specified" becomes "No renovation needed" (0 and 1
   merged into one option); Location facet shows only the five header regions;
   filter-bar.js marks Min/Max boxes active when filled. Re-index FacetWP.
   ========================================================================= */

/* =========================================================================
   v0.115.1 — Location popover widened to match Price and Land size (see the
   v0.108.4 block), so the long region names have room. Desktop/tablet only;
   on phones the panel already opens full-width.
   ========================================================================= */
@media (min-width: 641px){
  #fb-locations{
    min-width: 360px;
    max-width: 510px;
  }
}

/* =========================================================================
   v0.116.0 — launch fixes: proper 404 page (404.php) replacing the
   index.php fallback, privacy-policy link in the footer bar and under the
   register consent box.
   ========================================================================= */
.jbf-page--404 .jbf-page-head{ margin-bottom: 1.5rem; }
.jbf-404-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin: 0 0 2.5rem;
}
.jbf-404-home{ color: var(--shutter); text-decoration: underline; }
.jbf-404-search{ max-width: 420px; }
.jbf-404-search-label{ margin: 0 0 .5rem; font-weight: 600; }
.jbf-footer-legal{ margin: 0; }
.jbf-footer-legal a{ color: rgba(250,249,246,.65); text-decoration: underline; }
.jbf-footer-legal a:hover{ color: #fff; }
.jbf-consent-note{
  display: block;
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--ink-soft);
}