/*
   Tässä määritellään ns. CSS-muuttujat (custom properties).
   Näitä käytetään alla väreissä, niin ei tarvii kirjoittaa samoja hex-koodeja miljoona kertaa.
*/
:root{
  --bg:#ffffff;       /* taustaväri, perus valkoinen */
  --text:#161514;     /* tekstin tumma väri */
  --brand:#4a2e2a;    /* pääväri – tummanruskea teema */
  --accent:#d9c7b2;   /* beige lisäväri */
  --muted:#f5efe8;    /* vaaleampi taustalaatikkojen väri */
  --focus:#0a7cff;    /* näppäimistöfokus, kirkas sininen */
}

/* Reset: ettei selaimet tee omia ihme-asettelujaan */
*{box-sizing:border-box}

/* Smooth scroll, eli sivu liukuu nätisti kun klikataan ankkureita */
html{scroll-behavior:smooth}

/* Body: perusfontti ja värit */
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif; /* aika perus, toimii */
  color:var(--text);
  background:var(--bg);
  line-height:1.6; /* vähän enemmän lukutilaa */
}

/* Kuvat niin ettei ne veny oudosti */
img{max-width:100%; height:auto; display:block}

/* --- Skip-link & SR-only --- */
/* Tää linkki näkyy vain tabilla, saavutettavuusjuttu */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
/* Kun skip-link saa fokuksen niin tuodaan se näkyviin */
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  padding:.5rem .75rem; background:#000; color:#fff;
}

/* SR-only: ruudunlukijalle näkyvä teksti, piilotettu muilta */
.sr-only{
  position:absolute!important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Linkkien perusväri ja focus-outline näppikselle */
a{color:var(--brand)}
a:focus, button:focus, input:focus, textarea:focus{
  outline:3px solid var(--focus);
  outline-offset:2px;
}

/* --- HEADER & NAV --- */
/* Yläpalkin pohjaväri ja tekstiväri */
.site-header{
  background:var(--brand);
  color:#fff;
}

/* Headerin sisäinen asettelu riviin */
.header-inner{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:1rem; 
  padding:1rem;
}

/* Logo: iso ja valkoinen */
.logo{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.5px;
}

/* Ylävalikon lista-asettelu */
.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1rem;
}

/* Navigaatiolinkkien tyyli */
.site-nav a{
  color:#fff;
  text-decoration:none;
  padding:.25rem .5rem;
  border-radius:.25rem;
}

/* Tällä korostetaan nykyinen sivu */
.site-nav a[aria-current="page"]{
  background:rgba(255,255,255,.2);
}

/* Mobiilivalikon nappi – piilotetaan desktopissa */
.nav-toggle{
  display:none;
  background:#fff; 
  color:var(--brand); 
  border:0; 
  padding:.5rem .75rem; 
  border-radius:.25rem;
}

/* --- Layout container --- */
.container{
  width:min(1100px, 92%); /* keskitetty asettelu */
  margin-inline:auto;
}

/* Sivun pääsisällön ylämarginaali */
.site-main{padding-block:2rem}

/* --- HERO-OSIO --- */
.hero{
  display:grid; 
  grid-template-columns:1.2fr .8fr; /* teksti isompi kuin kuva */
  gap:2rem; 
  align-items:center; 
  padding-block:3rem;
}

.hero-media img{
  border-radius:.5rem; /* pieni pyöristys kulmiin */
}

/* Nappi-tyyli: yhteinen kaikille CTA-napeille */
.btn{
  display:inline-block; 
  background:var(--brand); 
  color:#fff; 
  padding:.6rem 1rem; 
  border-radius:.35rem;
  text-decoration:none; 
  border:0; 
  cursor:pointer;
}

/* Hover-väri vähän kirkkaammaksi */
.btn:hover{filter:brightness(1.1)}

/* --- Kortit & listat --- */
/* Kolmen sarakkeen grid-kortit */
.features .feature-list{
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:1rem; 
  list-style:none; 
  padding:0;
}

/* Sama juttu tuotteille */
.card-grid{
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:1rem; 
  list-style:none; 
  padding:0;
}

/* Yksittäinen kortti */
.card{
  background:var(--muted);
  padding:1rem;
  border-radius:.5rem;
}

.price{font-weight:700}

/* Peruslista */
.list{padding-left:1.25rem}
.list li{margin:.25rem 0}

/* --- YHTEYSTIEDOT-SIVUN GRID --- */
.contact-grid{
  display:grid; 
  grid-template-columns:1fr 1fr; 
  gap:2rem;
}

/* Lomakkeen sisäkenttien väli */
.contact-form .field{margin-bottom:1rem}

/* Inputit ja textarea yhtenäisiksi */
.contact-form input, 
.contact-form textarea{
  width:100%; 
  padding:.625rem .75rem; 
  border:1px solid #ccc; 
  border-radius:.25rem; 
  font:inherit;
}

/* Harmaa huomautusteksti lomakkeen alla */
.form-note{
  font-size:.9rem; 
  color:#555;
}

/* --- FOOTER --- */
.site-footer{
  background:var(--accent);
  padding:1rem 0;
  margin-top:2rem;
}

/* --- RESPONSIVISET MUUTOKSET --- */
/* TABLET-näkymä */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr} /* Hero allekkain */
  .features .feature-list,
  .card-grid{grid-template-columns:repeat(2,1fr)} /* 2 saraketta */
  .contact-grid{grid-template-columns:1fr} /* Yhteystiedot allekkain */
}

/* PUHELINNÄKYMÄ */
@media (max-width: 640px){
  .nav-toggle{display:inline-block} /* avaa mobiilivalikon */
  .site-nav{display:none}           /* piilotetaan valikko */
  .site-nav.open{display:block}     /* näyttää valikon kun nappia painetaan */
  .site-nav ul{
    flex-direction:column; 
    background:var(--brand); 
    padding:1rem;
  }

  /* Kortit yksisarakkeisiksi */
  .features .feature-list,
  .card-grid{grid-template-columns:1fr}
}