/* Import only the scales you need */
@import '@radix-ui/colors/amber.css';
@import '@radix-ui/colors/amber-dark.css';

.recipe-container {
  font-family: "Playfair", var(--default-font-family);
  font-feature-settings: "liga";
}

.print-footer {
  font-family: "Playfair", var(--default-font-family);
  font-feature-settings: "liga";
}

.recipe-message {
  font-family: "Lora", var(--default-font-family);
  text-align: justify;
}

.recipe-directions {
  text-align: justify;
}

/* Customize the way ordered lists are displayed in directions, with left-aligned bold markers */
.recipe-directions ol {
  padding-left: 1.75em;
  counter-reset: item
}
.recipe-directions ol li { display: block }
.recipe-directions ol li:before { 
  content: counter(item) ". ";
  counter-increment: item;
  margin-left: -1.75em;
  width: 1.75em;
  display: inline-block;
  font-weight: bold;
}

/* Apply smaller margin spacing of 2 (Radix Theme units) to the ingredients list items. */
/* NOTE: Bulleted lists and separated lines are formatted the same in ingredients. */
.recipe-ingredients p {
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

.recipe-ingredients h4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

/* Customize the way unordered lists are displayed in ingredients. */
.recipe-ingredients ul { padding-left: 0; }
.recipe-ingredients ul li {
  display: block;
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
}

/* Apply less space between the last paragraph of the message and the separator. */
.recipe-message p:last-child {
  margin-bottom: var(--space-1);
}

/* HACK: Enable the use of the horizontal separater (--- in markdown) as a page break. */ 
.recipe-container hr {
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  break-after: page;
}

@media print {
  .recipe-images {
    break-inside: avoid;
    break-after: page;
  }

  .recipe-notes {
    break-inside: avoid;
  }

  /* When we go to print, don't mark hyperlinks */
  a {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
  }
}