@import url("styles/cssreset.css");
@import url("styles/fonts.css");
@import url("styles/variables.css");
@import url("styles/attribution.css");

/* ------------ */
/* Page Styling */
/* ------------ */

body {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

main {
  background-color: var(--white);
}

hr {
  border-top: 1px solid var(--light-grey);
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

article {
  padding: 2rem;
}

section {
  display: grid;
  row-gap: 1.25rem;
}

#preparation {
  display: grid;
  row-gap: 1rem;
  padding: 1.5rem;
}

#introduction {
  row-gap: 2rem;
}

article {
  display: grid;
  gap: 2rem;
}

/* ------------- */
/* Fonts Styling */
/* ------------- */

h1,
h2 {
  font-family: "Young Serif", serif;
}

p,
h3,
li,
table {
  font-family: "Outfit", sans-serif;
}

body {
  color: var(--wenge-brown);
  margin: 0;
}

h1 {
  font-size: 2rem;
  color: var(--dark-charcoal);
}

h3 {
  color: var(--dark-raspberry);
}

h2,
.nutrition-values {
  color: var(--nutmeg);
}

.nutrition-values {
  font-weight: 700;
}

/* ------------- */
/* Lists Styling */
/* ------------- */

ul,
ol {
  display: grid;
  row-gap: 0.5rem;
}

ul {
  padding-left: 0.5rem;
}

ol {
  padding-left: 1.5rem;
}

ol li {
  padding-left: 1rem;
}

li:before {
  color: var(--nutmeg);
}

#preparation li:before {
  color: var(--dark-raspberry);
}

ol li::marker {
  color: var(--nutmeg);
  font-weight: bold;
}

/* https://stackoverflow.com/questions/40320541/how-to-align-marker-to-center-of-the-image-lists-html */
#preparation li,
#ingredients li {
  list-style-type: none;
  display: flex;
  align-items: center;
}

#preparation li:before,
#ingredients li:before {
  content: "●";
  font-size: 0.5rem;
  border-radius: 50%;
  margin-right: 1.5rem;
}

/* ------------- */
/* Table Styling */
/* ------------- */

/* https://stackoverflow.com/questions/2597694/why-tr-not-taking-style */

table {
  width: 100%;
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid var(--light-grey);
}

tr:last-of-type {
  border-bottom: 0;
}

table td {
  padding: 0.75rem;
  padding-left: 2rem;
  padding-right: 0;
  width: 50%;
}

table td:last-of-type {
  padding: 0;
  padding-left: 0.5rem;
}

/* ----------- */
/* Media Query */
/* ----------- */

@media screen and (min-width: 736px) {
  /* https://stackoverflow.com/questions/38078957/can-we-define-min-margin-and-max-margin-max-padding-and-min-padding-in-css */
  body {
    background-color: var(--eggshell);
    padding: min(calc((100svw - 736px) / 2), 8rem); /* min(PREFERRED, MAXIMUM) */
  }

  main {
    width: 736px;
    padding: 2.5rem;
    border-radius: 20px;
  }

  article {
    margin-top: 2rem;
    padding: 0;
  }

  img {
    border-radius: 10px;
  }
}