/* ==========================================================================
   TCO-laskuri (digitaali/tco-calculator)

   Oma tiedosto eikä common.css, koska laskuri on yhden osion komponentti ja
   common.css latautuu koko sivustolle. Latausehto ja editorityyli:
   inc/gutenberg/gutenberg-modifications.php + functions.php.

   Perusteltu poikkeus "ei ad hoc -CSS" -sääntöön: aito interaktiivinen
   komponentti jolle ei ole valmista patternia.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Värit — laskuri on TUMMALLA osiolla, ja se on mitattu päätös eikä makuasia.

   YES-EU:n paletissa ei ole väriä joka kelpaisi korostukseksi vaalealla
   pohjalla: valkoista vasten primary #66CCBA saa kontrastin 1,92:1 ja
   mint #52E3BF 1,60:1, kun WCAG AA vaatii tekstiltä 4,5:1. Tummaa #191919:ää
   vasten samat värit ovat 9,14:1 ja 10,97:1.

   Osio on teeman `bg-darker-gray` (#1e1e1e) ja korostuspinnat `charcoal`
   (#272727). Mitatut kontrastit molempia vasten:
                         #1e1e1e   #272727
     primary   #66CCBA    8,66 ✅   7,76 ✅  korostus, sähkön sarake, erotus
     valkoinen #FFFFFF   16,67 ✅  14,94 ✅  luvut ja kenttien tekstit
     light-gray #E6E6E6  13,36 ✅  11,97 ✅  selitteet, yksiköt, vertailu
   Paletin `gray` #707070 jää 3,37:1:een, joten sitä EI käytetä tekstissä —
   selitteet erottuvat koolla ja painolla, eivät vaimeammalla värillä.

   Suunta ei jää värin varaan: Erotus-sarakkeessa on aina +/−-merkki.
   -------------------------------------------------------------------------- */
.dg-tco-calculator {
    /* Sähkö ja edullinen erotus: paletin oma korostusväri. */
    --tco-ev: var(--wp--preset--color--primary);
    /* Vertailtava ajoneuvo: neutraali vaalea, ei omaa korostusväriä —
       väri jää sinne missä se on informaatiota. */
    --tco-dsl: var(--wp--preset--color--light-gray);
    --tco-luku: var(--wp--preset--color--white);
    /* Erotus sähkön tappioksi: neutraali, ei hälyttävä. Paletissa ei ole
       virheväriä, eikä sellaista keksitä tähän. */
    --tco-erotus-neg: var(--wp--preset--color--light-gray);
    --tco-selite: var(--wp--preset--color--light-gray);
    /* Reunat läpikuultavina, jotta ne toimivat sekä #191919- että
       #272727-pohjalla ilman omaa sävyään. */
    --tco-border: rgba(255, 255, 255, 0.22);
    --tco-korostepohja: var(--wp--preset--color--charcoal);

    color: var(--wp--preset--color--white);
}

/* Otsikossa ei ole has-*-font-size-luokkaa: tässä teemassa ei ole
   fonttikokopresettejä, joten koko tulee tästä. */
.dg-tco__heading {
    margin: 0 0 25px;
    color: var(--wp--preset--color--white);
    font-size: 2rem;
    line-height: 1.2;
}

/* --- Syöttökentät --------------------------------------------------------- */
.dg-tco__inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.dg-tco__group {
    border: 1px solid var(--tco-border);
    border-radius: 0;
    padding: 20px var(--wp--preset--spacing--25) var(--wp--preset--spacing--25);
    margin: 0;
    min-inline-size: 0; /* estä gridin ylivuoto */
}

/* Ryhmän otsikko teeman otsikkokielellä. Malli on `.dg-properties-list dt`
   (style.css): sama rooli eli tietoryhmän nimi, sama condensed 700 / 1,2rem /
   isot kirjaimet. Kirjasin on kapea, joten 1rem luki pienempänä kuin se
   pistekokonsa perusteella oli. */
.dg-tco__group legend {
    font-family: "urw-din-condensed", "urw-din-fallback", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 0 8px;
    color: var(--wp--preset--color--white);
}

.dg-tco__group--ev legend { color: var(--tco-ev); }
.dg-tco__group--dsl legend { color: var(--tco-dsl); }

/* Tulosteen tunnistetiedot: piilossa ruudulla, näkyvät vain @media printissä */
.dg-tco__print-meta { display: none; }

.dg-tco__group-desc {
    margin: 0 0 5px;
    font-size: 0.9rem;
    color: var(--tco-selite);
}

.dg-tco__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 15px;
}

.dg-tco__field-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wp--preset--color--white);
}

/* Kenttä venyy sarakkeen mittaan ja yksikkö jää sen viereen. Kiinteä
   maksimileveys jättäisi leveällä näytöllä sarakkeen oikean puolen tyhjäksi:
   1400px:n osiossa sarake on 453px ja kenttä olisi 140px. */
.dg-tco__field-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Kenttä tummalla pohjalla: kulmikas kuten teeman napit ja lomakekentät,
   oma tausta jotta se erottuu osion pohjasta ilman paksua reunaa. */
.dg-tco__field-input input {
    flex: 1 1 auto;
    inline-size: auto;
    min-inline-size: 0;
    min-block-size: 57px;
    padding-inline: 20px;
    border: 1px solid var(--tco-border);
    border-radius: 0;
    font-size: 1rem;
    color: var(--wp--preset--color--white);
    background: var(--tco-korostepohja);
}

.dg-tco__field-input input:focus-visible {
    outline: 2px solid var(--tco-ev);
    outline-offset: 1px;
    border-color: transparent;
}

/* Tyhjä tai epäkelpo kenttä: view.js merkitsee sen `aria-invalid`illa ja
   yhteenveto vaihtuu kehotukseksi. Reunus on näkyvä vihje samasta asiasta —
   pelkkä aria-attribuutti näkyisi vain ruudunlukijalle.
   ⚠️ Paletissa ei ole virheväriä, joten tila erottuu valkoisella 2px reunalla
   eikä omalla sävyllään. Jos Tiksi määrittelee virhevärin, se tulee tähän. */
.dg-tco__field-input input[aria-invalid="true"] {
    border-color: var(--wp--preset--color--white);
    border-width: 2px;
}

.dg-tco__field-unit {
    flex: 0 0 auto;
    /* Yksiköille kiinteä sarake, jotta kentät päättyvät samalle pystylinjalle
       vaikka yksikkötekstit ovat eri mittaisia ("€" vs. "kWh/100 km"). */
    inline-size: 105px;
    font-size: 0.85rem;
    color: var(--tco-selite);
    white-space: nowrap;
}

/* --- Tulostaulukko -------------------------------------------------------- */
.dg-tco__table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

/* Vieritettävä säiliö taulukolle (render.php: .dg-tco__table-scroll).
   Taulukon min-content-leveys on neljällä sarakkeella suurempi kuin kapea
   näyttö, ja teeman body/html { overflow-x: clip } leikkaisi Erotus-sarakkeen
   pois ilman mahdollisuutta vierittää se näkyviin. Leveällä näytöllä säiliö
   ei tee mitään. */
.dg-tco__table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.dg-tco__table-scroll:focus-visible {
    outline: 2px solid var(--tco-ev);
    outline-offset: 2px;
}

.dg-tco__table th,
.dg-tco__table td {
    padding: 12px 15px;
    text-align: right;
    border-bottom: 1px solid var(--tco-border);
}

.dg-tco__table thead th {
    background: var(--tco-korostepohja);
    font-weight: 700;
    border-bottom: 2px solid var(--tco-ev);
}

.dg-tco__table th[scope="row"] {
    text-align: left;
    font-weight: 600;
    color: var(--wp--preset--color--white);
}

/* Sarakkeiden luvut neutraaleina — sarake tunnistuu otsikosta, joten väri ei
   kertoisi niissä mitään uutta. */
.dg-tco__col-ev,
.dg-tco__col-dsl { color: var(--tco-luku); }

.dg-tco__table thead .dg-tco__col-ev { color: var(--tco-ev); }
.dg-tco__table thead .dg-tco__col-dsl,
.dg-tco__table thead .dg-tco__col-diff { color: var(--wp--preset--color--white); }

/* Erotus on ainoa sarake jossa väri kertoo jotain: onko erä sähkön eduksi. */
.dg-tco__col-diff.is-positive { color: var(--tco-ev); font-weight: 600; }
.dg-tco__col-diff.is-negative { color: var(--tco-erotus-neg); font-weight: 600; }

/* Summarivi erottuu samalla korostuspohjalla kuin otsikkorivi + teal
   yläviivalla. Värit ovat samat kuin muillakin riveillä, joten erotussolu
   pysyy tealina myös tässä. */
.dg-tco__total th,
.dg-tco__total td {
    font-size: 1.15rem;
    font-weight: 700;
    border-bottom: none;
    border-top: 2px solid var(--tco-ev);
    background: var(--tco-korostepohja);
}

/* --- Lopputulema ---------------------------------------------------------
   Taulukko on todistusaineisto, tämä on vastaus — ja se on ainoa paikka jossa
   korostus toimii kaikilla näytöillä. 390px:ssä taulukon Erotus-sarake jää
   137px vieritysalueen ulkopuolelle, joten siihen laitettu korostus ei näy
   puhelimessa ennen kuin kävijä vierittää. Tämä lohko on täysleveä.

   Luku on teeman OTSIKKOKIRJASIMELLA (urw-din-condensed) eikä leipätekstin
   Interillä: kapea DIN-numero on tässä koossa sekä tiiviimpi että samaa
   kieltä kuin osion h2. Rivinvaihtoa ei tarvitse estää, koska luvun
   välilyönnit ovat sitomattomia (render.php / view.js).
   -------------------------------------------------------------------------- */
/* Summarivin Erotus-solu korostetaan umpitealilla: se on taulukon lopputulos.
   🔑 Vain POSITIIVISENA — vihreä tarkoittaa säästöä, joten tappiollisena se
   valehtelisi. Tappiollinen jää summarivin omalle korostuspohjalle.
   Teksti on pakko kääntää mustaksi: musta tealilla on 10,91:1, valkoinen
   1,92:1. Myös solun `::before` (korttinäkymän "Erotus"-nimiö) kääntyy. */
.dg-tco__total .dg-tco__col-diff.is-positive {
    background: var(--tco-ev);
    color: var(--wp--preset--color--black);
}

.dg-tco__total .dg-tco__col-diff.is-positive::before {
    color: var(--wp--preset--color--black);
}

.dg-tco__summary {
    margin-block-start: var(--wp--preset--spacing--25);
    padding: 40px var(--wp--preset--spacing--25);
    background: var(--tco-korostepohja);
    border-block-start: 2px solid var(--tco-ev);
    border-radius: 0;
    text-align: center;
    color: var(--wp--preset--color--white);
}

.dg-tco__summary-johdanto,
.dg-tco__summary-loppu {
    margin: 0;
    font-size: 1rem;
    color: var(--tco-selite);
}

.dg-tco__summary-luku {
    margin: 4px 0;
    font-family: "urw-din-condensed", "urw-din-fallback", sans-serif;
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 1.05;
    color: var(--tco-ev);
}

/* Väri seuraa etumerkkiä samalla logiikalla kuin taulukon Erotus-sarake:
   sähkön eduksi korostusväri, tappioksi neutraali vaalea. Ei hälyttävää
   väriä — paletissa ei ole sellaista, eikä dieselin edullisuus ole virhe.
   Suunta ei jää värin varaan, koska luvussa on +/−-merkki. */
.dg-tco__summary-luku.is-positive { color: var(--tco-ev); }
.dg-tco__summary-luku.is-negative { color: var(--tco-erotus-neg); }

/* Tasatulos tai keskeneräinen syöte: lukua ei ole, ja johdanto kantaa koko
   lauseen. Ilman tätä tyhjä <p> jättäisi lohkoon aukon. */
.dg-tco__summary--neutraali .dg-tco__summary-luku,
.dg-tco__summary--neutraali .dg-tco__summary-loppu {
    display: none;
}

.dg-tco__summary--neutraali {
    padding-block: 25px;
}

.dg-tco__summary--neutraali .dg-tco__summary-johdanto {
    font-size: 1.15rem;
    color: var(--wp--preset--color--white);
}

/* --- "Tallenna PDF" ------------------------------------------------------- */
.dg-tco__actions {
    margin-top: 25px;
}

/* Sama nappikieli kuin teeman muissa napeissa (inc/gutenberg/css/buttons.css):
   2px primary-reunus, läpinäkyvä tausta, suorat kulmat, 12,5px/30px pehmuste.
   ⚠️ Nuoli-ikonia EI oteta mukaan, vaikka teeman napeissa se on: nuoli lupaa
   siirtymää, ja tämä nappi avaa tulostusikkunan samalla sivulla. */
.dg-tco__print {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12.5px 30px;
    border: 2px solid var(--tco-ev);
    border-radius: 0;
    background: transparent;
    color: var(--wp--preset--color--white);
    font-size: 0.9rem;
    line-height: 1.6;
    font-weight: 700;
    cursor: pointer;
}

/* Ikoni tekstin eteen maskina, ei <img>:nä: maski ottaa värinsä
   `currentColor`ista, joten se kääntyy valkoisesta mustaksi hoverissa yhdessä
   tekstin kanssa. Kiinteävärinen kuva katoaisi teal-pohjalle. */
.dg-tco__print::before {
    content: "";
    flex: 0 0 auto;
    inline-size: 16px;
    block-size: 16px;
    background-color: currentColor;
    -webkit-mask: url("../images/icon-pdf.svg") no-repeat center / contain;
    mask: url("../images/icon-pdf.svg") no-repeat center / contain;
}

.dg-tco__print:hover,
.dg-tco__print:focus {
    background: var(--tco-ev);
    /* Teal-pohjalla musta teksti on 10,91:1 — valkoinen olisi 1,92:1. */
    color: var(--wp--preset--color--black);
}

.dg-tco__print:focus-visible {
    outline: 2px solid var(--wp--preset--color--white);
    outline-offset: 2px;
}

/* --- Responsiivinen ------------------------------------------------------- */
/* Ryhmät ovat vierekkäin: selite varataan kahden rivin korkuiseksi, jotta
   kenttien ensimmäinen rivi alkaa kaikissa sarakkeissa samalta korkeudelta.
   Ilman tätä pidempi selite ("Ajoneuvovero sisältää käyttövoimaveron.")
   rivittyy kahdelle ja työntää sarakkeen 23px muita alemmas. Pinotussa
   näkymässä varausta ei tehdä — siellä se olisi vain tyhjää tilaa. */
@media (min-width: 901px) {
    .dg-tco__group-desc {
        min-block-size: 3em;  /* varasarvo: 2 riviä line-heightilla 1,5 */
        min-block-size: 2lh;
    }
}

@media (max-width: 900px) {
    .dg-tco__inputs { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .dg-tco__heading { font-size: 1.6rem; }
    .dg-tco__summary { padding-block: 30px; }
    .dg-tco__summary-luku { font-size: 2.6rem; }
}

/* --------------------------------------------------------------------------
   Taulukko → kortit kapealla näytöllä.

   Neljä saraketta ei mahdu puhelimeen: mitattuna taulukon min-leveys on 477px
   ja säiliö 340px, jolloin **Erotus-sarake jäi 137px vieritysalueen
   ulkopuolelle**. Se on sivun kiinnostavin sarake, joten vaakavieritys piilotti
   juuri sen mitä kävijä tuli katsomaan.

   Kortissa jokainen kustannuserä on oma lohkonsa: rivin nimi otsikkona ja
   kolme arvoa nimettyinä alla. Sarakeotsikot piilotetaan näkyvistä ja niiden
   teksti tulee soluihin `data-label`ista.

   🔴 `display: block` poistaa selaimen taulukkosemantiikan, joten render.php
   kirjoittaa roolit (`role="table"`, `row`, `cell`, `rowheader`) näkyviin.
   Ilman niitä ruudunlukija lukisi tämän irrallisina kappaleina.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Vieritystä ei enää tarvita — myös fokuskehys pois, koska säiliö ei ole
       enää vieritettävä eikä siis toiminnallinen. */
    .dg-tco__table-scroll {
        overflow: visible;
    }

    .dg-tco__table,
    .dg-tco__table thead,
    .dg-tco__table tbody,
    .dg-tco__table tfoot,
    .dg-tco__table tr,
    .dg-tco__table th,
    .dg-tco__table td {
        display: block;
    }

    /* Sarakeotsikot pois näkyvistä mutta ruudunlukijalle jäljelle. */
    .dg-tco__table thead {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .dg-tco__table tbody tr,
    .dg-tco__table tfoot tr {
        margin-block-end: 12px;
        border: 1px solid var(--tco-border);
        padding: 4px 0;
    }

    /* Kortin otsikko: kustannuserän nimi. */
    .dg-tco__table th[scope="row"] {
        padding: 10px 15px 8px;
        border-block-end: 1px solid var(--tco-border);
        font-size: 1rem;
        text-align: left;
    }

    /* Arvorivi: nimi vasemmalle, luku oikealle. */
    .dg-tco__table td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 15px;
        padding: 7px 15px;
        border-block-end: none;
        text-align: right;
    }

    .dg-tco__table td::before {
        content: attr(data-label);
        flex: 0 1 auto;
        min-inline-size: 0;
        color: var(--tco-selite);
        font-weight: 400;
        text-align: left;
    }

    /* Summakortti erottuu korostuspohjalla ja teal-reunalla. */
    .dg-tco__table tfoot tr {
        border-color: var(--tco-ev);
        background: var(--tco-korostepohja);
        margin-block-end: 0;
    }

    .dg-tco__total th,
    .dg-tco__total td {
        border-top: none;
        background: transparent;
    }

    .dg-tco__total th[scope="row"] {
        border-block-end: 1px solid var(--tco-ev);
    }
}

/* --------------------------------------------------------------------------
   Print / PDF-tallennus: näytä vain laskuri, piilota muu sivu.

   Tuloste on VALKOISELLA paperilla, joten tummat värit käännetään takaisin:
   valkoinen teksti ei tulostu, ja teal #66CCBA jäisi paperilla 1,92:1:een.
   -------------------------------------------------------------------------- */
@media print {
    /* Tuloste on paperinlevyinen, joten korttinäkymää ei haluta — se voisi
       muuten jäädä voimaan jos selain soveltaa kapean näytön media-kyselyä
       tulostettaessa. */
    .dg-tco__table,
    .dg-tco__table thead,
    .dg-tco__table tbody,
    .dg-tco__table tfoot { display: revert; }
    .dg-tco__table tr { display: table-row; }
    .dg-tco__table th,
    .dg-tco__table td { display: table-cell; }
    .dg-tco__table thead {
        position: static;
        inline-size: auto;
        block-size: auto;
        clip-path: none;
    }
    .dg-tco__table td::before { content: none; }

    body:has(.dg-tco-calculator) * {
        visibility: hidden;
    }
    body:has(.dg-tco-calculator) .dg-tco-calculator,
    body:has(.dg-tco-calculator) .dg-tco-calculator * {
        visibility: visible;
    }

    .dg-tco-calculator {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 100%;
        /* Paperille: mustat tekstit, harmaat korostuspohjat, näkyvät reunat. */
        --tco-ev: var(--wp--preset--color--black);
        --tco-dsl: var(--wp--preset--color--black);
        --tco-luku: var(--wp--preset--color--black);
        --tco-erotus-neg: var(--wp--preset--color--black);
        --tco-selite: var(--wp--preset--color--black);
        --tco-border: #999999;
        --tco-korostepohja: var(--wp--preset--color--off-white);
        color: var(--wp--preset--color--black);
        background: var(--wp--preset--color--white);
    }

    .dg-tco-calculator .dg-tco__heading,
    .dg-tco-calculator .dg-tco__field-label,
    .dg-tco-calculator .dg-tco__group legend,
    .dg-tco-calculator .dg-tco__table th[scope="row"],
    .dg-tco-calculator .dg-tco__summary,
    .dg-tco-calculator .dg-tco__summary-johdanto,
    .dg-tco-calculator .dg-tco__summary-loppu,
    .dg-tco-calculator .dg-tco__summary-luku {
        color: var(--wp--preset--color--black);
    }

    /* Paperilla lohko ei tarvitse yhtä paljon ilmaa eikä yhtä isoa lukua. */
    .dg-tco__summary { padding-block: 20px; }
    .dg-tco__summary-luku { font-size: 2.2rem; }

    /* Erotuksen suunta ei saa jäädä värin varaan paperilla: +/−-merkki kertoo
       sen, ja edullinen erottuu lihavoinnilla. */
    .dg-tco__col-diff.is-positive { font-weight: 700; }

    /* Summarivin teal-korostus pois paperilta: print-blokki vaihtaa
       --tco-ev:n mustaksi, joten korostus olisi mustaa mustalla. */
    .dg-tco__total .dg-tco__col-diff.is-positive {
        background: var(--wp--preset--color--light-gray);
        color: var(--wp--preset--color--black);
    }

    /* Nappi ei kuulu tulosteeseen */
    .dg-tco__actions {
        display: none;
    }

    /* Syöttöarvot tekstinä (ilman input-kehyksiä) tulosteessa */
    .dg-tco__inputs {
        margin-bottom: 25px;
    }
    .dg-tco__field-input input {
        border: 0;
        padding: 0;
        max-inline-size: none;
        inline-size: auto;
        font-weight: 600;
        background: transparent;
        color: var(--wp--preset--color--black);
    }

    /* Vältä ryhmien ja taulukon katkeaminen sivunvaihdossa */
    .dg-tco__group,
    .dg-tco__table {
        break-inside: avoid;
    }

    /* Vieritys pois tulosteesta — muuten säiliö leikkaisi taulukon reunan */
    .dg-tco__table-scroll {
        overflow: visible;
    }

    /* Tunnistetiedot esiin: logo + päivämäärä + osoite tulosteen ylälaitaan,
       jotta PDF:stä näkee kenen laskuri ja milloin tehty (render.php). */
    .dg-tco__print-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--tco-border);
    }
    .dg-tco__print-logo {
        inline-size: auto;
        max-block-size: 50px;
    }
    .dg-tco__print-source {
        margin: 0;
        font-size: 0.9rem;
        color: var(--wp--preset--color--black);
        text-align: right;
    }
}