/*  GRUNDINSTÄLLNINGAR  */
/* Stilar som gäller för hela webbsidan */
body {
  margin: 0; /* Tar bort standardmarginaler runt sidan */
  font-family: 'Arial', sans-serif; /* Anger standardtypsnitt */
  background-color: #f9f9f9; /* Ljusgrå bakgrundsfärg */
  color: #333; /* Mörkgrå textfärg */
}

/*  HEADER-STILAR  */
/* Stilar för logotyp och meny */
header {
  display: grid; /* Använder CSS Grid för layout */
  grid-template-columns: 1fr auto; /* Delar upp i två kolumner */
  align-items: center; /* Centrerar innehåll */
  background-color: #0a74da; /* Blå bakgrundsfärg */
  color: white; /* Vit textfärg */
  padding: 10px 20px; /* Utrymme runt innehållet */
}

/* Stilar för logotypbilden */
.logo img {
  height: 60px; /* Fast höjd på 60px */
  width: auto; /* Bredd anpassas automatiskt */
}

/* NAVIGATIONS-MENY  */
/* Stilar för navigationslistan */
nav ul {
  display: flex; /* Gör listan horisontell */
  gap: 20px; /* Mellanrum mellan menyalternativ */
  margin: 0; /* Tar bort standardmarginal */
  padding: 0; /* Tar bort standardpadding */
}

/* Stilar för navigationslänkar */
nav a {
  color: white; /* Vit textfärg */
  text-decoration: none; /* Tar bort understruken text */
  font-weight: bold; /* Fet text */
  padding: 5px 10px; /* Utrymme runt länktexten */
}

/* Stilar när muspekaren är över länk eller länk är aktiv */
nav a:hover,
nav a.active {
  background-color: #085cb3; /* Mörkare blå bakgrund */
  border-radius: 5px; /* Rundade hörn */
}


/* Stilar för kategorisektionen */
.categories {
  display: grid; /* CSS Grid-layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Anpassar antal kolumner */
  gap: 20px; /* Mellanrum mellan rutor */
  padding: 20px; /* Utrymme runt sektionen */
  background-color: #ffffff; /* Vit bakgrund */
}

/* Stilar för varje kategori-ruta */
.category-section {
  background-color: #e9f1fd; /* Ljusblå bakgrund */
  padding: 15px; /* Utrymme inuti rutan */
  border-radius: 8px; /* Rundade hörn */
  text-align: center; /* Centrerad text */
}

/*  PRODUKT-STILAR  */
/* Stilar för produkter-sektionen */
.products {
  padding: 40px 20px; /* utrymme runt sektionen */
  background-color: #ffffff; /* Vit bakgrund */
}

/* Stilar för huvudrubriken i produkter-sektionen */
.products h1 {
  text-align: center; /* Centrerad text */
  margin-bottom: 30px; /* Utrymme under rubriken */
  color: #0a74da; /* Blå textfärg */
}

/* Stilar för produktgridet */
.grid-products {
  display: grid; /* CSS Grid-layout */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Anpassar antal kolumner */
  gap: 20px; /* Mellanrum mellan produkter */
}

/* Stilar för varje produkt */
.product {
  background-color: #f0f8ff; /* Mycket ljusblå bakgrund */
  padding: 15px; /* Utrymme inuti kortet */
  border-radius: 10px; /* Rundade hörn */
  text-align: center; /* Centrerad text */
  transition: transform 0.2s; /* Animering vid hover */
}

/* Effekt när muspekaren är över produkt */
.product:hover {
  transform: translateY(-5px); /* Flyttar upp kortet lite */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Lägger till skugga */
}

/* Stilar för produkt */
.product img {
  width: 100%; /* Bredd */
  height: auto; /* Höjd */
  border-radius: 8px; /* Rundade hörn på bilden */
  margin-bottom: 10px; /* Utrymme under bilden */
}

/* Stilar för produktnamn */
.product h3 {
  margin: 10px 0 5px; /* Utrymme runt rubriken */
  color: #0a74da; /* Blå textfärg */
}

/* Stilar för produktlänkar */
.product a {
  display: inline-block; /* Gör att padding fungerar */
  margin-top: 10px; /* Utrymme ovanför länken */
  color: #0a74da; /* Blå textfärg */
  text-decoration: none; /* Tar bort understruken text */
  font-weight: bold; /* Fet text */
}

/* Effekt när muspekaren är över länken */
.product a:hover {
  text-decoration: underline; /* Understruken text */
}

/* SIDFOT  */
/* Stilar för sidfoten */
footer {
  background-color: #0a74da; /* Blå bakgrund */
  color: white; /* Vit text */
  text-align: center; /* Centrerad text */
  padding: 15px 10px; /*  inuti footer */
  margin-top: 40px; /*  ovanför footer */
}

/* Stilar för länkar i footer */
footer a {
  color: white; /* Vit text */
  margin: 0 10px; /* Utrymme runt länkarna */
  text-decoration: none; /* Tar bort understruken text */
}

/* Effekt när muspekaren är över länkarna */
footer a:hover {
  text-decoration: underline; /* Understruken text */
}