/* Rute-widget til bordmanden.dk — premium-udtryk (matcher S5s preview).
   Selvstændig, scopet under .bordmand-rute. ÉN tekstfarve #402018 (sheesham)
   til al tekst, knapper, ikoner og kortets markør/rute. Typografi: Cormorant
   Garamond (overskrift) + Inter (brødtekst), som S5.

   FONTE LEVERES AF VÆRTS-SIDEN, ikke herfra. Bordmanden.dk serverer dem lokalt
   (web/fonts.css + web/fonts/*.woff2), så ingen @import af Google Fonts på den
   offentlige flade — en @import ville sende hver besøgendes IP til Google ved
   hvert sidevisning. Hvis en side ikke har fontene, falder widgetten pænt
   tilbage til Georgia / system-ui. (Preview'en her loader fonts.css lokalt.) */

.bordmand-rute{
  --br-ink:#402018;              /* sheesham-brun — den ENE tekstfarve */
  --br-papir:var(--papir,#faf7f2);
  --br-flade:#ffffff;
  --br-linje:var(--linje,#e7e0d6);
  --br-serif:'Cormorant Garamond',Georgia,serif;
  --br-sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  box-sizing:border-box;
  container-type:inline-size;
  max-width:min(980px,100%);
  margin:0;
  padding:clamp(26px,3.4vw,40px);
  background:var(--br-flade);
  border:1px solid var(--br-linje);
  border-radius:3px;
  color:var(--br-ink);
  font:400 1rem/1.7 var(--br-sans);
}
.bordmand-rute *,.bordmand-rute *::before,.bordmand-rute *::after{box-sizing:border-box}
.bordmand-rute *{color:var(--br-ink)}

.bordmand-rute h3{
  margin:0;font-family:var(--br-serif);font-weight:300;
  font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.12;letter-spacing:.01em;
}
.bordmand-rute h3::after{
  content:"";display:block;width:48px;height:1px;background:var(--br-ink);
  margin:.7em 0 0;opacity:.55;
}
.bordmand-rute .br-intro{margin:1.1em 0 1.9em;font-weight:300;max-width:56ch}

.bordmand-rute .br-raekke{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:14px}
.bordmand-rute .br-gruppe{display:flex;gap:10px;align-items:flex-end}
.bordmand-rute .br-gruppe-adresse{flex:3 1 0;min-width:0}
.bordmand-rute .br-gruppe-rute{flex:0 1 auto;min-width:0}
.bordmand-rute .br-felt{flex:1 1 110px;min-width:0;display:flex;flex-direction:column;gap:7px}
.bordmand-rute .br-skel{flex:0 0 1px;height:48px;background:var(--br-linje);align-self:flex-end;display:none}
.bordmand-rute label{
  font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;white-space:nowrap;
}
.bordmand-rute input[type=text]{
  width:100%;min-width:0;height:48px;padding:0 14px;font:400 1rem/1.4 var(--br-sans);color:var(--br-ink);
  background:var(--br-papir);border:1px solid var(--br-linje);border-radius:3px;
}
.bordmand-rute input[type=text]::placeholder{color:var(--br-ink);opacity:.45}
.bordmand-rute input[type=text]:focus-visible,
.bordmand-rute button:focus-visible,
.bordmand-rute .br-knap:focus-visible{
  outline:2px solid var(--br-ink);outline-offset:2px;
}

/* Knapper: premium ghost — altid #402018 tekst, tynd #402018-ramme */
.bordmand-rute button,
.bordmand-rute .br-knap{
  font:500 .72rem/1.15 var(--br-sans);text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;border-radius:3px;height:48px;padding:0 13px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--br-ink);color:var(--br-ink);
  transition:background .18s ease;
}
.bordmand-rute .br-beregn{flex:0 0 auto;align-self:flex-end;background:rgba(64,32,24,.06)}
.bordmand-rute button:hover,
.bordmand-rute .br-knap:hover{background:rgba(64,32,24,.10)}
.bordmand-rute .br-beregn[disabled]{opacity:.5;cursor:progress}

.bordmand-rute .br-svar{
  margin:1.6em 0 0;min-height:1.6em;font-weight:300;font-size:1.05rem;line-height:1.6;
}
.bordmand-rute .br-svar .br-tal{font-family:var(--br-serif);font-weight:400;font-size:1.15em}
.bordmand-rute .br-svar.br-fejl{font-weight:400}
.bordmand-rute .br-svar .br-fra{font-size:.82rem;opacity:.72;display:inline-block;margin-top:.3em}

.bordmand-rute .br-knap{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  text-decoration:none;text-align:center;flex:0 1 auto;min-width:0;align-self:flex-end;
}
.bordmand-rute .br-knap svg{width:15px;height:15px;flex:0 0 auto;stroke:var(--br-ink)}

.bordmand-rute .br-kort{
  margin:1.9em 0 0;height:clamp(210px,32vw,290px);width:100%;
  border-radius:3px;overflow:hidden;border:1px solid var(--br-linje);
  background:var(--br-papir);
}
.bordmand-rute .br-kort .leaflet-container{height:100%;width:100%;font:inherit}
.bordmand-rute .br-kort .leaflet-popup-content{color:var(--br-ink);font:400 .9rem/1.4 var(--br-sans)}

.bordmand-rute .br-info{
  margin:1.5em 0 0;display:flex;gap:11px;align-items:flex-start;
  font-size:.92rem;line-height:1.6;font-weight:300;
}
.bordmand-rute .br-info svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;stroke:var(--br-ink)}
.bordmand-rute .br-info strong{font-weight:500}
.bordmand-rute .br-adresse{margin:1em 0 0;font-size:.92rem;font-weight:300}
.bordmand-rute .br-adresse strong{font-weight:500}

.bordmand-rute .br-knap{white-space:nowrap;letter-spacing:.03em;padding:0 11px;gap:7px}
@container (min-width:430px){
  .bordmand-rute .br-skel{display:block}
}
@container (max-width:429px){
  .bordmand-rute .br-raekke{flex-wrap:wrap}
  .bordmand-rute .br-gruppe-adresse,
  .bordmand-rute .br-gruppe-rute{flex:1 1 100%}
  .bordmand-rute .br-knap{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .bordmand-rute button,.bordmand-rute .br-knap{transition:none}
}