/* ============================================================
   WPRM Modern Recipe Card Style — by Mira Recipes
   Modern & Clean: white card, colored header, crisp typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@400;500;600&display=swap');

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --rc-accent:       #E8533F;   /* warm tomato-red accent      */
  --rc-accent-dark:  #C43E2C;   /* darker shade for hover      */
  --rc-accent-light: #FDF1EF;   /* very light accent bg        */
  --rc-surface:      #FFFFFF;   /* card background             */
  --rc-border:       #EEE9E5;   /* subtle warm border          */
  --rc-text:         #2B2320;   /* near-black body text        */
  --rc-muted:        #7A6F6B;   /* secondary / meta text       */
  --rc-step-bg:      #F8F5F3;   /* step number background      */
  --rc-radius:       16px;
  --rc-shadow:       0 4px 24px rgba(43,35,32,.08), 0 1px 4px rgba(43,35,32,.06);
  --rc-font-display: 'Playfair Display', Georgia, serif;
  --rc-font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── Container ────────────────────────────────────────────── */
.wprm-recipe-container {
  font-family: var(--rc-font-body) !important;
  max-width: 780px;
  margin: 2.5rem auto !important;
}

.wprm-recipe {
  background: var(--rc-surface) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: var(--rc-radius) !important;
  box-shadow: var(--rc-shadow) !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ── Header Band ──────────────────────────────────────────── */
.wprm-recipe::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--rc-accent) 0%, #F4A261 100%);
}

/* ── Recipe Image ─────────────────────────────────────────── */
.wprm-recipe-image {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
}
.wprm-recipe-image img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* ── Inner Padding Wrapper ────────────────────────────────── */
.wprm-recipe > *:not(.wprm-recipe-image):not(.wprm-container-float-left) {
  padding-left: 32px;
  padding-right: 32px;
}

/* ── Recipe Name ──────────────────────────────────────────── */
.wprm-recipe-name {
  font-family: var(--rc-font-display) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--rc-text) !important;
  line-height: 1.25 !important;
  margin: 28px 32px 6px !important;
  padding: 0 !important;
}

/* ── Summary / Description ────────────────────────────────── */
.wprm-recipe-summary {
  font-size: .95rem !important;
  color: var(--rc-muted) !important;
  line-height: 1.65 !important;
  margin: 0 32px 24px !important;
  padding: 0 !important;
  font-style: italic;
}

/* ── Meta Chips (course, cuisine, keyword) ────────────────── */
.wprm-recipe-meta-container {
  margin: 0 32px 0 !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--rc-border) !important;
  border-bottom: 1px solid var(--rc-border) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 24px !important;
}

.wprm-recipe-tags-container .wprm-recipe-block-container,
.wprm-recipe-tag-container {
  background: var(--rc-accent-light) !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  font-size: .8rem !important;
}

.wprm-recipe-tag-label,
.wprm-recipe-course-label,
.wprm-recipe-cuisine-label,
.wprm-recipe-keyword-label {
  color: var(--rc-accent) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  font-size: .72rem !important;
}

/* ── Times Row ────────────────────────────────────────────── */
.wprm-recipe-times-container {
  margin: 0 32px !important;
  padding: 20px 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--rc-border) !important;
}

.wprm-recipe-time-container {
  flex: 1 1 auto !important;
  text-align: center !important;
  padding: 8px 12px !important;
  border-right: 1px solid var(--rc-border) !important;
  background: none !important;
}
.wprm-recipe-time-container:last-child {
  border-right: none !important;
}

.wprm-recipe-time-label {
  display: block !important;
  font-size: .7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--rc-muted) !important;
  margin-bottom: 4px !important;
}

.wprm-recipe-time .wprm-recipe-details,
.wprm-recipe-time .wprm-recipe-details-unit {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  color: var(--rc-text) !important;
}

/* ── Servings & Calories ──────────────────────────────────── */
.wprm-recipe-servings-container,
.wprm-recipe-calories-container {
  margin: 0 32px !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--rc-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.wprm-recipe-servings-label,
.wprm-recipe-calories-label {
  font-size: .78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--rc-muted) !important;
}

.wprm-recipe-servings,
.wprm-recipe-calories {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--rc-accent) !important;
}

/* ── Section Headers (Equipment / Ingredients / Instructions) */
.wprm-recipe-header {
  font-family: var(--rc-font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: var(--rc-text) !important;
  margin: 32px 32px 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--rc-accent) !important;
  letter-spacing: -.01em !important;
}

/* ── Equipment ────────────────────────────────────────────── */
.wprm-recipe-equipment-container {
  padding: 0 !important;
}

.wprm-recipe-equipment {
  list-style: none !important;
  margin: 0 32px 8px !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.wprm-recipe-equipment-item {
  list-style: none !important;
  background: var(--rc-step-bg) !important;
  border: 1px solid var(--rc-border) !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: var(--rc-text) !important;
}

/* ── Ingredients ──────────────────────────────────────────── */
.wprm-recipe-ingredients-container {
  padding: 0 !important;
}

.wprm-recipe-ingredients {
  list-style: none !important;
  margin: 0 32px 8px !important;
  padding: 0 !important;
}

.wprm-recipe-ingredient {
  list-style: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid var(--rc-border) !important;
  font-size: .93rem !important;
  color: var(--rc-text) !important;
  line-height: 1.5 !important;
}
.wprm-recipe-ingredient:last-child {
  border-bottom: none !important;
}

.wprm-recipe-ingredient::before {
  content: '•';
  color: var(--rc-accent);
  font-size: 1.2rem;
  line-height: 1.3;
  flex-shrink: 0;
}

.wprm-recipe-ingredient-amount {
  font-weight: 700 !important;
  color: var(--rc-accent) !important;
  white-space: nowrap !important;
}

.wprm-recipe-ingredient-unit {
  font-weight: 600 !important;
  color: var(--rc-text) !important;
}

.wprm-recipe-ingredient-notes {
  font-size: .82rem !important;
  color: var(--rc-muted) !important;
  font-style: italic !important;
  display: block !important;
}

/* ── Instructions ─────────────────────────────────────────── */
.wprm-recipe-instructions-container {
  padding: 0 !important;
}

.wprm-recipe-instructions {
  list-style: none !important;
  margin: 0 32px 8px !important;
  padding: 0 !important;
  counter-reset: step-counter;
}

.wprm-recipe-instruction {
  list-style: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--rc-border) !important;
  counter-increment: step-counter;
}
.wprm-recipe-instruction:last-child {
  border-bottom: none !important;
}

.wprm-recipe-instruction::before {
  content: counter(step-counter);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  background: var(--rc-accent) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  box-shadow: 0 2px 6px rgba(232,83,63,.3) !important;
}

.wprm-recipe-instruction-text {
  font-size: .95rem !important;
  color: var(--rc-text) !important;
  line-height: 1.7 !important;
}

/* ── Notes ────────────────────────────────────────────────── */
.wprm-recipe-notes-container {
  margin: 0 32px 32px !important;
  padding: 0 !important;
}

.wprm-recipe-notes-header {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wprm-recipe-notes {
  background: var(--rc-accent-light) !important;
  border-left: 4px solid var(--rc-accent) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 16px 20px !important;
  font-size: .88rem !important;
  color: var(--rc-text) !important;
  line-height: 1.65 !important;
}

/* ── Print Button ─────────────────────────────────────────── */
.wprm-recipe-print,
a.wprm-recipe-print {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--rc-accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 18px !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  margin: 20px 32px 0 !important;
  transition: background .2s ease, transform .15s ease !important;
}
.wprm-recipe-print:hover,
a.wprm-recipe-print:hover {
  background: var(--rc-accent-dark) !important;
  transform: translateY(-1px) !important;
}

/* ── Float clear ──────────────────────────────────────────── */
.wprm-container-float-left {
  float: none !important;
  display: block !important;
  width: 100% !important;
}

/* ── Spacers ──────────────────────────────────────────────── */
.wprm-spacer {
  display: none !important;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .wprm-recipe-name {
    font-size: 1.55rem !important;
    margin: 22px 20px 6px !important;
  }
  .wprm-recipe-summary        { margin: 0 20px 20px !important; }
  .wprm-recipe-meta-container { margin: 0 20px !important; }
  .wprm-recipe-times-container,
  .wprm-recipe-servings-container,
  .wprm-recipe-calories-container { margin: 0 20px !important; }
  .wprm-recipe-header         { margin: 24px 20px 12px !important; }
  .wprm-recipe-ingredients,
  .wprm-recipe-instructions,
  .wprm-recipe-equipment      { margin-left: 20px !important; margin-right: 20px !important; }
  .wprm-recipe-notes-container { margin: 0 20px 24px !important; }
  .wprm-recipe-print,
  a.wprm-recipe-print          { margin: 16px 20px 0 !important; }

  .wprm-recipe-image img       { height: 200px !important; }
  .wprm-recipe-times-container { gap: 0 !important; }
  .wprm-recipe-time-container  { padding: 6px 8px !important; }
}