/* DailyRecipeFeed recipe detail visual polish
   Loaded after app.css. Uses public recipe-* classes; old database markup is normalized in PHP before rendering. */

@media (min-width: 1200px) {
  .recipe-page-container.container {
    max-width: 1220px !important;
  }
}

.recipe-page-container {
  padding-top: 18px;
}

.recipe-page-container .recipe-detail-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 820px) 300px !important;
  gap: 32px !important;
  align-items: start !important;
  justify-content: center !important;
}

.recipe-page-container .recipe-detail-main {
  min-width: 0 !important;
}

.recipe-page-container .recipe-detail-sidebar {
  width: 300px !important;
  max-width: 300px !important;
}

.recipe-page-container .recipe-detail-body {
  padding: 30px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid #f0e2d8 !important;
  box-shadow: 0 18px 44px rgba(83, 48, 26, 0.07) !important;
}

.recipe-page-container .recipe-card-detail {
  padding: 0 !important;
}

.recipe-page-container .recipe-breadcrumb-trail {
  margin-bottom: 12px !important;
  font-size: 12px !important;
  color: #d76a38 !important;
}

.recipe-page-container .recipe-main-title {
  margin: 0 0 12px !important;
  font-size: 38px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
}

.recipe-page-container .recipe-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 20px !important;
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid #f2e5dc !important;
}

.recipe-page-container .recipe-meta-row span {
  font-size: 13px !important;
}

.recipe-page-container .recipe-summary-card {
  display: grid !important;
  grid-template-columns: 285px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: center !important;
  margin: 0 0 30px !important;
  padding: 22px !important;
  border: 1px solid #f0dfd2 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #fffaf6 0%, #fff 100%) !important;
  box-shadow: 0 12px 30px rgba(88, 52, 25, 0.06) !important;
}

.recipe-page-container .recipe-summary-image img {
  display: block !important;
  width: 100% !important;
  height: 220px !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.09) !important;
}

.recipe-page-container .recipe-summary-description {
  margin-bottom: 16px !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #4d4038 !important;
}

.recipe-page-container .recipe-summary-meta p {
  display: grid !important;
  grid-template-columns: 155px minmax(0, 1fr) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f0e3da !important;
}

.recipe-page-container .recipe-summary-meta p:last-child {
  border-bottom: 0 !important;
}

.recipe-page-container .recipe-summary-meta b {
  width: auto !important;
  color: #2d2018 !important;
}

.recipe-page-container .recipe-body-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
  gap: 24px !important;
  align-items: start !important;
  margin-top: 0 !important;
}

.recipe-page-container .recipe-section-card {
  min-width: 0 !important;
  height: auto !important;
  padding: 26px !important;
  border: 1px solid #f0dfd2 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 12px 28px rgba(88, 52, 25, 0.045) !important;
}

.recipe-page-container .recipe-section-card h2,
.recipe-page-container .recipe-nutrition h2 {
  position: relative !important;
  margin: 0 0 18px !important;
  padding-bottom: 12px !important;
  font-size: 22px !important;
  line-height: 1.18 !important;
  color: #221813 !important;
}

.recipe-page-container .recipe-section-card h2::after,
.recipe-page-container .recipe-nutrition h2::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 54px !important;
  height: 2px !important;
  background: #ff6b2c !important;
  border-radius: 2px !important;
}

.recipe-page-container .recipe-section-card p,
.recipe-page-container .recipe-section-card li {
  font-size: 15px !important;
  line-height: 1.76 !important;
  color: #4b4039 !important;
}

.recipe-page-container .recipe-intro {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  background: linear-gradient(180deg, #fff8f0 0%, #ffffff 100%) !important;
}

.recipe-page-container .recipe-intro p {
  max-width: 920px !important;
}

.recipe-page-container .recipe-ingredients {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.recipe-page-container .recipe-ingredient-notes {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.recipe-page-container .recipe-instructions {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

.recipe-page-container .recipe-katy-tips {
  grid-column: 1 !important;
  grid-row: 4 !important;
}

.recipe-page-container .recipe-variations {
  grid-column: 2 !important;
  grid-row: 4 !important;
}

.recipe-page-container .recipe-serving {
  grid-column: 1 !important;
  grid-row: 5 !important;
}

.recipe-page-container .recipe-storage {
  grid-column: 2 !important;
  grid-row: 5 !important;
}

.recipe-page-container .recipe-mistakes {
  grid-column: 1 !important;
  grid-row: 6 !important;
}

.recipe-page-container .recipe-faq {
  grid-column: 2 !important;
  grid-row: 6 !important;
}

.recipe-page-container .recipe-ingredients ul,
.recipe-page-container .recipe-section-card ul,
.recipe-page-container .recipe-instructions ol {
  margin-bottom: 0 !important;
}

.recipe-page-container .recipe-ingredients li {
  padding: 9px 0 !important;
  border-bottom: 1px solid #f4ebe5 !important;
}

.recipe-page-container .recipe-ingredients li:last-child {
  border-bottom: 0 !important;
}

.recipe-page-container .recipe-instructions li {
  display: flex !important;
  gap: 13px !important;
  align-items: flex-start !important;
  margin-bottom: 18px !important;
}

.recipe-page-container .recipe-instructions li:last-child {
  margin-bottom: 0 !important;
}

.recipe-page-container .recipe-step-number {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 13px !important;
  line-height: 28px !important;
}

.recipe-page-container .recipe-kitchen-note {
  margin-top: 20px !important;
  padding: 16px 18px !important;
  border: 1px solid #d9e9bf !important;
  border-radius: 12px !important;
  background: #f7fbe9 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.recipe-page-container .recipe-faq h3 {
  margin: 18px 0 6px !important;
  font-size: 18px !important;
  line-height: 1.28 !important;
  color: #2a1b14 !important;
}

.recipe-page-container .recipe-faq h3:first-of-type {
  margin-top: 0 !important;
}

.recipe-page-container .recipe-nutrition {
  margin-top: 26px !important;
  padding: 28px !important;
  border: 1px solid #f0dfd2 !important;
  border-radius: 18px !important;
  background: #fffaf6 !important;
  box-shadow: 0 12px 28px rgba(88, 52, 25, 0.045) !important;
}

.recipe-page-container .recipe-nutrition-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.recipe-page-container .recipe-nutrition-list li {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 11px 12px !important;
  border: 1px solid #f1e3d9 !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
}

.recipe-page-container .recipe-detail-related {
  margin-top: 34px !important;
  padding-top: 22px !important;
  border-top: 1px solid #f0e2d8 !important;
}

.recipe-page-container .recipe-detail-related h3 {
  font-size: 22px !important;
}

.recipe-page-container .recipe-side-card {
  border-radius: 16px !important;
  box-shadow: 0 12px 30px rgba(80, 48, 20, 0.07) !important;
}

@media (min-width: 992px) {
  .recipe-page-container .recipe-detail-sidebar {
    position: sticky !important;
    top: 88px !important;
  }
}

@media (max-width: 1199px) {
  .recipe-page-container.container {
    max-width: 1080px !important;
  }

  .recipe-page-container .recipe-detail-grid {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 24px !important;
  }

  .recipe-page-container .recipe-main-title {
    font-size: 34px !important;
  }
}

@media (max-width: 991px) {
  .recipe-page-container.container {
    max-width: 780px !important;
  }

  .recipe-page-container .recipe-detail-grid,
  .recipe-page-container .recipe-body-grid,
  .recipe-page-container .recipe-summary-card {
    grid-template-columns: 1fr !important;
  }

  .recipe-page-container .recipe-detail-sidebar {
    width: auto !important;
    max-width: none !important;
    position: static !important;
  }

  .recipe-page-container .recipe-intro,
  .recipe-page-container .recipe-ingredients,
  .recipe-page-container .recipe-ingredient-notes,
  .recipe-page-container .recipe-instructions,
  .recipe-page-container .recipe-katy-tips,
  .recipe-page-container .recipe-variations,
  .recipe-page-container .recipe-serving,
  .recipe-page-container .recipe-storage,
  .recipe-page-container .recipe-mistakes,
  .recipe-page-container .recipe-faq {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .recipe-page-container .recipe-summary-image img {
    height: auto !important;
    max-height: 360px !important;
  }
}

@media (max-width: 575px) {
  .recipe-page-container .recipe-detail-body {
    padding: 18px !important;
  }

  .recipe-page-container .recipe-main-title {
    font-size: 30px !important;
  }

  .recipe-page-container .recipe-summary-card,
  .recipe-page-container .recipe-section-card,
  .recipe-page-container .recipe-nutrition {
    padding: 18px !important;
  }

  .recipe-page-container .recipe-summary-meta p,
  .recipe-page-container .recipe-nutrition-list {
    grid-template-columns: 1fr !important;
  }
}


/* Balance patch: avoid the awkward empty space beside Ingredient Notes.
   Ingredients and notes sit together; Instructions becomes a wide readable card. */
.recipe-page-container .recipe-ingredient-notes {
  background: linear-gradient(180deg, #fffaf6 0%, #ffffff 100%) !important;
}

.recipe-page-container .recipe-instructions {
  padding: 30px !important;
}

.recipe-page-container .recipe-instructions ol {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 22px !important;
}

.recipe-page-container .recipe-instructions li {
  margin-bottom: 0 !important;
  padding: 16px !important;
  border: 1px solid #f3e6dc !important;
  border-radius: 14px !important;
  background: #fffaf7 !important;
}

.recipe-page-container .recipe-instructions .recipe-kitchen-note {
  grid-column: 1 / -1 !important;
}

.recipe-page-container .recipe-kitchen-note {
  margin-top: 22px !important;
}

@media (max-width: 991px) {
  .recipe-page-container .recipe-instructions ol {
    grid-template-columns: 1fr !important;
  }
}


/* Runtime class normalization support.
   The database can still store older recipe markup, but PHP outputs recipe-* classes. */
.recipe-page-container .recipe-content-wrap {
  width: 100% !important;
}

.recipe-page-container .recipe-ingredients ul,
.recipe-page-container .recipe-instructions ol {
  list-style: none !important;
  padding-left: 0 !important;
}

.recipe-page-container .recipe-check {
  color: #87a957 !important;
  font-weight: 700 !important;
  display: inline-block !important;
  margin-right: 2px !important;
}

.recipe-page-container .recipe-instructions p {
  margin: 0 !important;
}

.recipe-page-container .recipe-section-card[id],
.recipe-page-container .recipe-nutrition[id] {
  scroll-margin-top: 120px !important;
}

/* ==== Restore orange circle for instruction step numbers ==== */
.drf-instructions ol,
.recipe-section-instructions ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drf-instructions ol li,
.recipe-section-instructions ol li {
    position: relative;
    padding: 18px 18px 18px 56px;
}

.drf-instructions .drf-step-number,
.recipe-section-instructions .recipe-step-number,
.recipe-section-instructions .drf-step-number {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f47a2a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.drf-instructions ol li p,
.recipe-section-instructions ol li p {
    margin: 0;
}


/* =========================================================
   DailyRecipeFeed - Instructions Step Cards
   Restore orange numbered circles + clean recipe step layout
   ========================================================= */

/* Instructions card wrapper */
.recipe-section-instructions,
.drf-instructions {
    grid-column: span 2;
    background: #fffdfb;
    border: 1px solid #f1d8c8;
    border-radius: 18px;
    padding: 28px 28px 30px;
    box-shadow: 0 10px 28px rgba(87, 49, 28, 0.045);
}

/* Section title */
.recipe-section-instructions h2,
.drf-instructions h2 {
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ead7c9;
    font-size: 30px;
    line-height: 1.15;
    color: #2a1408;
    position: relative;
}

/* Orange underline */
.recipe-section-instructions h2::after,
.drf-instructions h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 74px;
    height: 3px;
    background: #f47a2a;
    border-radius: 999px;
}

/* Remove default ordered list style */
.recipe-section-instructions ol,
.drf-instructions ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
}

/* Each step card */
.recipe-section-instructions ol li,
.drf-instructions ol li {
    position: relative;
    min-height: 150px;
    padding: 26px 26px 24px 72px;
    background: #fff9f5;
    border: 1px solid #f0d5c3;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(87, 49, 28, 0.035);
}

/* Orange circle number - supports both old and new class names */
.recipe-section-instructions .recipe-step-number,
.recipe-section-instructions .drf-step-number,
.drf-instructions .recipe-step-number,
.drf-instructions .drf-step-number {
    position: absolute;
    top: 26px;
    left: 26px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #f4682f;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 5px 12px rgba(244, 104, 47, 0.25);
}

/* Step text */
.recipe-section-instructions ol li p,
.drf-instructions ol li p {
    margin: 0;
    color: #32190d;
    font-size: 16px;
    line-height: 1.75;
}

/* Katy note box under instructions */
.recipe-section-instructions .recipe-tip,
.recipe-section-instructions .drf-tip,
.drf-instructions .recipe-tip,
.drf-instructions .drf-tip {
    margin-top: 26px;
    padding: 18px 22px;
    background: #f7fde9;
    border: 1px solid #cfe8a8;
    border-radius: 16px;
    color: #3d571d;
    font-size: 15px;
    line-height: 1.65;
}

.recipe-section-instructions .recipe-tip b,
.recipe-section-instructions .drf-tip b,
.drf-instructions .recipe-tip b,
.drf-instructions .drf-tip b {
    color: #29410f;
}

/* Tablet */
@media (max-width: 991px) {
    .recipe-section-instructions,
    .drf-instructions {
        grid-column: span 1;
        padding: 24px 22px;
    }

    .recipe-section-instructions ol,
    .drf-instructions ol {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .recipe-section-instructions ol li,
    .drf-instructions ol li {
        min-height: auto;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .recipe-section-instructions,
    .drf-instructions {
        padding: 20px 16px;
        border-radius: 15px;
    }

    .recipe-section-instructions h2,
    .drf-instructions h2 {
        font-size: 24px;
    }

    .recipe-section-instructions ol li,
    .drf-instructions ol li {
        padding: 20px 18px 20px 60px;
        border-radius: 15px;
    }

    .recipe-section-instructions .recipe-step-number,
    .recipe-section-instructions .drf-step-number,
    .drf-instructions .recipe-step-number,
    .drf-instructions .drf-step-number {
        top: 20px;
        left: 18px;
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .recipe-section-instructions ol li p,
    .drf-instructions ol li p {
        font-size: 15px;
        line-height: 1.65;
    }
}

/* ==== FINAL FIX: recipe-instructions orange step circles ==== */
/* Your current HTML uses: <section class="recipe-section-card recipe-instructions"> ... <span class="recipe-step-number">1</span>
   So the selector must target .recipe-instructions, not only .recipe-section-instructions/.drf-instructions. */
.recipe-page-container .recipe-instructions ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.recipe-page-container .recipe-instructions ol li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

.recipe-page-container .recipe-instructions ol li .recipe-step-number,
.recipe-page-container .recipe-instructions ol li .drf-step-number {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 999px !important;
    background: #f4682f !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
    box-shadow: 0 5px 12px rgba(244, 104, 47, 0.25) !important;
    margin-top: 2px !important;
}

.recipe-page-container .recipe-instructions ol li p {
    margin: 0 !important;
    flex: 1 1 auto !important;
}

@media (max-width: 575px) {
    .recipe-page-container .recipe-instructions ol li {
        gap: 12px !important;
    }

    .recipe-page-container .recipe-instructions ol li .recipe-step-number,
    .recipe-page-container .recipe-instructions ol li .drf-step-number {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 13px !important;
    }
}