/* =========================================================================
   ep-responsive-fixes.css
   Layout-korjaukset mobiili (390) / tabletti (768) / desktop (1440).
   Mitattu Playwrightilla kaikilta sivuilta; jokainen sääntö korjaa
   mitatun ongelman, ei "varmuuden vuoksi" -tapausta.

   Perusperiaate: CoolTech-teema on suunniteltu niin, että koriste- ja
   overlap-elementit vuotavat `.page-wrapper`-elementin yli ja leikkautuvat
   siihen (`.page-wrapper { overflow: hidden }`). EnePron viewit rakennettiin
   ilman page-wrapperia, joten leikkaus puuttui ja vuodot valuivat suoraan
   dokumenttiin. Osa 1 palauttaa sen leikkauksen.
   ========================================================================= */

/* =========================================================================
   1. VAAKAVIERITYS — juurisyyt, kaikki näyttökoot
   ========================================================================= */

/* Teeman puuttuvan page-wrapperin korvike. `clip` eikä `hidden`, koska
   `overflow: hidden` tekisi juuresta scroll-containerin ja rikkoisi
   position: sticky -elementit (sticky-header, energiasivujen kuvakolumnit). */
html,
body {
  overflow-x: clip;
}

/* Alustamaton owl-karuselli renderöi koko stagen vierekkäin (energiasuunnittelu,
   energiatodistus: 2 700 px leveä stage). Teeman oma sääntö ei osu, jos
   .owl-carousel-luokka puuttuu. */
.owl-stage-outer {
  overflow: hidden;
}

/* Bootstrapin container-fluid on 100 % leveä; mx-sm-3 lisää siihen marginit,
   jolloin summa ylittää viewportin (etusivu, +16 px molemmin puolin). */
.container-fluid.mx-sm-3 {
  width: auto;
  max-width: 100%;
}

/* Teeman video-section-two vetää itsensä 4 px yli oikean reunan.
   Toistui 12 sivulla kaikissa kokoluokissa. Syy on editorin `scom-me-n1`
   (margin-right: -.25rem), joka on !important ja tuplattua spesifisyyttä
   — siksi sama paino myös tässä. */
.video-section-two.video-section-two {
  margin-right: 0 !important;
}

/* Upotettu Google Maps ‑iframe on kiinteäleveä (yhteystiedot, energiapalvelut). */
iframe {
  max-width: 100%;
}

/* Pitkätekstiset napit kasvoivat ruutua leveämmiksi kapeilla näytöillä. */
.theme-btn {
  max-width: 100%;
}

/* =========================================================================
   2. DESKTOP-OVERLAPIT — neutralisoidaan kun sarakkeet pinoutuvat (≤1199px)
   Negatiiviset marginit on suunniteltu vierekkäisille sarakkeille; pinottuna
   ne vetävät sektiot toistensa päälle. Teeman selektorit ovat syviä ja osa
   arvoista on inline-tyylejä, joten spesifisyys on nostettu vastaavasti.
   ========================================================================= */
@media (max-width: 1199.98px) {
  .features-section.style-two { margin-top: 0; }
  .features-section.style-two .outer-box.style-two { margin-bottom: 0; }
  .service-section.pt-md-100 { margin-top: 0; }
  .offer-section.scom-mt-n10 { margin-top: 0; }
  .about-section-four .image-column .inner-column { margin-left: 0; }
  .company-benefit .image-box,
  .offer-section .image-column .image-box,
  .offer-section-two .image-column .image-box { margin-right: 0; }

  /* Etusivulla margin-top: -500px on sectionin inline-tyylissä. */
  section.clients-section-two { margin-top: 0 !important; }
}

@media (max-width: 991.98px) {
  /* Teeman oma selektori on .feature-block-one .inner-box .content-wrap .icon-wrap */
  .feature-block-one .inner-box .content-wrap .icon-wrap { margin-top: 0; }
  .why-choose-us-two .inner-box,
  .features-section .inner-box { margin-top: 0; }
}

/* =========================================================================
   3. PYSTYVÄLIT — teeman ja editorin desktop-mitat jäivät voimaan kapealla

   Editorin spacing-työkalu kirjoittaa `.scom-pt-10`-tyyppisiä luokkia, jotka
   ovat `!important` ja tuplattua spesifisyyttä (`.scom-pt-10.scom-pt-10`).
   Arvot ovat rem-asteikolla, joten taso 10 = 10rem = 160px myös puhelimessa.
   Skaalataan vain isot tasot (6–10) ja säilytetään niiden keskinäinen
   hierarkia — pienet tasot ovat kapeallakin kunnossa.
   Shared-editorin omaa CSS:ää ei muuteta; tämä on sivustokohtainen skaalaus.
   ========================================================================= */
@media (max-width: 991.98px) {
  .scom-pt-6.scom-pt-6   { padding-top: 3rem !important; }
  .scom-pt-7.scom-pt-7   { padding-top: 3.5rem !important; }
  .scom-pt-8.scom-pt-8   { padding-top: 4rem !important; }
  .scom-pt-9.scom-pt-9   { padding-top: 4.5rem !important; }
  .scom-pt-10.scom-pt-10 { padding-top: 5rem !important; }

  .scom-pb-6.scom-pb-6   { padding-bottom: 3rem !important; }
  .scom-pb-7.scom-pb-7   { padding-bottom: 3.5rem !important; }
  .scom-pb-8.scom-pb-8   { padding-bottom: 4rem !important; }
  .scom-pb-9.scom-pb-9   { padding-bottom: 4.5rem !important; }
  .scom-pb-10.scom-pb-10 { padding-bottom: 5rem !important; }

  .scom-mt-6.scom-mt-6   { margin-top: 3rem !important; }
  .scom-mt-8.scom-mt-8   { margin-top: 4rem !important; }
  .scom-mt-10.scom-mt-10 { margin-top: 5rem !important; }
  .scom-mb-6.scom-mb-6   { margin-bottom: 3rem !important; }
  .scom-mb-8.scom-mb-8   { margin-bottom: 4rem !important; }
  .scom-mb-10.scom-mb-10 { margin-bottom: 5rem !important; }

  /* Negatiiviset overlapit: pinotussa layoutissa ne vain syövät sisältöä. */
  .scom-mt-n6.scom-mt-n6,
  .scom-mt-n7.scom-mt-n7,
  .scom-mt-n8.scom-mt-n8,
  .scom-mt-n9.scom-mt-n9,
  .scom-mt-n10.scom-mt-n10 { margin-top: 0 !important; }
  .scom-mb-n6.scom-mb-n6,
  .scom-mb-n7.scom-mb-n7,
  .scom-mb-n8.scom-mb-n8,
  .scom-mb-n9.scom-mb-n9,
  .scom-mb-n10.scom-mb-n10 { margin-bottom: 0 !important; }

  /* Teeman `section > .container` saa 120px pysty-paddingin muuttujasta
     --container-pt. Kapealla se on liikaa, ja jos sektiolla on lisaksi
     pt-120, valia kertyi 175px ennen ensimmaista otsikkoa. */
  :root { --container-pt: 70px; }

  /* tm-bs-mp.css:n utilityt ovat !important. */
  .pt-100 { padding-top: 60px !important; }
  .pb-100 { padding-bottom: 60px !important; }
  .pt-120 { padding-top: 70px !important; }
  .pb-120 { padding-bottom: 70px !important; }
  .pt-130 { padding-top: 70px !important; }
  .pb-130 { padding-bottom: 70px !important; }
  .pt-150 { padding-top: 80px !important; }
  .pb-150 { padding-bottom: 80px !important; }
  .pb-200 { padding-bottom: 90px !important; }

  /* Teemasektiot, joiden oma desktop-padding on 120–380px. */
  .main-footer .widgets-section { padding-top: 70px; }
  /* enepro-overrides.css varaa footerille 175px tilaa features-sectionin
     -110px overlapille; kun overlap on yllä neutralisoitu, tila on turha. */
  .features-section.style-two + .main-footer .widgets-section { padding-top: 70px; }
  .video-section-two { padding-top: 80px; padding-bottom: 80px; margin-top: 0; }
  .about-section-seven,
  .about-section-five,
  .about-section-two,
  .about-section-three,
  .about-section-four { padding-top: 60px; padding-bottom: 60px; }
  .clients-section-two { padding-top: 90px; }
  .banner-section-one { padding-top: 90px; }
}

@media (max-width: 575.98px) {
  .scom-pt-10.scom-pt-10 { padding-top: 3.5rem !important; }
  .scom-pb-10.scom-pb-10 { padding-bottom: 3.5rem !important; }
  .scom-pt-8.scom-pt-8   { padding-top: 3rem !important; }
  .scom-pb-8.scom-pb-8   { padding-bottom: 3rem !important; }

  :root { --container-pt: 55px; }

  .pt-120 { padding-top: 55px !important; }
  .pb-120 { padding-bottom: 55px !important; }
  .pt-90 { padding-top: 50px !important; }
  .pb-90 { padding-bottom: 50px !important; }

  .video-section-two { padding-top: 60px; padding-bottom: 60px; }
  .main-footer .widgets-section,
  .features-section.style-two + .main-footer .widgets-section { padding-top: 55px; }
}

/* =========================================================================
   4. TYPOGRAFIA kapeilla näytöillä
   Mitatut koot 390 px ruudulla: page-title 64 px, energiatodistuksen slider
   90 px, etusivun hero 51 px. Otsikko katkesi keskeltä sanaa.
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-title .title,
  .main-slider-two h1,
  .main-slider-two .title,
  .banner-section-three .content-box .title,
  .banner-section-one .content-box .title,
  .banner-section .content-box .title,
  [class*="banner-section"] .content-box .title {
    font-size: clamp(28px, 8.2vw, 38px) !important;
    line-height: 1.18 !important;
    hyphens: auto;
  }

  .sec-title h2,
  .ep-blog-section h2,
  .team-details h2,
  .team-details__top-name,
  section h2 {
    font-size: clamp(24px, 6.6vw, 32px) !important;
    line-height: 1.25 !important;
  }

  .ep-blog-hero h1 {
    font-size: clamp(26px, 7.4vw, 34px) !important;
    line-height: 1.22 !important;
  }

  /* Hero-ingressi oli leipätekstiä isompi ja valui kuvan päälle. */
  .banner-section-three .content-box .sub-title {
    font-size: 16px;
    line-height: 1.65;
  }
}

@media (max-width: 575.98px) {
  /* Napit allekkain täysleveinä: rinnakkain ne jäivät eri levyisiksi. */
  .content-box .mt-30 .theme-btn,
  .banner-section .content-box .theme-btn {
    display: block;
    width: 100%;
    margin-right: 0 !important;
    text-align: center;
  }

  .content-box .mt-30 .theme-btn + .theme-btn { margin-top: 12px; }
}

/* =========================================================================
   5. ANIMAATIOT kapeilla näytöillä
   WOW.js piilottaa elementit kunnes ne animoituvat. Kapealla näytöllä
   sisäänliukuanimaatiot eivät tuo mitään, mutta ne voivat jättää sisältöä
   piiloon (ks. ep-layout-safety.js). Näytetään sisältö suoraan.
   ========================================================================= */
@media (max-width: 991.98px) {
  .wow {
    visibility: visible !important;
    animation-name: none !important;
    opacity: 1 !important;
  }
}

/* Karusellin sisällä WOW piilottaa slidet, jotka eivät ole näkyvissä
   alustushetkellä, eikä koskaan palauta niitä: toinen ja kolmas slide
   jäivät tyhjiksi (energiatodistus, energiasuunnittelu, maalampopumput).
   Koskee kaikkia näyttökokoja. */
.owl-carousel .wow,
.owl-item .wow,
.swiper .wow,
.swiper-slide .wow {
  visibility: visible !important;
  animation-name: none !important;
  opacity: 1 !important;
}

/* =========================================================================
   6. YKSITTÄISET KOMPONENTIT kapealla näytöllä
   ========================================================================= */
@media (max-width: 991.98px) {
  /* Kumppanilogot renderöityivät 350x150 px:n kokoisina, yksi logo täytti
     lähes koko ruudun. */
  .clients-section-two .clients-carousel .client-item img,
  .clients-section .clients-carousel .client-item img,
  .clients-carousel .client-item img {
    max-height: 56px;
    width: auto;
    margin: 0 auto;
  }

  /* Prosessin ikonit veivät noin 150 px korkeutta per vaihe. */
  .process-section .process-block .icon-box img {
    max-width: 110px;
    height: auto;
  }
}

@media (max-width: 575.98px) {
  /* Lomakekentät jäivät 297 px leveiksi 390 px:n ruudulla. */
  .contact-form,
  .contact-section .contact-form {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================================================================
   7. YHTEYDENOTTOLOMAKKEIDEN PALAUTE (ep-form.js / viestilahetys.php)
   ========================================================================= */
.ep-form-result:empty { display: none; }

.ep-form-result .alert {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 15px;
  line-height: 1.5;
}

.ep-form-result .alert-success {
  background: #e8f6ec;
  border-color: #b7e0c2;
  color: #1c6b34;
}

.ep-form-result .alert-danger {
  background: #fdeceb;
  border-color: #f3c2be;
  color: #a32626;
}

/* Tummataustaisilla lomakesektioilla vaalea palaute erottuu paremmin. */
.contact-section .ep-form-result .alert,
.video-section-two .ep-form-result .alert {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

/* =========================================================================
   8. YLÄVÄLI KIINTEÄN HEADERIN ALLE

   `.main-header` on `position: absolute; top: 30px` eli se kelluu sisällön
   päällä. Sivut, joiden ensimmäinen sektio on korkea banner (etusivu,
   lämpöpumppusivut), varaavat tilan omalla min-heightillaan. Matalat
   yläsektiot eivät: blogin `.ep-blog-hero` ja teeman `.page-title` alkoivat
   y=0:sta, jolloin otsikko jäi headerin alle.

   Mitattu headerin alareuna: 120 px (≤991), 140 px (992–1199),
   160 px (1200–1699) ja 250 px (≥1700, jossa valikko rivittyy kahdelle
   riville). Padding mitoitettu niiden mukaan + hengitystila.
   ========================================================================= */
.ep-blog-hero,
.page-title {
  padding-top: 160px;
}

/* 404-sivun sectionilla on teeman `pt-120`-utility, joka on !important —
   siksi tämä tarvitsee saman painon. */
.error-section.error-section { padding-top: 160px !important; }

@media (min-width: 992px) {
  .ep-blog-hero,
  .page-title { padding-top: 185px; }
  .error-section.error-section { padding-top: 185px !important; }
}

@media (min-width: 1200px) {
  .ep-blog-hero,
  .page-title { padding-top: 205px; }
  .error-section.error-section { padding-top: 205px !important; }
}

/* Leveillä näytöillä päävalikko rivittyy kahdelle riville ja header on
   220 px korkea. Ks. muistiinpano: tämä on oma bugi, ja jos se korjataan,
   tämän säännön voi laskea takaisin 205 px:ään. */
@media (min-width: 1700px) {
  .ep-blog-hero,
  .page-title { padding-top: 295px; }
  .error-section.error-section { padding-top: 295px !important; }
}

/* =========================================================================
   9. ETUSIVUN SEKTIOKOHTAINEN MOBIILI- JA TABLETTIVIIMEISTELY

   Löydökset section kerrallaan 390 px ja 768 px leveyksillä. Jokainen
   sääntö korjaa mitatun ongelman, ei oletettua.
   ========================================================================= */

/* 9.1 Yhteistyökumppanien logot (.clients-section-two)

   Teema piirtää logot `opacity: .2` ja kirkastaa ne vasta `:hover`illa.
   Kosketusnäytöllä hoveria ei ole, joten logot jäivät pysyvästi 20 %:n
   läpinäkyvyyteen tummalla taustalla — käytännössä näkymättömiksi. */
@media (hover: none) {
  .clients-carousel .client-item img,
  /* `call-to-action.style-three` toistaa saman kuvion omalla,
     spesifisemmalla saannolla (opacity .4) — se tarvitsee oman rivin. */
  .call-to-action.style-three .clients-carousel img { opacity: 1; }
}

/* 9.2 Yhteydenottosektion tumma tausta (.contact-section-three)

   Teeman `:after` on kapeilla näytöillä `top: 45%` eli tumma puolisko
   alkaa prosenttiosuudesta sektion korkeutta. Kun sisältö on suomeksi ja
   kuvasarake venyy, 45 % osuu lomakkeen yläpuolelle: valkoinen otsikko
   "Lähetä meille viesti" jäi valkoiselle taustalle näkymättömäksi.

   Sidotaan tausta lomakesarakkeeseen, jolloin se seuraa sisältöä
   korkeudesta riippumatta. Leveämmillä näytöillä teeman oma
   puolet-ja-puolet-jako toimii, joten sitä ei kosketa. */
@media (max-width: 991.98px) {
  .contact-section-three::after { display: none; }

  .contact-section-three .form-column {
    position: relative;
    z-index: 0;
    padding-top: 45px;
  }

  .contact-section-three .form-column::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -110px; /* sektion oma alapadding, jotta tausta yltää reunaan */
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background-color: var(--theme-color2);
    background-image: url(../images/icons/curve-lines.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;
  }
}

/* 9.3 Blogikorttien otsikko (.news-block.style-two)

   Teeman `.news-block .title { margin-bottom: 0 }` olettaa, että otsikon
   alla on heti "lue lisää". Etusivun korteissa välissä on ingressi, joka
   liimautui kiinni otsikkoon. */
.news-block.style-two .title { margin-bottom: 12px; }

/* 9.4 Toimintakehotteen painikkeet (.call-to-action.style-two)

   Painikkeet ovat inline-block ja saavat leveytensä tekstistä. Kapealla
   näytöllä ne rivittyvät allekkain, jolloin eri levyiset painikkeet
   näyttivät virheeltä. */
@media (max-width: 575.98px) {
  /* `mx-sm-3` antaa sivumarginaalin vasta 576 px:stä ylöspäin ja rivin
     -12 px:n gutter syö containerin paddingin, joten kapeimmilla
     näytöillä sisältö oli reunasta reunaan. Marginaali sarakkeeseen,
     jotta se koskee sekä otsikkoa, ingressiä että painikkeita. */
  .call-to-action.style-two .title-column {
    padding-left: 12px;
    padding-right: 12px;
  }

  .call-to-action.style-two .sec-title .d-flex > .theme-btn {
    width: 100%;
    text-align: center;
  }
}

/* 9.5 Palvelukorttien otsikot (.project-block-two)

   Teeman `.info-box` saa `padding-left: 50px` mutta ei lainkaan oikeaa
   paddingia. Kapeilla korteilla pitkä otsikko ("Kiinteistölämpöpumput")
   ulottui 3 px:n päähän kortin reunasta. */
.project-block-two .inner-box .info-box { padding-right: 20px; }

/* Otsikko on flex-lapsi, jolla on oletuksena `min-width: auto` = sanan
   min-content-leveys. Suomen pitkät yhdyssanat ("Kiinteistolampopumput")
   ovat leveampia kuin kortti, joten laatikko ei suostunut kapenemaan ja
   sana leikkautui `overflow: hidden` -reunasta.

   `overflow-wrap: anywhere` (ei `break-word`) on se arvo, joka pienentaa
   myos min-content-leveytta ja antaa laatikon kapeta — ilman sita sana
   valuu yli ja leikkautuu. Se on kuitenkin vain turvaverkko: selain
   katkaisee sanan mielivaltaisesta kohdasta ilman tavuviivaa, joten
   otsikkokoko lasketaan niin etta nykyiset nimet mahtuvat yhdelle
   riville. Pisin on "Kiinteistolampopumput" 331 px:n kortissa. */
.project-block-two .inner-box .title {
  min-width: 0;
  hyphens: auto;
  overflow-wrap: anywhere;
  font-size: 20px;
}

/* 9.6 Prosessisektion porrastus (.process-block)

   Teema nostaa joka toisen askeleen 35 px ylemmäs ja siirtää sen
   numeropallon ylös — porrastus on suunniteltu yhdelle viiden sarakkeen
   riville. Kun sarakkeet rivittyvät kahteen (tabletti) tai yhteen
   (mobiili), porrastus näyttää kohdistusvirheeltä ja numeropallot
   hyppivät. Teema piilottaa nuolikuvat jo 992 px:ssä; tasataan samalla
   rajalla myös porrastus. */
@media (max-width: 991.98px) {
  .process-block:nth-child(2) .inner-box,
  .process-block:nth-child(4) .inner-box { margin-top: 0; }

  .process-block:nth-child(2) .inner-box span,
  .process-block:nth-child(4) .inner-box span {
    left: -20px;
    top: 80%;
  }
}

/* 9.7 Yhteydenottosektion kuvasarake (.contact-section-three)

   `pr-md--0` nollaa sarakkeen oikean paddingin, jolloin kuva ulottui
   3 px:n päähän ruudun reunasta vasemman 15 px:n marginaalin rinnalla.
   Lisäksi `mb-md-100` jätti kuvan ja tumman lomakealueen väliin sata
   pikseliä tyhjää, joka oman 45 px:n yläpaddingin kanssa katkaisi
   sektion kahtia. */
@media (max-width: 991.98px) {
  /* Utilityt `pr-md--0` ja `mb-md-100` ovat !important, joten korjaus
     tarvitsee saman painon. */
  .contact-section-three .content-column {
    padding-left: 15px !important;
    padding-right: 12px !important;
    margin-bottom: 50px !important;
  }
}

/* 9.8 Esittelysektion kuvaryhmä (.about-section-four)

   Teema kaventaa kuvaryhmän 60 %:iin sarakkeesta alle 1200 px:ssä ja
   80 %:iin alle 768 px:ssä. Tablettileveydellä (768–991 px) 60 % jätti
   kuvan oikealle 250 px tyhjää. Yhtenäistetään alemman breakpointin
   kanssa. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .about-section-four .image-column .inner-column { max-width: 80%; }
}

/* =========================================================================
   10. YHTEYSTIEDOT-SIVU

   Sivu on kaksipalstainen (yhteystietolista + lomake). Kapealla palstat
   pinoutuvat, jolloin teema ei jätä niiden väliin mitään — "Lähetä viesti"
   -otsikko alkoi heti aukioloaikojen alta.
   ========================================================================= */
@media (max-width: 991.98px) {
  .contact-details__right { margin-bottom: 50px; }
}

/* Lomakekentät ovat täysleveitä; kapeimmalla myös lähetyspainike, jotta
   se ei jää puolikkaaksi kenttien alle. */
@media (max-width: 575.98px) {
  .contact-details .ep-form .theme-btn {
    width: 100%;
    text-align: center;
  }
}

/* =========================================================================
   11. SINISET TEKSTIPANEELIT (.energiatodistus-blue-panel)

   Sama komponentti on viidellä sivulla, kaksi kertaa kussakin. Se on
   kahden sarakkeen grid, joka kapealla vaihtuu yhteen sarakkeeseen:

       grid-template-columns: 1fr;   =  minmax(auto, 1fr)

   `auto`-minimi tarkoittaa raidan min-content-leveyttä, eikä grid suostu
   kapenemaan sen alle. Sisällön min-content oli 583 px, joten 390 px:n
   ruudulla paneelista jäi 193 px näkymättömiin ja jokaisen tekstirivin
   loppu leikkautui. Desktopin kaksisarakkeisessa tilassa on jo oikein
   `minmax(0, 1fr)`; tehdään samoin pinotussa tilassa.

   Sivujen omat <style>-lohkot tulevat dokumentissa tämän tiedoston
   jälkeen, joten sääntö tarvitsee suuremman spesifisyyden (0,2,0).
   ========================================================================= */
@media (max-width: 991.98px) {
  .energiatodistus-blue-panel .energiatodistus-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Grid-korjaus paljasti varsinaisen min-content-ajurin: teeman
   `.theme-btn` on `white-space: nowrap`, ja suomenkieliset kehotteet ovat
   pitkia ("Pyyda tarjous vesi-ilmalampopumpun asennuksesta" = 417 px).
   Yhdella rivilla ne eivat mahdu puhelimeen millaan. Sallitaan rivitys
   kapealla; desktopin mitoitus sailyy ennallaan. */
@media (max-width: 991.98px) {
  .theme-btn { white-space: normal; }
}

/* =========================================================================
   12. KELLUVA TUNNUSLUKULAATIKKO (.about-section-five .feature-box)

   Laatikko on `left: -60px` eli se limittyy kuvan yli desktopilla. Kapealla
   kuvasarake alkaa jo 15 px:sta, joten laatikko meni 45 px ruudun
   ulkopuolelle ja teksti "Vuoden kokemus" leikkautui muotoon
   "/uoden kokemus". Sisaryhmat about-section-six ja -nine kayttavat jo
   left: 0 / 30px, joten tama on poikkeus eika tarkoitettu ulkonema.
   ========================================================================= */
@media (max-width: 991.98px) {
  .about-section-five .image-column .feature-box { left: 0; }
}

/* =========================================================================
   13. `pe-0` PINOTUSSA LAYOUTISSA

   Tuotesivuilla tekstisarakkeella on `pe-0`, jotta se on desktopilla
   tiiviisti viereisen kuvan kyljessa. Kun sarakkeet pinoutuvat, utility
   vie oikean sivumarginaalin kokonaan: teksti oli 15 px vasemmalta mutta
   vain 3 px oikealta reunasta. Bootstrapin utility on !important, joten
   palautus tarvitsee saman painon. Koskee 11 sivua.
   ========================================================================= */
@media (max-width: 991.98px) {
  .content-column.pe-0 { padding-right: 12px !important; }
}

/* =========================================================================
   14. IKONIOTSIKKO (.offer-section-two .video-box .iconbox)

   Ikoni on absoluuttinen ja otsikolla on sen verran `padding-left: 120px`.
   Teema pinoaa ne allekkain vasta 355.98 px:ssa, mika on liian myohaan:
   390 px:n puhelimessa otsikolle jai 239 px, ja 31 px:n fontilla
   "ilmalampopumpun" katkesi keskelta sanaa.

   Nostetaan pinoutumisraja puhelimiin (575.98 px). Molemmat saannot pitaa
   siirtaa yhdessa — pelkka paddingin nollaus jattaisi ikonin tekstin
   paalle. 576 px:sta ylospain rinnakkaisasettelu toimii: otsikolle jaa
   426 px, johon pisin sana mahtuu.
   ========================================================================= */
@media (max-width: 575.98px) {
  .offer-section-two .image-column .video-box .iconbox .icon {
    margin-bottom: 20px;
    position: relative;
  }

  .offer-section-two .image-column .video-box .iconbox .title { padding-left: 0; }
}

/* =========================================================================
   15. LOMAKESEKTION TAUSTAKUVA (.video-item .video-box .image)

   Kuva on desktopilla nostettu sektion ylapuolelle (`top: -650px`), ja
   teema palauttaa sen paikalleen 992 px:ssa saannolla `position: relative;
   top: 0`. Viidella sivulla kuvalla on kuitenkin editorin kirjoittama
   inline-tyyli `top: -390px; bottom: 54.388px; max-height: 321.78px`,
   joka voittaa teeman saannon. Lopputulos mobiilissa: kuva piirtyi
   edellisen sektion paalle ja sen tilalle jai 243 px tyhjaa ennen
   "Ota yhteytta" -otsikkoa. Inline-tyylin voi kumota vain !importantilla.
   ========================================================================= */
@media (max-width: 991.98px) {
  .video-item .video-box .image {
    top: 0 !important;
    bottom: auto !important;
    max-height: none !important;
  }
}

/* =========================================================================
   16. TUMMAN LOMAKESEKTION KONTRASTIT (.video-section-two)

   Sektion tausta on #161520. Mitatut suhteet ennen korjausta:
     "Laita viestiä"        #767676  3.98:1
     ingressi               #767676  3.98:1   (AA vaatii 4.5)
     "Ma-Pe 8:00 - 20:00"   #105188  2.20:1   (kayttokelvoton)

   Syy otsikon ja ingressin osalta: teeman `.sec-title.light` vaalentaa vain
   h1–h3:n ja `.text`-luokan, mutta markupissa otsikko on
   `<p class="mb-20 h2">` ja ingressi pelkka `<p>`. Aukioloajan `.title` saa
   `--theme-color1`-sinisen, joka on tarkoitettu vaalealle taustalle.
   Koskee 9 sivua.
   ========================================================================= */
.video-section-two .sec-title.light .h2 { color: #ffffff; }
.video-section-two .sec-title.light p:not(.h2) { color: rgba(255, 255, 255, 0.82); }
.video-section-two .opening-hour .title { color: #79b8f0; }

/* =========================================================================
   17. KUVAN LEVEYS TABLETILLA (.offer-section-two .image-box .image)

   Teema kaventaa kuvan 75 %:iin sarakkeesta alle 992 px:ssa ja vapauttaa
   sen (`width: auto`) vasta alle 576 px:ssa. Tablettileveydella 75 % jatti
   kuvan oikealle 184 px tyhjaa, jossa ei ole mitaan — koristeblokki
   `:before` ulottuu vain 20 px kuvan yli. Tayteta sarake.
   ========================================================================= */
@media (min-width: 576px) and (max-width: 991.98px) {
  .offer-section-two .image-column .image-box .image { width: 100%; }
}

/* =========================================================================
   18. OTSIKOIDEN RIVINVAIHDOT (.sec-title h2 br)

   responsive.css:198 piilottaa otsikoiden rivinvaihdot alle 1024 px:ssa
   (`.sec-title h2 br { display: none }`). Tarkoitus on hyva — desktopille
   viritetyt rivitykset nayttavat kapealla oudoilta — mutta `display: none`
   poistaa rivinvaihdon kokonaan. Jos otsikossa ei ole valilyontia <br>:n
   ymparilla, sanat liimautuvat yhteen:

       'Kokonaisvaltaista<br>lampopumppupalvelua'
         -> "Kokonaisvaltaistalampopumppupalvelua"

   Tallaisia otsikoita on 44 kentassa. CSS ei voi muuttaa <br>:aa
   valilyonniksi (testattu: display:inline, ::after-content ja
   white-space palauttavat kaikki rivinvaihdon, eivat valilyontia),
   joten oikea ratkaisu on jattaa rivinvaihto nakyviin. Ylimaarainen
   rivi on selvasti pienempi haitta kuin vaarin kirjoitettu sana.
   ========================================================================= */
@media (max-width: 1023px) {
  /* Myös .h2 — editorissa otsikon voi muuttaa kappaleeksi (<p class="h2">),
     jolloin teeman `br { display: none }` osuu siihen ep-heading-classes.css:n
     kautta. Ilman tätä sanat liimautuisivat yhteen myös muunnetuissa
     otsikoissa. */
  .sec-title h2 br,
  .sec-title .h2 br { display: inline; }
}

/* =========================================================================
   19. HERO-KARTTA (.banner-section-one .home-ac-icon img)

   Neljalla tuotesivulla hero-kartan kuvalla on sivukohtainen
   `width: 620px !important; max-width: none !important`. Sailio
   (`.home-ac-icon`) kapenee media queryilla, mutta kuvan leveys ei, joten
   kuva jaa aina sailiota leveammaksi. Mitattu ylitys oikeasta reunasta:

       768 px -> 339 px    992 px -> 278 px
      1200 px -> 155 px   1440 px ->  35 px

   Tabletilla kartasta nakyi vain vasen puolisko: "EnePro Porvoo"
   -merkinta jai kokonaan ruudun ulkopuolelle. Sektion `overflow: hidden`
   piilotti ongelman mittareilta.

   Vasta >= 1400 px:ssa kartta on kaytannossa ehja (vain itareuna valuu
   hieman yli, mika on selvasti tarkoitettua). 1200 px:ssa sen sijaan
   "EnePro Porvoo" katkesi muotoon "EnePro Po...", joten korjaus ulottuu
   sinne asti.
   ========================================================================= */
@media (max-width: 1399.98px) {
  .banner-section-one .home-ac-icon.home-ac-icon {
    /* Sailio oli flex-lapsi, jonka leveyden maarasi kuvan 620 px. Kun kuva
       sidotaan sailioon, sailio tarvitsee oman leveyden — muuten se
       kutistuu (mitattu 136 px tabletilla). */
    width: 100% !important;
    min-width: 0;
  }

  .banner-section-one .home-ac-icon.home-ac-icon img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* Sivukohtainen CSS pinoaa hero-rivin vasta 767 px:ssa. Valilla 768–991 px
   rivi on viela vaakasuora, ja tekstipalsta vie kaiken tilan: kartta jai
   136 px levaksi tai — ilman kutistumista — tyontyi 269 px ruudun yli.
   Sama pinous kuin puhelimessa ratkaisee molemmat. Spesifisyys 0,4,0
   voittaa sivukohtaisen 0,3,0 -saannon. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .banner-section-one .auto-container > .d-flex.d-flex {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
  }

  .banner-section-one .home-ac-icon.home-ac-icon {
    margin: 25px auto 0;
    transform: none;
  }
}

/* =========================================================================
   20. VIHREA OSIO-OTSIKKO VAALEALLA TAUSTALLA

   Kolmella tuotesivulla "Tuotteet"-osion sub-title on brandivihrea
   #59E000 valkoisella. Kontrasti 1.74:1 — kaytannossa lukukelvoton.
   (Samaa vihreaa kaytetaan myos sinisilla paneeleilla, missa se on
   4.8:1 eli kunnossa; siihen ei kosketa.)

   Tummennettu sama savy sailyttaa brandivarin ja yltaa AA-tasolle.
   Sivukohtainen saanto on 0,3,0 ja dokumentissa taman jalkeen, joten
   tama tarvitsee 0,4,0.
   ========================================================================= */
.featured-products .sec-title .sub-title.sub-title { color: #2F7A00; }

/* =========================================================================
   21. KUVAKOLLAASI PUHELIMESSA (.about-section-four .image-column .image-2)

   Kollaasissa paakuva on vasemmalla ja pienempi kuva limittyy sen oikeaan
   ylakulmaan (desktopilla `right: -60px`). Teema siirtaa pienemman kuvan
   alle 576 px:ssa vasempaan reunaan (`left: 0; right: auto`), jolloin se
   asettuu suoraan paakuvan paalle — maalampopumput-sivulla kolme kuvaa
   kasaantui paallekkain ja kasvot peittyivat.

   Pidetaan kuva oikeassa reunassa myos puhelimessa, mutta ilman
   desktopin -60 px ulkonemaa.
   ========================================================================= */
@media (max-width: 575.98px) {
  .about-section-four .image-column .image-2 {
    left: auto;
    right: 0;
  }
}

/* =========================================================================
   22. ALAPALKIN YHTEYSTIEDOT (.features-section.style-two)

   Palkin tausta on lahes musta (#0E0D16), mutta korostusvari on
   `--theme-color1` (#105188) eli tumma brandisininen — kontrasti 2.35:1.
   Koskee sanaa "veloitukseton", puhelinnumeroa ja sahkopostiosoitetta,
   eli juuri sita mihin palkilla pyritaan. Sama vaalennettu sininen kuin
   osiossa 16 antaa 7.4:1.
   ========================================================================= */
.features-section.style-two .title-column .text-theme1,
.features-section.style-two .contact-column .text,
.features-section.style-two .contact-column a { color: #79b8f0; }

/* =========================================================================
   23. KOVAKOODATUT LEIPATEKSTIHARMAAT

   `--text-color` tummennettiin #333:een, mutta teemassa on 11 saantoa,
   joissa sama rooli on kirjoitettu suoraan: #6d8181 (4.11:1) ja #797f7d
   (4.08:1) valkoisella. Molemmat jaavat AA:n 4.5:1 alle ja erottuvat nyt
   muusta leipatekstista. Yhdenmukaistetaan.
   ========================================================================= */
.about-section .content-column .text-block p,
.about-section-three .content-column .text-block p,
.about-section-four .content-column .text-block p,
.about-section-five .content-column .text-block p,
.about-section-six .content-column .text-block p,
.about-section-seven .content-column .text-block p,
.testimonial-block-three .content-box .text,
.testimonial-block-three .designation,
.category-block p,
.category-block-two p,
.featured-products .filters li { color: var(--text-color); }

/* Teeman muut #767676-kohdat, jotka jaivat --text-color-muuttujan
   ulkopuolelle. Sama rooli, sama vari. */
.team-block .info-box .designation,
.team-block-two .info-box .designation,
.team-block-three .info-box .designation,
.team-block-four .info-box .designation,
.news-block .post-info li { color: var(--text-color); }

/* Etusivun "Miksi EnePro" -sektion leipateksti on #9898A0 valkoisella =
   2.86:1, selvasti muuta leipatekstia haaleampi. Vari tulee
   `.feature-block-*`-komponenteilta, jotka ovat tallä sivustolla aina
   vaalealla taustalla. */
.feature-block-two .text,
.feature-block-three .text,
.feature-block-four .text { color: var(--text-color); }

/* =========================================================================
   24. "VARAA KONSULTAATIO" -PAINIKE (.offer-section .image-column .video-box)

   Desktopilla ryhma on kuvan vasemmalla puolella: `.video-box` on
   `left: -140px` ja sen sisalla otsikko ja nuoli `right: 100%`. Kapealla
   kuvasarake alkaa jo 15 px:sta, joten koko ryhma valui ulos:

       .video-box   -105 .. 232
       a.play-btn   -105 ..  35     soittopainikkeesta nakyi 35 px
       h4.title     -442 .. -235    otsikko kokonaan ruudun ulkopuolella
       img.arrow    -275 .. -150

   Lisaksi sivun oma CSS varaa sisaltosarakkeeseen 200 px ylapaddingia
   tilaa tekemaan — mutta koska ryhma oli nakymatta, tilalle jai vain
   tyhjaa sinista.

   Kapealla ryhma laitetaan virtaan mukaan kuvan alle vaakariviksi.
   Nuoli on koriste, joka osoittaa oikealta vasemmalle, joten se ei toimi
   uudessa jarjestyksessa.
   ========================================================================= */
@media (max-width: 991.98px) {
  .offer-section .image-column .video-box {
    position: static;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 22px;
  }

  .offer-section .image-column .video-box .play-btn {
    position: static;
    flex: 0 0 auto;
  }

  .offer-section .image-column .video-box .title {
    position: static;
    right: auto;
    margin: 0;
  }

  .offer-section .image-column .video-box .arrow-icon { display: none; }

  /* Varattu tila ei ole enaa tarpeen. Sivukohtainen saanto on 0,3,0. */
  .offer-section .content-column .inner-column.inner-column { padding-top: 40px; }
}

/* =========================================================================
   25. KORTTIEN PIILOTETTU KUVAUS KOSKETUSNAYTOLLA (.project-static-grid-*)

   Viidella tuotesivulla korttiruudukon jokaisessa kortissa on
   `.hover-desc` — 950–1100 merkkia tekstia, joka on `max-height: 0;
   opacity: 0` ja paljastuu vain `:hover`illa. Kortti varaa silti
   puhelimessa 1050 px korkeutta juuri sita varten.

   Kosketusnaytolla hoveria ei kaytannossa ole, joten kayttaja selaa
   nelja taysruudun korkuista kuvaa ja nakee vain otsikot — sisalto jaa
   loytymatta ja korkeus on turhaa. Sama kuvio kuin osion 9.1
   kumppanilogoissa.

   Naytetaan kuvaus suoraan siella missa hoveria ei ole. Kortin korkeus
   pysyy samana, mutta se kantaa nyt sisaltonsa.

   Attribuuttivalitsin on kahdennettu, koska sivukohtainen saanto on
   yhta spesifinen (0,4,0) ja dokumentissa taman jalkeen.
   ========================================================================= */
@media (hover: none) {
  [class*="project-static-grid-"][class*="project-static-grid-"] .project-block-two .info-box .hover-desc {
    max-height: none;
    opacity: 1;
    overflow: visible;
    margin-top: 12px;
  }

  /* Sama asemointi kuin teeman hover-tilassa: sisalto ylareunasta, jotta
     kuvaus mahtuu kortin sisaan eika leikkaudu alareunasta. */
  [class*="project-static-grid-"][class*="project-static-grid-"] .project-block-two .info-box {
    justify-content: flex-start;
    padding-top: 55px;
  }

  /* Teeman tummennus on alareunan liukuvari, joka riittaa lyhyelle
     otsikolle. 680 px tekstia tarvitsee peiton koko kortille, muuten
     vaalea teksti jaa vaalean kuvan paalle keskiosassa. */
  [class*="project-static-grid-"][class*="project-static-grid-"] .project-block-two .info-box {
    background: rgba(18, 30, 51, 0.84);
  }

  [class*="project-static-grid-"][class*="project-static-grid-"] .project-block-two .info-box::after { opacity: 1; }
}

@media (hover: none) and (max-width: 575.98px) {
  [class*="project-static-grid-"][class*="project-static-grid-"] .project-block-two .info-box { padding-top: 35px; }
}

/* =========================================================================
   26. VALIKKOKATEGORIAT ILMAN OMAA SIVUA (.menu-parent)

   Lampopumput, Huolto, Energiapalvelut ja Yritys ovat pelkkia
   pudotusvalikon otsikoita — niilla ei ole omaa sivua, joten klikkaus vei
   404:aan. inc/pages.php renderoi ne nyt ilman href:ia. Ilman hrefia
   selain vaihtaa kursorin nuoleksi, mutta kohta avaa yha alavalikon, joten
   osoitin pidetaan.
   ========================================================================= */
.main-menu .navigation > li > a.menu-parent,
.mobile-menu .navigation > li > a.menu-parent { cursor: pointer; }

/* =========================================================================
   27. VIHREÄN PAINIKKEEN HOVER (.pricing-cta .theme-btn.btn-style-one)

   Kolmella sivulla tämä painike on brändivihreä tummansinisellä tekstillä,
   myös hoverissa:

       .pricing-cta .theme-btn.btn-style-one       { background:#59E000; color:#0f2c49 }
       .pricing-cta .theme-btn.btn-style-one:hover { background:#4bc400; color:#0f2c49 }

   Teeman `.btn-style-one::before` on kuitenkin vinottu pyyhkäisy, joka
   levittäytyy hoverissa 35 px:stä koko painikkeen yli — ja sen väri on
   `--theme-color3` eli sama #0f2c49 kuin teksti. Sivun oma tyyli ohittaa
   taustan muttei peitettä, joten hoverissa tumma peite täyttää vihreän ja
   teksti sulautuu siihen.

   Annetaan peitteelle sivun oma hover-vihreä. Pyyhkäisyanimaatio säilyy
   sellaisenaan, mutta lopputulos on se mitä sivun tyyli jo lupaa:
   hieman tummempi vihreä ja luettava tumma teksti.
   ========================================================================= */
.pricing-cta .theme-btn.btn-style-one::before { background-color: #4bc400; }

/* =========================================================================
   28. HOVER-PEITE MUILLA SIVUKOHTAISILLA PAINIKKEILLA

   Sama vika kuin osiossa 27, mutta kahdessa muussa painiketyypissä.
   Teeman `.btn-style-one::before` on vinottu pyyhkäisy, jonka väri on
   `--theme-color3` (#0f2c49). Kun sivu antaa painikkeelle oman
   tekstivärin, joka pätee myös hoverissa, teksti sulautuu peitteeseen.
   Mitattu hover-kontrasti ennen korjausta:

     hero-painike "Varaa ilmainen kartoitus"   1.00:1  (täysin näkymätön)
     "Kysy ... huollosta" sinisissä paneeleissa 1.73:1

   Molemmille annetaan peitteeksi se väri, jonka sivun oma tyyli on jo
   valinnut hover-tilaan — pyyhkäisyanimaatio säilyy ennallaan.
   ========================================================================= */

/* Hero-painike viidellä tuotesivulla: vihreä pohja, tumma teksti.
   Sivulla ei ole omaa hover-sääntöä, joten käytetään samaa tummempaa
   vihreää kuin osiossa 27. */
[class*="banner-section-one-green-bottom-"] .theme-btn.btn-style-one::before {
  background-color: #4bc400;
}

/* Sinisten paneelien painike viidellä sivulla. Sivun oma sääntö lupaa
   hoveriin valkoisen pohjan ja sinisen tekstin — annetaan peitteen
   toteuttaa se. */
.energiatodistus-green-btn::before { background-color: #ffffff; }

/* --------------------------------------------------------------------------
   29. Lomakkeen tietosuojahuomautus
   GDPR edellyttää, että rekisteröityä informoidaan tietojen keräämisen
   yhteydessä. Rivi on submit-napin yläpuolella jokaisessa lomakkeessa.

   Lomakkeita on kahta pohjaa: vaaleita (yhteystiedot, porvoo, laitila —
   valkoinen tausta) ja tummia (.contact-form etusivulla rgb(35,35,49),
   .contact-form1 viidellä tuotesivulla rgb(23,22,33)). Taustat on mitattu
   renderöidystä sivusta, ei arvattu.
   -------------------------------------------------------------------------- */
.ep-form-privacy {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-color);
}

.ep-form-privacy a {
  color: inherit;
  text-decoration: underline;
}

.ep-form-privacy a:hover,
.ep-form-privacy a:focus-visible {
  color: #105188;
}

/* Tummapohjaiset lomakkeet. */
.contact-form .ep-form-privacy,
.contact-form1 .ep-form-privacy {
  color: rgba(255, 255, 255, .85);
}

.contact-form .ep-form-privacy a:hover,
.contact-form .ep-form-privacy a:focus-visible,
.contact-form1 .ep-form-privacy a:hover,
.contact-form1 .ep-form-privacy a:focus-visible {
  color: #79b8f0;
}

/* --------------------------------------------------------------------------
   30. Päävalikon tila
   Valikkoon tuli "Yhteystiedot" (aiemmin klikkaamaton "Yritys"). Suomenkieliset
   otsikot ovat pitkiä ja rivi katkesi kahdelle riville jo 1440 px:ssä.

   Mitattuna: .auto-container on enintään 1200 px, ja .nav-outer jakaa siitä
   jäävän tilan valikon ja CTA-napin kesken. Viisi kohdetta vie 529 px, joten
   välit ratkaisevat. Otetaan main-boxin oikeasta täytteestä 20 px valikolle,
   jolloin teeman oma 40 px:n väli mahtuu.

   (Blogi oli hetken ylätasolla kuudentena, jolloin väli piti kutistaa 26 px:iin.
   Blogi siirrettiin footeriin, joten väljyys palautettiin.)
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1024px) {
  .header-style-three .header-lower .main-box {
    padding-right: 20px;
  }

  .main-menu .navigation > li {
    margin-right: 40px;
  }
}