/* ============================================
   Recipe page (layered on detail.css, which
   provides the page shell and header)
   ============================================ */

.recipe-page .post-article {
  max-width: var(--page-width);
}

.recipe-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
}

@media (min-width: 52rem) {
  .recipe-body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-3xl);
    align-items: start;
  }

  .recipe-sidebar {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-lg));
  }
}

/* Sections */
.recipe-section + .recipe-section {
  margin-block-start: var(--space-2xl);
}

.recipe-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-rule);
}

.recipe-section > .recipe-section__title {
  padding-block-end: var(--space-sm);
  border-block-end: 1px solid var(--color-rule);
}

/* The step-mode toggle is a <button> styled as a .text-link. */
.recipe-text-button {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.recipe-print-link {
  display: inline-block;
  margin-block-start: var(--space-lg);
}

/* Servings */
.recipe-servings {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-paragraph);
  font-size: var(--text-sm);
}

.recipe-servings__value {
  min-width: 6.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

#recipe-servings-count {
  color: var(--color-headline);
  font-weight: 600;
}

.recipe-servings__btn {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-pill);
  background: var(--color-field);
  color: var(--color-headline);
  font: inherit;
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.recipe-servings__btn:hover:not(:disabled) {
  border-color: var(--color-warm);
}

.recipe-servings__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Ingredients. Fixed columns rather than flex, so an ingredient with no
   amount ("ice") or no number ("pinch salt") still lines its name up with
   the rest instead of sliding left into the empty columns. */
.recipe-ingredients {
  padding: 0;
  list-style: none;
}

.recipe-ingredient {
  display: grid;
  grid-template-columns: 2.5rem 4rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  padding-block: 0.7rem;
  border-block-end: 1px solid var(--color-rule-soft);
  color: var(--color-headline);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
}

.recipe-ingredient__amount {
  grid-column: 1;
  color: var(--color-warm);
  font-family: var(--font-sans);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
  animation: ingredient-flash 0.6s ease-out;
}

.recipe-ingredient__unit {
  grid-column: 2;
  color: var(--color-muted);
}

.recipe-ingredient__name {
  grid-column: 3;
}

/* recipe-servings.js re-renders the amounts, so a changed amount briefly
   lights up. */
@keyframes ingredient-flash {
  from { background-color: var(--color-warm-wash); }
  to { background-color: transparent; }
}

/* Steps: plain numerals in the margin */
.recipe-steps {
  padding: 0;
  list-style: none;
  counter-reset: recipe-step;
}

.recipe-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-block-end: 1px solid var(--color-rule-soft);
  color: var(--color-headline);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  line-height: 1.8;
  counter-increment: recipe-step;
}

.recipe-step::before {
  content: counter(recipe-step) '.';
  color: var(--color-warm);
  font-family: var(--font-display-editorial);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.45;
}

/* recipe-steps.js swaps the list for step mode with the hidden attribute,
   which loses to any author display value, so restate it. */
.recipe-steps[hidden],
.recipe-step-mode[hidden] {
  display: none;
}

/* Step-by-step mode */
.recipe-step-mode {
  padding-block: var(--space-lg);
}

.recipe-step-mode__counter {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.recipe-step-mode__text {
  margin-block: var(--space-sm) var(--space-xl);
  color: var(--color-headline);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.75;
}

.recipe-step-mode__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.recipe-step-mode__btn {
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--color-field-border);
  border-radius: var(--radius-pill);
  background: var(--color-field);
  color: var(--color-headline);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.recipe-step-mode__btn:hover:not(:disabled) {
  border-color: var(--color-field-border-hover);
}

.recipe-step-mode__btn--primary {
  border-color: var(--color-headline);
  background: var(--color-headline);
  color: var(--color-on-strong);
}

.recipe-step-mode__btn--primary:hover:not(:disabled) {
  border-color: var(--color-link);
  background: var(--color-link);
}

.recipe-step-mode__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Notes */
.recipe-notes {
  margin-block-start: var(--space-md);
  padding-inline-start: var(--space-lg);
  border-inline-start: 2px solid var(--color-warm);
  color: var(--color-paragraph);
  font-family: var(--font-serif);
  line-height: 1.8;
}

@media (max-width: 40rem) {
  .recipe-ingredient {
    grid-template-columns: 2.25rem 3.75rem minmax(0, 1fr);
  }

  .recipe-step-mode__btn {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-ingredient__amount {
    animation: none;
  }
}