/**
 * CJ's Brew & BBQ — Sausage & charcuterie recipe detail page.
 *
 * The page is built on recipe-detail.css, which is enqueued before the view
 * branches, so it inherits the site's hero, badges, stat tiles, section titles,
 * instruction cards and sidebar wholesale. This file only adds what genuinely
 * does not exist elsewhere: the batch scaler, the weigh-out sub-label, and a few
 * small sidebar bits.
 *
 * The first version of this page reinvented all of the above under its own
 * `.cjbb-crv__*` namespace and consequently looked nothing like the BBQ and beer
 * recipes. Resist adding components here that recipe-detail.css already has.
 */

/* === Draft banner ======================================================== */

.cjbb-cure-draft {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--warning-bg-color);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
}

html.theme-dark .cjbb-cure-draft {
    background: var(--dark-bg-tertiary);
}

.cjbb-cure-draft a {
    color: var(--brand-primary);
    font-weight: 600;
}

/* === Batch scaler =======================================================
   Sits in the Ingredients section, in the same place the BBQ and beer pages put
   their Imperial/Metric toggle. */

.cjbb-cure-scale {
    padding: var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius-sm);
}

html.theme-dark .cjbb-cure-scale {
    background: var(--dark-bg-tertiary);
}

.cjbb-cure-scale__label {
    display: block;
    font-family: var(--font-button);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.cjbb-cure-scale__row {
    display: flex;
    gap: var(--space-2);
}

.cjbb-cure-scale__row input,
.cjbb-cure-scale__row select {
    padding: 9px 11px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 2px solid var(--border-default);
    border-radius: 6px;
    min-height: 44px;
    box-sizing: border-box;
}

.cjbb-cure-scale__row input  { flex: 1 1 auto; min-width: 0; }
.cjbb-cure-scale__row select { flex: 0 0 74px; font-size: 0.9rem; cursor: pointer; }

.cjbb-cure-scale__row input:focus,
.cjbb-cure-scale__row select:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(255, 88, 16, 0.15);
}

.cjbb-cure-detail .cjbb-cure-scale__help {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.5;
}

/* === Ingredient rows ====================================================
   These ARE recipe-detail-ingredient-item, so they look identical to the BBQ and
   beer ingredient lists. Only the quantity's scaling behaviour and the cure
   emphasis are new. */

.cjbb-cure-qty {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cjbb-cure-row__sub {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-weight: 400;
}

/* The cure is the one row that has to be right, so it gets a quiet marker rather
   than a loud one — this is an ingredient list, not a dashboard. */
.cjbb-cure-row--cure {
    box-shadow: inset 3px 0 0 0 var(--brand-primary);
    padding-left: var(--space-2) !important;
}

.cjbb-cure-row--cure .recipe-detail-ingredient-qty {
    color: var(--brand-primary);
    font-weight: 700;
}

/* === Step type chip ====================================================== */

.cjbb-cure-steptype {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-primary) !important;
}

/* === Sidebar bits ======================================================== */

.cjbb-cure-kv {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.cjbb-cure-kv:last-of-type { border-bottom: none; }
.cjbb-cure-kv strong { color: var(--text-primary); }

.cjbb-cure-detail .cjbb-cure-fine {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.6;
}

.cjbb-cure-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--space-4);
    padding: 13px 20px;
    font-family: var(--font-button);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    text-decoration: none !important;
    border-radius: 0;
    border: 2px solid var(--brand-primary);
    background: transparent;
    color: var(--brand-primary) !important;
    transition: background-color 150ms, color 150ms;
}

.cjbb-cure-btn:hover {
    background: var(--brand-primary);
    color: #fff !important;
}

/* Reserved now so introducing ads later costs no layout shift — CLS is a
   ranking factor and retrofitting space into a finished page damages it. */
.cjbb-cure-adslot {
    min-height: 250px;
    margin-bottom: var(--space-5);
}

/* === Notes and disclaimer ================================================ */

.cjbb-cure-detail .cjbb-cure-note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

.cjbb-cure-detail .cjbb-cure-note--warn {
    padding-left: var(--space-3);
    border-left: 3px solid var(--warning);
}

.cjbb-cure-detail .cjbb-cure-disclaimer {
    margin: var(--space-6) 0;
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.7;
}

.cjbb-cure-disclaimer a {
    color: var(--brand-primary);
}

/* === Print =============================================================== */

@media print {
    .cjbb-cure-scale,
    .cjbb-cure-adslot,
    .cjbb-cure-btn {
        display: none !important;
    }
    .cjbb-cure-row--cure {
        box-shadow: none !important;
    }
}

/* === Page wrapper =======================================================
   recipe-detail.css's container is a grid with EXPLICIT rows (left/right column
   at 3, sidebar 4, gallery 5, comments 6) and relies on the hero and stat strip
   auto-placing into rows 1 and 2. Any extra top-level child collides with that,
   which is how the first attempt ended up with its stat strip 2,800px down the
   page. So the draft banner, disclaimer and comments live OUTSIDE the grid, in
   this plain wrapper. Don't add children to the grid itself. */

.cjbb-cure-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    box-sizing: border-box;
}

.cjbb-cure-page > .cjbb-recipe-detail-container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.cjbb-cure-comments {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border-subtle);
}

.cjbb-cure-detail .cjbb-cure-summary {
    font-size: 1.05rem;
    margin-bottom: var(--space-2);
}


/* === Column widths must match the legacy pages exactly ==================
   recipe-detail.css uses `grid-template-columns: 1fr 3fr`, and `1fr` is really
   `minmax(auto, 1fr)` — so a wide min-content child pushes the track out. The
   batch-size control did exactly that, giving this page 403/717 where the beer
   and BBQ pages are 280/840. Flooring both tracks at zero pins the ratio to the
   pure 1:3 the rest of the site uses. Consistency across recipe types is worth
   more than a roomier control. */

/* !important is needed, not laziness: recipe-detail.css is enqueued from inside
   the view function, i.e. after wp_head, so WordPress prints it in the footer —
   AFTER this file. At equal specificity it therefore wins, and its plain
   `1fr 3fr` would keep overriding this. */
.cjbb-cure-detail {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important;
}

/* ...which means the control itself has to be able to shrink. */
.cjbb-cure-scale__row input,
.cjbb-cure-scale__row select {
    min-width: 0;
}

.cjbb-cure-scale__row {
    flex-wrap: wrap;
}