/* =========================================================
   IV-nuohous.fi – brändin paletti & overridet
   Ladataan VIIMEISENÄ headerissa (combined.min.css jälkeen).
   Huom: globalsettings.json injektoi samat :root-värit vielä
   tämän jälkeen, joten muuttujapohjainen teema reskinautuu.
   Tämä tiedosto hoitaa kovakoodatut hexit + brändilisät.
   ========================================================= */

:root {
  /* Brändivärit (ohjeen mukaan) */
  --color-primary: #00A6B4;
  --color-dark:    #073047;
  --color-glow:    #6EE7F2;
  --color-bg:      #EAFBFF;
  --color-white:   #FFFFFF;
  --color-text:    #073047;
  --color-muted:   #5D7280;
  --color-border:  rgba(7, 48, 71, 0.12);

  /* Teeman muuttujat siniseksi (varmistus globalsettings-injektion lisäksi) */
  --tj-color-theme-primary: #00A6B4;
  --tj-color-theme-dark:    #073047;
  --tj-color-heading-primary: #073047;
  --tj-color-theme-bg:      #EAFBFF;
  --tj-color-theme-bg-2:    #D8F5FB;
  --tj-color-border-1:      #00A6B4;
  --ys-lime:        #00A6B4;
  --ys-lime-light:  #6EE7F2;
  --ys-lime-dark:   #073047;
  --ys-forest:      #073047;
  --ys-forest-light:#00A6B4;
  --ys-green:       #00A6B4;
  --ys-dark:        #052436;
  --ys-dark-2:      #073047;
}

/* Hero-gradientti (combined.min.css:n kovakoodattu #242424→#ff6a00 tilalle) */
.heroStack .hero-bg,
.hero-gradient,
.iv-hero {
  background: linear-gradient(153.92deg, #052436 30%, #073047 70%, #0a4a63 124%) !important;
}

/* Tummat pinnat -> syvä sininen */
.tj-footer-area,
.footer-1,
.iv-dark {
  background-color: #073047 !important;
}

/* Sisäsivujen page-header: teeman oranssi overlay -> sininen tinttaus.
   (combined.min.css: .tj-page-header::before background-color on oranssi) */
.tj-page-header { background-color: #073047 !important; }
.tj-page-header::before { background-color: rgba(7, 48, 71, 0.45) !important; }

/* Teeman koristepseudot käyttävät kovakoodattua oranssia (#ff6a00) ->
   neutralisoidaan/sinistetään, jottei etusivulle jää oransseja lohkoja. */
.h9-contact-section::after { background-color: rgba(0, 166, 180, 0.10) !important; }
.h9-contact-section::before { background-color: transparent !important; }
.hero-lead-form::before {
  background-image: linear-gradient(135deg, rgba(110, 231, 242, 0.18), rgba(0, 0, 0, 0) 50%) !important;
}

/* Footer-linkkien hover -> glow */
.tj-footer-area a:hover,
.footer-1 a:hover { color: #6EE7F2 !important; }

/* Napin hover (varmistus) */
.tj-primary-btn:hover { --ys-lime: #073047; }

/* =========================================================
   Teksti-wordmark-logo (IV-nuohous.fi) – väliaikainen,
   kunnes oikea logotiedosto asennetaan.
   ========================================================= */
.iv-wordmark {
  font-family: var(--tj-ff-heading, 'Libre Franklin', sans-serif);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.iv-wordmark .wm-iv   { color: #00A6B4; }
.iv-wordmark .wm-rest { color: #FFFFFF; }        /* oletus: tumma tausta (hero / hamburger) */
.iv-wordmark .wm-dot  { color: #6EE7F2; }
/* Sticky / vaalea header -> tumma teksti */
.header-sticky .iv-wordmark .wm-rest { color: #073047; }
@media (max-width: 575px){
  .iv-wordmark { font-size: 1.35rem; }
}

/* =========================================================
   Sisäsivut (ei etusivu): kiinteä tumma header,
   jotta valkoinen logo/navi/teksti näkyy vaalealla sisällöllä.
   ========================================================= */
body:not(.page-home) .header-absolute {
  position: relative;
  background: #073047;
}
body:not(.page-home) .header-absolute .header-topbar {
  background: rgba(255,255,255,0.06);
}

/* =========================================================
   Sticky "Pyydä tarjous" -nappi mobiilissa
   ========================================================= */
.iv-mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9990;
  display: none;
  background: #073047;
  padding: 9px 12px;
  box-shadow: 0 -2px 14px rgba(7,48,71,0.25);
  gap: 10px;
}
.iv-mobile-cta a {
  flex: 1 1 0;
  text-align: center;
  font-family: var(--tj-ff-heading, 'Libre Franklin', sans-serif);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 8px;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1;
}
.iv-mobile-cta .cta-call  { background: rgba(255,255,255,0.12); color: #fff; }
.iv-mobile-cta .cta-quote { background: #00A6B4; color: #fff; }
@media (max-width: 991px){
  .iv-mobile-cta { display: flex; }
  body { padding-bottom: 64px; }   /* tilaa sticky-napille */
}

/* =========================================================
   IV-landingin apuluokat (kortit, checkmarkit, sektiot)
   ========================================================= */
.iv-section { padding: 80px 0; }
.iv-section--tight { padding: 56px 0; }
.iv-bg-soft { background: #EAFBFF; }

.iv-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px 28px;
  height: 100%;
  box-shadow: 0 6px 24px rgba(7,48,71,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.iv-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(7,48,71,0.12); }
.iv-card--dark { background: #073047; color: #fff; border-color: rgba(255,255,255,0.12); }
.iv-card--dark .iv-card-title { color: #fff; }

.iv-price {
  font-family: var(--tj-ff-heading, 'Libre Franklin', sans-serif);
  font-weight: 700;
  font-size: 2.6rem;
  color: #00A6B4;
  line-height: 1;
}
.iv-price small { font-size: 1rem; color: var(--color-muted); font-weight: 600; }

ul.iv-check { list-style: none; padding: 0; margin: 0; }
ul.iv-check li {
  position: relative;
  padding: 7px 0 7px 32px;
  color: var(--color-text);
}
ul.iv-check li::before {
  content: "\e93a"; /* tji-check fallback; korvataan ikonilla markupissa */
  position: absolute; left: 0; top: 7px;
  color: #00A6B4; font-weight: 700;
}
/* Kun checkmark tehdään <i class="tji-check"> markupissa, piilota ::before */
ul.iv-check li.has-icon::before { content: none; }
ul.iv-check li .tji-check,
ul.iv-check li i {
  position: absolute; left: 0; top: 9px; color: #00A6B4; font-size: 15px;
}
.iv-card--dark ul.iv-check li { color: rgba(255,255,255,0.9); }
.iv-card--dark ul.iv-check li i { color: #6EE7F2; }

.iv-eyebrow {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #00A6B4;
  margin-bottom: 12px;
}
.iv-dark .iv-eyebrow { color: #6EE7F2; }

.iv-glow-box {
  background: rgba(110,231,242,0.10);
  border: 1px solid rgba(110,231,242,0.35);
  border-radius: 14px;
  padding: 22px 24px;
}

/* Numeroitu prosessivaihe */
.iv-step-num {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #00A6B4;
  color: #fff;
  font-family: var(--tj-ff-heading, 'Libre Franklin', sans-serif);
  font-weight: 700;
  font-size: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}

/* Tummat sektiot: valkoinen teksti (teeman otsikkoväri on tumma -> pakota) */
.iv-dark,
.iv-dark p,
.iv-dark li,
.iv-dark span:not(.wm-iv):not(.wm-dot),
.iv-dark .h1, .iv-dark .h2, .iv-dark .h3, .iv-dark .h4, .iv-dark .h5,
.iv-dark h1, .iv-dark h2, .iv-dark h3, .iv-dark h4, .iv-dark h5 {
  color: #ffffff;
}
.iv-dark .text-muted, .iv-dark .iv-muted { color: rgba(255,255,255,0.72) !important; }

/* Vaalean sektion muted-teksti */
.iv-muted { color: var(--color-muted); }

/* Lomakkeen kohdetyyppi-select (placeholder harmaaksi) */
.iv-select { color: #073047; }
.iv-select:required:invalid,
.iv-select option[value=""] { color: #9ca3af; }
.iv-select option { color: #073047; }

/* Lomakkeen pieni luottamusteksti */
.iv-form-note { font-size: 12.5px; color: var(--color-muted); margin: 10px 0 0; text-align: center; }
.hero-lead-form .iv-form-note { color: var(--color-muted); }

/* Hero-lomakelaatikko */
.iv-lead-form {
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 18px 50px rgba(7,48,71,0.22);
}
.iv-lead-form .form-control { margin-bottom: 12px; }
.iv-lead-form-title { font-weight: 700; margin-bottom: 4px; color: #073047; }
.iv-lead-form-sub { font-size: 14px; color: var(--color-muted); margin-bottom: 18px; }

/* Hero-asettelu */
.iv-hero { position: relative; padding: 150px 0 90px; }
@media (max-width: 991px){ .iv-hero { padding: 120px 0 60px; } }
.iv-hero .iv-hero-trust li { padding: 6px 0 6px 30px; }

/* Hero-otsikko: estä pitkien sanojen ylivuoto + pienennä mobiilissa
   (teeman .hero-title on kiinteä 3.2rem ilman mobiiliskaalausta) */
.hero-title { overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 991px){ .hero-title { font-size: 2.2rem; } }
@media (max-width: 575px){ .hero-title { font-size: 1.9rem; } }

/* FAQ accordion-säädöt (Bootstrap) */
.iv-faq .accordion-button:not(.collapsed) { background: #EAFBFF; color: #073047; }
.iv-faq .accordion-button:focus { box-shadow: 0 0 0 .15rem rgba(0,166,180,.25); }