/* =============================================================================
   ADHDity — 11-recipe-page.css
   Section: 29. Recipe Detail Page (.adhdity-recipe)
   ============================================================================= */

.adhdity-recipe {
  --bg: #f7f2ea; --card: #fffdf9; --ink: #1d2430; --muted: #6e7480; --line: #eadfce;
  --navy: #111d33; --orange: #f59b3d; --shadow: 0 8px 24px rgba(17,24,39,.06); --radius: 18px;
  --green-bg: #edf8f0; --green-b: #9bd2ac; --green-ink: #2f6b42;
  --blue-bg: #f6f9ff; --blue-b: #dce6f8; --blue-ink: #31486b;
  --gold-bg: #fff7ec; --gold-b: #f2d3a9; --gold-ink: #9b611d;
  font-family: Outfit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
}
.adhdity-recipe * { box-sizing: border-box; }

.adhdity-recipe__shell { max-width: 760px; margin: 0 auto; background: var(--bg); padding: 18px; border-radius: 24px; }
.adhdity-recipe__crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; line-height: 1.4; }
.adhdity-recipe__crumbs a { color: #9b611d; text-decoration: none; }
.adhdity-recipe__crumbs span { margin: 0 6px; }

.adhdity-recipe__hero { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px; }
.adhdity-recipe__eyebrow { display: inline-block; padding: 8px 12px; border-radius: 999px; background: #fde8c8; color: #8f4f08; font-size: 12px; font-weight: 800; letter-spacing: .04em; margin-bottom: 14px; }
.adhdity-recipe__title { margin: 0 0 20px; font-size: 36px; line-height: 1.05; font-family: Newsreader, Georgia, serif; }
.adhdity-recipe__ctaRow { display: flex; flex-wrap: wrap; gap: 10px; }
.adhdity-recipe__ctaRow--top { margin-bottom: 22px; }

.adhdity-recipe__sensory { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; margin-top: 6px; }
.adhdity-recipe__sensory span { background: var(--gold-bg); color: var(--gold-ink); border: 1px solid var(--gold-b); padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }

.adhdity-recipe__gridmeta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.adhdity-meta { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.adhdity-meta__label { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.adhdity-meta__value { font-size: 15px; font-weight: 800; }
.adhdity-recipe__desc { margin: 0; font-size: 16px; line-height: 1.45; color: #505865; font-weight: 600; }

/* Buttons */
.adhdity-btn { appearance: none; border: none; text-decoration: none; display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; gap: 8px; min-height: 52px; border-radius: 999px; padding: 0 18px; font-size: 15px; font-weight: 800; cursor: pointer; transition: .2s ease; }
.adhdity-btn--primary { background: var(--navy); color: #fff; }
.adhdity-btn--primary:hover { transform: translateY(-1px); opacity: .96; }
.adhdity-btn--ghost { background: transparent; color: #8f4f08; border: 1.5px solid #edc98f; margin-top: 4px; }
.adhdity-btn--ghost:hover { background: #fff8ec; }
.adhdity-btn--small { min-height: 46px; padding: 0 16px; background: #fff; color: var(--navy); border: 1px solid var(--line); }

/* Panels */
.adhdity-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.adhdity-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.adhdity-panel h2 { margin: 0; font-size: 30px; line-height: 1.1; font-family: Newsreader, Georgia, serif; }

/* Toggle / lists / notes */
.adhdity-toggle { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 700; color: #69512f; cursor: pointer; }
.adhdity-toggle input { transform: translateY(2px); }
.adhdity-pantry { background: var(--blue-bg); border: 1px solid var(--blue-b); color: var(--blue-ink); padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; margin-bottom: 14px; }
.adhdity-list { margin: 0; padding-left: 20px; }
.adhdity-list li { margin: 0 0 10px; line-height: 1.55; color: #414957; }
.adhdity-note { padding: 12px 14px; border-radius: 12px; margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.adhdity-note--green { background: var(--green-bg); border: 1px solid var(--green-b); color: #264c31; }
.adhdity-copy { margin: 0 0 14px; color: #465061; line-height: 1.6; }
.adhdity-smallNote { margin: 0; color: #5f6774; line-height: 1.6; }

/* Progress */
.adhdity-progressWrap { margin-bottom: 14px; }
.adhdity-progressText, .adhdity-cookmode__progressText { font-size: 15px; font-weight: 900; color: #1d2430; margin-bottom: 10px; letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; }
.adhdity-progressText::before, .adhdity-cookmode__progressText::before { content: "→"; font-weight: 900; opacity: 0.6; }
.adhdity-progressBar { width: 100%; height: 10px; background: #ece6dd; border-radius: 999px; overflow: hidden; }
.adhdity-progressBar__fill { width: 25%; height: 100%; background: linear-gradient(90deg, #f0b457, #f59b3d); border-radius: 999px; transition: width .25s ease; }

/* Steps */
.adhdity-steps { display: flex; flex-direction: column; gap: 10px; }
.adhdity-step { width: 100%; display: block; text-align: left; border: 1.5px solid #ebe2d5; background: #fff; border-radius: 16px; padding: 12px 14px; cursor: pointer; transition: .18s ease, transform .16s ease; }
.adhdity-step:hover { transform: translateY(-1px); }
.adhdity-step__eyebrow { display: none; margin-bottom: 8px; font-size: 12px; font-weight: 800; color: var(--green-ink); letter-spacing: .02em; }
.adhdity-step__row { display: flex; align-items: center; gap: 12px; }
.adhdity-step__icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex: 0 0 28px; font-size: 28px; line-height: 1; }
.adhdity-step__num { width: 28px; height: 28px; min-width: 28px; display: flex; align-items: center; justify-content: center; flex: 0 0 28px; border-radius: 999px; background: #f28f2e; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.adhdity-step__text { font-size: 18px; font-weight: 800; line-height: 1.3; }

.adhdity-step.is-start { background: #f8fcf9; border-color: #c7e6d1; }
.adhdity-step.is-start .adhdity-step__eyebrow { display: block; }
.adhdity-step.is-active { background: var(--green-bg); border-color: var(--green-b); box-shadow: 0 0 0 2px rgba(155,210,172,.16); }
.adhdity-step.is-active .adhdity-step__eyebrow { display: block; }
.adhdity-step.is-done { background: #f4f7fb; border-color: #d4dce7; }
.adhdity-step.is-done .adhdity-step__num { background: #2fa660; }
.adhdity-step.is-done .adhdity-step__text { text-decoration: line-through; opacity: 0.55; }

.adhdity-linkbtn { border: none; background: transparent; padding: 0; color: #767d89; font-size: 13px; font-weight: 700; cursor: pointer; }
.adhdity-linkbtn:hover { color: #333b49; }

/* Accordions */
.adhdity-accordion { width: 100%; border: 1px solid var(--line); background: #f8f5f0; border-radius: 14px; padding: 14px 16px; text-align: left; font-size: 15px; font-weight: 800; cursor: pointer; color: #252d3a; }
.adhdity-accordionBox { display: none; padding-top: 14px; }
.adhdity-accordionBox.is-open { display: block; }
.adhdity-detailList { margin: 0; padding-left: 20px; }
.adhdity-detailList li { margin-bottom: 10px; line-height: 1.6; color: #465061; }

/* Cook mode */
.adhdity-cookmode { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 20px; }
.adhdity-cookmode.is-hidden { display: none; }
.adhdity-cookmode__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.adhdity-cookmode__meta { font-size: 12px; font-weight: 800; color: #8f4f08; background: #fff3de; border: 1px solid #f1d09b; border-radius: 999px; padding: 8px 12px; }
.adhdity-cookmode__title { margin: 0 0 10px; font-size: 34px; line-height: 1.05; font-family: Newsreader, Georgia, serif; }
.adhdity-cookmode__quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.adhdity-cookmode__quick span { background: #f4f6f8; border: 1px solid #dde3ea; border-radius: 999px; padding: 8px 12px; font-size: 13px; font-weight: 800; }
.adhdity-cookmode__ingredients { font-size: 15px; line-height: 1.5; color: #3a4452; margin-bottom: 14px; }
.adhdity-cookmode__progress { margin-bottom: 16px; }

.adhdity-cookstepCard { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #fff9ef; border: 1px solid #f0d7a4; border-radius: 24px; padding: 24px; margin-bottom: 16px; cursor: pointer; }
.adhdity-cookstepCard:active { transform: scale(0.98); }
.adhdity-cookstepCard__icon { font-size: 50px; line-height: 1; margin-bottom: 14px; }
.adhdity-cookstepCard__label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8d5d16; margin-bottom: 10px; }
.adhdity-cookstepCard__text { font-size: 34px; line-height: 1.15; font-weight: 900; max-width: 12ch; }
.adhdity-cookmode__controls { display: flex; gap: 10px; justify-content: space-between; }

/* Mobile */
@media (max-width: 640px) {
  .adhdity-recipe__shell { padding: 12px; border-radius: 0; }
  .adhdity-recipe__hero, .adhdity-panel, .adhdity-cookmode { padding: 16px; border-radius: 18px; }
  .adhdity-recipe__title, .adhdity-cookmode__title { font-size: 28px; }
  .adhdity-panel h2 { font-size: 24px; }
  .adhdity-cookstepCard { min-height: 240px; padding: 20px; }
  .adhdity-cookstepCard__text { font-size: 28px; }
  .adhdity-recipe__gridmeta { grid-template-columns: 1fr 1fr; }
  .adhdity-recipe__ctaRow, .adhdity-cookmode__controls { flex-direction: column; }
  .adhdity-btn { width: 100%; }
  .adhdity-step__text { font-size: 17px; }

  .adhdity-recipe .recipe-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
  .adhdity-recipe .recipe-meta__item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
  .adhdity-recipe .recipe-meta__icon { flex: 0 0 auto; font-size: 16px; line-height: 1; }
  .adhdity-recipe .recipe-meta__text { min-width: 0; }
  .adhdity-recipe .recipe-meta__text strong { display: block; font-size: 11px; font-weight: 700; line-height: 1.15; color: var(--ink); }
  .adhdity-recipe .recipe-meta__text span { display: block; font-size: 12px; line-height: 1.2; color: var(--ink-3); word-break: break-word; }
}