@import url("https://use.typekit.net/zyo0gxk.css");

/* Nulstilling af styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Generelle styles: baggrund og typografi */

body {
  background-color: #F2E7DF; /* Lys baggrundsfarve farve */
  color: #2B2B2B; /* Mørk grå-sort tekst – letlæselig uden at være for stor en kontrast */
}

h1, h2, h3, h4, h5 {
  font-family: "marine-up", Helvetica, sans-serif; /* Marine Up til alle overskrifter og underoverskrifter */
  font-weight: 400; /* Normal vægt for at gøre teksten nem at læse og så det passer med de øvrige tekstelementer */
  line-height: 1.1; /* Linjeafstand justeres for at skabe mindre afstand ved overskrifter, der fylder mere end én linje */
}
h1 {
  font-size: 50pt; /* Hovedoverskrift */
  margin-bottom: 20px /* Afstand under overskrift */
}

h2 {
  font-size: 36pt; /* Underoverskrift */
  margin-bottom: 20px; /* Afstand under underoverskrift */
}

h3 {
  font-size: 30pt; /* Labels til smagsprofil på vinsiderne */
}

h4 {
  font-size: 18pt; /* Overskrifter i footer */
  margin-bottom: 10px; /* Afstand under footer-overskrifter */
}

h5 {
    font-size: 16pt; /* Produktnavn på forside */
  }

p {
  font-family: "futura-pt", Helvetica, sans-serif; /* Futura PT til brødtekst */
  line-height: 1.6; /* Linjeafstand for at forbedre læsbarheden */
  font-size: 16px; /* Brødtekst. Jeg har valgt en rimelig stor størrelse for at gøre det let at læse */
}

p a {
  color: #2B2B2B; /* Samme farve som den øvrige brødtekst */
  font-weight: bold; /* Fed skrift for at fremhæve links */
}

p a:hover {
  color: #B06821; /* Orange farve ved hover for at indikere, at det er et klikbart link */
}

/* Introtekst */

.intro {
    display: flex; /* Flexbox bruges for at centrere hele introsektionen på siden */
    flex-direction: column; /* Kolonne så overskrift og tekst vises vertikalt i stedet for horisontalt */
    align-items: center; /* Centrerer indholdet på siden */
    margin-bottom: 50px; /* For at skabe luft mellem introteksten og den nedenstående sektion */
  }
  
  .intro h1 {
    text-align: center; /* Centrerer hovedoverskriften */
    max-width: 12ch; /* Maksimalt antal anslag for at sørge for, overskriften deler sig på to linjer frem for at blive for lang. Dette giver et mere læsevenligt layout. */
  }
  
  .intro p {
    text-align: left; /* Brødteksten er venstrestillet for at gøre den nemmere at læse */
    max-width: 42ch; /* Maksimalt antal anslag for at holde brødteksten på ca. 60 anslag inkl. mellemrum for at forbedre læsbarheden */
  }

/* Styles til knapper */

a.button {
  background-color: #094B72; /* Mørkeblå farve som standard */
  color: #fefefe; /* Hvid tekstfarve for kontrast */
  text-decoration: none; /* Fjerner understregning af teksten */
  padding: 10px 20px; /* Indvendig afstand for at gøre knapperne større og mere klikbare */
  border: none; /* Ingen kant på knapperne */
  border-radius: 4px; /* Rundede hjørner for et blødere look */
  font-family: "futura-pt", Helvetica, sans-serif; /* Futura PT som skrifttype for at matche brødteksten */
  font-size: 20px; /* Størrelse på teksten */
  font-weight: 500; /* Medium vægt for at gøre teksten tydeligere */
  display: inline-block; /* Får <a>-linket til at opføre sig som en knap */
  cursor: pointer; /* Skifter markøren til en hånd ved hover for at gøre det klart, at man kan klikke */
  transition: background-color 0.3s ease; /* Glidende overgang til farveskift ved hover */
}

a.button:hover {
  background-color: #B06821; /* Orange farve ved hover, der matcher farven ved hover i headeren for konsistens. Knappen skifte farve ved hover for at understrege, knappen er klikbar, og for at vise hvad man er ved at vælge */
}

.centrer-knap {
  display: flex; /* flexbox bruges så knappen kan være midt på siden */
  justify-content: center; /* Centrerer knappen */
  margin: 50px 0; /* Afstand over og under knappen for at skabe luft til de øvrige elementer */
}

/* Responsive generelle styles */

@media screen and (max-width: 768px) {

/* Mindre skriftstørrelser for at passe til den mindre skærm */

  h1 {
    font-size: 36pt;
  }

  h2 {
    font-size: 28pt;
  }

  h3 {
    font-size: 24pt;
  }

  h4 {
    font-size: 16pt;
  }

  h5 {
    font-size: 14pt;
  }

  p {
    font-size: 15px;
  }

  p a:hover {
  color: #2B2B2B; /* Samme farve som når teksten ikke er markeret, da der ikke er en hover-effekt her */
}

  .intro {
    padding: 0 20px; /* Indvendig margin for bedre afstand på små skærme */
    margin-bottom: 40px; /* Mindre afstand under introsektionen for at spare plads på små skærme */
  }

  .intro h1 {
    font-size: 36pt;
  }

  .intro p {
    font-size: 15px;
  }

  a.button {
    font-size: 18px;
    padding: 10px 16px; /* Mindre padding for at gøre knappen mere kompakt på små skærme */
  }

  a.button:hover {
  background-color: #094B72; /* Samme farve, som knappen har, da hover-effekt ikke vil virke på det mobile device dette er tiltænkt */
}

  .centrer-knap {
    margin: 40px 0; /* Mindre afstand over og under knappen */
    padding: 0 20px;
  }
}