/* tämä tyylitiedosto pätee lomakesivuilla sekä hakemisto-sivuilla */
/* headerkoodi alkaa tässä */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

header .otsikko {
    /* Container otsikoille, jos tarvitaan lisähallintaa */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Varmista, että otsikko-div vie koko leveyden headerissä */
}

header .logoteksti {
    font-size: clamp(2rem, 7vw, 4rem);
    margin: 0;
    padding: 0;
    color: #cc6600;
    line-height: 1.1;
}

header .otsikko h1 {
    font-size: clamp(2rem, 7vw, 4rem);
    margin: 0;
    padding: 0;
    color: #cc6600;
    line-height: 1.1;
}


.alaotsikko {
    font-size: clamp(1.2rem, 3vw, 2.5rem); /* Hienosäädetty clamp-arvo */
    font-weight: normal;
    margin: 0.5em 0 0 0; /* Pieni marginaali h1:n alle, nolla muualta */
    padding: 0;
    color: #cc6600;
    line-height: 1.2; /* Kompakti rivikorkeus alaotsikolle */
}

/* headerkoodi päättyy tässä */

@media only screen and (max-width: 480px) {
  body {
    font-size: 100%;
  }
}
         
body { 
  background-color: #ffffff;  
  margin-left: 3em; 
  margin-right: 3em; 
  margin-top: 2em; 
  margin-bottom: 3em;  
  font-family: Verdana, Arial, "Trebuchet MS", sans-serif;
}

h1 { 
  color: #cc6600; 
}

h2 { 
  color: #cc6600;
}

a:active {
color: #0000ff;
text-decoration: none;
}

a:link { 
color: #0000ff;
text-decoration: none;
}

a:hover {
background-color: #ff9900;
  color: white;
  text-decoration: underline;
}

.navi ul li {
  display: block;
  list-style-type: none;/* Kysymys: Miten saan listoilta listamerkit pois? Vastaus: Määritä halutun lohkon     li-elementille CSS:ssä: list-style-type: none; */
}

/* alla oleva tyylirivi koskee reseptisivujen ( huom! myös Liemet-hakemistoa ) "infotauluja", jotka ovat sinisellä pohjalla" */
.infotaulu {
  font-family: "Verdana", "Arial", "sans serif"; 
  font-size: 85%;
  background-color: #ecf0fb; /* jos haluaa vaihtelua, käytä #e6f4ff tai #e0e0ff */
  border: solid thin;
  border-color: black;
  padding: 0.5em 1%; 
  width: 25%;
  height: 30%;
  margin: 1em;
  float: right;
}

.adsense {
  float: right;
  padding: 1em 2em 1em 1em;
}
 
/* allaoleva sääntö koskee mahdollisesti pitkillä sivuilla olevia "sisältöluetteloita eli pikalinkkejä"*/
.sivuindex {
  font-family: Verdana, Arial, "Trebuchet MS",  sans-serif;
  font-size: 85%; 
  border: solid thin; 
  margin-right: -3em;
  margin-top: -1em; 
  float: right;
  padding: .5em 1%;
  padding-bottom: 1.5em;
  margin-left: 1em;
  margin-bottom: 1em;
}

.tietosuoja {
  font-family: "Verdana", "Arial", "sans serif"; 
  font-size: 75%;
  background-color: #ecf0fb; /* jos haluaa vaihtelua, käytä #e6f4ff tai #e0e0ff */
  border: solid thin;
  border-color: black;
  padding: 0.5em 1%; 
  width: 80%;
  height: 20%;
  margin: 1em;
  float: right;
}

.kuvakavalkadi {
  width: 256px;
  height: 192px;
  float: right;
  border: none;
  padding: 2em 2%; 
}

.hakukone {
  float: right;
}

/* alla oleva tyyliohje "ohjaa" leivänmurujäljet eli breadcrumbs jonka tiedosto on breadcrumbs.js. Tällä hetkellä ei käytössä.*/
span.crumb {
  
}

/* MUTTA alla oleva tyyliohje "ohjaa" koko leivänmurujäljet, ei pelkästään breadcrumbs.js:n osalta!*/
.ei-paperille { 
  font-size: 12px;
  
}

.sarvikuonojenmaa {
   float: right;
   margin-right: 14em;
}

/* alla oleva tyyli lisää tilaa listojen linkkien väliin kännyköitä käytettäessä */
@media (max-width: 991px){
.navi ul li {
margin: 10px 0px;
 }
}

/* ...tosin tässä tapauksessa myös RESEPTIHAKUUN...*/