/*styles.css*/


body { 
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
font-size: 16px;
}

p {
  font-size: 12px;
}

a {
   text-decoration: none;
  color: black;
}

nav a { /* Stil för navigationslänkar */
  text-decoration: none;
  color: black;
  font-size: 20px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

nav a:hover { /* När musen är över en navigationslänk */
  color: #f3840f; /* Orange färg när musen är över */
  text-decoration: underline; /* Understrykning när musen är över */
}

img { /* Stil för alla bilder */
  border-radius: 10px;
}

button { /* Stil för alla knappar */
  font-family: Arial, Helvetica, sans-serif;
  margin: 30px 0 0 6px;
}

button:hover { /* När musen är över en knapp */
  background-color: #f3840f;
}

#buttons { /* Stil för knapparna i headern */
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 100%;
  margin: 0rem 2rem 0rem 0rem;
}

#logo-img { /* Stil för logotypen */
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  border: 3px solid #f3840f;
  border-radius: 2rem;
  box-shadow: 2px 1px 15px #70706f;
  margin: 1rem 1rem 1rem 1rem;
}

#nav-menu { /* Stil för navigationsmenyn */
  list-style: none;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2rem 2rem 2rem 0rem;
}

.header { /* Stil för headern */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 1100px;
  border: 2px solid #979490;
  border-radius: 20px;
  padding: 1rem 1rem 2rem 1rem;
  box-shadow: 2px 1px 15px #70706f;
  background-color: #f3f2f2;
  margin: 1rem auto;
}

#input { /* Stil för sökfältet */
  display: flex;
  justify-content: flex-end;
  align-self: end;
  margin-right: 2rem;
  font-size: 13px;
  align-items: center;
}

#local-time { /* Stil för klockan */
  padding: 5px 10px;
  border: 2px solid #979490;
  border-radius: 10px;
  box-shadow: 2px 1px 15px #70706f;
}

.prenumerera { /* Stil för prenumerationsknappen */
  border-color: #f3840f;
  border-radius: 5px;
  padding: 6px;
  background-color: #faad5c;
  font-size: 12px;
}

.log-in { /* Stil för inloggningsknappen */
  border-color: #f3840f;
  border-radius: 5px;
  padding: 6px;
  background-color: #f3f2f2;
  font-size: 12px;
}

#main-container { /* Stil för huvudcontainern */
  display: flex;
  max-width: 1100px;
  margin: 1rem 0 0 0;
  gap: 1rem;
}

#sidebar-left { /* Stil för sidomenyn */
  width: 15%;
  min-width: 20%;
  margin: 1rem 0 0 0;
  padding: 0 1rem 1rem 1rem;
  border: 2px solid #979490;
  border-radius: 6px;
  box-shadow: 2px 1px 15px #70706f;
  background-color: #f3f2f2;
}

#main-body { /* Stil för huvudsektionen */
  background-color: #f3f2f2;
  max-width: 1100px;
  padding: 0 1rem 1rem 1rem;
  margin-top: 1rem;
  border: 2px solid #979490;
  border-radius: 6px;
  box-shadow: 2px 1px 15px #70706f;
}

.button-thumb { /* Stil för knappar i sidomenyn */
  border-color: #f3840f; 
  border-radius: 5px; 
  font-size: 12px;
  background-color: #faad5c;
  margin-top: 0;
}

.title-main { /* Stil för artikelrubriker */
  font-size: 20px;
  padding: 0px 30px 0px 15px;
}

.text-main { /* Stil för artikelns text */
  margin: 0 2rem 0 1rem;
}

.article-pic { /* Stil för artikelns bildcontainer */
  display: flex;
  flex-wrap: wrap;
  align-self: center;
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
  margin: 10px 5px 5px 5px;
}

.article-pic img { /* Stil för bilder i artiklar */
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-main { /* Stil för artikelns textinnehåll */
  max-width: 70%;
  display: flex;
  flex-direction: column;
  padding: 1rem 0 0 0;
}

article { /* Stil för varje artikel */
  display: flex;
}

summary { /* Stil för "Läs mer" texten */
  margin: 1rem;
  cursor: pointer;
}

#logo-footer { /* Stil för logotypen i footern */
  margin: 1rem 1rem 1rem 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.copyright { /* Stil för copyright-texten i footern */
  display: flex;
  justify-content: center;
  align-self: center;
}

/*--------------------------Hamburgermeny-----------*/
.menu { 
  display: none;
  background: #f3f2f2;
  padding: 10px;
}

.menu ul { /* Ta bort standard list-styling */
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li a { /* Stil för länkar i menyn */
  color: rgb(5, 5, 5);
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 10px 0px 10px 20px;
}

.menu a:hover { 
  color: #f3840f; /* Orange färg när musen är över */
  text-decoration: underline; /* Understrykning när musen är över */
}

/* Hamburger-icon */
.menu-icon {
  display: none;
  cursor: pointer;
  width: 18px;
  height: 20px;
  position: relative;
  margin: 1rem 1rem 1rem 1rem;
}

.menu-icon span { /* De tre linjerna i hamburgarikonen */
  display: block;
  height: 3px;
  width: 100%;
  background: black;
  position: absolute;
  left: 0;
  transition: 0.3s ease;
}
/* Positionering av de tre linjerna */
.menu-icon span:nth-child(1) { 
  top: 0;
}
.menu-icon span:nth-child(2) {
  top: 8px;
}
.menu-icon span:nth-child(3) {
  top: 16px;
}

/* När checkboxen är ikryssad – transformera till kryss */
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: rotate(45deg);
  top: 11px;
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: rotate(-45deg);
  top: 11px;
}

/* Visa hamburgarikonen på skärmar mindre än 575px */
@media (max-width: 575px) {
  
  .menu-icon { 
    display: block; /* Visa hamburgarikonen */
  }

  #nav-menu {
    display: none; /* Dölj den vanliga menyn */
  }

  #main-container { /* Gör huvudcontainern till en kolumn istället för rad */
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column-reverse; /* Sidomenyn under huvudsektionen */
  }
  
  #sidebar-left { 
    width: 93%;
    margin: 1rem auto; 
  } 
  
  #menu-toggle:checked + .menu-icon + .menu {
    display: block; /* Visa meny när hamburgaren är klickad */
  }

  #local-time {
    display: none; /* Visa inte klockan på skärmar mindre än 575px*/
  }

  #main-body { 
    width: 93%;
  }

  .article-pic {
    margin: 10px 10px 10px 10px;
  }

  .article-main {
    display: flex;
    flex-direction: column;
  }

  .title-main {
    font-size: 16px;
    padding: 0px 15px 0px 15px;
  }

  .text-main {
    margin: 0 1rem 0 1rem;
  }

  #buttons {
    width: fit-content;
    display: flex;
    justify-content: flex-end;
  }

  #logo-img { 
    margin: 1rem auto;
    justify-content: center;
    display: flex;
  }

}