/* Muuttujat (fontit + värit) */
:root{
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-base: 16px;
  --fs-small: 14px;

  --fs-h1: 38px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  
  

/*
  --fs-base: 17px;
  --fs-small: 15px;
  --fs-h1: 32px;
  --fs-h2: 22px;
  --fs-h3: 18px;
*/

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;

  --bg:#f7f8f7;
  --paper:#ffffff;
  --text:#111318;
  --muted:#667085;
  --brand:#1b5e20;
  --brand-2:#2e7d32;
  --border:#e6e8eb;
  
  --option-selected-bg:#e3efe6;
  /*
  --option-selected-bg:#f3f7f4;
  */
  
  
  --shadow:0 1px 2px rgba(0,0,0,.06);
  --header-height:72px;
}

/* Kevyt reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block;height:auto}

body{
  font-family:var(--font-sans);
  font-size:var(--fs-base);
  font-weight:var(--fw-normal);
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
}

h1, h2, h3{
  font-family:var(--font-sans);
  margin:0 0 10px;
  line-height:1.2;
  color: #243B2E;
}

h1{ font-size:var(--fs-h1); font-weight:var(--fw-bold); }
h2{ font-size:var(--fs-h2); font-weight:var(--fw-bold); }
h3{ font-size:var(--fs-h3); font-weight:var(--fw-medium); }



a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(100%,1200px);
  margin-inline:auto;
  padding:16px;
}

figure{margin:0}

/* HEADER */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:transparent;
  border-bottom:none;
  box-shadow:none;
  z-index:20;
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.is-scrolled{
  background:transparent;
  border-bottom:none;
  box-shadow:none;
}

.site-header.is-scrolled a,
.site-header.is-scrolled .brand span{
  color:#ffffff;
}

.header-container{
  width:min(100%,1920px);
  margin-inline:auto;
  padding-inline:16px;
}

.site-header.is-scrolled .header-container{
  border-radius:0;
  background:rgba(68,99,79,0.9);
  box-shadow:0 2px 6px rgba(0,0,0,0.20);
}

.site-header a,
.site-header .brand span,
.site-header .nav-toggle{
  color:#ffffff;
  text-shadow:0 0 4px rgba(0,0,0,1);
}

.site-header .container{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:flex-start;
  position:relative;
}

.site-header .container a,
.site-header .container .brand span{
  font-size:17px;
  letter-spacing:.6px;
  line-height:1.2;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  flex:1 1 auto;
  min-width:0;
}

.site-header .brand img{
  height:32px;
  width:auto;
}

.nav-toggle{
  margin-left:auto;
  background:none;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  font-size:18px;
  line-height:1;
}

/* NAV (mobiili drawer) */
.nav{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:260px;
  display:flex;
  flex-direction:column;
  background:rgba(68,99,79,1);
  border-left:1px solid rgba(255,255,255,0.15);
  padding:52px 16px 16px;
  margin:0;
  box-shadow:0 10px 30px rgba(0,0,0,0.18);
  gap:8px;
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:15;
}
.nav.open{ transform:translateX(0); }

.nav a{
  padding:10px 12px;
  border-radius:3.2px;
  color:#fff;
}
.nav a.btn{ background:#eef2ef; color:#111; }
.nav a.btn-primary{ background:#243B2E; color:#fff; }

.nav-close{
  position:absolute;
  top:12px;
  right:12px;
  background:none;
  border:none;
  color:#fff;
  font-size:28px;
  line-height:1;
  padding:6px;
  cursor:pointer;
  opacity:.85;
  z-index:20;
}
.nav-close:hover{opacity:1}

@media (min-width:980px){
  .nav{
    position:static;
    display:flex;
    flex-direction:row;
    background:none;
    border:0;
    padding:0;
    margin:0;
    box-shadow:none;
    gap:16px;
    margin-left:auto;
    transform:none;
    width:auto;
  }
  .nav-toggle{display:none}
  .nav-close{display:none !important}
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:600;
  line-height:1;
  padding:10px 22px;
  border-radius:6px;
  border:none;
  background:var(--paper);
}

.btn-primary{
  background:#243B2E;
  color:#fff;
  border-color:#243B2E;
  text-decoration:none !important;
  letter-spacing:.7px;
  opacity:1 !important;
}

.btn-primary:hover{
  background:#2C4A3A;
  border-color:#2C4A3A;
}

/* HERO */
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  min-height:320px;
  height:75vh;
  max-height:750px;
  display:flex;
  align-items:center;
}

.hero-bg{
  position:absolute;
  top:calc(-1 * var(--header-height));
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1920px,100vw);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.hero-inner{
  position:relative;
  z-index:2;
  padding-block:48px 64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:1200px;
  margin-inline:auto;
  padding-inline:16px;
}

.hero.hero--small{
  height:40vh;
  min-height:40vh;
  max-height:none;
}

.hero.hero--small .hero-inner{
  padding-top:32px;
  padding-bottom:16px;
}

.hero.hero--small + .features .container,
.hero + .features .container{
  padding-top:48px;
}

@media (max-width:719px){
  .hero{height:60vh; max-height:none;}
  .hero-inner{padding-block:32px;}
}

/* FEATURES / CARDS */
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-block:18px;
}
.card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
}

@media (min-width:720px){
  .cards{grid-template-columns:repeat(3,1fr)}
}

.features--single .cards{
  grid-template-columns:1fr !important;
}

/*
.features--single .container{
  max-width:760px;
  margin-inline:auto;
}
*/

/* Kavenna vain varaus-stepit (ei hinnastoa eikä muita sivuja) */
#step1 > .container,
#step2 > .container,
#step3 > .container,
#step4 > .container{
  max-width:760px;
  margin-inline:auto;
}

/* Tiiviimpi Step 3 (Omat tiedot) */
#step3 .booking-form{
  gap: 8px;            /* oli 12px */
}

#step3 .booking-label{
  margin-bottom: 6px;  /* oli 10px */
  gap: 3px;            /* oli 4px */
  max-width: none;
}

#step3 .booking-label input{
  padding: 7px 10px;   /* oli 8px 10px */
}

/* Varaus-stepit: lisää tilaa otsikon alle */
#step1 h2,
#step2 h2,
#step3 h2,
#step4 h2 {
  margin-bottom: 20px; /* kokeile 24px jos haluat vielä ilmavampaa */
}

/* Step3: yrityskenttien lohko */
#step3 #customerForm .company-fields[hidden]{
  display:none !important;
}

#step3 #customerForm .company-fields{
  display:grid;
  gap:8px;              /* sama rytmi kuin formissa */
  margin-top:0px;        /* pieni hengitys radiovalinnan jälkeen */
}

#customerForm .company-fields {
  display: grid;
  gap: 8px;          /* sama kuin booking-form */
  margin-bottom: 0px;
}

/* pieni väli yrityskenttien ja “omien tietojen” väliin */
#step3 #customerForm .form-divider{
  height:1px;
  background:var(--border);
  margin:10px 0 2px;
}


/* STEP 1: plussa rivin loppuun */
#step1 .booking-option{
  /* vaihdetaan flex -> grid jotta nimi/hinta/plussa pysyy rivillä */
  display: grid;
  grid-template-columns: 1fr auto auto; /* nimi | hinta | plussa */
  align-items: center;
  column-gap: 12px;
}

/* varmistus: nimi ei pudota hintaa/plussaa alle */
#step1 .booking-option .option-title{
  min-width: 0;
}

/* STEP 1: hillitty iso plussa rivin oikeassa reunassa */
#step1 .booking-option{
  display: grid;
  grid-template-columns: 1fr auto auto; /* nimi | hinta | plussa */
  align-items: center;
  column-gap: 14px;
}

/* itse plussa */
#step1 .booking-option .option-add{
  font-size: 28px;          /* selvästi isompi */
  font-weight: 300;         /* kevyt, elegantti */
  line-height: 1;
  color: var(--muted);      /* ei huuda */
  user-select: none;
  transition: color .15s ease, transform .15s ease;
}

/* hover: vain pieni korostus */
#step1 .booking-option:hover .option-add{
  color: var(--brand);
  /*transform: scale(1.15);*/
}

/* valittuna: plussa korostuu mutta ei muutu ikoniksi */
#step1 .booking-option:has(input[type="radio"]:checked) .option-add{
  color: var(--brand);
}




/*
.price-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
}
.price-row dt,
.price-row dd{
  margin:0;
}
.price-row dd{
  white-space:nowrap;
  font-weight:600;
}
*/

/* =========================
   HINNASTO (eristetty, ei riipu varaus-sivusta)
   Käytä hinnasto-sivulla käärettä: <section class="features price">...</section>
========================= */

.price .price-list{
  margin: 0;
  padding: 0;
}

.price .price-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;

  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.price .price-row:last-child{
  border-bottom: 0;
}

.price .price-row dt,
.price .price-row dd{
  margin: 0;
}

.price .price-row dt{
  font-weight: 600;      /* palvelunimi bold */
  min-width: 0;          /* estää “puskemisen” */
}

.price .price-row dd{
  white-space: nowrap;
  font-weight: 600;
}

/* jos haluat että hinnat ovat vähän tummemmat/selkeämmät */
.price .price-row dd{
  color: var(--text);
}

/* mobiilissa nimi saa mennä useammalle riville, hinta pysyy oikealla */
@media (max-width: 520px){
  .price .price-row{
    align-items:flex-start;
  }
  .price .price-row dt{
    overflow: hidden;
  }
}



/* BOOKING */
.booking-form{
  display:grid;
  gap:12px;
  margin-top:6px;
}

.booking-fieldset{
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;   /* tärkeä flex/grid-yhteyksissä */
}

.form-note{
  color:var(--muted);
  font-size:.9rem;
}

/* ===== Varaus – palvelulista (KORJATTU) ===== */
.booking-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* IMPORTANT: label on klikattava rivi */
.booking-option{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--paper);
  cursor:pointer;

  transition:border-color .2s ease, background-color .2s ease;
}

.booking-option:hover{
  border-color:var(--brand);
  background:var(--option-selected-bg); /*#f3f7f4;*/
}

/* piilota radio, mutta jätä toiminnalliseksi */
.booking-option > input[type="radio"]{
  position:absolute;
  opacity:0;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}

/* nimi vasemmalle */
.option-title{
  flex:1 1 auto;
  min-width:0;             /* tämä estää hinnan putoamisen alle */
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* hinta oikealle */
.option-meta{
  flex:0 0 auto;
  font-weight:700;
  color:var(--brand);
  white-space:nowrap;
}






/* valittu rivi: EI palkkia, vain tausta + reunus */
.booking-option:has(input[type="radio"]:checked){
  border-color:var(--brand);
  /*background:#eef5ef;*/
  background:var(--option-selected-bg);
}

/* mobiilissa nimi saa mennä kahdelle riville */
@media (max-width:520px){
  .option-title{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
}

/* ===== Varaus – aikavalinta ===== */

.booking-label{
  display:grid;
  gap:4px;              /* oli 8px */
  /*max-width:480px;*/
  margin-bottom:10px;  /* oli 16px */
  font-size:15px;
}

.booking-label small{
  color:var(--muted);
  font-size:14px;
}

.booking-label input{
  padding:8px 10px;     /* oli 12px */
  border-radius:6px;
  border:1px solid var(--border);
  font:inherit;
  line-height:1.4;
}

.terms-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:8px;
  font-size:15px;
  line-height:1.4;
}

.terms-check input{
  margin-top:2px;
}


.time-slots{ margin-bottom:24px; }
.time-slots h3{ margin-bottom:12px; }

.time-slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  gap:8px;
}

.time-slot{
  padding:10px 0;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--paper);
  font-weight:600;
  text-align:center;
  cursor:pointer;
}
.time-slot:hover{
  border-color:var(--brand);
  /*background:#f3f7f4;*/
  background:var(--option-selected-bg);
}
.time-slot.selected{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.time-slot.disabled{
  opacity:.35;
  cursor:not-allowed;
}

/* step-nappulat */
.booking-actions--split{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:24px;
}
@media (max-width:600px){
  .booking-actions--split{ flex-direction:column; }
}

/* ===== Varaus – siirtymänapit (wizard) ===== */
.booking-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* jos vain seuraava → oikealle */
  gap:12px;
  margin-top:24px;
}

.booking-actions.has-both{
  justify-content:space-between; /* edellinen vasen, seuraava oikea */
}

.booking-actions .btn{
  min-width:160px;
}

/* mobiilissa voidaan pitää samalla rivillä jos mahtuu, muuten allekkain */
@media (max-width:520px){
  .booking-actions.has-both{
    flex-direction:column;
    align-items:stretch;
  }
  .booking-actions.has-both .btn{
    width:100%;
  }
}

.btn-secondary{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}
.btn-secondary:hover{ background:rgba(0,0,0,0.04); }

/* Piilotus ilman layout-häiriötä */
[hidden]{display:none !important;}

/* Date-input: ei placeholder-kikkoja, koska value on aina asetettu */
#booking-date{
  width:100%;
  max-width:420px;
}

/* Step 3: ehdot checkbox */
.terms-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:8px;
}

.terms-check input{
  margin-top:4px;
  width:18px;
  height:18px;
}

.terms-check a{
  text-decoration: underline;
}


/* Hero-small + kaikki varaus-stepit saavat saman ylätilan */
.hero.hero--small ~ #step1 > .container,
.hero.hero--small ~ #step2 > .container,
.hero.hero--small ~ #step3 > .container,
.hero.hero--small ~ #step4 > .container{
  padding-top: 48px;
}


/* Lomakekentät täysleveiksi mobiilissa */
@media (max-width: 640px){
  .booking-label,
  .booking-label input{
    max-width: 100%;
    width: 100%;
  }
}

/* =========================
   STEP 3 / customerForm: asiakastyyppi (vain tässä lomakkeessa)
========================= */

/* Radio-rivi */
#customerForm{
  /* jos haluat yleisesti tiiviimmäksi step3:ssa:
     gap: 10px;  (mutta tämä koskee koko formia)
  */
}

#customerForm .customer-type-row{
  display:flex;
  gap:12px;
  align-items:stretch;
  margin-bottom:12px;
}

/* Yksi "pilleri"-vaihtoehto */
#customerForm .customer-type-option{
  flex:1 1 0;
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--paper);

  cursor:pointer;
  user-select:none;

  font-weight:600;
  font-size:15px;
  line-height:1.2;

  transition:border-color .2s ease, background-color .2s ease;
}

#customerForm .customer-type-option:hover{
  border-color:var(--brand);
  /*background:#f3f7f4;*/
  background:var(--option-selected-bg);
}

/* Piilota oikea radio, mutta jätä se toiminnalliseksi */
#customerForm .customer-type-option input[type="radio"]{
  position:absolute;
  opacity:0;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer;
}

/* Valittu tyyli */
#customerForm .customer-type-option:has(input[type="radio"]:checked){
  border-color:var(--brand);
  /*background:#eef5ef;*/
  background:var(--option-selected-bg);
}

/* Mobiilissa: jos ei mahdu, allekkain */
@media (max-width:520px){
  #customerForm .customer-type-row{
    flex-direction:column;
  }
}


/* ===== Header: ostoskori-ikoni (vain mobiili) ===== */

/* ===== Header: ostoskori-ikoni (täsmälleen hampurilaisen kokoinen) ===== */
.cart-toggle{
  /*display:none;*/
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* KOPIOIDAAN nav-toggle 1:1 */
  background:none;
  border:1px solid var(--border);
  padding:10px 12px;          /* SAMA kuin .nav-toggle */
  border-radius:12px;
  font-size:18px;             /* SAMA kuin .nav-toggle */
  line-height:1;

  position:relative;
  text-decoration:none !important;
  color:#fff;
  text-shadow:0 0 0px rgba(0,0,0,1);
}

.cart-toggle:hover{ text-decoration:none; }

.cart-icon{
  width:22px;
  height:22px;
  fill:currentColor;
  /*transform: translateX(-3px);*/
  margin-left:-6px;   /* EI riko layout-mittoja */
  margin-bottom:-4px;   /* EI riko layout-mittoja */
  display:block;      /* estää inline-SVG baseline-venytyksen */  
}

/* badge: aina näkyvissä, terävä, ei varjoa/borderia, siirto oikealle */
.cart-badge{
  position:absolute;
  top:4px;          /* hieman alemmas */
  right:4px;        /* hieman oikeammalle */

  min-width:18px;
  height:18px;
  padding:0 4px;

  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  font-weight:700;
  line-height:1;

  background: white;
  color:black;

  border:1px solid rgba(0,0,0,0.5);

  /* TÄMÄ POISTAA “SISÄVARJON”/HAALISTUMAN */
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  -webkit-filter:none !important;

  /* jos jossain on opacity/blur -kikkoja */
  opacity:1;
}


/* mobiilissa: kori näkyviin (ilman että kosketaan hampurilaisen marginaaleihin) */
@media (max-width:719px){
  .cart-toggle{ display:inline-flex; }
}

@media (min-width:720px){
  .cart-toggle{
    display:inline-flex;
    margin-left:auto; /* erottaa navista */
  }
}



/* ===== FOOTER (sellaisenaan) ===== */
.site-footer{ margin-top:40px; border-top:0; background:transparent; }
.footer-bg{ position:relative; background:transparent; }

.site-footer-inner{
  width:min(100%,1920px);
  margin-inline:auto;
  padding:100px 16px 40px;
  position:relative;
  z-index:1;
  background-color:#44634F;
  background-image:url("/assets/img/footerBackground2.png");
  background-repeat:repeat-x;
  background-position:top center;
  background-size:auto 220px;
}

.footer-grid{ display:grid; gap:20px; }
.footer-heading{ font-size:22px; font-weight:600; margin:0 0 8px; }
.footer-nav{ display:flex; flex-direction:column; gap:4px; }

.footer-newsletter{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:280px;
}

.footer-newsletter input{
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.45);
  background:rgba(0,0,0,0.18);
  color:#fff;
}
.footer-newsletter input::placeholder{ color:rgba(255,255,255,0.85); }

.footer-content{
  width:min(100%,1200px);
  margin-inline:auto;
}

.site-footer-inner, .site-footer-inner p, .site-footer-inner a, .footer-content, .footer-content *{
  color:#fff !important;
}
.site-footer-inner a:hover{ color:rgba(255,255,255,0.75) !important; }

.footer-text{ display:flex; align-items:center; column-gap:6px; margin:2px 0; }
.footer-text::before{
  content:"";
  width:14px; height:14px;
  flex-shrink:0;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.85;
  transform:translateY(1px);
}

.footer-text.email::before{ background-image:url('/assets/img/email.svg'); background-size:15px 15px; }
.footer-text.hours::before{ background-image:url('/assets/img/clock.svg'); background-size:12px 12px; }
.footer-text.location::before{ background-image:url('/assets/img/location.svg'); background-size:15px 15px; }
.footer-text.ytunnus::before{ background-image:url('/assets/img/id-card.svg'); background-size:20px 20px; }

@media (min-width:720px){
  .footer-grid{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1.2fr) minmax(260px,1.2fr);
    align-items:flex-start;
  }
  .footer-newsletter{ flex-direction:row; align-items:center; }
  .footer-newsletter input{ flex:1; min-width:0; }
}

.social-icons{
  display:flex;
  gap:10px;
  align-items:center;
}
.social-icons a{
  display:inline-flex;
  width:36px;
  height:36px;
  border-radius:50%;
  background:black;
  align-items:center;
  justify-content:center;
  transition:background .25s ease, transform .2s ease;
}
.social-icons a:hover{ background:var(--brand); transform:scale(1.08); }
.social-icons img{ width:60%; height:auto; display:block; }

/* Käyttöapu */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===== ETUSIVUN HERO-LOGO (lukitaan koko) ===== */
.hero:not(.hero--small) .hero-logo {
  max-width: 200px;   /* tämä oli teillä “hyvän näköinen” koko */
  width: 100%;
}

@media (min-width: 1200px){
  .hero:not(.hero--small) .hero-logo {
    max-width: 240px;
  }
}

/* ===== ETUSIVUN leipätekstin kuva ===== */

.intro-image{
    display:block;
    width:100%;
    max-width:950px;
    margin:2rem auto;
    border-radius:18px;
    box-shadow:0 4px 16px rgba(0,0,0,.08);
}