/* ---------- RESET ---------- */
/* Fjerner browserens standard margin og padding, så vi selv styrer layoutet */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---------- GENEREL STYLING ---------- */
/* Gør scrolling mellem ankre mere smooth */
html {
  scroll-behavior: smooth;
}

/* Sikrer at siden minimum fylder hele skærmens højde */
html,
body {
  min-height: 100%;
}

/* CSS-variabler: her samles farver, skygger og border-radius ét sted */
:root {
  --accent-dark: #523741;
  --accent-pink: #e5c1c1;
  --background: #f7f5f2;
  --text: #2c2c2c;
  --card-bg: #fbfaf7;
  --cream-card: #f4f1e8;
  --soft-border: #e3c5c5;
  --muted-text: #6b5b55;
  --image-placeholder: #f7e1e5;
  --soft-green: #f2f5e9;

  --shadow-soft: rgba(44, 44, 44, 0.08);
  --shadow-medium: rgba(44, 44, 44, 0.14);
  --shadow-strong: rgba(44, 44, 44, 0.18);

  --radius-small: 6px;
  --radius-medium: 12px;
  --radius-large: 18px;
  --radius-pill: 999px;
}

/* Grundstyling for hele siden */
body {
  font-family: "Switzer", sans-serif;
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
}

/* Main styrer bredden på hovedindholdet */
main {
  width: 86%;
  margin: 0 auto;
}

/* ---------- TYPOGRAFI ---------- */
/* H1 bruges til de største overskrifter */
h1 {
  font-family: "Switzer", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

/* H2 bruges til sektionsoverskrifter */
h2 {
  font-family: "Switzer", sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

/* H3 bruges til mindre overskrifter */
h3 {
  font-family: "Switzer", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

/* Samme font bruges til tekst, links, listepunkter og knapper */
p,
a,
li,
button {
  font-family: "Switzer", sans-serif;
}

/* Standardstørrelse for brødtekst og listepunkter */
p,
li {
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
}

/* Bruges til overskrifter, der kun skal læses af skærmlæsere */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
}

/* ---------- HEADER / NAVIGATION ---------- */

/* Headeren ligger øverst og indeholder logo, menu og quiz-knap */
.site-header {
  width: 100%;
  height: 90px;
  background-color: rgba(247, 245, 242, 0.95);
  backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 8%;

  position: sticky;
  top: 0;
  z-index: 1000;

  border-bottom: 1px solid var(--shadow-soft);
}

/* Styling af GutGuide-logoet */
.logo {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  transition:
    transform 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease;
}

/* Hover-effekt på logoet */
.logo:hover {
  color: var(--accent-dark);
  transform: translateY(-3px);
  opacity: 0.85;
}

/* Navigationen står på række på desktop */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Styling af links i navigationen */
.nav-menu a {
  text-decoration: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}

/* Hover-effekt på menu-links */
.nav-menu a:hover {
  opacity: 0.6;
}

/* Active viser den side, brugeren er på */
.nav-menu a.active {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Fælles styling for knapper */
.header-btn,
.cta-btn,
.read-more-btn {
  background-color: var(--accent-pink);
  color: var(--text);
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
}

/* Hover-effekt på knapper */
.header-btn:hover,
.cta-btn:hover,
.read-more-btn:hover {
  opacity: 0.8;
}

/* ---------- BURGER MENU ---------- */

/* Burgerknappen er skjult på desktop */
.burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

/* De tre streger i burgerknappen */
.burger span {
  width: 30px;
  height: 3px;
  background-color: var(--text);
  border-radius: 0;
}
/* ================================================== */
/* ---------- FORSIDE ---------- */
/* ================================================== */

/* Hero-området på forsiden med tekst til venstre og carousel til højre */
.home-hero-brand {
  min-height: 78vh;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
  padding: 80px 0;
}

/* Lille label over forsiden overskrift */
.small-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent-dark);
  margin-bottom: 18px;
}

/* Stor forsideoverskrift */
.home-hero-text h1 {
  font-size: 86px;
  line-height: 0.9;
  max-width: 620px;
  margin-bottom: 28px;
}

/* Brødtekst i hero-området */
.home-hero-text p:not(.small-label) {
  font-size: 20px;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: 34px;
}

/* Container til de to knapper i hero-området */
.hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Fælles styling for hero-knapper */
.primary-btn,
.outline-btn {
  padding: 14px 26px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 800;
}

/* Primær knap med lyserød baggrund */
.primary-btn {
  color: var(--text);
  background-color: var(--accent-pink);
}

/* Sekundær knap med kant */
.outline-btn {
  border: 1px solid var(--accent-dark);
  color: var(--text);
}

/* Smooth hover-animation på hero-knapper */
.primary-btn,
.outline-btn {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    background-color 0.25s ease;
}

/* Hover-effekt på primær knap */
.primary-btn:hover {
  transform: translateY(-4px);
  opacity: 0.85;
}

/* Hover-effekt på sekundær knap */
.outline-btn:hover {
  transform: translateY(-4px);
  background-color: var(--accent-pink);
  opacity: 0.9;
}

/* Stort kort i hero-området */
.hero-main-card {
  width: 330px;
  min-height: 460px;
  background-color: var(--cream-card);
  padding: 34px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Overskrift på stort hero-kort */
.hero-main-card h2 {
  font-size: 34px;
  line-height: 1.1;
}

/* Hover-animation på feature-sektioner */
.home-features,
.home-fact-strip {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease;
}

/* Løfter sektionerne let, når man holder musen over */
.home-features:hover,
.home-fact-strip:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px var(--shadow-medium);
}

/* Animation på linket i faktabjælken */
.home-fact-strip a {
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    background-color 0.25s ease;
}

/* Hover-effekt på linket i faktabjælken */
.home-fact-strip a:hover {
  transform: translateY(-4px);
  opacity: 0.85;
}

/* ---------- CAROUSEL ---------- */

/* Området omkring carousel */
.carousel-area {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 46px;
}

/* Rækken med alle carousel-kort */
.hero-card-carousel {
  display: flex;
  gap: 22px;
  align-items: stretch;
  will-change: transform;
}

/* Hvert enkelt carousel-kort */
.hero-slide-card {
  flex: 0 0 calc((100% - 22px) / 2);
  min-height: 430px;

  background-color: var(--card-bg);
  color: var(--text);
  text-decoration: none;

  padding: 22px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Billeder i carousel-kort */
.hero-slide-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  margin-bottom: 20px;
}

/* Label i kortene */
.hero-slide-card p {
  width: fit-content;
  background-color: var(--accent-pink);
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 800;
}

/* Overskrift i kortene */
.hero-slide-card h2 {
  font-size: 28px;
  line-height: 1.15;
}

/* Linktekst */
.hero-slide-card span {
  font-size: 14px;
  font-weight: 800;
}

/* Pilene */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 44px;
  height: 44px;

  border: none;
  border-radius: 50%;

  background-color: var(--accent-pink);
  color: var(--text);

  font-size: 18px;
  cursor: pointer;
}

/* Venstre pil */
.carousel-arrow-left {
  left: 0;
}

/* Højre pil */
.carousel-arrow-right {
  right: 0;
}

/* Mobil */
@media (max-width: 768px) {
  .carousel-area {
    padding: 0 36px;
  }

  .hero-slide-card {
    flex: 0 0 100%;
  }
}
/* Sektion med tre fordele på forsiden */
.home-features {
  margin: 30px 0 90px;
  padding: 34px;
  background-color: var(--card-bg);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  box-shadow: 0 4px 14px var(--shadow-soft);
}

/* Hver fordel står med ikon og tekst ved siden af hinanden */
.home-features article {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* Ikonerne i fordel-sektionen */
.home-features i {
  font-size: 28px;
  color: var(--accent-dark);
}

/* Overskrifterne i fordel-sektionen */
.home-features h3 {
  font-size: 18px;
  margin-bottom: 6px;
}

/* Teksten i fordel-sektionen */
.home-features p {
  font-size: 15px;
  line-height: 1.5;
}

/* Mobiltilpasning af forsiden */
@media (max-width: 768px) {
  /* Hero-området går fra to kolonner til én kolonne på mobil */
  .home-hero-brand {
    grid-template-columns: 1fr;
    padding: 60px 0;
  }

  /* Forsideoverskriften bliver mindre på mobil */
  .home-hero-text h1 {
    font-size: 52px;
  }

  /* Kortstakken tilpasses mobil, hvis den bruges */
  .hero-card-stack {
    min-height: auto;
    flex-direction: column;
    gap: 24px;
  }

  /* Hero-kort fylder hele bredden på mobil */
  .hero-main-card,
  .hero-mini-card {
    position: static;
    width: 100%;
    min-height: 260px;
    transform: none;
  }

  /* Fordele vises i én kolonne på mobil */
  .home-features {
    grid-template-columns: 1fr;
  }
}

/* Faktabjælke på forsiden */
.home-fact-strip {
  margin: 80px 0;
  padding: 42px 48px;
  background-color: var(--accent-dark);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;

  box-shadow: 0 4px 14px var(--shadow-soft);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover-effekt på faktabjælken */
.home-fact-strip:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px var(--shadow-medium);
}

/* Lille tekst i faktabjælken */
.fact-text p {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}

/* Overskrift i faktabjælken */
.fact-text h2 {
  font-size: 30px;
  line-height: 1.2;
}

/* Teksten i faktabjælken er lys, fordi baggrunden er mørk */
.fact-text p,
.fact-text h2 {
  color: var(--background);
}

/* Link-knappen i faktabjælken */
.home-fact-strip a {
  background-color: var(--accent-pink);
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  padding: 14px 28px;
  display: inline-block;
  width: fit-content;
}

/* Mobiltilpasning af faktabjælken */
@media (max-width: 768px) {
  .home-fact-strip {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .fact-symbol {
    margin: 0 auto;
  }
}

/* ================================================== */
/* ---------- HVAD ER GUT HEALTH ---------- */
/* ================================================== */

/* Hero-sectionen på siden “Hvad er gut health?” */
.hero-section {
  min-height: 430px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
  padding: 50px 0;
}

/* Overskrift i hero-sectionen */
.hero-text h1 {
  font-size: 56px;
  line-height: 1.1;
  margin-bottom: 24px;
}

/* Brødtekst i hero-sectionen */
.hero-text p {
  max-width: 520px;
  font-size: 18px;
  line-height: 1.7;
}

/* Område til billedet/giffen i hero-sectionen */
.hero-illustration {
  position: relative;
  height: 330px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ikonklasse, hvis der bruges et gut health-ikon */
.gut-icon {
  font-size: 110px;
  z-index: 2;
}

/* Cirkel-elementer, hvis der bruges dekorative cirkler */
.circle {
  position: absolute;
  border-radius: 0;
}

/* Lille label, fx FORSKNING eller INFOGRAFIK */
.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  min-width: 130px;
  height: 44px;
  padding: 0 28px;

  background-color: var(--accent-pink);
  color: var(--text);
  border-radius: 0;

  font-family: "Switzer", sans-serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;

  margin-bottom: 18px;
}

/* Fælles styling for forskningssektionen og infografiksektionen */
.research-section,
.info-section {
  margin-top: 40px;
  padding: 40px;
  min-height: 560px;

  background-color: var(--card-bg);
  border-radius: 0;

  box-shadow: 0 4px 14px var(--shadow-soft);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover-effekt på forsknings- og infografiksektionen */
.research-section:hover,
.info-section:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px var(--shadow-medium);
}
/* Forskningssektionen bruger flex, så teksten kan placeres pænt lodret */
.research-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Overskrifter i forsknings- og infografiksektionerne */
.research-section h2,
.info-section h2 {
  font-family: "Switzer", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 24px;
  color: var(--text);
}

/* Brødtekst i forskningssektionen, men ikke den lille section-label */
.research-section p:not(.section-label) {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 1.8;
}

/* Linket til forskningsartiklen */
.research-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--accent-dark);
  font-weight: 800;
  text-decoration: none;
}

/* Hover-effekt på forskningslinket */
.research-link:hover {
  opacity: 0.7;
}

/* Ekstra afstand under labels i disse sektioner */
.info-section .section-label,
.research-section .section-label {
  margin-bottom: 24px;
}

/* Wrapperen centrerer infografikken */
.infographic-image-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Selve infografik-billedet */
.infographic-image {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
}

/* Call-to-action sektionen nederst på siden */
.cta-section {
  margin: 60px 0;
  background-color: var(--accent-dark);
  border-radius: 0;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  box-shadow: 0 4px 14px var(--shadow-soft);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Hover-effekt på call-to-action sektionen */
.cta-section:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px var(--shadow-medium);
}

/* Teksten i CTA-sektionen er lys, fordi baggrunden er mørk */
.cta-section h2,
.cta-section p {
  color: var(--card-bg);
}

/* CTA-knappen får lyserød baggrund */
.cta-section .cta-btn {
  background-color: var(--accent-pink);
  color: var(--text);
}

/* ================================================== */
/* ---------- OPSKRIFTER ---------- */
/* ================================================== */

/* Introsektioner på opskriftssiden og blogsiden */
.recipes-intro,
.blog-intro {
  padding: 70px 0 40px;
}

/* Store overskrifter på opskriftssiden og blogsiden */
.recipes-intro h1,
.blog-intro h1 {
  font-size: 56px;
  line-height: 1.1;
  margin-bottom: 18px;
}

/* Brødtekst i introsektionerne */
.recipes-intro p,
.blog-intro p {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.7;
}

/* Afstand under kildehenvisningen på opskriftssiden */
.recipes-source {
  margin-bottom: 28px;
}

/* Styling til kildehenvisninger */
.recipes-source p,
.recipe-source,
.source-section p {
  font-size: 14px;
  font-style: italic;
  color: var(--muted-text);
}

/* Filterknapperne står på række og kan wrappe på mindre skærme */
.recipes-filter {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 42px;
}

/* Styling af filterknapper */
.filter-btn {
  background-color: var(--accent-pink);
  color: var(--text);
  border: 1px solid var(--soft-border);
  border-radius: 0;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Hover og aktiv tilstand for filterknapper */
.filter-btn:hover,
.active-filter {
  background-color: var(--accent-dark);
  color: var(--card-bg);
  border-color: var(--accent-dark);
}

/* Grid-layout for opskriftskort og blogkort */
.recipes-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 80px;
}

/* Grundstyling for opskriftskort og blogkort */
.recipe-card,
.blog-card {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Hover nulstilles først her */
.recipe-card:hover,
.blog-card:hover {
  transform: none;
  box-shadow: none;
}

/* Billede-container på opskriftskort og blogkort */
.recipe-image,
.blog-image {
  height: 240px;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 18px;
}

/* Billederne fylder hele billedområdet */
.recipe-image img,
.blog-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* Tekstområdet under opskrifts- og blogbilleder */
.recipe-card-text,
.blog-card-text {
  padding: 0;
  text-align: left;
}
/* Kategoritekst på opskriftskort */
.recipe-category {
  background: none;
  padding: 0;
  margin-bottom: 8px;

  font-size: 13px;
  font-weight: 600;
  color: var(--accent-dark);
}

/* Overskrifter på opskriftskort og blogkort */
.recipe-card-text h2,
.blog-card-text h2 {
  font-size: 26px;
  line-height: 1.15;
  margin-bottom: 10px;
}

/* Brødtekst på opskriftskort og blogkort */
.recipe-card-text p,
.blog-card-text p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Linktekst på kortene */
.read-recipe-link {
  font-size: 14px;
  font-weight: 800;
}

/* Sørger for at links på opskriftskort ikke får standard blå farve eller understregning */
.recipe-card,
.recipe-card:visited,
.recipe-card:hover,
.recipe-card:active {
  color: inherit;
  text-decoration: none;
}

/* Fjerner understregning på tekst inde i opskriftskort */
.recipe-card h2,
.recipe-card p,
.recipe-card span {
  text-decoration: none;
}

/* Smooth hover-effekt på opskriftskort og blogkort */
.recipe-card,
.blog-card {
  border-radius: 0;
  overflow: hidden;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* Kortene løfter sig lidt, når man holder musen over dem */
.recipe-card:hover,
.blog-card:hover {
  transform: translateY(-6px);
  opacity: 0.92;
}

/* ---------- BLOG POSTS ---------- */

/* Blogkort fungerer som links, men skal ligne kort frem for normale links */
.blog-card {
  text-decoration: none;
  color: inherit;
  border-radius: 0;
  overflow: hidden;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

/* Hover-effekt på blogkort */
.blog-card:hover {
  transform: translateY(-6px);
  opacity: 0.92;
}

/* Fjerner understregning fra alt indhold inde i blogkort */
.blog-card * {
  text-decoration: none;
}

/* Zoom-effekt på blogbilleder ved hover */
.blog-card:hover .blog-image img {
  transform: scale(1.04);
}

/* Zoom-effekt på opskriftsbilleder ved hover */
.recipe-card:hover .recipe-image img {
  transform: scale(1.04);
}

/* Billeder i opskriftskort */
.recipe-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Billeder i blogkort */
.blog-image img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Kategoritekst på blogkort */
.blog-category {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-bottom: 8px;
}

/* Tekstområdet på blogkort */
.blog-card-text {
  padding: 18px 0 0;
  text-align: left;
}

/* ---------- ENKELT OPSKRIFT ---------- */

/* Billedområdet på en enkelt opskrift */
.single-recipe-image {
  border-radius: 0;
}

/* Bokse til ingredienser og fremgangsmåde */
.ingredients-box,
.steps-box {
  background-color: var(--card-bg);
  border-radius: 0;
  box-shadow: 0 4px 14px var(--shadow-soft);
}

/* Hero-området på en opskriftsunderside */
.single-recipe-hero {
  padding: 70px 0 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
}

/* Overskrift på opskriftsundersiden */
.single-recipe-text h1 {
  font-size: 54px;
  line-height: 1.1;
  margin-bottom: 20px;
}

/* Brødtekst på opskriftsundersiden */
.single-recipe-text p {
  max-width: 580px;
  font-size: 18px;
  line-height: 1.7;
}

/* Tidsangivelse på opskriftsundersiden */
.single-recipe-text .recipe-time {
  margin-top: 22px;
  margin-bottom: 34px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

/* Tilbage-link på undersider */
.back-link {
  display: inline-block;
  margin-top: 26px;
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
}

/* Billedecontainer på en enkelt opskrift */
.single-recipe-image {
  width: 100%;
  height: 360px;
  background-color: var(--image-placeholder);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Billedet fylder hele containeren */
.single-recipe-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Hvis der bruges et ikon/emoji i stedet for billede */
.single-recipe-image span {
  font-size: 100px;
}

/* Indholdet under opskriftens hero */
.single-recipe-content {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  margin-bottom: 80px;
}

/* Ingrediens- og fremgangsmådebokse */
.ingredients-box,
.steps-box {
  background-color: var(--background);
  border-radius: 0;
  padding: 36px;
}
/* Overskrifter i ingrediens- og fremgangsmådeboksene */
.ingredients-box h2,
.steps-box h2 {
  font-size: 32px;
  margin-bottom: 22px;
}

/* Giver listerne indrykning, så punkterne vises pænt */
.ingredients-box ul,
.steps-box ol {
  padding-left: 22px;
}

/* Listepunkter i ingredienser og fremgangsmåde */
.ingredients-box li,
.steps-box li {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
}

/* Ernæringsboksen nederst på opskriftsundersiden */
.nutrition {
  margin-top: 26px;
  padding: 18px;
  background-color: var(--soft-green);
  border-radius: 0;
  font-weight: 600;
}

/* ---------- BLOG UNDERSIDE ---------- */

/* Hero-området på en blogunderside */
.blog-post-hero {
  padding: 70px 0 50px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 55px;
  align-items: center;
}

/* Overskrift på blogundersiden */
.blog-post-text h1 {
  font-size: 54px;
  line-height: 1.1;
  margin-bottom: 20px;
}

/* Brødtekst i hero-området på blogundersiden */
.blog-post-text p {
  max-width: 580px;
  font-size: 18px;
  line-height: 1.7;
}

/* Billedcontainer på blogundersiden */
.blog-post-image {
  width: 100%;
  height: 360px;
  overflow: hidden;
}

/* Billedet fylder hele billedcontaineren */
.blog-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Indholdsområdet med artiklens tekst */
.blog-post-content {
  max-width: 820px;
  margin: 0 auto 80px;
}

/* Hver tekstsektion i blogindlægget */
.blog-post-section {
  margin-bottom: 42px;
}

/* Underoverskrifter i blogindlægget */
.blog-post-section h2 {
  font-size: 30px;
  margin-bottom: 14px;
}

/* Brødtekst i blogindlægget */
.blog-post-section p {
  font-size: 17px;
  line-height: 1.8;
}

/* Kildehenvisning i blogindlægget */
.blog-post-source {
  margin-top: 30px;
  font-size: 14px;
  font-style: italic;
  color: var(--muted-text);
}

/* Styling af kilde-link på blogindlæg */
.blog-post-source a {
  color: var(--accent-dark);
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Hover-effekt når brugeren holder musen over kilden */
.blog-post-source a:hover {
  opacity: 0.7;
}

/* Mobiltilpasning for blogundersiden */
@media (max-width: 768px) {
  /* Bloghero går fra to kolonner til én kolonne på mobil */
  .blog-post-hero {
    grid-template-columns: 1fr;
  }

  /* Blogoverskrift bliver mindre på mobil */
  .blog-post-text h1 {
    font-size: 40px;
  }

  /* Blogbilledet bliver lavere på mobil */
  .blog-post-image {
    height: 260px;
  }
}

/* ================================================== */
/* ---------- OM OS ---------- */
/* ================================================== */

/* Layoutet på Om os-siden med tekst til venstre og billede til højre */
.about-layout {
  width: 100%;
  margin: 80px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 80px;
  align-items: center;
}

/* Afstand under Om os-overskriften */
.about-left h1 {
  margin-bottom: 28px;
}

/* Brødtekst på Om os-siden */
.about-left p {
  max-width: 760px;
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Højre billedkolonne */
.about-right {
  width: 100%;
}

/* Gruppebillede på Om os-siden */
.about-team-image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}

/* ---------- SO-ME BLOK ---------- */

/* Sektion om sociale medier */
.some-section {
  width: 100%;
  margin: 80px 0;
  padding: 40px;
  background-color: var(--card-bg);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

/* Label i SoMe-sektionen */
.some-section .section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  background-color: var(--accent-pink);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 14px 26px;
  margin-bottom: 28px;
}

/* Overskrift i SoMe-sektionen */
.some-section h2 {
  font-size: 38px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 22px;
}

/* Brødtekst i SoMe-sektionen */
.some-section p {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 18px;
}

/* Wrapper til videoen, så den holder 16:9-format */
.some-section .video-wrapper {
  margin-top: 32px;
  max-width: 760px;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Selve YouTube-iframe-videoen */
.some-section .video-wrapper iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}
/* ---------- KONTAKT BLOK ---------- */

/* Kontaktsektion på Om os-siden */
.about-contact-section {
  width: 100%;
  margin: 80px 0 90px;
  padding: 40px;
  background-color: var(--accent-dark);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
}

/* Overskrift i kontaktsektionen */
.about-contact-section h2 {
  font-size: 38px;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--background);
}

/* Tekst i kontaktsektionen */
.about-contact-section p {
  max-width: 760px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--background);
  margin-bottom: 8px;
}

/* Gør kontaktoplysningerne tydeligere */
.about-contact-section strong {
  font-weight: 700;
}

/* Smooth hover-animation på SoMe- og kontaktsektionen */
.some-section,
.about-contact-section {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Sektionerne løfter sig lidt ved hover */
.some-section:hover,
.about-contact-section:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px var(--shadow-medium);
}

/* ---------- MOBIL ---------- */

/* Mobiltilpasning for Om os-siden */
@media (max-width: 768px) {
  /* Gør Om os-layoutet mere kompakt på mobil */
  .about-layout {
    margin: 50px 0;
    gap: 30px;
  }

  /* Mindre overskrift på mobil */
  .about-left h1 {
    font-size: 40px;
  }

  /* Mindre brødtekst på mobil */
  .about-left p {
    font-size: 16px;
    line-height: 1.6;
  }

  /* Gruppebilledet tilpasses skærmens størrelse */
  .about-team-image {
    height: auto;
    max-height: 360px;
  }

  /* SoMe-sektionen får mindre margin og padding på mobil */
  .some-section {
    margin: 50px 0;
    padding: 28px 22px;
  }

  /* Overskrifter i SoMe- og kontaktsektionerne bliver mindre */
  .some-section h2,
  .about-contact-section h2 {
    font-size: 32px;
  }

  /* Tekst i SoMe- og kontaktsektionerne bliver mindre */
  .some-section p,
  .about-contact-section p {
    font-size: 16px;
  }

  /* Videoen må fylde hele bredden på mobil */
  .some-section .video-wrapper {
    max-width: 100%;
  }

  /* Kontaktsektionen får mindre margin og padding på mobil */
  .about-contact-section {
    margin: 50px 0 70px;
    padding: 30px 22px;
  }
}

/* Når skærmen er under 900px, bliver Om os-layoutet én kolonne */
@media (max-width: 900px) {
  .about-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Gruppebilledet begrænses i højden */
  .about-team-image {
    height: auto;
    max-height: 420px;
  }
}

/* Ekstra mobiltilpasning for sektioner og video */
@media (max-width: 768px) {
  .about-layout {
    margin: 50px 0;
  }

  .some-section,
  .about-contact-section {
    margin: 50px 0;
    padding: 28px 22px;
  }

  .video-wrapper {
    max-width: 100%;
  }

  .some-section iframe {
    width: 100%;
  }
}

/* ================================================== */
/* ---------- QUIZ ---------- */
/* ================================================== */

/* Hele quizområdet centreres på siden */
.quiz-section {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 0;
}

/* Quizsidens hovedoverskrift */
.quiz-section h1 {
  font-size: 52px;
  margin-bottom: 36px;
  text-align: center;
}

/* Kortet hvor quizspørgsmål og resultater vises */
.quiz-card {
  width: 100%;
  max-width: 720px;
  min-height: 330px;
  background-color: var(--accent-dark);
  border-radius: 0;
  padding: 55px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Klassen hidden skjuler elementer */
.hidden {
  display: none;
}

/* Overskrift inde i quizkort */
.quiz-card h2 {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 18px;
}

/* Brødtekst inde i quizkort */
.quiz-card p {
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
}

/* Teksten i quizkortet gøres lys, fordi baggrunden er mørk */
.quiz-card h2,
.quiz-card p,
.quiz-progress,
.quiz-feedback {
  color: var(--background);
}

/* Knapper i quizzen */
.quiz-btn-main,
.next-question-btn {
  margin-top: 30px;
  background-color: var(--accent-pink);
  color: var(--text);
  border: none;
  border-radius: 0;
  padding: 14px 38px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

/* Næste-knappen har samme farver som hovedknappen */
.next-question-btn {
  background-color: var(--accent-pink);
  color: var(--text);
}

/* Hover-effekt på quizknapper */
.quiz-btn-main:hover,
.next-question-btn:hover {
  opacity: 0.75;
}

/* Viser hvor langt brugeren er i quizzen */
.quiz-progress {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
}

/* Dekorativ streg før og efter progress-teksten */
.quiz-progress::before,
.quiz-progress::after {
  content: "";
  display: inline-block;
  width: 70px;
  height: 2px;
  background-color: var(--background);
  margin: 0 16px 4px;
}

/* Container til svarmulighederne */
.quiz-answer-buttons {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 260px;
}

/* Svar-knapperne i quizzen */
.quiz-answer-buttons button {
  background-color: var(--accent-pink);
  color: var(--text);
  border: none;
  border-radius: 0;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Hover-effekt på svar-knapperne */
.quiz-answer-buttons button:hover {
  opacity: 0.75;
}

/* Feedback efter brugeren har svaret */
.quiz-feedback {
  margin-top: 22px;
  font-weight: 800;
}

/* ---------- FOOTER ---------- */

/* Logoet nederst på siden */
.footer-logo {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}

/* Hover-effekt på footer-logo */
.footer-logo:hover {
  opacity: 0.75;
}

/* Footerens layout */
footer {
  width: 100%;
  background-color: var(--background);
  padding: 40px 8%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-top: 1px solid var(--shadow-soft);
}

/* h2 i footeren */
footer h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}

/* Tekst i footeren, fx kontaktmail */
footer p {
  font-size: 15px;
  font-style: italic;
}

/* Container til sociale medier-ikoner */
.footer-socials {
  display: flex;
  gap: 16px;
}

/* Hvert SoMe-link vises som en lille firkant med ikon */
.footer-socials a {
  width: 42px;
  height: 42px;

  background-color: var(--card-bg);
  color: var(--text);

  border: 1px solid rgba(44, 44, 44, 0.12);
  border-radius: 0;

  text-decoration: none;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
}

/* Hover-effekt på SoMe-ikoner */
.footer-socials a:hover {
  opacity: 0.75;
}

/* ---------- SO-ME MOCKUP SIDE ---------- */
/* Styling til siderne med Instagram, TikTok og LinkedIn mockups */
.some-mockup-page {
  min-height: 100vh;
  padding: 70px 0;
  text-align: center;
}

/* Styling af mockup-billedet, så det står centreret og ikke bliver for stort */
.some-mockup-image {
  max-width: 430px;
  width: 100%;
  margin: 40px auto 20px;
  display: block;
}

/* ---------- MOBIL ---------- */

/* Generel mobiltilpasning for skærme under 768px */
@media (max-width: 768px) {
  /* Main fylder lidt mere af skærmen på mobil */
  main {
    width: 90%;
  }

  /* Headeren tilpasses mobilvisning */
  .site-header {
    position: relative;
    height: auto;
    min-height: 80px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 22px 8%;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  /* Burgerknappen vises på mobil */
  .burger {
    display: flex;
  }

  /* Navigationen skjules som udgangspunkt på mobil */
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--background);
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 28px 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    z-index: 10;
  }

  /* Når JavaScript tilføjer class open, vises mobilmenuen */
  .nav-menu.open {
    display: flex;
  }

  /* Quiz-knappen i headeren skjules på mobil */
  .header-btn {
    display: none;
  }

  /* Links i mobilmenuen gøres større */
  .nav-menu a {
    font-size: 18px;
  }

  /* Hero-sektion på mobil */
  .home-hero {
    padding: 36px;
    min-height: 460px;
  }

  /* Flere store overskrifter gøres mindre på mobil */
  .home-hero h1,
  .hero-text h1,
  .recipes-intro h1,
  .blog-intro h1,
  .about-hero-text h1,
  .quiz-section h1,
  .single-recipe-text h1 {
    font-size: 40px;
  }

  /* Flere layouts går fra to kolonner til én kolonne på mobil */
  .hero-section,
  .home-about,
  .about-hero,
  .single-recipe-hero {
    grid-template-columns: 1fr;
  }

  /* Hero-illustrationen gøres lavere på mobil */
  .hero-illustration {
    height: 260px;
  }

  /* Quick links vises i to kolonner på mobil, hvis de bruges */
  .quick-links {
    grid-template-columns: 1fr 1fr;
  }

  /* Grids bliver til én kolonne på mobil */
  .recipes-grid,
  .blog-grid,
  .single-recipe-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* Billedeområder får fast højde på mobil */
  .recipe-image,
  .blog-image {
    height: 240px;
    font-size: 70px;
  }

  /* Opskriftsbilleder holder samme højde på mobil */
  .recipe-image img {
    height: 240px;
  }

  /* Sektioner får mindre padding på mobil */
  .research-section,
  .info-section {
    padding: 32px 24px;
  }

  /* Overskrifter i sektioner bliver mindre på mobil */
  .research-section h2,
  .info-section h2,
  .cta-section h2 {
    font-size: 32px;
  }

  /* Footer og andre sektioner stables lodret på mobil */
  .cta-section,
  .about-contact,
  footer {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Faktabjælke sættes i én kolonne */
  .fact-strip {
    grid-template-columns: 1fr;
    text-align: center;
  }

  /* Faktikon centreres, hvis det bruges */
  .fact-icon {
    margin: 0 auto;
  }

  /* Værdi-sektion tilpasses mobil, hvis den bruges */
  .about-values {
    grid-template-columns: 1fr 1fr;
    padding: 28px;
  }

  /* Quizkortet bliver mere kompakt på mobil */
  .quiz-card {
    padding: 38px 24px;
    min-height: 320px;
  }

  /* Stregerne omkring quiz-progress bliver kortere */
  .quiz-progress::before,
  .quiz-progress::after {
    width: 35px;
    margin: 0 10px 4px;
  }

  /* Svarmulighederne fylder bedre på mobil */
  .quiz-answer-buttons {
    width: 100%;
    max-width: 260px;
  }

  /* Opskriftsbillede på undersiden bliver lavere på mobil */
  .single-recipe-image {
    height: 260px;
  }

  /* Footeren centreres på mobil */
  footer {
    gap: 20px;
    text-align: center;
    align-items: center;
  }
}

/* Ekstra tilpasning til meget små skærme */
@media (max-width: 480px) {
  /* Disse sektioner bliver til én kolonne på små mobiler */
  .quick-links,
  .about-values {
    grid-template-columns: 1fr;
  }
}