/*
 * Hurja Hintalaskuri - lohkon kaikki tyylit.
 *
 * Tama tiedosto ladataan rekisteroidyn kadensijan "hurja-hintalaskuri" kautta
 * (ks. includes/block.php ja blocks/hintalaskuri/block.json), joten WordPress
 * lisaa sen sivulle vain silloin kun lohko on oikeasti kaytossa.
 *
 * MIKSI juuriluokka .hurja-calc on kaksinkertaistettu joka valitsimessa:
 * Ennen tyylit tulivat inline-<style>-lohkona lohkon HTML:n mukana, eli dokumentissa VASTA
 * teeman tyylitiedostojen jalkeen - tasapelit ratkesivat siksi aina laskurin hyvaksi. Erillinen
 * tyylitiedosto ladataan <head>-osiossa, mahdollisesti teeman tyylien ENNEN, jolloin esimerkiksi
 * teeman ".entry-content h1" (spesifisyys 0,1,1) voittaisi laskurin ".hurja-calc h1" (0,1,1)
 * pelkan jarjestyksen perusteella ja laskurin otsikot menisivat rikki isantateemassa.
 * Kaksinkertainen luokka nostaa spesifisyyden tasolle (0,2,1), joten laskuri voittaa
 * riippumatta siita, missa jarjestyksessa tyylit sattuvat latautumaan.
 *
 * Fonttien polut ovat tarkoituksella suhteellisia: CSS:n url() ratkeaa aina
 * tyylitiedoston sijainnista, ei sivun osoitteesta, joten tiedosto on taysin
 * staattinen eika tarvitse PHP:ta lisaosan URLin muodostamiseen.
 */

@font-face{
  font-family:'SpaceGrotesk';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/space-grotesk-400.woff2') format('woff2');
}
@font-face{
  font-family:'SpaceGrotesk';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/space-grotesk-500.woff2') format('woff2');
}
@font-face{
  font-family:'SpaceGrotesk';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/space-grotesk-600.woff2') format('woff2');
}
@font-face{
  font-family:'SpaceGrotesk';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/space-grotesk-700.woff2') format('woff2');
}

.hurja-calc.hurja-calc{
  /* ---- Hurja.fi:n bränditokenit ---- */
  --hc-bg: #ffffff;
  --hc-surface: #f3f4f6;
  --hc-text: #2a292f;
  --hc-muted: rgba(42,41,47,0.62);
  --hc-border: #e6e6ea;
  --hc-accent: #ffbacd;         /* pinkki - ensisijaiset CTA:t, valinnat, edistyminen */
  --hc-accent-ink: #2a292f;     /* teksti pinkin päällä */
  --hc-ink: #000000;            /* musta - lopullinen konversio-CTA, mittarit */
  --hc-ink-contrast: #ffffff;
  --hc-tip-accent: var(--hc-accent);
  --hc-value-accent: var(--hc-ink);
  --hc-radius-lg: 20px;
  --hc-radius: 12px;
  --hc-radius-sm: 10px;
  --hc-font: 'SpaceGrotesk', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hc-font-display: 'SpaceGrotesk', 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  display:block;
  background:var(--hc-bg);
  color:var(--hc-text);
  font-family:var(--hc-font);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hurja-calc.hurja-calc, .hurja-calc.hurja-calc *{ box-sizing:border-box; }
/* Suojaa upotusta isäntäsivun teema-CSS:ää vastaan: peritty väri ei voita isäntäsivun
   elementtivalitsimia (esim. teeman "h1{color:...}"), joten asetetaan väri eksplisiittisesti
   jokaiselle elementille. Tarkemmat luokkavalitsimet alempana kumoavat tämän tarvittaessa. */
.hurja-calc.hurja-calc *{ color:var(--hc-text); }

.hurja-calc.hurja-calc.hc-wrap{
  max-width:960px;
  margin:0 auto;
  padding:32px 20px 80px;
}
.hurja-calc.hurja-calc .hc-brand{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;
}
.hurja-calc.hurja-calc .hc-logo{
  font-family:var(--hc-font-display);
  font-weight:700; font-size:22px; letter-spacing:0.02em; text-transform:uppercase;
}
.hurja-calc.hurja-calc .hc-logo span{
  font-family:var(--hc-font); color:var(--hc-muted); font-weight:400; text-transform:none;
  letter-spacing:0; font-size:13px; display:block; margin-top:4px;
}
.hurja-calc.hurja-calc .hc-card{
  background:var(--hc-bg);
  border:1px solid var(--hc-border);
  border-radius:var(--hc-radius-lg);
  padding:40px 48px;
  box-shadow: 0 1px 2px rgba(42,41,47,0.04);
}
@media (max-width:520px){
  .hurja-calc.hurja-calc .hc-card{ padding:24px 18px; }
}

/* progress */
.hurja-calc.hurja-calc .hc-progress-row{ display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.hurja-calc.hurja-calc .hc-progress-track{ flex:1; height:6px; background:var(--hc-surface); border-radius:6px; overflow:hidden; }
.hurja-calc.hurja-calc .hc-progress-fill{ height:100%; background:var(--hc-accent); border-radius:6px; width:0%; transition:width .35s ease; }
.hurja-calc.hurja-calc .hc-progress-label{ font-size:13px; color:var(--hc-muted); white-space:nowrap; }

.hurja-calc.hurja-calc h1{ font-family:var(--hc-font-display); font-weight:700; font-size:28px; margin:0 0 14px; letter-spacing:0.01em; line-height:1.25; color:var(--hc-text); }
.hurja-calc.hurja-calc h2{ font-family:var(--hc-font); font-weight:600; font-size:21px; margin:0 0 6px; color:var(--hc-text); }
.hurja-calc.hurja-calc h3{ font-family:var(--hc-font); color:var(--hc-text); }
.hurja-calc.hurja-calc p.hc-lead{ color:var(--hc-muted); font-size:15.5px; line-height:1.6; margin:0 0 24px; max-width:640px; }
.hurja-calc.hurja-calc .hc-step-eyebrow{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--hc-muted); margin-bottom:6px; }
.hurja-calc.hurja-calc .hc-sub-heading{ font-size:13.5px; font-weight:700; color:var(--hc-text); margin:26px 0 10px; }
.hurja-calc.hurja-calc .hc-sub-heading:first-of-type{ margin-top:6px; }
.hurja-calc.hurja-calc .hc-sub-heading:not(:first-of-type){ border-top:1px solid var(--hc-border); padding-top:22px; }

/* Sarakkeen alaraja on min(300px, 100%), ei paljas 300px: auto-fit ei kutista saraketta
   minmax()n minimin alle, joten paljas 300px piti kortit 300px:n levyisina myos silloin
   kun kortin sisaltoalue oli sita kapeampi (esim. 360px:n puhelin: 360 - 2*20 kadensijan
   ja 2*18 kortin paddingia = 282px). Kortit vuotivat silloin kortin oikean reunan yli ja
   vaihtoehtojen tekstit leikkautuivat. min(...,100%) antaa sarakkeen kutistua sisalto-
   alueen mittaan kapealla naytolla ja pitaa monisarakkeisen asettelun leveilla. */
.hurja-calc.hurja-calc .hc-options{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:12px; margin-top:8px; }
.hurja-calc.hurja-calc .hc-option{
  display:flex; align-items:flex-start; gap:12px;
  border:1px solid var(--hc-border); border-radius:var(--hc-radius);
  padding:14px 16px; cursor:pointer; transition:border-color .15s, background .15s;
}
.hurja-calc.hurja-calc .hc-option:hover{ border-color:#cfcfd6; background:var(--hc-surface); }
.hurja-calc.hurja-calc .hc-option.hc-selected{ border-color:var(--hc-text); background:var(--hc-surface); box-shadow: inset 0 0 0 1px var(--hc-text); }
.hurja-calc.hurja-calc .hc-option input{ width:20px; height:20px; margin-top:1px; accent-color: var(--hc-text); flex-shrink:0; cursor:pointer; }
.hurja-calc.hurja-calc .hc-option .hc-opt-title{ font-weight:600; font-size:15.5px; }
.hurja-calc.hurja-calc .hc-option .hc-opt-desc{ font-size:13.5px; color:var(--hc-muted); margin-top:2px; }

.hurja-calc.hurja-calc .hc-optional-block{ margin-top:24px; padding-top:20px; border-top:1px solid var(--hc-border); }
.hurja-calc.hurja-calc .hc-optional-block label.hc-small-label{ margin-top:0; }

.hurja-calc.hurja-calc .hc-tip-box{
  margin-top:16px; background:var(--hc-surface); border-left:4px solid var(--hc-tip-accent); color:var(--hc-text);
  border-radius:var(--hc-radius-sm); padding:14px 16px 14px 18px; font-size:14px; display:none; max-width:640px;
}
.hurja-calc.hurja-calc .hc-tip-box.hc-show{ display:block; }
.hurja-calc.hurja-calc .hc-tip-box b{ display:block; margin-bottom:3px; }

.hurja-calc.hurja-calc textarea.hc-freeform{
  width:100%; margin-top:16px; border:1px solid var(--hc-border); border-radius:var(--hc-radius-sm);
  padding:12px 14px; font-family:var(--hc-font); font-size:14.5px; resize:vertical; min-height:70px; color:var(--hc-text);
}
.hurja-calc.hurja-calc label.hc-small-label{ font-size:13px; color:var(--hc-muted); display:block; margin-top:16px; margin-bottom:-6px; }

.hurja-calc.hurja-calc .hc-nav-row{ display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:12px; }
/* Kapealla naytolla kaksi napinleveyttaan pienta nappia rivin molemmissa reunoissa nayttaa
   irralliselta, ja alle ~340px:n napin teksti taittuu kahdelle riville. Siksi navigointi
   pinotaan alle 500px:n: taysleveat napit paallekkain. Suunta on column-REVERSE, jotta
   eteenpain vieva nappi ("Jatka") on paalla ja "Takaisin" alla vaikka DOM-jarjestys pysyy
   ennallaan - lomakkeen ensisijainen toiminto on siten peukalon ulottuvilla ylempana.
   align-items:stretch kumoaa perussaannon centerin, jolloin napit venyvat kortin levyisiksi.
   Yhden napin rivit (tuloksen "Muokkaa vastauksia", "Kopioi yhteenveto") kestavat taman:
   niiden inline-justify-content koskee pystyakselia vasta pinotussa tilassa eika tee mitaan,
   ja nappi venyy samalla tavalla taysleveaksi. */
@media (max-width:500px){
  .hurja-calc.hurja-calc .hc-nav-row{ flex-direction:column-reverse; align-items:stretch; }
}
.hurja-calc.hurja-calc button, .hurja-calc.hurja-calc a.hc-btn-primary, .hurja-calc.hurja-calc a.hc-btn-cta, .hurja-calc.hurja-calc a.hc-btn-ghost{
  font-family:var(--hc-font); font-size:15px; font-weight:600; border-radius:999px; cursor:pointer;
  border:1px solid transparent; padding:13px 26px; transition:opacity .15s, transform .05s, background .15s;
  display:inline-block; text-decoration:none; text-align:center;
}
.hurja-calc.hurja-calc button:active{ transform:scale(0.98); }
.hurja-calc.hurja-calc .hc-btn-primary{ background:var(--hc-accent); color:var(--hc-accent-ink); }
.hurja-calc.hurja-calc .hc-btn-primary:hover{ opacity:.88; }
.hurja-calc.hurja-calc .hc-btn-primary:disabled{ opacity:.35; cursor:not-allowed; }
.hurja-calc.hurja-calc .hc-btn-cta{ background:var(--hc-ink); color:var(--hc-ink-contrast); }
.hurja-calc.hurja-calc .hc-btn-cta:hover{ opacity:.85; }
.hurja-calc.hurja-calc .hc-btn-ghost{ background:transparent; color:var(--hc-text); border-color:var(--hc-border); }
.hurja-calc.hurja-calc .hc-btn-ghost:hover{ border-color:#cfcfd6; background:var(--hc-surface); }
.hurja-calc.hurja-calc .hc-expert-links{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px; }
.hurja-calc.hurja-calc .hc-expert-card{
  flex:1; min-width:200px; max-width:300px; display:flex; align-items:center; gap:10px;
  border:1px solid var(--hc-border); border-radius:999px; padding:8px 18px 8px 8px;
  text-decoration:none; transition:border-color .15s, background .15s;
}
.hurja-calc.hurja-calc .hc-expert-card:hover{ border-color:#cfcfd6; background:var(--hc-surface); }
.hurja-calc.hurja-calc .hc-expert-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.hurja-calc.hurja-calc .hc-expert-card span{ font-size:14.5px; font-weight:600; color:var(--hc-text); }

.hurja-calc.hurja-calc .hc-hero-actions{ margin-top:26px; }
.hurja-calc.hurja-calc .hc-pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 4px; }
.hurja-calc.hurja-calc .hc-pill{ font-size:12.5px; background:var(--hc-surface); border-radius:999px; padding:6px 14px; color:var(--hc-text); }

/* result screen */
.hurja-calc.hurja-calc .hc-result-range{ text-align:center; padding:30px 10px; background:var(--hc-surface); border-radius:var(--hc-radius); margin:22px 0; }
.hurja-calc.hurja-calc .hc-result-range .hc-qual{ font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--hc-text); margin-bottom:10px; }
.hurja-calc.hurja-calc .hc-result-range .hc-num{ font-family:var(--hc-font-display); font-size:42px; font-weight:700; letter-spacing:0; }
.hurja-calc.hurja-calc .hc-result-range .hc-cap{ font-size:13px; color:var(--hc-muted); margin-top:8px; }

.hurja-calc.hurja-calc .hc-section-heading{ font-size:14.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--hc-muted); margin:26px 0 12px; font-weight:600; }

.hurja-calc.hurja-calc .hc-meter-row{ margin-bottom:14px; }
.hurja-calc.hurja-calc .hc-meter-label{ font-size:13.5px; margin-bottom:5px; display:flex; justify-content:space-between; gap:8px; }
.hurja-calc.hurja-calc .hc-meter-label b{ font-weight:700; }
.hurja-calc.hurja-calc .hc-meter-track{ height:8px; background:var(--hc-surface); border-radius:6px; overflow:hidden; }
.hurja-calc.hurja-calc .hc-meter-fill{ height:100%; background:var(--hc-ink); border-radius:6px; transition:width .4s ease; }

.hurja-calc.hurja-calc .hc-ai-callout{ background:var(--hc-surface); border-left:4px solid var(--hc-accent); color:var(--hc-text); border-radius:var(--hc-radius-sm); padding:18px 20px 18px 18px; margin:18px 0; max-width:640px; }
.hurja-calc.hurja-calc .hc-ai-callout p{ margin:6px 0 0; font-size:14.5px; }
.hurja-calc.hurja-calc .hc-ai-callout p:first-child{ margin-top:0; }

.hurja-calc.hurja-calc .hc-breakdown{ margin:22px 0; }
.hurja-calc.hurja-calc .hc-breakdown ul{ margin:0; padding-left:0; list-style:none; }
.hurja-calc.hurja-calc .hc-breakdown li{ padding:8px 0; border-bottom:1px solid var(--hc-border); font-size:14.5px; display:flex; justify-content:space-between; gap:12px; }
.hurja-calc.hurja-calc .hc-breakdown li:last-child{ border-bottom:none; }
.hurja-calc.hurja-calc .hc-breakdown li .hc-k{ color:var(--hc-muted); }

.hurja-calc.hurja-calc .hc-value-block{ background:var(--hc-surface); border-left:4px solid var(--hc-value-accent); color:var(--hc-text); border-radius:var(--hc-radius-sm); padding:18px 20px 18px 18px; margin:18px 0; max-width:640px; }
.hurja-calc.hurja-calc .hc-value-block p{ margin:6px 0 0; font-size:14.5px; }
.hurja-calc.hurja-calc .hc-value-block p:first-child{ margin-top:0; }

.hurja-calc.hurja-calc .hc-engagement-block{ margin:18px 0; padding:18px 20px; border:1px solid var(--hc-border); border-radius:var(--hc-radius); background:var(--hc-bg); max-width:640px; }
.hurja-calc.hurja-calc .hc-engagement-block p{ font-size:14.5px; margin:6px 0 0; }

.hurja-calc.hurja-calc .hc-partner-block{ margin:24px 0; padding:18px 20px; border:1px dashed var(--hc-border); border-radius:var(--hc-radius); max-width:640px; }
.hurja-calc.hurja-calc .hc-partner-block p{ font-size:14.5px; color:var(--hc-text); margin:6px 0 0; }
.hurja-calc.hurja-calc .hc-partner-block ul{ margin:6px 0 0; padding-left:20px; }
.hurja-calc.hurja-calc .hc-partner-block li{ font-size:14.5px; color:var(--hc-text); margin-top:8px; }
.hurja-calc.hurja-calc .hc-partner-block li:first-child{ margin-top:0; }

.hurja-calc.hurja-calc .hc-disclaimer{ font-size:12.5px; color:var(--hc-muted); margin-top:8px; max-width:640px; }

/* form */
.hurja-calc.hurja-calc .hc-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.hurja-calc.hurja-calc .hc-form-grid .hc-full{ grid-column: 1 / -1; }
@media (max-width:520px){ .hurja-calc.hurja-calc .hc-form-grid{ grid-template-columns:1fr; } }
.hurja-calc.hurja-calc .hc-form-grid label{ font-size:13px; color:var(--hc-muted); display:block; margin-bottom:5px; }
.hurja-calc.hurja-calc .hc-form-grid input, .hurja-calc.hurja-calc .hc-form-grid textarea{
  width:100%; border:1px solid var(--hc-border); border-radius:var(--hc-radius-sm); padding:11px 13px;
  font-family:var(--hc-font); font-size:14.5px; color:var(--hc-text);
}
.hurja-calc.hurja-calc .hc-form-grid textarea{ min-height:80px; resize:vertical; }
.hurja-calc.hurja-calc .hc-consent-row{ display:flex; align-items:flex-start; gap:10px; margin-top:14px; font-size:13.5px; color:var(--hc-text); }
.hurja-calc.hurja-calc .hc-consent-row input{ width:18px; height:18px; margin-top:2px; accent-color:var(--hc-text); flex-shrink:0; cursor:pointer; }
.hurja-calc.hurja-calc .hc-consent-row .hc-consent-note{ color:var(--hc-muted); font-size:12px; }

.hurja-calc.hurja-calc .hc-thanks{ text-align:center; padding:20px 0; }
.hurja-calc.hurja-calc .hc-thanks .hc-check{ font-size:40px; margin-bottom:10px; }

.hurja-calc.hurja-calc .hc-step{ display:none; }
.hurja-calc.hurja-calc .hc-step.hc-active{ display:block; animation: hc-fadein .25s ease; }
@keyframes hc-fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

.hurja-calc.hurja-calc a.hc-text-link{ color:var(--hc-text); text-decoration:underline; }
.hurja-calc.hurja-calc .hc-footer-note{ text-align:center; color:var(--hc-muted); font-size:12.5px; margin-top:18px; }
