/*
  Rajakuitu Oy — ennakkotilaussivun tyylit.
  Nimiavaruutettu "rke-" -etuliitteellä (Rajakuitu Ennakkotilaus) —
  eri etuliite kuin kartalla (rk-) ja avustajalla (rkc-), jotta mikään
  näistä ei voi koskaan törmätä samalla sivulla.
  Ei Google Fontsia — järjestelmäfontit, sama periaate kuin muualla.
*/

:root{
  --rke-primary:#123A5C;
  --rke-primary-light:#1E5C8C;
  --rke-accent:#0E8C82;
  --rke-amber:#F2A54A;
  --rke-bg:#F5F8FA;
  --rke-surface:#FFFFFF;
  --rke-surface-alt:#EEF3F6;
  --rke-ink:#152431;
  --rke-ink-muted:#3F5364;
  --rke-border:#C9D4DC;
  --rke-focus:#0B5FFF;
  --rke-danger:#B3261E;
  --rke-danger-bg:#FBE6E4;
  --rke-radius:12px;
  --rke-shadow:0 1px 2px rgba(18,58,92,0.08), 0 8px 24px rgba(18,58,92,0.10);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--rke-bg);
  color:var(--rke-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.55;
}

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

/* ---------- Otsikko ---------- */
.rke-eyebrow{
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--rke-primary); font-weight:700; margin:0 0 6px;
}
.rke-title{font-size:30px; font-weight:800; color:var(--rke-primary); margin:0 0 10px;}
.rke-intro{font-size:16px; color:var(--rke-ink-muted); max-width:600px; margin:0 0 28px;}

/* ---------- Asettelu: lomake + sivupalkki ---------- */
.rke-layout{display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start;}

/* ---------- Lomakekortti ---------- */
.rke-form-card{
  background:var(--rke-surface);
  border:1px solid var(--rke-border);
  border-radius:var(--rke-radius);
  box-shadow:var(--rke-shadow);
  overflow:hidden;
}
.rke-form-card__bar{
  height:6px;
  background:linear-gradient(90deg, var(--rke-primary) 0%, var(--rke-accent) 100%);
}
.rke-form-card__body{padding:26px 26px 28px;}

.rke-field{margin-bottom:16px;}
.rke-field label{display:block; font-size:13.5px; font-weight:700; color:var(--rke-ink); margin-bottom:5px;}
.rke-optional{font-weight:400; color:var(--rke-ink-muted);}
.rke-field input[type="text"],
.rke-field input[type="email"],
.rke-field input[type="tel"],
.rke-field select,
.rke-field textarea{
  width:100%;
  font-family:inherit;
  font-size:15px;
  padding:10px 12px;
  border:1px solid var(--rke-border);
  border-radius:7px;
  background:var(--rke-surface);
  color:var(--rke-ink);
}
.rke-field textarea{resize:vertical; min-height:80px;}
.rke-field-error{font-size:12.5px; color:var(--rke-danger); margin:5px 0 0; display:none;}
.rke-field.has-error input,
.rke-field.has-error select,
.rke-field.has-error textarea{border-color:var(--rke-danger);}
.rke-field.has-error .rke-field-error{display:block;}

.rke-field-row{display:grid; grid-template-columns:1fr 2fr; gap:12px;}

.rke-checkbox-row{
  display:flex; align-items:flex-start; gap:8px; margin-bottom:16px; font-size:14px; color:var(--rke-ink-muted);
}
.rke-checkbox-row input{margin-top:3px; width:17px; height:17px; accent-color:var(--rke-accent); flex-shrink:0;}
.rke-checkbox-row label{cursor:pointer;}

/* ---------- Honeypot: piilotettu näkyvästi, pysyy DOMissa ---------- */
.rke-honeypot{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

/* ---------- Tietosuostumus ---------- */
.rke-consent{
  border:1px solid var(--rke-border);
  border-radius:9px;
  padding:16px;
  margin:8px 0 20px;
}
.rke-consent legend{font-size:13px; font-weight:700; color:var(--rke-ink-muted); padding:0 4px;}
.rke-consent__text{font-size:14px; color:var(--rke-ink); margin:0 0 12px;}
.rke-consent__link{
  background:none; border:none; padding:0; color:var(--rke-primary);
  font-weight:700; text-decoration:underline; cursor:pointer; font-size:inherit; font-family:inherit;
}
.rke-radio-row{display:flex; gap:20px;}
.rke-radio{display:flex; align-items:center; gap:6px; font-size:14.5px; font-weight:600; cursor:pointer;}
.rke-radio input{width:17px; height:17px; accent-color:var(--rke-accent);}

.rke-privacy-panel{
  margin-top:14px; padding-top:14px; border-top:1px dashed var(--rke-border);
  font-size:12.5px; color:var(--rke-ink-muted); max-height:280px; overflow-y:auto;
}
.rke-privacy-panel h3{font-size:12.5px; color:var(--rke-primary); margin:12px 0 4px;}
.rke-privacy-panel h3:first-child{margin-top:0;}
.rke-privacy-panel p{margin:0 0 8px;}

/* ---------- Lähetä-painike ---------- */
.rke-submit-row{display:flex; justify-content:flex-end;}
.rke-submit-btn{
  background:var(--rke-primary); color:#fff; border:none;
  font-family:inherit; font-size:15px; font-weight:700;
  padding:12px 22px; border-radius:8px; cursor:pointer;
}
.rke-submit-btn:hover{background:var(--rke-primary-light);}
.rke-submit-btn:disabled{opacity:.6; cursor:wait;}

.rke-form-error{
  background:var(--rke-danger-bg); color:#6B211B; border:1px solid #E3A8A1;
  border-radius:7px; padding:11px 14px; font-size:13.5px; margin-bottom:18px;
}

/* ---------- Kiitos-näkymä ---------- */
.rke-success{text-align:center; padding:30px 10px;}
.rke-success__icon{font-size:42px; display:block; margin-bottom:12px;}
.rke-success h2{font-size:20px; color:var(--rke-primary); margin:0 0 8px;}
.rke-success p{font-size:14.5px; color:var(--rke-ink-muted); max-width:420px; margin:0 auto;}

/* ---------- Sivupalkki ---------- */
.rke-aside{display:flex; flex-direction:column; gap:16px;}
.rke-aside__card{
  background:var(--rke-surface); border:1px solid var(--rke-border);
  border-radius:var(--rke-radius); box-shadow:var(--rke-shadow); padding:20px;
}
.rke-aside__card--muted{background:var(--rke-surface-alt);}
.rke-aside__card h2{font-size:15.5px; font-weight:800; color:var(--rke-primary); margin:0 0 10px;}
.rke-aside__card ol{margin:0; padding-left:20px; font-size:13.5px; color:var(--rke-ink-muted);}
.rke-aside__card li{margin-bottom:6px;}
.rke-aside__card p{font-size:13.5px; color:var(--rke-ink-muted); margin:0 0 12px;}
.rke-aside__link{color:var(--rke-primary); font-weight:700; font-size:13.5px; text-decoration:none;}
.rke-aside__link:hover{text-decoration:underline;}

/* ---------- Fokus näkyvissä kaikkialla ---------- */
button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, a:focus-visible{
  outline:3px solid var(--rke-focus); outline-offset:2px;
}

@media (max-width:760px){
  .rke-layout{grid-template-columns:1fr;}
  .rke-title{font-size:24px;}
  .rke-form-card__body{padding:18px;}
  .rke-field-row{grid-template-columns:1fr;}
}