/* ============================================================
   BAS Recipe Card — Frontend Styles
   Brand palette:
     --bas-recipe-accent:       #70ac43  (primary green)
     --bas-recipe-green-dark:   #1d741b
     --bas-recipe-green-light:  #c2e86b
     --bas-recipe-text:         #313131
     --bas-recipe-card-bg:      #fffbef  (warm cream)
     --bas-recipe-coral:        #ff4c25
     --bas-recipe-coral-soft:   #ff7660
     --bas-recipe-yellow:       #ffda3d
     --bas-recipe-teal:         #30b2b4
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────────────── */
.bas-recipe-card {
  --bas-recipe-accent:       #70ac43;
  --bas-recipe-green-dark:   #1d741b;
  --bas-recipe-green-light:  #c2e86b;
  --bas-recipe-text:         #313131;
  --bas-recipe-card-bg:      #fffbef;
  --bas-recipe-coral:        #ff4c25;
  --bas-recipe-coral-soft:   #ff7660;
  --bas-recipe-yellow:       #ffda3d;
  --bas-recipe-teal:         #30b2b4;
  --bas-recipe-title-font:   'Playfair Display', Georgia, serif;
  --bas-recipe-body-font:    'Lato', -apple-system, sans-serif;
  --bas-card-radius:         8px;
  --bas-card-shadow:         0 2px 16px rgba(49,49,49,0.08);
  --bas-section-gap:         1.75rem;
}

/* ── Card container ─────────────────────────────────────────── */
.bas-recipe-card {
  background:    var(--bas-recipe-card-bg);
  border-radius: var(--bas-card-radius);
  box-shadow:    var(--bas-card-shadow);
  border:        1px solid rgba(112,172,67,0.15);
  max-width:     780px;
  margin:        2.5rem auto;
  padding:       0;
  font-family:   var(--bas-recipe-body-font);
  color:         var(--bas-recipe-text);
  overflow:      hidden;
  scroll-margin-top: 80px;
}

/* ── Jump to recipe button ───────────────────────────────────── */
.bas-jump-to-recipe {
  display:    block;
  width:      100%;
  text-align: center;
  padding:    1.25rem 1rem 0.75rem;
  margin:     0;
}
.bas-jump-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  background:      linear-gradient(180deg, #c2e86b 0%, #70ac43 100%);
  color:           #fff;
  text-decoration: none;
  padding:         11px 28px;
  border-radius:   100px;
  border:          1px solid #70ac43;
  font-family:     var(--bas-recipe-body-font, 'Lato', sans-serif);
  font-size:       0.95rem;
  font-weight:     700;
  letter-spacing:  0.02em;
  transition:      opacity 0.2s, transform 0.15s;
}
.bas-jump-btn:hover {
  opacity:   0.88;
  color:     #fff;
  transform: translateY(-1px);
}

/* ── Header ─────────────────────────────────────────────────── */
.bas-card-header {
  padding: 2rem 2rem 1rem;
}
.bas-recipe-title {
  font-family:  var(--bas-recipe-title-font);
  font-size:    clamp(1.6rem, 3vw, 2.2rem);
  font-weight:  700;
  color:        var(--bas-recipe-text);
  margin:       0 0 0.5rem;
  line-height:  1.2;
}
.bas-recipe-description {
  font-size:   1rem;
  color:       #5a5a5a;
  margin:      0;
  line-height: 1.6;
}

/* ── Recipe image ───────────────────────────────────────────── */
.bas-recipe-image {
  width:  100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.bas-recipe-image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── Stats bar ──────────────────────────────────────────────── */
.bas-recipe-stats {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap:       0;
  padding:   0;
  border-top:    1px solid rgba(112,172,67,0.2);
  border-bottom: 1px solid rgba(112,172,67,0.2);
  background:    rgba(112,172,67,0.05);
}
.bas-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        1rem 0.5rem;
  border-right:   1px solid rgba(112,172,67,0.15);
  text-align:     center;
}
.bas-stat:last-child { border-right: none; }
.bas-stat-label {
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--bas-recipe-accent);
  margin-bottom:  3px;
}
.bas-stat-value {
  font-size:   0.95rem;
  font-weight: 600;
  color:       var(--bas-recipe-text);
  line-height: 1.2;
}

/* ── Diet badges ─────────────────────────────────────────────── */
.bas-diet-badges {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px;
  padding:     0.75rem 2rem;
}
.bas-diet-badge {
  font-size:    0.72rem;
  font-weight:  700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding:      3px 10px;
  border-radius: 50px;
  background:   rgba(112,172,67,0.1);
  color:        var(--bas-recipe-green-dark);
  border:       1px solid rgba(112,172,67,0.25);
}

/* ── Controls: scaler + unit toggle ─────────────────────────── */
.bas-recipe-controls {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             1rem;
  padding:         1rem 2rem;
  background:      rgba(255,218,61,0.08);
  border-bottom:   1px solid rgba(112,172,67,0.12);
}
.bas-scaler {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.bas-scaler-label {
  font-size:   0.85rem;
  font-weight: 600;
  color:       #5a5a5a;
}
.bas-scaler-input {
  display:     flex;
  align-items: center;
  gap:         0;
  border:      2px solid var(--bas-recipe-accent);
  border-radius: 50px;
  overflow:    hidden;
}
.bas-scale-btn {
  background:  none;
  border:      none;
  padding:     6px 14px;
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--bas-recipe-accent);
  cursor:      pointer;
  transition:  background 0.15s;
  line-height: 1;
}
.bas-scale-btn:hover {
  background: rgba(112,172,67,0.12);
}
.bas-scale-value {
  padding:     6px 10px;
  min-width:   42px;
  text-align:  center;
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--bas-recipe-text);
  outline:     none;
}
.bas-unit-toggle {
  display:       flex;
  border:        2px solid var(--bas-recipe-teal);
  border-radius: 50px;
  overflow:      hidden;
}
.bas-unit-btn {
  background:  none;
  border:      none;
  padding:     6px 14px;
  font-size:   0.8rem;
  font-weight: 700;
  color:       var(--bas-recipe-teal);
  cursor:      pointer;
  transition:  background 0.15s, color 0.15s;
}
.bas-unit-btn.active {
  background: var(--bas-recipe-teal);
  color:      #fff;
}

/* ── Section common styles ───────────────────────────────────── */
.bas-recipe-section {
  padding:       var(--bas-section-gap) 2rem;
  border-bottom: 1px solid rgba(112,172,67,0.1);
}
.bas-recipe-section:last-of-type {
  border-bottom: none;
}
.bas-section-title {
  font-family:  var(--bas-recipe-title-font);
  font-size:    1.15rem;
  font-weight:  700;
  color:        var(--bas-recipe-text);
  margin:       0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom:  2px solid var(--bas-recipe-accent);
  display:        inline-block;
}

/* ── Ingredients ─────────────────────────────────────────────── */
.bas-ingredients-list {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}
.bas-ingredient-group-title {
  font-family:  var(--bas-recipe-title-font);
  font-size:    0.95rem;
  font-weight:  700;
  color:        var(--bas-recipe-green-dark);
  margin:       1rem 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bas-ingredient-item {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding:     7px 0;
  cursor:      pointer;
  border-radius: 4px;
  transition:  background 0.1s;
}
.bas-ingredient-item:hover {
  background: rgba(112,172,67,0.05);
}

/* Hide native checkbox, use custom */
.bas-ingredient-item input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}
.bas-ingredient-check-box {
  flex-shrink: 0;
  width:       20px;
  height:      20px;
  border:      2px solid var(--bas-recipe-accent);
  border-radius: 4px;
  margin-top:  2px;
  transition:  background 0.15s, border-color 0.15s;
  position:    relative;
}
.bas-ingredient-item input:checked ~ .bas-ingredient-check-box {
  background:    var(--bas-recipe-accent);
  border-color:  var(--bas-recipe-accent);
}
.bas-ingredient-item input:checked ~ .bas-ingredient-check-box::after {
  content:    '';
  position:   absolute;
  left:       4px; top: 1px;
  width:      7px; height: 12px;
  border:     2px solid #fff;
  border-top: none; border-left: none;
  transform:  rotate(45deg);
}
.bas-ingredient-text {
  line-height: 1.5;
  flex:        1;
  transition:  opacity 0.2s;
}
.bas-ingredient-item.checked .bas-ingredient-text {
  opacity:         0.4;
  text-decoration: line-through;
}
.bas-ingredient-amount {
  font-weight: 700;
  color:       var(--bas-recipe-text);
  margin-right: 3px;
}
.bas-ingredient-name {
  color: var(--bas-recipe-text);
}
.bas-ingredient-note {
  font-size:   0.83rem;
  color:       #888;
  font-style:  italic;
  margin-left: 4px;
}
.bas-clear-checks {
  margin-top:  0.75rem;
  font-size:   0.8rem;
  color:       #888;
  cursor:      pointer;
  background:  none;
  border:      none;
  padding:     0;
  text-decoration: underline;
}
.bas-clear-checks:hover { color: var(--bas-recipe-coral); }

/* ── Instructions ────────────────────────────────────────────── */
.bas-steps-list {
  list-style: none;
  padding:    0;
  margin:     0;
  display:    flex;
  flex-direction: column;
  gap:        1rem;
}
.bas-instruction-group-title {
  font-family:  var(--bas-recipe-title-font);
  font-size:    0.95rem;
  font-weight:  700;
  color:        var(--bas-recipe-green-dark);
  margin:       1rem 0 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bas-step {
  display:     flex;
  align-items: flex-start;
  gap:         1rem;
}
.bas-step-number {
  flex-shrink: 0;
  width:       32px;
  height:      32px;
  border-radius: 50%;
  background:  var(--bas-recipe-accent);
  color:       #fff;
  font-weight: 800;
  font-size:   0.85rem;
  display:     flex;
  align-items: center;
  justify-content: center;
  margin-top:  2px;
}
.bas-step-text {
  flex:        1;
  line-height: 1.7;
  padding-top: 4px;
}

/* ── Video ───────────────────────────────────────────────────── */
.bas-video-wrapper {
  position:     relative;
  padding-top:  56.25%; /* 16:9 */
  width:        100%;
  overflow:     hidden;
  border-radius: 6px;
  background:   #000;
}
.bas-video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width:  100%;
  height: 100%;
}

/* ── Notes ───────────────────────────────────────────────────── */
.bas-notes-content {
  background:   rgba(255,218,61,0.1);
  border-left:  4px solid var(--bas-recipe-yellow);
  border-radius: 0 6px 6px 0;
  padding:      1rem 1.2rem;
  font-size:    0.95rem;
  line-height:  1.7;
  color:        var(--bas-recipe-text);
}

/* ── Nutrition toggle ────────────────────────────────────────── */
.bas-nutrition-toggle {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  width:       100%;
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     0;
  margin-bottom: 0;
  gap:         8px;
}
.bas-nutrition-toggle-label {
  font-family:  var(--bas-recipe-title-font);
  font-size:    1.15rem;
  font-weight:  700;
  color:        var(--bas-recipe-text);
  padding-bottom: 0.5rem;
  border-bottom:  2px solid var(--bas-recipe-teal);
}
.bas-nutrition-toggle-icon {
  color:      var(--bas-recipe-teal);
  font-size:  0.85rem;
  transition: transform 0.2s;
}
.bas-nutrition-toggle[aria-expanded="true"] .bas-nutrition-toggle-icon {
  transform: rotate(180deg);
}
.bas-nutrition-panel {
  margin-top:  1rem;
}
.bas-nutrition-per-serving {
  font-size:   0.8rem;
  color:       #888;
  margin:      0 0 0.75rem;
}
.bas-nutrition-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:         1px;
  background:  rgba(48,178,180,0.15);
  border:      1px solid rgba(48,178,180,0.2);
  border-radius: 6px;
  overflow:    hidden;
}
.bas-nut-item {
  display:        flex;
  flex-direction: column;
  padding:        10px 14px;
  background:     var(--bas-recipe-card-bg);
}
.bas-nut-label {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:          var(--bas-recipe-teal);
  margin-bottom:  2px;
}
.bas-nut-value {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--bas-recipe-text);
}
.bas-nut-unit {
  font-size:   0.75rem;
  font-weight: 400;
  color:       #888;
  margin-left: 2px;
}

/* ── Action bar ─────────────────────────────────────────────── */
.bas-recipe-actions {
  display:        flex;
  flex-wrap:      wrap;
  gap:            8px;
  padding:        1.25rem 2rem;
  background:     rgba(112,172,67,0.04);
  border-top:     1px solid rgba(112,172,67,0.12);
}
.bas-action-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        8px 16px;
  border:         1px solid rgba(49,49,49,0.15);
  border-radius:  50px;
  background:     #fff;
  color:          var(--bas-recipe-text);
  font-family:    var(--bas-recipe-body-font);
  font-size:      0.82rem;
  font-weight:    600;
  cursor:         pointer;
  text-decoration: none;
  transition:     background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.bas-action-btn:hover {
  border-color: var(--bas-recipe-accent);
  color:        var(--bas-recipe-accent);
  transform:    translateY(-1px);
}
.bas-action-btn svg { flex-shrink: 0; }

.bas-print-btn:hover  { border-color: var(--bas-recipe-text);   color: var(--bas-recipe-text); }
.bas-pin-btn          { border-color: #e60023; color: #e60023; }
.bas-pin-btn:hover    { background: #e60023; color: #fff; }
.bas-fb-btn:hover     { border-color: #1877f2; color: #1877f2; }
.bas-x-btn:hover      { border-color: #000;    color: #000; }

.bas-wakelock-btn.active {
  background:    var(--bas-recipe-coral);
  color:         #fff;
  border-color:  var(--bas-recipe-coral);
}

/* ── Toast notification ─────────────────────────────────────── */
.bas-toast {
  position:     fixed;
  bottom:       24px;
  left:         50%;
  transform:    translateX(-50%) translateY(10px);
  background:   var(--bas-recipe-text);
  color:        #fff;
  padding:      10px 20px;
  border-radius: 50px;
  font-size:    0.85rem;
  font-weight:  600;
  opacity:      0;
  pointer-events: none;
  transition:   opacity 0.2s, transform 0.2s;
  z-index:      9999;
}
.bas-toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ── Two-column layout ───────────────────────────────────────── */
/*
 * When card_layout = 'two-column' the template adds the modifier class
 * bas-recipe-card--two-col and wraps the ingredients + instructions sections
 * in a .bas-recipe-body div.
 *
 * On screens ≥ 640 px the two sections sit side by side.
 * Below 640 px (and always when printing) they stack normally.
 */
@media ( min-width: 640px ) {
  .bas-recipe-card--two-col .bas-recipe-body {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    align-items:           start;
  }

  /* Remove the bottom divider between the two sections since they're side by side */
  .bas-recipe-card--two-col .bas-ingredients-section,
  .bas-recipe-card--two-col .bas-instructions-section {
    border-bottom: none;
    min-height:    100%;   /* stretch both columns to equal height visually */
  }

  /* Vertical divider between the columns */
  .bas-recipe-card--two-col .bas-ingredients-section {
    border-right: 1px solid rgba(112,172,67,0.12);
  }

  /* Restore a single bottom border below the whole body row */
  .bas-recipe-card--two-col .bas-recipe-body {
    border-bottom: 1px solid rgba(112,172,67,0.1);
  }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media ( max-width: 600px ) {
  .bas-card-header  { padding: 1.5rem 1.25rem 0.75rem; }
  .bas-recipe-stats { grid-template-columns: repeat(3, 1fr); }
  .bas-recipe-section { padding: 1.25rem; }
  .bas-recipe-controls { padding: 0.75rem 1.25rem; }
  .bas-diet-badges { padding: 0.5rem 1.25rem; }
  .bas-recipe-actions { padding: 1rem 1.25rem; }
  .bas-recipe-title { font-size: 1.4rem; }
  .bas-step-number { width: 26px; height: 26px; font-size: 0.75rem; }
}

/* ── Reader ratings ─────────────────────────────────────────── */
.bas-recipe-rating {
  display:      flex;
  align-items:  center;
  gap:          .6rem;
  flex-wrap:    wrap;
  margin:       .35rem 0 .75rem;
  font-family:  var(--bas-recipe-body-font);
  font-size:    .9rem;
  color:        var(--bas-recipe-text);
}

.bas-rating-stars {
  display:     inline-flex;
  align-items: center;
  gap:         .1rem;
}

.bas-rating-star {
  background:  none;
  border:      0;
  padding:     2px;
  margin:      0;
  cursor:      pointer;
  line-height: 0;
  color:       rgba(49, 49, 49, .22);
  transition:  color .12s ease, transform .12s ease;
}

.bas-rating-star svg { fill: currentColor; display: block; }

.bas-rating-star.is-filled          { color: var(--bas-recipe-yellow); }
.bas-rating-star.is-preview         { color: var(--bas-recipe-coral-soft); }
.bas-rating-star:hover              { transform: scale(1.12); }
.bas-rating-star:focus-visible {
  outline:        2px solid var(--bas-recipe-accent);
  outline-offset: 2px;
  border-radius:  3px;
}

.bas-rating-summary { display: inline-flex; align-items: baseline; gap: .35rem; }
.bas-rating-average { font-weight: 700; color: var(--bas-recipe-green-dark); }
.bas-rating-count   { opacity: .75; }
.bas-rating-empty   { font-style: italic; }

.bas-rating-thanks {
  color:       var(--bas-recipe-green-dark);
  font-weight: 600;
}

.bas-recipe-rating.is-saving .bas-rating-stars { opacity: .5; pointer-events: none; }
.bas-recipe-rating.has-error .bas-rating-summary::after {
  content:     " — couldn't save, try again";
  color:       var(--bas-recipe-coral);
  font-style:  italic;
}

@media (prefers-reduced-motion: reduce) {
  .bas-rating-star { transition: none; }
  .bas-rating-star:hover { transform: none; }
}