/* Lathund: */

/* punkt (.) är för class */
/* hashtag (#) är för id */

/* Hemsidan är strukturerad på följande sätt: */
/* 1:   Typsnitt */
/* 2:   Övergripande: Placering och utseende för alla element */
/* 3:   Huvud: Sökruta, sökknapp och filterknapp */
/* 4:   Filterrutan: Den filterruta som visar alla filter; */
/* 4.1:   Filterknappar: Alltså våra checkboxes */
/* 5:   Resultatlådor för turbo-svar */
/* 6:   Kropp */
/* 7:   Listor: Generell inställning för att ta bort punkter på listor och flexa */
/* 8:   PDF-viewer */
/* 9:   Resultatlådor för pinecone-svar */
/* 10:  PDF-knappar: föregående och nästa */
/* 11:  Footern */
/* 12:  Andra sidor än index.html


/* -------------------------------------------------------------------------------------------------------------------- */

/* Typsnitt */

/* Här styr vi vilket typsnitt vi vill ha. Asterisken säger att det ska gälla allt. Men vi behöver tydligen gör det på body, input också... vet inte varför. */
* {
 font-size: 100%;
 font-family: "Roboto", sans-serif;
 line-height: 24px;
}

/* body, input styr tydligen typsnittet. */
body,
input {
  font-size: 16px;
  line-height: 24px;
  font-family: "Roboto", sans-serif;
}

h1 {
  font-size: 32px;
  color: black;
  line-height: 44px;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  text-align: left;
}

h2 {
  font-size: 26px;
  color: black;
  line-height: 36px;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  text-align: left;
}

h3 {
  font-size: 22px;
  color: black;
  margin-block-start: 0em;
  margin-block-end: 0em;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* Övergripande styrning av hemsidan */

/* Den här delen gäller alla skärmstorlekar */
.allt {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Den här delen gäller stora skärmar (t.ex. maxbredd på sidan) */
@media (min-width: 900px) {
  .allt {
    max-width: 1100px; /* Här anger vi max-bredd på sidan */
    margin-left: auto;
    margin-right: auto;
  }
}


/* For mobile phones: */
@media only screen and (max-width: 600px) {
  .kropp {
    flex-direction: column;
  }

  .left-col, .right-col {
    width: 100%;
  }
}

/* For desktop: */
@media only screen and (min-width: 601px) {
  .kropp {
    flex-direction: row;
  }

  .left-col {
    background: white;
    width: 40%; /* 2/5 av bredden */
    flex: 3;
    padding-right: 1em;
  }

  .right-col {
    background: whitesmoke;
    flex: 5; /* 3/5 av bredden */
  }
}

/* -------------------------------------------------------------------------------------------------------------------- */

/* Huvudets sektion */

/* Huvud består av sökrutan, sökknapp och filterknapp */
.huvud {
  display: flex;
  width: 100%;
  height: 50px;
  padding-bottom: 1em;
}

/* Sökruta */
.searchbox {
  display: flex;
  flex-grow: 1; /* flex-grow satt till 1 för att vi vill att den ska växa så mycket som möjligt */
  border-radius: 4px;
  margin-right: 5px; /* Optional: add some space between the searchbox and filter button */
}

/* Sökrutans textinnehåll */
#sokFalt {
  flex-grow: 1; /* flex-grow satt till 1 för att vi vill att den ska växa så mycket som möjligt */
  border: none;
  background-color: whitesmoke;
  border-radius: 4px;
  padding-left: 10px;
  margin-right: 5px; /* Tips: matcha den här med margin-right på .searchbox */
}

/* Knappar (hette tidigare filter-btn) */
.knapp {
  padding: 12px 0;
  width: 50px;
  color: #fff;
  background-color: #4B735F;
  border: none;
  border-radius: 4px;
  text-align: center;
}

/* grön original: 5C6C5D */
/* orange: #E88D67 Ser okej ut */
/* grön ny 1: #5C6F68 Rätt bra */
/* grön ny 2: #4B735F Rätt bra */

/* -------------------------------------------------------------------------------------------------------------------- */

/* Filterrutan */

/* Filterrutan innehåller alla filter och visas genom "filterknappen" */
#filter_ruta {
  display: none; /* none för att filter-knappen ska styra synligheten */ 
  background: whitesmoke;
  flex-wrap: wrap;
  width: 100%;
}


.filter-category {
  flex: 1 0 40%;  /* This will allow the div to grow and shrink as needed */
  margin: 1em;    /* For a little spacing between the divs */
  background: whitesmoke;
  padding: 30px 0;
}


.category-btn {
  border: none;
  background: whitesmoke;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* Filterknappar */

/* Den här delen tar bort lådan för checkboxarna */
.filter:checked + label {
    background-color: #4B735F; /* green color when checked */
    color: white;
}

.filter:not(:checked) + label {
    background-color: whitesmoke; /* grey color when not checked */
    color: black; /* changed to black for visibility */
}

.filter { 
    display: none; /* to hide checkbox */
}

label { /* changed from .label to label */
    padding: 10px;
    display: inline-block;
}

/* to change cursor to pointer when hover over label */
label:hover { /* changed from .label to label */
    cursor: pointer;
}

/* -------------------------------------------------------------------------------------------------------------------- */

/* Felmeddelande som visas på hemsidan när något är fel */

#errorMeddelandeTillKlient {
  display: none;
  padding: 30px;
  width: 100%;
  background-color: #DB504A;
  color: white;
  margin-block-start: 0em;
  margin-block-end: 1em;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* Resultatlåda för turbo */

#svarslåda {
  padding: 30px;
  flex-grow: 2;
  background-color: white;
  margin-block-start: 0em;
  margin-block-end: 1em;
}

#resultat {
  list-style: none;
  flex-grow: 1;
  font-size: 16px;

}


/* -------------------------------------------------------------------------------------------------------------------- */

/* Kropp */
.kropp {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 40px;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* Generell liststyle för att t.ex. ta bort punkter på listor */

li {
  display: flex;
  flex-direction: column;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* PDF-viewer */

.controls {
  background-color: whitesmoke;
  display: flex;
  justify-content: center;
}

#canvas {
    margin: auto;
    border: black;
    display: flex;
}

#pageNumber {
    display: inline;
    color: black;
}

.pdf_viewer {
    display: none;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* button_resultat är rutan för varje resultat vi får från pinecone */

.button_resultat {
  background-color: whitesmoke; /* Den här tror jag ska vara vit, eller inte finnas... */
  border: none;
  color: black;
  text-align: left;
  padding: 30px;
  width: 100%;
  margin-block-end: 1em;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* button_pdf är knapparna för att styra pdf:en som "föregående" och "nästa" sida */

.button_pdf {
  background-color: whitesmoke;
  border: none;
  color: black;
  padding: 1em 2em;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* Här är vår fotsektion */

footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #f5f5f5;
   color: #333;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;
}

/* a avser länkens färg */
a {
  color: #333333;
}


/* -------------------------------------------------------------------------------------------------------------------- */

/* CSS för andra sidor än index.html */

/* linkHome är knappen hem högst upp på sidan */
.linkHome {
  padding: 12px;
  color: #fff;
  background-color: #4B735F;
  border: none;
  border-radius: 4px;
  text-align: center;
}

.textruta {
  background-color: whitesmoke;
  border: none;
  color: black;
  text-align: left;
  padding: 30px;
  margin-block-end: 1em;
}