/* ===================================================================
   Lomahaku.fi — VAALEA TEEMAVARIANTTI
   Ladataan main.css:n JÄLKEEN. Yliajaa :root-muuttujat (kääntää koko
   muuttujapohjaisen ulkoasun) + kovakoodatut tummat kohdat.
   Aktivointi: ?theme=light  TAI  option mokkivinkki_theme=light
   =================================================================== */

:root {
    /* Vihreä: tummempi sävy, jotta toimii sekä tekstinä että napin pohjana vaalealla */
    --primary:        #0c7a3a;
    --primary-hover:  #0a6831;
    --primary-dim:    rgba(12, 122, 58, 0.10);
    --primary-glow:   rgba(12, 122, 58, 0.15);

    /* Taustat vaaleiksi (--bg-dark = "osiotausta", kääntyy myös footerissa/herossa) */
    --bg-dark:        #f3f7f4;
    --bg-body:        #ffffff;
    --bg-card:        #ffffff;
    --bg-card-hover:  #f4f8f5;
    --bg-secondary:   #eef4f0;
    --bg-input:       #ffffff;

    --border-color:   rgba(20, 40, 30, 0.12);
    --border-light:   rgba(20, 40, 30, 0.07);

    /* Tekstit tummiksi (kontrastit valkoista vasten: primary 14.5:1, secondary ~6:1) */
    --text-primary:   #14241b;
    --text-secondary: #50625a;
    --text-muted:     #6b7d73;

    /* Kevyemmät varjot vaalealle */
    --shadow-sm:   0 2px 8px rgba(20, 40, 30, 0.06);
    --shadow-md:   0 6px 22px rgba(20, 40, 30, 0.08);
    --shadow-lg:   0 10px 40px rgba(20, 40, 30, 0.10);
    --shadow-glow: 0 6px 22px rgba(12, 122, 58, 0.14);
}

/* Body-perustausta varmuuden vuoksi */
body { background: var(--bg-body); color: var(--text-secondary); }

/* Napit & badget: dark-on-bright (#0a1a10) -> valkoinen teksti tummanvihreällä pohjalla */
.btn-primary,
.btn-primary:hover,
.cabin-badge,
.cabin-badge-hero,
.pagination-wrap .current { color: #ffffff; }

/* Korostusgradientti otsikoissa: vaaleanvihreä gradientti olisi näkymätön valkoisella -> tummanvihreä */
.text-gradient {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: var(--primary);
    color: var(--primary);
}

/* Sticky header vaaleaksi (sisällön värit kääntyvät muuttujilla) */
.site-header { background: rgba(255, 255, 255, 0.85); }
.site-header.scrolled { background: rgba(255, 255, 255, 0.96); }

/* Karttapopupin linkki luettavaksi vaalealla */
.mv-map-popup a { color: var(--primary); }

/* Lomahaku-pistekortin & FAQ:n vihreä palkki säilyy (var(--primary)) — automaattinen */

/* ── Kunta-/alue-/hiihtokeskus-hero: otsikot ovat tumman KUVA-overlayn päällä -> valkoinen
      (muuten ne perisivät tumman --text-primary -värin ja katoaisivat overlaylle) ── */
.city-hero-title, .region-hero-title, .ski-hero-title { color: #ffffff; }

/* ── ETUSIVUN HERO: taustakuva + tumma overlay + valkoinen teksti ── */
.hero-section {
    background-image: linear-gradient(180deg, rgba(8,20,13,0.45) 0%, rgba(8,20,13,0.64) 100%),
        url('/wp-content/uploads/etusivu-hero-jarvimaisema-suomi.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-section .hero-title { color: #ffffff; }
.hero-section .hero-subtitle { color: rgba(255,255,255,0.88); }
.hero-section .text-gradient {
    background: none; -webkit-text-fill-color: #13ec5b; color: #13ec5b;
}
.hero-section .section-badge { background: rgba(255,255,255,0.16); color: #ffffff; }
.hero-section .hero-tags-label { color: rgba(255,255,255,0.78); }
.hero-section .hero-tag {
    background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.30); color: #ffffff;
}
.hero-section .hero-tag:hover { border-color: #13ec5b; color: #13ec5b; }