/*
  Rajakuitu Oy — saatavuuskartan tyylit.
  Ei Google Fontsia (tietosuojavaatimus) — käytetään käyttöjärjestelmän
  omia fontteja (system-ui / -apple-system / Segoe UI / Roboto / jne).
*/

:root{
  --rk-bg:#F5F8FA;
  --rk-surface:#FFFFFF;
  --rk-surface-alt:#EEF3F6;
  --rk-ink:#152431;
  --rk-ink-muted:#3F5364;      /* tummennettu vs. aiempi versio -> parempi AA-kontrasti */
  --rk-primary:#123A5C;
  --rk-primary-light:#1E5C8C;
  --rk-accent:#0E8C82;         /* tummennettu turkoosi -> AA-kontrasti valkoisella taustalla */
  --rk-border:#C9D4DC;
  --rk-focus:#0B5FFF;          /* selkeä, standardinmukainen fokusväri */

  --rk-status-rakennetaan:#1E7A4C;
  --rk-status-suunnitteilla:#8A6200;   /* tummennettu keltainen -> teksti/reunaväreissä riittävä kontrasti */
  --rk-status-suunnitteilla-fill:#F2C94C;
  --rk-status-valmis:#1E5C8C;
  --rk-status-ei-aikataulua:#5C6B74;

  --rk-radius:8px;
  --rk-shadow:0 1px 2px rgba(18,58,92,0.08), 0 6px 20px rgba(18,58,92,0.10);
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--rk-bg);
  color:var(--rk-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
}

.rk-page{
  max-width:960px;
  margin:0 auto;
  padding:24px 20px 60px;
}

/* ---------- Otsikko ---------- */
.rk-header__eyebrow{
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rk-primary); font-weight:700; margin:0 0 4px;
}
.rk-header__title{
  font-size:26px; font-weight:800; color:var(--rk-primary); margin:0 0 10px;
}
.rk-header__intro{
  font-size:15.5px; color:var(--rk-ink-muted); max-width:640px; margin:0 0 22px;
}

/* ---------- Hallintapalkki: haku ja aluevalinta rinnakkain ---------- */
.rk-controls{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  background:var(--rk-surface);
  border:1px solid var(--rk-border);
  border-radius:var(--rk-radius);
  box-shadow:var(--rk-shadow);
  padding:16px 18px;
  margin-bottom:16px;
}

.rk-search, .rk-area-picker{
  flex:1 1 260px;
  min-width:240px;
}

.rk-label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--rk-ink);
  margin-bottom:6px;
}

.rk-search__row, .rk-area-picker__row{
  display:flex;
  gap:8px;
}

.rk-combobox{
  position:relative; /* ehdotuslista asemoidaan tämän suhteen */
}

.rk-suggestions{
  list-style:none;
  margin:0;
  padding:4px;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  z-index:1000;
  background:var(--rk-surface);
  border:1px solid var(--rk-border);
  border-radius:6px;
  box-shadow:var(--rk-shadow);
  max-height:260px;
  overflow-y:auto;
}
.rk-suggestions[hidden]{display:none;}

.rk-suggestions__item{
  padding:8px 10px;
  font-size:14px;
  border-radius:5px;
  cursor:pointer;
}
.rk-suggestions__item:hover,
.rk-suggestions__item.is-active{
  background:var(--rk-surface-alt);
}
.rk-suggestions__item.is-active{
  outline: 2px solid var(--rk-focus);
  outline-offset: -2px;
}
.rk-suggestions__empty{
  padding:8px 10px;
  font-size:13px;
  color:var(--rk-ink-muted);
}

input[type="text"], select{
  font-family:inherit;
  font-size:15px;
  padding:9px 10px;
  border:1px solid var(--rk-border);
  border-radius:6px;
  background:var(--rk-surface);
  color:var(--rk-ink);
  flex:1;
  min-width:0;
}

button{
  font-family:inherit;
  font-size:14.5px;
  font-weight:600;
  padding:9px 14px;
  border-radius:6px;
  border:1px solid var(--rk-primary);
  background:var(--rk-primary);
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
}
button:hover{background:var(--rk-primary-light); border-color:var(--rk-primary-light);}
button:disabled{opacity:.6; cursor:wait;}

#rkShowAllBtn{
  background:var(--rk-surface);
  color:var(--rk-primary);
}
#rkShowAllBtn:hover{background:var(--rk-surface-alt);}

/* Näppäimistöfokus: näkyvä KAIKKIALLA (WCAG 2.1 AA 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--rk-focus);
  outline-offset: 2px;
}

.rk-search__hint{
  font-size:13.5px;
  color:var(--rk-ink-muted);
  margin:8px 0 0;
  min-height:1.2em;
}

/* ---------- Virheilmoitus ---------- */
.rk-error{
  background:#FBE6E4;
  border:1px solid #E3A8A1;
  color:#6B211B;
  border-radius:var(--rk-radius);
  padding:12px 16px;
  margin-bottom:16px;
  font-size:14.5px;
}
.rk-error strong{display:block; margin-bottom:2px;}

/* ---------- Kartta ---------- */
.rk-map-wrap{
  position:relative;
  border:1px solid var(--rk-border);
  border-radius:var(--rk-radius);
  overflow:hidden;
  box-shadow:var(--rk-shadow);
  margin-bottom:20px;
}
.rk-map{
  width:100%;
  height:520px;
  background:var(--rk-surface-alt);
}

.rk-legend{
  position:absolute;
  bottom:14px;
  left:14px;
  z-index:900;
  background:var(--rk-surface);
  border:1px solid var(--rk-border);
  border-radius:6px;
  box-shadow:var(--rk-shadow);
  padding:10px 12px;
  font-size:13px;
}
.rk-legend__title{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--rk-ink-muted); margin:0 0 6px; font-weight:700;
}
.rk-legend__row{display:flex; align-items:center; gap:8px; padding:2px 0;}
.rk-swatch{width:12px; height:12px; border-radius:3px; flex-shrink:0; display:inline-block;}
.rk-swatch--rakennetaan{background:var(--rk-status-rakennetaan);}
.rk-swatch--suunnitteilla{background:var(--rk-status-suunnitteilla-fill); border:1px solid var(--rk-status-suunnitteilla);}
.rk-swatch--valmis{background:var(--rk-status-valmis);}
.rk-swatch--ei-aikataulua{background:var(--rk-status-ei-aikataulua);}

/* Leafletin popup, sovitettu tähän ulkoasuun */
.rk-popup .rk-popup__searched{
  font-size:12px; color:var(--rk-ink-muted); margin:0 0 6px;
  padding-bottom:6px; border-bottom:1px dashed var(--rk-border);
}
.rk-popup .rk-popup__title{font-weight:800; font-size:15px; color:var(--rk-primary); margin:0 0 4px;}
.rk-popup dl{margin:0 0 10px; font-size:13.5px;}
.rk-popup dt{font-weight:600; color:var(--rk-ink-muted); float:left; clear:left; width:78px;}
.rk-popup dd{margin:0 0 4px 84px;}
.rk-popup .rk-popup__cta{
  display:inline-block;
  background:var(--rk-primary);
  color:#fff !important;
  text-decoration:none;
  font-size:13.5px;
  font-weight:700;
  padding:7px 12px;
  border-radius:6px;
}
.rk-popup .rk-popup__cta:hover{background:var(--rk-primary-light);}
.rk-popup .rk-popup__cta:focus-visible{outline:3px solid var(--rk-focus); outline-offset:2px;}

/* ---------- Saavutettava alueluettelo ---------- */
.rk-list{
  background:var(--rk-surface);
  border:1px solid var(--rk-border);
  border-radius:var(--rk-radius);
  box-shadow:var(--rk-shadow);
  padding:16px 18px;
  margin-bottom:16px;
}
.rk-list__title{font-size:15px; font-weight:800; color:var(--rk-primary); margin:0 0 10px;}
.rk-list__items{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.rk-list__item-btn{
  width:100%;
  text-align:left;
  background:var(--rk-surface-alt);
  border:1px solid var(--rk-border);
  color:var(--rk-ink);
  padding:10px 12px;
  border-radius:6px;
  font-weight:500;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:baseline;
}
.rk-list__item-btn:hover{background:#E4EDF2;}
.rk-list__item-name{font-weight:700; color:var(--rk-primary);}
.rk-list__item-meta{font-size:13px; color:var(--rk-ink-muted);}
.rk-list__item-status{
  font-size:12.5px; font-weight:700; padding:1px 8px; border-radius:99px;
  background:var(--rk-surface); border:1px solid var(--rk-border);
}

.rk-attribution{font-size:12.5px; color:var(--rk-ink-muted); text-align:right;}
.rk-attribution a{color:var(--rk-ink-muted);}

@media (max-width:640px){
  .rk-page{padding:16px 14px 40px;}
  .rk-header__title{font-size:21px;}
  .rk-map{height:420px;}
  .rk-legend{left:8px; bottom:8px; padding:8px 10px; font-size:12px;}
  .rk-controls{flex-direction:column;}
}

/* Kunnioitetaan käyttäjän "vähennä liikettä" -asetusta (ei laajaa animointia
   tässä sovelluksessa muutenkaan, mutta varaudutaan tulevaan). */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important;}
}