ul, ol {
  /* Because <ul> markers are outside the content edge, they ignore the container's
  padding. Therefore, we need to manually add more padding. */
  padding-left: 20px;
}

/* PDF button specific rules */
.pdf-button {
  background-color: #aa8d5b;
}

.pdf-button:hover,
.pdf-button:focus {
  background-color: #8a7147; /* Darkened by 20% */
}


.recipe-description {
  margin-bottom: 1.5em;
}


.durations-and-utensils-container {
  margin-bottom: 15px;

  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.durations-container, .utensils-container {
  min-width: 280px;
  padding: 20px;

  flex: 1;

  background-color: var(--rosewhite);
  border: 1px solid var(--lightgrey);
  border-radius: 8px;
}

.durations-container h3, .utensils-container h3 {
  margin-bottom: 0.5em;

  font-size: 1.4em;
  color: var(--mulberry);
}

.durations-list, .utensils-list {
  /* Added for style. */
  margin-left: 5px;
}


h2 {
  margin-top: 15px;
  margin-bottom: 15px;

  font-weight: 400;
  font-size: 1.8em;
  color: var(--nutmeg);
}

.ingredients-list, .instruction-list {
  margin-bottom: 20px;
}

.ingredients-list > li::marker, .instruction-list > li::marker {
  font-weight: bold;
  color: var(--nutmeg);
}

.instruction-list > li {
  padding-left: 10px;
  margin-bottom: 8px;
}

.separation-line {
  border-top: 1px solid var(--lightgrey);
  margin: 8px 0;
}

.recipe-page-content-container > img {
  max-width: 60%;
  margin-top: 15px;
  margin-inline: auto;

  border-radius: 12px;
}

.attribution {
  text-align: center;
  padding: 20px;
  font-size: 0.8em;
}

/* Mobile styles
 TODO: Go over them */
@media screen and (max-width: 700px) {
  .recipe-page-section {
    margin: 0;
    padding: 0;
  }

  .recipe-page-content-container {
    width: 100%;
    border-radius: 0;
    padding: 20px;
  }

  .recipe-page-content-container > img {
    border-radius: 0;
    margin: -20px -20px 20px -20px;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
  }

  .recipe-page-content-container h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.6em;
  }

  .durations-container h3, .utensils-container h3 {
    font-size: 1.2em;
  }

  .durations-and-utensils-container {
    flex-direction: column; /* Toujours en colonne sur mobile */
  }
}