/*
  =====================================
  1. TYPOGRAFI & GLOBAL STYLING
  =====================================
*/
:root {
  /* Färgpalett inspirerad av natur och hälsa */
  --color-primary: #588157; /* Mörkgrön - Huvudfärg för rubriker, navigering */
  --color-secondary: #a3b18a; /* Mellangrön - Accenter */
  --color-text: #344e41; /* Mörk text - Bra läsbarhet */
  --color-light: #dad7cd; /* Ljus bakgrund - Mjuk och lugn */
  --color-background: #edede9; /* Nästan vit/off-white */

  /* Typsnitt */
  --font-heading: "Merriweather", serif; /* Mer formell, bra för rubriker */
  --font-body: "Open Sans", sans-serif; /* Lättläst för brödtext */
}

/* Återställ standardmarginaler och box-sizing för enklare layout */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-background);
  /* Gör body till en flex-container för att se till att footern hamnar längst ner (inte fixerad) */
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Se till att body täcker hela visningshöjden */
}

/* Styla alla rubriker */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin-bottom: 0.5em;
}

/*
  =====================================
  2. HEADER & NAVIGATION
  =====================================
*/
header {
  background-color: var(--color-light); /* Ljus bakgrund i header */
  padding: 1.5rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Liten skugga för att lyfta fram */
}
/* Specifik kontroll för loggan */
.logo {
  max-width: 100px; /* Ändra detta värde för att göra den mindre eller större */
  height: auto; /* Behåller proportionerna */
  display: block; /* Gör att vi kan centrera den med margin */
  margin: 0 auto 1rem auto; /* Centrerar och ger lite avstånd till rubriken under */
  border-radius: 5%; /* Valfritt: gör loggan rund om den är kvadratisk */
}
header h1 {
  text-align: center;
  margin-top: 0; /* Tar bort standardmarginaler */
  margin-bottom: 1rem;
  color: var(--color-primary);
  font-size: 2rem;
}

header nav {
  display: flex;
  justify-content: center; /* Centrera nav-länkarna */
  flex-wrap: wrap; /* Låter länkarna brytas på mindre skärmar */
  gap: 1.5rem; /* Avstånd mellan nav-länkarna */
}

header nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition:
    background-color 0.3s,
    color 0.3s;
}

header nav a:hover {
  background-color: var(--color-secondary);
  color: white;
}

/*
  =====================================
  3. MAIN CONTENT
  =====================================
*/
main {
  flex-grow: 1; /* Låter main-innehållet ta upp allt tillgängligt utrymme */
  padding: 2rem 1rem;
  max-width: 1000px; /* Begränsa bredden för bättre läsbarhet på stora skärmar */
  margin: 0 auto; /* Centrera main-innehållet */
  line-height: 1.6; /* Förbättra läsbarheten i brödtext */
}

/* Behandlingar sida (behandlingar.html) */
main > h1 {
  /* Stil för "Alla mina behandlingsformer är godkända..." */
  text-align: center;
  font-size: 1.1rem;
  color: var(--color-primary);
  background-color: var(--color-light);
  padding: 0.8rem;
  border-radius: 4px;
  margin-bottom: 2rem;
}

main section {
  background-color: white;
  padding: 2rem;
  margin-bottom: 2rem;
  border-left: 5px solid var(--color-secondary); /* Accentlinje till vänster */
  border-radius: 0 8px 8px 0; /* Rundade hörn på höger sida */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

main section h1 {
  /* Styla rubrikerna för varje behandling (Zonterapi, Massage, etc.) */
  font-size: 1.8rem;
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-light); /* En avdelare under rubriken */
  padding-bottom: 0.3em;
  margin-bottom: 1em;
}

main section span {
  display: block; /* Säkerställer att texten fyller utrymmet */
}

/*
  =====================================
  4. FOOTER
  =====================================
*/
footer {
  display: flex;
  flex-direction: column; /* Stapla elementen vertikalt */
  text-align: center;
  background-color: var(--color-primary);
  color: white;
  padding: 1.5rem 1rem;
  margin-top: 2rem;
}

footer span {
  margin: 0.3rem 0;
  font-size: 0.9rem;
}

/* Media Query för att förbättra layouten på större skärmar */
@media (min-width: 768px) {
  footer {
    flex-direction: row; /* Visa elementen horisontellt */
    justify-content: space-around;
  }
}

.örter-h1 {
  display: flex;
  flex-direction: column;
  text-align: start;
}

.örter-h1 ul li {
  display: flex;
  padding-left: 1vw;
}