/* ==========================================================================
   Visiokuu — jaettu teema & komponentit  (vk.css)
   Ladataan jokaisella sivulla sivun oman <style>-lohkon JÄLKEEN, joten
   nämä säännöt voittavat ilman !importantia.
   Sisältää: tumma tila, teemapainike, WhatsApp-painike, reveal-animaatiot.
   ========================================================================== */

:root { color-scheme: light; }

/* ---- Tumma teema: [data-theme="dark"] TAI järjestelmän tila kun valintaa ei ole ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1211;
  --bg-alt: #171b1a;
  --bg-soft: #1d2220;
  --border: #2a302e;
  --border-strong: #3a423f;
  --text: #f1f2ef;
  --text-dim: #a8afab;
  --text-muted: #7b837f;
  --accent: #6cc79a;
  --accent-soft: #1e352a;
  --accent-glow: rgba(108, 199, 154, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1211;
    --bg-alt: #171b1a;
    --bg-soft: #1d2220;
    --border: #2a302e;
    --border-strong: #3a423f;
    --text: #f1f2ef;
    --text-dim: #a8afab;
    --text-muted: #7b837f;
    --accent: #6cc79a;
    --accent-soft: #1e352a;
    --accent-glow: rgba(108, 199, 154, 0.10);
  }
}

/* ---- Kovakoodattujen värien korjaukset tummassa ---- */
:root[data-theme="dark"] .nav-header { background: rgba(15, 18, 17, 0.85); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-header { background: rgba(15, 18, 17, 0.85); } }

/* CTA-kortti (background: var(--text)) kääntyisi vaaleaksi — pidetään tummana */
:root[data-theme="dark"] .cta-card {
  background: #0b0e0d; color: var(--text-dim); border: 1px solid var(--border);
}
:root[data-theme="dark"] .cta-card h2 { color: var(--text); }
:root[data-theme="dark"] .cta-card .btn-primary { background: var(--accent); color: #04140d; }
:root[data-theme="dark"] .cta-card em { color: #a8e0bd; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-card { background: #0b0e0d; color: var(--text-dim); border: 1px solid var(--border); }
  :root:not([data-theme="light"]) .cta-card h2 { color: var(--text); }
  :root:not([data-theme="light"]) .cta-card .btn-primary { background: var(--accent); color: #04140d; }
}

/* Kelluvien korttien varjot kevyemmiksi tummassa */
:root[data-theme="dark"] .float-card,
:root[data-theme="dark"] .service-featured,
:root[data-theme="dark"] .vk-demo {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 14px 44px rgba(0,0,0,0.55);
}

/* ---- Teemapainike (vk.js lisää sen .nav-containeriin) ---- */
.vk-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border: 1px solid var(--border-strong); border-radius: 100px;
  background: transparent; color: var(--text-dim);
  cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s;
}
.vk-theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.vk-theme-toggle svg { width: 17px; height: 17px; display: block; }
.vk-theme-toggle .vk-i-moon { display: none; }
:root[data-theme="dark"] .vk-theme-toggle .vk-i-sun { display: none; }
:root[data-theme="dark"] .vk-theme-toggle .vk-i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vk-theme-toggle .vk-i-sun { display: none; }
  :root:not([data-theme="light"]) .vk-theme-toggle .vk-i-moon { display: block; }
}

/* ---- WhatsApp kelluva painike (vk.js lisää sen bodyyn) ---- */
.vk-wa-fab {
  position: fixed; left: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px 13px 16px;
  background: #25D366; color: #05221a; text-decoration: none;
  border-radius: 100px; font-weight: 600; font-size: 15px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
  transition: transform .15s, box-shadow .15s;
}
.vk-wa-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(37, 211, 102, 0.5); }
.vk-wa-fab svg { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
@media (max-width: 600px) {
  .vk-wa-fab { left: 16px; bottom: 16px; padding: 12px; }
  .vk-wa-fab span { display: none; }
}

/* ---- Reveal-animaatiot (vain kortit; leipäteksti ei animoidu) ---- */
.vk-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.vk-reveal.vk-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vk-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Navin tiivistys pienillä näytöillä kun teemapainike on lisätty */
@media (max-width: 600px) {
  .nav-container { gap: 14px !important; }
  .vk-theme-toggle { width: 34px; height: 34px; }
}

/* Yritys pitää ElevenLabs-widget oikeassa alakulmassa (ei aina tehoa: widgetin
   kelluva osa on shadow DOM:issa omalla asemoinnillaan — lopullinen paikka
   asetetaan ElevenLabsin hallinnasta). */
elevenlabs-convai {
  position: fixed !important;
  right: 16px !important; bottom: 16px !important;
  left: auto !important; top: auto !important;
  z-index: 55 !important;
}