/* =====================================================================
   siivouspalvelu.css  –  luovutussiivous-loppusiivous.php
   Väriteema: muuta värit tästä alta. Kaikki sivun värit tulevat näistä.
   ===================================================================== */

/* ── TEEMA: varit (mekon värit, tummempi) – OLETUS ── */
:root {
    --si-tumma:        #211819;   /* tumma pohja (kangas)          */
    --si-korostus:     #D92662;   /* vadelmanpinkki (taskut), syvempi */
    --si-korostus-rgb: 217,38,98;
    --si-nappi-teksti: #FFFFFF;   /* nappien teksti pinkillä        */
    --si-vaalea:       #E9DEDB;   /* vaalea teksti tummalla        */
    --si-linkki:       #A3123A;   /* linkit vaalealla pohjalla     */
    --si-aksentti:     #D85B47;   /* oranssi (raidallinen tasku)   */
    --si-tausta:       #ECE4E1;   /* vaaleiden osioiden pohja      */
    --si-overlay:      33,24,25;  /* hero-kuvan tummennus (rgb)    */
    --si-kuvio:        160,147,143; /* harmaat renkaat (rgb)       */
    --si-teksti:       #2E2527;   /* leipäteksti vaalealla pohjalla */
    --si-teksti-heikko:#4A3F41;   /* kuvaukset ja pienet tekstit    */
}

/* ── TEEMA: sininen (vaihtoehto, <main class="teema-sininen">) ── */
#sisalto.teema-sininen,
:root:has(#sisalto.teema-sininen) {
    --si-tumma: #1E3557; --si-korostus: #F2B8C6; --si-korostus-rgb: 242,184,198;
    --si-vaalea: #E4E9F0; --si-linkki: #2F5D9A; --si-aksentti: #D9849A;
    --si-tausta: #EEF1F5; --si-overlay: 30,53,87; --si-kuvio: 184,194,206;
    --si-teksti: #26303D; --si-teksti-heikko: #3F4B5B; --si-nappi-teksti: #1E3557;
}

#sisalto .nappi-ensisijainen { background: var(--si-korostus); border-color: var(--si-korostus); color: var(--si-nappi-teksti); }
#sisalto .yritys-hinnat-osio a:not(.nappi) { color: var(--si-korostus); }
/* ── Hero ── */
.yritys-hero { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; }
.yritys-hero-kuva {
    position: absolute; inset: 0;
    background: center/cover no-repeat;
}
.yritys-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(var(--si-overlay),.35) 5%, rgba(var(--si-overlay),.30) 100%);
}
.yritys-hero-sisalto { position: relative; z-index: 1; max-width: 640px; padding: 4rem 0; }
.yritys-hero-badge {
    display: inline-block; background: var(--si-korostus); color: var(--si-tumma);
    font-size: .8rem; font-weight: 800; padding: .35rem 1rem; border-radius: 2rem;
    letter-spacing: .05em; margin-bottom: 1.5rem; text-transform: uppercase;
}
.yritys-hero-sisalto h1 { font-size: clamp(2rem, 4vw, 3rem); color: white; margin-bottom: 1.25rem; line-height: 1.1; }
.yritys-hero-sisalto h1 span { display: block; color: var(--si-korostus); font-size: .55em; margin-top: .5rem; }
.yritys-hero-sisalto p { color: var(--si-vaalea); font-size: 1.1rem; line-height: 1.7; margin-bottom: 2rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.yritys-hero-napit { display: flex; flex-wrap: wrap; gap: 1rem; }
.yritys-tilastot { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.15); }
.yritys-tilastot-kohta strong { display: block; font-size: 1.6rem; font-weight: 900; color: var(--si-korostus); }
.yritys-tilastot-kohta span { font-size: .85rem; color: var(--si-vaalea); }

/* ── Palvelut ── */
.yritys-palvelut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.yritys-palvelu-kortti { background: #fff; border-radius: var(--rl); padding: 2rem; box-shadow: var(--sh); border-top: 4px solid var(--si-korostus); transition: transform .2s, box-shadow .2s; }
.yritys-palvelu-kortti:hover { transform: translateY(-4px); box-shadow: var(--sl); }
.yritys-palvelu-ikoni { margin-bottom: 1rem; }
.yritys-palvelu-kortti h3 { color: var(--si-tumma); margin-bottom: .75rem; }
.yritys-palvelu-kortti p  { color: var(--si-teksti-heikko); font-size: .93rem; line-height: 1.7; }

/* ── Vaiheet ── */
.ty-vaiheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; counter-reset: vaihe; list-style: none; padding: 0; }
.ty-vaiheet li { position: relative; background: #fff; border-radius: var(--rl); box-shadow: var(--sh); padding: 2rem 1.5rem 1.5rem 5rem; }
.ty-vaiheet li::before {
    counter-increment: vaihe; content: counter(vaihe);
    position: absolute; left: 1.25rem; top: 1.5rem;
    width: 2.6rem; height: 2.6rem; border-radius: 50%;
    border: 3px solid var(--si-aksentti); color: var(--si-aksentti);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 1.2rem;
}
.ty-vaiheet h3 { color: var(--si-tumma); margin-bottom: .4rem; font-size: 1.05rem; }
.ty-vaiheet p  { color: var(--si-teksti-heikko); font-size: .92rem; line-height: 1.6; }

/* ── Kuolinpesä ── */
.ty-kuolinpesa { background: var(--si-tausta); }
.ty-kahtia { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; }
.ty-kahtia > div { flex: 1 1 320px; }
.ty-kahtia h2 { color: var(--si-tumma); margin-bottom: 1rem; }
.ty-kahtia p  { color: var(--si-teksti); line-height: 1.8; margin-bottom: 1rem; }
.ty-kahtia img { width: 100%; height: auto; border-radius: var(--rl); box-shadow: var(--sl); }

/* ── Hinnat ── */
.yritys-hinnat-osio { background: var(--si-tumma); }
.yritys-hinnat-osio h2 { color: var(--si-korostus); text-align: center; margin-bottom: .75rem; }
.yritys-hinnat-osio .osio-kuvaus { color: var(--si-vaalea); }
.yritys-hinnat-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; margin-top: 3rem; }
.yritys-hinta-kortti { flex: 1 1 280px; max-width: 380px; background: rgba(255,255,255,.07); border: 2px solid rgba(var(--si-korostus-rgb),.3); border-radius: var(--rl); padding: 2.5rem; display: flex; flex-direction: column; }
.yritys-hinta-kortti h3 { color: var(--si-korostus); margin-bottom: .5rem; }
.yritys-hinta-summa { font-size: 2.2rem; font-weight: 900; color: white; margin-bottom: .5rem; }
.yritys-hinta-summa span { font-size: 1rem; color: var(--si-vaalea); }
.ty-kuorma { color: var(--si-korostus); font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
.ty-esim   { color: var(--si-vaalea); font-size: .85rem; font-style: italic; margin-bottom: 1.25rem; line-height: 1.5; }
.yritys-hinta-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; flex-grow: 1; }
.yritys-hinta-lista li { color: var(--si-vaalea); font-size: .92rem; display: flex; gap: .5rem; }
.yritys-hinta-lista li::before { content: '✓'; color: var(--si-korostus); font-weight: 700; flex-shrink: 0; }
.ty-hinta-huom { text-align: center; color: var(--si-vaalea); font-size: .9rem; margin-top: 2rem; }

/* ── Kuvat ── */
.ty-galleria { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.ty-galleria figure { margin: 0; }
.ty-galleria img { width: 100%; height: 240px; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh); }
.ty-galleria figcaption { font-size: .85rem; color: var(--si-teksti-heikko); margin-top: .5rem; }

/* ── Alueet ── */
.ty-alueet { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.ty-alueet h3 { color: var(--si-tumma); margin-bottom: .5rem; }
.ty-alueet p  { color: var(--si-teksti-heikko); font-size: .9rem; line-height: 1.7; }

/* ── Lomake + info ── */
.yritys-cta-osio { background: var(--si-tausta); }
.yritys-cta-grid { display: flex; flex-wrap: wrap; gap: 4rem; align-items: flex-start; }
.yritys-cta-info { flex: 1 1 280px; }
.yritys-cta-info h2 { color: var(--si-tumma); margin-bottom: 1rem; }
.yritys-cta-info p  { color: var(--si-teksti-heikko); line-height: 1.8; margin-bottom: 1.5rem; }
.yritys-cta-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.yritys-cta-lista li { display: flex; gap: .75rem; align-items: flex-start; color: var(--si-tumma); font-size: .95rem; }
.yritys-cta-lista li::before {
    content: '✓'; background: var(--si-korostus); color: var(--si-tumma); width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 900; flex-shrink: 0; margin-top: .1rem;
}
.yritys-lomake-wrap { flex: 1 1 320px; background: #fff; border-radius: var(--rl); padding: 2.5rem; box-shadow: var(--sl); }
.yritys-lomake-wrap h3 { color: var(--si-tumma); margin-bottom: 1.5rem; }
.kentta { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.kentta label { font-weight: 600; font-size: .88rem; color: var(--si-tumma); }
.kentta input, .kentta textarea {
    width: 100%; border: 1.5px solid var(--si-vaalea); border-radius: .5rem; padding: .75rem 1rem;
    font-family: "Montserrat", sans-serif; font-size: .93rem; color: var(--si-tumma); background: #fff; transition: border-color .15s;
}
.kentta input:focus, .kentta textarea:focus { outline: none; border-color: var(--si-korostus); box-shadow: 0 0 0 3px rgba(var(--si-korostus-rgb),.2); }
.kentta textarea { resize: vertical; min-height: 100px; }
.kentta-valinta { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9rem; color: var(--si-tumma); margin-bottom: 1.25rem; cursor: pointer; }
.kentta-valinta input { width: 1.2rem; height: 1.2rem; accent-color: var(--si-korostus); }
.ty-ansa { position: absolute; left: -9999px; }
.ty-ilmoitus { padding: 1rem 1.25rem; border-radius: .5rem; margin-bottom: 1.25rem; font-weight: 600; }
.ty-ilmoitus.ok    { background: #dcfce7; color: #166534; }
.ty-ilmoitus.virhe { background: #fee2e2; color: #991b1b; }

/* ── FAQ ── */
.yritys-faq-grid { display: flex; flex-direction: column; gap: 1rem; max-width: 760px; margin-inline: auto; }
.yritys-faq-kohta { background: #fff; border-radius: var(--r); box-shadow: var(--sh); overflow: hidden; }
.yritys-faq-kohta details summary { padding: 1.25rem 1.5rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--si-tumma); list-style: none; }
.yritys-faq-kohta details summary::-webkit-details-marker { display: none; }
.yritys-faq-kohta details summary .faq-nuoli { font-size: 1.4rem; color: var(--si-korostus); transition: transform .2s; flex-shrink: 0; }
.yritys-faq-kohta details[open] summary .faq-nuoli { transform: rotate(45deg); }
.yritys-faq-kohta details p { padding: 0 1.5rem 1.25rem; color: var(--si-teksti-heikko); line-height: 1.7; }

/* ── Mobiili ── */
@media (max-width: 768px) {
    .yritys-hero { min-height: 420px; }
    /* tumma overlay myös mobiilissa, jotta valkoinen teksti erottuu */
    .yritys-hero-overlay { background: linear-gradient(to bottom, rgba(var(--si-overlay),.55) 0%, rgba(var(--si-overlay),.80) 100%); }
    .yritys-cta-grid { gap: 2rem; }
    .ty-kahtia { gap: 2rem; }
}



/* ── Siivoussivun lisät ── */
.yritys-hero-kuva { background-image: url("../images/siivouspalvelu/asunnon-tyhjenys-loppusiivous-1.jpg"); }
.si-ketju { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; counter-reset: ketju; }
.si-ketju article { position: relative; background: #fff; border-radius: var(--rl); box-shadow: var(--sh); padding: 2rem 1.5rem 1.5rem; border-top: 4px solid var(--si-aksentti); }
.si-ketju article::before {
    counter-increment: ketju; content: counter(ketju);
    position: absolute; top: -1.3rem; left: 1.5rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
    background: var(--si-aksentti); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.si-ketju h3 { color: var(--si-tumma); margin: .5rem 0 .5rem; }
.si-ketju p  { color: var(--si-teksti-heikko); font-size: .93rem; line-height: 1.7; }
.si-ketju a  { display: inline-block; margin-top: .75rem; font-weight: 700; color: var(--si-linkki); font-size: .9rem; }
.si-banneri { margin-top: 2.5rem; text-align: center; background: var(--si-tumma); color: var(--si-korostus); border-radius: var(--rl); padding: 1.5rem; font-weight: 800; font-size: 1.15rem; }
.si-banneri span { display: block; color: var(--si-vaalea); font-weight: 500; font-size: .95rem; margin-top: .35rem; }
.si-kenelle { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.si-kenelle article { background: #fff; border-radius: var(--rl); box-shadow: var(--sh); padding: 1.75rem; border-left: 4px solid var(--si-korostus); }
.si-kenelle h3 { color: var(--si-tumma); margin-bottom: .5rem; }
.si-kenelle p  { color: var(--si-teksti-heikko); font-size: .93rem; line-height: 1.7; }
.si-lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.si-lista li { display: flex; gap: .65rem; color: var(--si-teksti); line-height: 1.6; }
.si-lista li::before { content: '✓'; color: var(--si-linkki); font-weight: 900; flex-shrink: 0; }
.si-lista.lisa li::before { content: '+'; color: var(--si-aksentti); }
.si-laatikko { background: #fff; border-radius: var(--rl); box-shadow: var(--sh); padding: 2rem; }
.si-laatikko h3 { color: var(--si-tumma); margin-bottom: 1rem; }
.si-tiimi img { width: 100%; height: auto; border-radius: var(--rl); box-shadow: var(--sl); }

/* ── KUVIOT: varit ── */
#sisalto.teema-varit .osio:not(.yritys-hinnat-osio) {
    background-color: var(--si-tausta);
    background-image: repeating-radial-gradient(circle at 36px 36px, rgba(var(--si-kuvio),.22) 0 3px, transparent 3px 8px, rgba(var(--si-kuvio),.22) 8px 10px, transparent 10px 36px);
    background-size: 72px 72px;
}
#sisalto.teema-varit .yritys-hinnat-osio {
    background-color: var(--si-tumma);
    background-image:
        radial-gradient(circle, transparent 0 9px, rgba(var(--si-kuvio),.28) 9px 11px, transparent 11px 17px, rgba(var(--si-kuvio),.28) 17px 19px, transparent 19px),
        radial-gradient(circle, rgba(var(--si-kuvio),.38) 0 3px, transparent 4px);
    background-size: 64px 64px, 64px 64px;
}
#sisalto.teema-varit .yritys-hinta-kortti { background: rgba(33,24,25,.88); border-color: rgba(var(--si-korostus-rgb),.45); }
#sisalto.teema-varit .yritys-hinta-kortti:nth-child(2) { border-color: var(--si-aksentti); }
#sisalto.teema-varit .si-ketju article:nth-child(even) { border-top-color: var(--si-korostus); }
#sisalto.teema-varit .si-banneri { background-image: radial-gradient(circle at 95% 50%, rgba(var(--si-korostus-rgb),.35) 0 40px, transparent 41px); }
#sisalto.teema-varit .ty-kuolinpesa { background-color: #E3D9D5; }

/* ── KUVIOT: sininen ── */
#sisalto.teema-sininen .osio:not(.yritys-hinnat-osio) {
    background-color: var(--si-tausta);
    background-image:
        radial-gradient(circle at 20px 20px, rgba(var(--si-kuvio),.33) 6px, transparent 7px),
        repeating-linear-gradient(135deg, transparent 0 22px, rgba(var(--si-kuvio),.13) 22px 24px);
    background-size: 60px 60px, auto;
}
#sisalto.teema-sininen .yritys-hinnat-osio {
    background-color: var(--si-tumma);
    background-image:
        radial-gradient(circle at 8% 15%, rgba(var(--si-korostus-rgb),.18) 0 90px, transparent 91px),
        radial-gradient(circle at 92% 85%, rgba(var(--si-korostus-rgb),.12) 0 140px, transparent 141px);
}
#sisalto.teema-sininen .yritys-hinta-kortti { background: rgba(255,255,255,.06); }
#sisalto.teema-sininen .si-banneri { background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,.05) 18px 20px); }

/* ── NAVIGAATIO JA FOOTER tällä sivulla teeman väreihin ──────────────
   Tiedosto ladataan vain tällä sivulla, joten muut sivut pysyvät vihreinä.
   --------------------------------------------------------------------- */
.site-header { background: var(--si-tumma); border-bottom: 3px solid var(--si-korostus); }
.site-header .logo,
.site-header .paanav a { color: var(--si-vaalea); }
.site-header .paanav a:hover,
.site-header .paanav a:focus-visible,
.site-header .paanav a[aria-current="page"] { color: #F25A8C; }
.site-header .dropdown { background: var(--si-tumma); border-color: rgba(var(--si-korostus-rgb),.4); }
.site-header .hamburger-viiva { background: var(--si-vaalea); }
.site-header .cta-puhelin { background: var(--si-korostus); color: #fff; }
@media (max-width: 900px) {
    .site-header .paanav { background: var(--si-tumma); }
}

.site-footer { background: var(--si-tumma); color: var(--si-vaalea); border-top: 3px solid var(--si-korostus); }
.site-footer h2,
.site-footer .footer-logo { color: #F25A8C; }
.site-footer a,
.site-footer p,
.site-footer li,
.site-footer address { color: var(--si-vaalea); }
.site-footer a:hover { color: #F25A8C; }
.site-footer .footer-copyright { color: rgba(233,222,219,.7); border-color: rgba(233,222,219,.15); }

/* ── Tekstien tummuus (yliajaa sivuston yleiset harmaat) ── */
#sisalto .osio-kuvaus { color: var(--si-teksti-heikko); }
#sisalto .yritys-hinnat-osio .osio-kuvaus { color: var(--si-vaalea); }

/* ── Pinkki tekstinä tummalla pohjalla: hieman vaaleampi sävy, jotta luettavuus säilyy ── */
#sisalto.teema-varit .yritys-hinnat-osio h2,
#sisalto.teema-varit .yritys-hinta-kortti h3,
#sisalto.teema-varit .ty-kuorma,
#sisalto.teema-varit .yritys-hero-sisalto h1 span,
#sisalto.teema-varit .yritys-tilastot-kohta strong,
#sisalto.teema-varit .si-banneri { color: #F25A8C; }
#sisalto.teema-varit .yritys-hinta-lista li::before { color: #F25A8C; }
#sisalto.teema-varit .yritys-hero-badge { color: #fff; }

/* ── Hampurilaisnappi tummalla headerilla ──
   #hamburger + !important, jotta sivuston style.css ei voita */
#hamburger,
#hamburger:hover,
#hamburger:focus,
#hamburger:active,
#hamburger[aria-expanded="true"] {
    background: transparent !important;
    border-color: rgba(233,222,219,.35) !important;
    -webkit-tap-highlight-color: transparent;
}
#hamburger:focus-visible { outline: 2px solid #F25A8C; outline-offset: 2px; }
#hamburger .hamburger-viiva,
#hamburger .hamburger-viiva::before,
#hamburger .hamburger-viiva::after,
#hamburger[aria-expanded="true"] .hamburger-viiva {
    background: #E9DEDB !important;
    background-color: #E9DEDB !important;
    border-color: #E9DEDB !important;
}

/* ── Kehysnappi (Pyydä tarjous) heroon teeman väreihin ── */
#sisalto .nappi-kehys { border-color: #F25A8C !important; color: #fff !important; }
#sisalto .nappi-kehys:hover,
#sisalto .nappi-kehys:focus-visible { background: rgba(242,90,140,.15); }

/* ── Mobiili: hero-kuva enemmän esille ── */
@media (max-width: 768px) {
    .yritys-hero-overlay {
        background: linear-gradient(to bottom,
            rgba(var(--si-overlay), .20) 0%,
            rgba(var(--si-overlay), .45) 45%,
            rgba(var(--si-overlay), .75) 100%);
    }
    /* vahvempi varjo tekstille, jotta se pysyy luettavana vaaleammalla taustalla */
    .yritys-hero-sisalto h1,
    .yritys-hero-sisalto p,
    .yritys-tilastot-kohta span {
        text-shadow: 0 2px 8px rgba(0,0,0,.8);
    }
}