/* Toastera Recipes — front-end card. Brand: teal #00b5b8 / accent #4BD7CF / navy #1a2e44 / soft #f0fafa */

.trr-card {
    --trr-primary: #00b5b8;
    --trr-accent: #4BD7CF;
    --trr-dark: #1a2e44;
    --trr-soft: #f0fafa;
    border: 1px solid #d6efef;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    margin: 32px 0;
    color: var(--trr-dark);
    box-shadow: 0 2px 14px rgba(26, 46, 68, .06);
}

.trr-jump-btn {
    display: inline-block; background: var(--trr-primary); color: #fff !important;
    padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 600;
}

/* Header */
.trr-card__header { display: flex; gap: 20px; padding: 20px; background: var(--trr-soft); flex-wrap: wrap; }
.trr-card__image { flex: 0 0 240px; max-width: 240px; }
.trr-card__image img { width: 100%; height: auto; border-radius: 12px; display: block; }
.trr-card__heading { flex: 1; min-width: 240px; }
.trr-card__title { margin: 0 0 8px; color: var(--trr-dark); font-size: 1.6rem; line-height: 1.2; }
.trr-card__summary { margin: 8px 0 12px; font-size: .95rem; }

.trr-card__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.trr-btn {
    border: 1px solid var(--trr-primary); background: var(--trr-soft); color: var(--trr-dark);
    padding: 8px 15px; border-radius: 999px; cursor: pointer; font-size: .85rem; font-weight: 600;
    line-height: 1; transition: background .15s, color .15s, border-color .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.trr-btn:hover { background: var(--trr-primary); color: #fff; border-color: var(--trr-primary); }
.trr-btn--cookmode[aria-pressed="true"] { background: var(--trr-primary); color: #fff; border-color: var(--trr-primary); }
.trr-btn--ghost { border-color: var(--trr-primary); color: var(--trr-dark); background: #fff; }

/* Stars (aggregate display) */
.trr-stars-display { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; }
.trr-stars-display__track { position: relative; display: inline-block; font-size: 1.05rem; line-height: 1; color: #d6d6d6; }
.trr-stars-display__track::before { content: "★★★★★"; }
.trr-stars-display__fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: #f5b301; }
.trr-stars-display__fill::before { content: "★★★★★"; }
.trr-stars-display__text { font-size: .8rem; color: #5a6b7b; }

/* Meta strip */
.trr-meta-strip { display: flex; flex-wrap: wrap; gap: 1px; background: #d6efef; }
.trr-meta-strip__item { flex: 1; min-width: 90px; background: #fff; padding: 10px 12px; text-align: center; }
.trr-meta-strip__label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--trr-primary); font-weight: 700; }
.trr-meta-strip__value { display: block; font-size: .9rem; margin-top: 2px; }

/* Controls */
.trr-card__controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; flex-wrap: wrap; }
.trr-servings { display: flex; align-items: center; gap: 8px; }
.trr-servings__label { font-weight: 700; color: var(--trr-dark); }
.trr-servings__btn {
    width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--trr-primary);
    background: #fff; color: var(--trr-primary); font-size: 1.1rem; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    font-weight: 700; text-align: center;
}
.trr-servings__btn:hover { background: var(--trr-primary); color: #fff; }
.trr-servings__value { min-width: 24px; text-align: center; font-weight: 700; }
.trr-servings__unit { color: #5a6b7b; }

.trr-units { display: inline-flex; border: 1px solid var(--trr-primary); border-radius: 999px; overflow: hidden; }
.trr-units__btn { border: 0; background: #fff; color: var(--trr-dark); padding: 6px 14px; cursor: pointer; font-size: .82rem; font-weight: 600; }
.trr-units__btn:hover { background: var(--trr-soft); }
.trr-units__btn.is-active { background: var(--trr-primary); color: #fff; }
.trr-units__btn.is-active:hover { background: var(--trr-primary); }

/* Sections */
.trr-section { padding: 16px 20px; border-top: 1px solid #eef5f5; }
.trr-section__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.trr-section__title { margin: 0 0 12px; color: var(--trr-dark); font-size: 1.2rem; }
.trr-section__head .trr-section__title { margin-bottom: 0; }

/* Ingredients */
.trr-ingredients__group, .trr-instructions__group { margin: 14px 0 6px; color: var(--trr-primary); font-size: 1rem; }
.trr-ingredients__list { list-style: none; margin: 8px 0 0; padding: 0; }
.trr-ingredient { padding: 5px 0; border-bottom: 1px dashed #eef5f5; }
.trr-ingredient__label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.trr-ingredient__check { margin-top: 4px; accent-color: var(--trr-primary); }
.trr-ingredient.is-checked .trr-ingredient__text { text-decoration: line-through; opacity: .55; }
.trr-amount { font-weight: 700; color: var(--trr-dark); }
.trr-ingredient__notes { color: #5a6b7b; font-size: .9em; }

/* Instructions */
.trr-instructions__list { margin: 8px 0 0; padding-left: 0; counter-reset: trr-step; list-style: none; }
.trr-instruction { position: relative; padding: 0 0 16px 44px; }
.trr-instruction::before {
    counter-increment: trr-step; content: counter(trr-step);
    position: absolute; left: 0; top: 1px; width: 30px; height: 30px;
    background: var(--trr-primary); color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem;
}
/* Lift the step text so its first line aligns with the number circle (theme adds
   a top margin to the wrapped <p> that otherwise pushes the text down). */
.trr-instruction__text > :first-child { margin-top: 0 !important; }
.trr-instruction__image img { max-width: 100%; height: auto; border-radius: 12px; margin-top: 8px; }

/* Equipment */
.trr-equipment__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.trr-equipment__item {
    display: flex; align-items: center; gap: 8px;
    background: var(--trr-soft); border: 1px solid #d6efef; border-radius: 10px;
    padding: 10px 14px; font-weight: 600; font-size: .92rem;
}
.trr-equipment__item .trr-icon { color: var(--trr-primary); flex: 0 0 auto; }
.trr-equipment__item a { color: var(--trr-dark); text-decoration: none; }
.trr-equipment__item:hover { border-color: var(--trr-primary); }
.trr-equipment__item:hover a { color: var(--trr-primary); }

/* Notes */
.trr-notes__body { background: var(--trr-soft); border-radius: 10px; padding: 12px 16px; }

/* Nutrition */
.trr-nutrition__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.trr-nutrition__item { background: var(--trr-soft); border-radius: 10px; padding: 10px; text-align: center; }
.trr-nutrition__value { display: block; font-weight: 700; color: var(--trr-primary); }
.trr-nutrition__label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #5a6b7b; margin-top: 2px; }

/* Rate widget */
.trr-rate { background: var(--trr-soft); }
.trr-rate__hint { margin: -4px 0 8px; color: #5a6b7b; font-size: .85rem; }
.trr-rate__stars { display: inline-flex; gap: 4px; }
.trr-rate__star { border: 0; background: none; cursor: pointer; font-size: 2rem; line-height: 1; color: #b3c0cb; padding: 0 2px; transition: color .1s, transform .1s; }
.trr-rate__star:hover { transform: scale(1.12); }
.trr-rate__star.is-hover, .trr-rate__star.is-selected { color: #f5b301; }
.trr-rate__msg { margin: 8px 0 0; color: #1a7f37; min-height: 1.2em; font-size: .9rem; font-weight: 600; }

/* Cook mode dimming */
body.trr-cookmode-active { background: #0b0f14; }
body.trr-cookmode-active .trr-card { box-shadow: 0 0 0 9999px rgba(0,0,0,.78); position: relative; z-index: 99999; }

/* Responsive */
@media (max-width: 600px) {
    .trr-card { margin: 24px 0; }
    .trr-card__header { padding: 16px; gap: 14px; }
    .trr-card__image { flex-basis: 100%; max-width: 100%; }
    .trr-card__title { font-size: 1.35rem; }
    .trr-section { padding: 16px; }
    /* Meta strip: fixed 3-up grid so cells don't squeeze to slivers */
    .trr-meta-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
    .trr-meta-strip__item { min-width: 0; }
    /* Controls stack and go full-width for easy tapping */
    .trr-card__controls { flex-direction: column; align-items: stretch; gap: 14px; }
    .trr-servings { justify-content: center; }
    .trr-units { width: 100%; }
    .trr-units__btn { flex: 1; padding: 10px 0; }
    .trr-section__head .trr-btn--ghost { width: 100%; justify-content: center; }
}

/* Inline icons */
.trr-icon { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: -3px; }

/* =========================================================================
   DEFENSIVE LAYER — the live Elementor / Hello child theme styles every
   <button> and <a> inside content as a filled-teal pill, which bleeds into the
   card (button blobs, circle stars, pill links). These rules re-assert the
   card's own look with enough weight (!important) to win. Merged from the
   server-side layer + the readable colors and equipment chips from this branch.
   ========================================================================= */
.trr-card button {
    box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important;
    text-shadow: none !important; min-height: 0 !important; min-width: 0 !important;
    height: auto; margin: 0; font-family: inherit !important; text-decoration: none !important; outline: none;
}

/* Action buttons: small white outline pills, navy label for readable contrast */
.trr-card .trr-btn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important; width: auto !important;
    background: #fff !important; color: var(--trr-dark) !important; border: 1px solid var(--trr-primary) !important;
    padding: 8px 15px !important; border-radius: 999px !important;
    font-size: .85rem !important; font-weight: 600 !important; line-height: 1 !important;
}
.trr-card .trr-btn:hover, .trr-card .trr-btn--cookmode[aria-pressed="true"] { background: var(--trr-primary) !important; color: #fff !important; }
.trr-card .trr-btn--ghost { border-color: var(--trr-primary) !important; color: var(--trr-dark) !important; background: #fff !important; }
.trr-card .trr-btn--ghost:hover { background: var(--trr-primary) !important; color: #fff !important; }

/* Servings +/- : small circles */
.trr-card .trr-servings__btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 30px !important; height: 30px !important; padding: 0 !important; border-radius: 50% !important;
    background: #fff !important; color: var(--trr-primary) !important; border: 1px solid var(--trr-primary) !important;
    font-size: 1.1rem !important; font-weight: 700 !important; line-height: 1 !important;
}
.trr-card .trr-servings__btn:hover { background: var(--trr-primary) !important; color: #fff !important; }

/* Unit toggle: segmented control, navy inactive label for contrast */
.trr-card .trr-units { border: 1px solid var(--trr-primary) !important; border-radius: 999px !important; overflow: hidden !important; }
.trr-card .trr-units__btn {
    width: auto !important; background: #fff !important; color: var(--trr-dark) !important; border: 0 !important;
    padding: 6px 14px !important; border-radius: 0 !important; font-size: .82rem !important; font-weight: 600 !important;
}
.trr-card .trr-units__btn:hover { background: var(--trr-soft) !important; }
.trr-card .trr-units__btn.is-active, .trr-card .trr-units__btn.is-active:hover { background: var(--trr-primary) !important; color: #fff !important; }

/* Equipment chips: the theme also pills <a>, so defend the link itself too */
.trr-card .trr-equipment__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.trr-card .trr-equipment__item {
    display: flex !important; align-items: center !important; gap: 8px !important;
    background: var(--trr-soft) !important; border: 1px solid #d6efef !important; border-radius: 10px !important;
    padding: 10px 14px !important; font-weight: 600 !important; font-size: .92rem !important;
}
.trr-card .trr-equipment__item a {
    background: none !important; color: var(--trr-dark) !important; border: 0 !important; padding: 0 !important;
    box-shadow: none !important; border-radius: 0 !important; text-decoration: none !important; font-weight: 600 !important;
}
.trr-card .trr-equipment__item:hover { border-color: var(--trr-primary) !important; }
.trr-card .trr-equipment__item:hover a { color: var(--trr-primary) !important; }
.trr-card .trr-equipment__item .trr-icon { color: var(--trr-primary); }

/* Content links (ingredient/notes affiliate links): keep as plain teal links, not pills */
.trr-card .trr-ingredient__name a, .trr-card .trr-notes__body a, .trr-card .trr-instruction__text a {
    background: none !important; color: var(--trr-primary) !important; border: 0 !important; padding: 0 !important;
    box-shadow: none !important; border-radius: 0 !important; text-decoration: underline !important; font-weight: inherit !important;
}

/* Rating stars: characters, never theme buttons; visible empty state */
.trr-card .trr-rate__star {
    width: auto !important; height: auto !important; background: none !important; border: 0 !important;
    box-shadow: none !important; padding: 0 2px !important; border-radius: 0 !important;
    color: #b3c0cb !important; font-size: 2rem !important; line-height: 1 !important;
}
.trr-card .trr-rate__star.is-hover, .trr-card .trr-rate__star.is-selected { color: #f5b301 !important; }

/* Top action bar — our replacement for WPRM's jump/print buttons. This CSS only
   loads on pages that have our card, so hiding WPRM's buttons stays scoped to
   those pages and does not affect the rest of the site (still on WPRM). */
.trr-top-actions {
    display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0;
    /* Brand vars are scoped to .trr-card; this bar sits outside it, so redeclare
       them here or every var() below resolves to nothing (invalid → dropped). */
    --trr-primary: #00b5b8; --trr-accent: #4BD7CF; --trr-dark: #1a2e44; --trr-soft: #f0fafa;
}
/* Remove WP Recipe Maker's jump/print buttons AND its whole recipe card on pages
   that show our card. This CSS only loads where our card is present, so the rest
   of the site keeps WPRM untouched. */
.wprm-recipe-jump, .wprm-recipe-print, .wprm-recipe-container { display: none !important; }
/* ID selector (#trr-top-actions → specificity 1,1,1) beats any class-based
   Elementor/theme content rule, so the buttons always render as our pills and the
   hover never turns the label white-on-white. */
#trr-top-actions a.trr-btn,
#trr-top-actions button.trr-btn {
    display: inline-flex !important; align-items: center !important; gap: 6px !important; width: auto !important;
    background: #fff !important; color: var(--trr-dark) !important; border: 1px solid var(--trr-primary) !important;
    padding: 9px 16px !important; border-radius: 999px !important; box-shadow: none !important;
    font-size: .9rem !important; font-weight: 600 !important; line-height: 1 !important;
    text-transform: none !important; text-decoration: none !important;
}
#trr-top-actions a.trr-btn:hover,
#trr-top-actions button.trr-btn:hover {
    background: var(--trr-primary) !important; color: #fff !important; border-color: var(--trr-primary) !important;
}
#trr-top-actions .trr-icon { width: 18px !important; height: 18px !important; flex: 0 0 auto; }

/* Print */
@media print {
    body * { visibility: hidden !important; }
    .trr-card, .trr-card * { visibility: visible !important; }
    .trr-card { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: none; margin: 0; }
    .trr-card__actions, .trr-card__controls .trr-units, .trr-btn--ghost, .trr-rate, [data-trr-shoplist] { display: none !important; }
    .trr-instruction::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}