/* RECO – Geografisk dekning
   Selvstendig utgave: virker på enhver side, ikke bare /service/.

   To ting gjorde at seksjonen mistet stilen utenfor /service/:
   1. Variablene (--cream, --navy-deep, --terracotta, --line, --muted) og
      typografien (.section-*) er definert i post-2076.css, altså kun på
      /service/. Her oppgis de derfor som var(--navn, fallback) — sidens egne
      verdier vinner når de finnes, ellers brukes RECO-paletten.
   2. Breakdance sin globale `.breakdance a` (0,1,1) slo `.cities-list a`
      (0,1,1) på kildeorden. Alt er derfor prefikset med `.reco-dekning`
      (0,2,1), som vinner. */

.reco-dekning .coverage-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}

/* Seksjonstypografi – identisk med post-2076.css, OG med samme spesifisitet (0,1,0).
   Det er med vilje: på /service/ taper `.section-title` mot Breakdance sin
   `.bde-h2, .breakdance h2` (0,1,1), som setter Roboto 24px/28px/400. Overskriften
   der rendres altså som Roboto 24px, ikke som Fraunces 72px — font-family, size,
   weight, line-height og color i regelen under er død CSS på en Breakdance-side.
   Bare letter-spacing, max-width og margin-bottom slår gjennom.

   Prefikser vi med `.reco-dekning` (0,2,0) vinner reglene, og seksjonen får en
   diger Fraunces-overskrift som ikke matcher resten av siden. Derfor står de
   uprefikset her — da oppfører seksjonen seg nøyaktig som originalen. */
.section-eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta,#f37944);font-weight:600;margin-bottom:20px}
.section-title{font-family:'Fraunces',serif;font-size:clamp(40px,5vw,72px);font-weight:300;line-height:1.05;color:var(--navy-deep,#043a5f);margin-bottom:24px;letter-spacing:-.025em;max-width:900px}
.section-title em{font-style:italic;color:var(--terracotta,#f37944)}
.section-lead{font-size:19px;color:var(--muted,#5a6671);max-width:720px;line-height:1.65}

.reco-dekning .reco-map-wrap{position:relative}
.reco-dekning .map-svg{width:100%;height:auto;max-height:720px;display:block;margin-inline:auto}

.reco-dekning .cities-list{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 32px}
.reco-dekning .cities-list a{font-family:'Fraunces',serif;font-size:17px;color:var(--navy-deep,#043a5f);padding:4px 0;border-bottom:1px dashed var(--line,rgba(5,76,127,.14));display:flex;align-items:center;gap:10px;text-decoration:none;transition:color .2s ease,border-color .2s ease}
.reco-dekning .cities-list a:hover{color:var(--terracotta,#f37944);border-color:var(--terracotta,#f37944)}
.reco-dekning .cities-list a::before{content:'';width:6px;height:6px;background:var(--terracotta,#f37944);border-radius:50%;flex-shrink:0}

/* Breakdance understreker alle lenker globalt – nulles ut her */
.reco-dekning .cities-list a,
.reco-dekning .cities-list a:hover{text-decoration:none;text-decoration-line:none}

@media (max-width:900px){
	.reco-dekning .coverage-inner{grid-template-columns:1fr;gap:48px}
}

@media (max-width:560px){
	.reco-dekning .cities-list{grid-template-columns:1fr}
}

/* --- Kartfarger + puls (flyttet ut av SVG-ens inline <defs>) --- */
.reco-dekning .reco-st1{fill:#054c7f}
.reco-dekning .reco-st0{fill:#f37944;stroke:#fff;stroke-miterlimit:10;animation:recoPulse 3s ease-in-out infinite}

@keyframes recoPulse{0%,100%{opacity:1}50%{opacity:.5}}

/* --- Markør som lenke + hover-kobling liste <-> kart --- */
.reco-dekning .reco-marker{cursor:pointer}
.reco-dekning .reco-marker circle{transform-box:fill-box;transform-origin:center;transition:transform .15s ease}
.reco-dekning .reco-marker:hover circle,
.reco-dekning .reco-marker:focus-visible circle,
.reco-dekning .reco-marker.is-active circle{animation:none;opacity:1;transform:scale(1.5)}
.reco-dekning .reco-marker:focus-visible{outline:2px solid var(--navy-deep,#043a5f);outline-offset:2px}
.reco-dekning .cities-list a.is-active{color:var(--terracotta,#f37944);border-color:var(--terracotta,#f37944)}

@media (prefers-reduced-motion:reduce){
	.reco-dekning .reco-st0{animation:none}
	.reco-dekning .reco-marker circle{transition:none}
}

/* --- Popup på hover over markør (og over bynavn i lista) --- */
.reco-dekning .reco-tooltip{
	position:absolute;left:0;top:0;z-index:2;
	transform:translate(-50%,calc(-100% - 12px));
	padding:7px 12px;border-radius:6px;
	background:var(--terracotta,#f37944);color:#fff;
	font-size:14px;line-height:1.3;white-space:nowrap;
	font-weight:500;
	opacity:0;visibility:hidden;pointer-events:none;
	transition:opacity .15s ease,visibility .15s ease
}
.reco-dekning .reco-tooltip::after{
	content:'';position:absolute;top:100%;left:50%;
	transform:translateX(-50%);
	border:6px solid transparent;
	border-top-color:var(--terracotta,#f37944)
}
.reco-dekning .reco-tooltip.is-visible{opacity:1;visibility:visible}

@media (prefers-reduced-motion:reduce){
	.reco-dekning .reco-tooltip{transition:none}
}