/* ============================================================================
   Recipes Pro — recipe-card frontend styling
   Uses theme tokens (--rm-*) when child theme active, fallback otherwise.
   ============================================================================ */

.rp-recipe-card {
    --rp-accent: var(--rm-accent, #dc2626);
    --rp-accent-dark: var(--rm-accent-dark, #991b1b);
    --rp-accent-soft: var(--rm-accent-soft, #fef2f2);
    --rp-fg: var(--rm-fg, #1a1a1a);
    --rp-muted: var(--rm-muted, #6b6b6b);
    --rp-border: var(--rm-border, #ebe7e1);
    --rp-card: #ffffff;
    --rp-radius: var(--rm-radius-lg, 16px);
    --rp-font-serif: var(--rm-font-serif, Georgia, serif);
    --rp-font-sans: var(--rm-font-sans, system-ui, sans-serif);

    background: var(--rp-card);
    border: 2px solid var(--rp-accent);
    border-radius: var(--rp-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    margin: 3rem 0;
    color: var(--rp-fg);
    font-family: var(--rp-font-sans);
    line-height: 1.6;
}

/* HEADER */
.rp-card-header {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    background: linear-gradient(135deg, var(--rp-accent-soft), #fff);
    border-bottom: 1px solid var(--rp-border);
}
.rp-card-image {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--rp-border);
}
.rp-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.rp-card-header-text {
    padding: 1.75rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rp-card-eyebrow {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    color: var(--rp-accent);
    margin-bottom: 0.5rem;
}
.rp-card-title {
    font-family: var(--rp-font-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.625rem;
    color: var(--rp-fg);
    letter-spacing: -0.015em;
}
.rp-card-description {
    font-size: 0.9375rem;
    color: var(--rp-muted);
    margin: 0 0 0.875rem;
    line-height: 1.55;
}
.rp-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rp-fg);
    margin-bottom: 0.875rem;
}
.rp-card-rating span { margin-left: 0.25rem; color: var(--rp-muted); font-weight: 500; }
.rp-card-actions { display: flex; gap: 0.5rem; }
.rp-card-btn {
    background: #fff;
    border: 1px solid var(--rp-border);
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rp-fg);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
}
.rp-card-btn:hover {
    background: var(--rp-accent);
    border-color: var(--rp-accent);
    color: #fff;
}

/* META row */
.rp-card-meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--rp-border);
    background: #fafafa;
}
.rp-meta-item {
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-right: 1px solid var(--rp-border);
}
.rp-meta-item:last-child { border-right: 0; }
.rp-meta-item svg { color: var(--rp-accent); margin-bottom: 0.375rem; }
.rp-meta-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rp-muted);
    font-weight: 600;
}
.rp-meta-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--rp-fg);
    margin-top: 2px;
}

/* BODY (ingredients + instructions) */
.rp-card-body {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0;
}
.rp-section {
    padding: 1.75rem;
}
.rp-section + .rp-section { border-left: 1px solid var(--rp-border); }
.rp-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--rp-font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--rp-fg);
    margin: 0 0 1rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid var(--rp-accent);
}
.rp-section-title svg { color: var(--rp-accent); flex: 0 0 auto; }
.rp-section-title small { font-size: 0.75rem; font-weight: 500; color: var(--rp-muted); margin-left: 0.25rem; }

/* Ingredients */
.rp-ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rp-ingredients-list li {
    margin: 0;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--rp-border);
}
.rp-ingredients-list li:last-child { border-bottom: 0; }
.rp-ingredients-list label {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.rp-ingredients-list input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--rp-accent);
    border-radius: 4px;
    flex: 0 0 auto;
    margin-top: 2px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}
.rp-ingredients-list input[type="checkbox"]:checked {
    background: var(--rp-accent);
}
.rp-ingredients-list input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.rp-ingredients-list input[type="checkbox"]:checked + .rp-ingredient-text {
    text-decoration: line-through;
    color: var(--rp-muted);
}
.rp-ingredient-text strong { font-weight: 700; color: var(--rp-fg); margin-right: 0.25rem; }
.rp-ingredient-text em { font-style: italic; color: var(--rp-muted); font-size: 0.875rem; }

/* Instructions */
.rp-instructions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: rp-step;
}
.rp-instructions-list li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rp-border);
}
.rp-instructions-list li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.rp-step-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--rp-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    flex: 0 0 auto;
}
.rp-step-text p { margin: 0 0 0.5rem; line-height: 1.6; }
.rp-step-text img { width: 100%; border-radius: 8px; margin-top: 0.5rem; }

/* Notes */
.rp-notes {
    background: #fffbeb;
    border-top: 1px solid var(--rp-border);
}
.rp-notes .rp-section-title { border-bottom-color: #fbbf24; }
.rp-notes .rp-section-title svg { color: #f59e0b; }
.rp-notes ul {
    margin: 0;
    padding-left: 1.25rem;
}
.rp-notes li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

/* Nutrition */
.rp-nutrition {
    border-top: 1px solid var(--rp-border);
    background: #fafafa;
}
.rp-nutrition-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}
.rp-nutrition-item {
    text-align: center;
    padding: 0.75rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--rp-border);
}
.rp-nutrition-value {
    display: block;
    font-family: var(--rp-font-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--rp-fg);
}
.rp-nutrition-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rp-muted);
    margin-top: 2px;
}

/* Footer */
.rp-card-footer {
    padding: 1rem 1.75rem;
    background: #fafafa;
    border-top: 1px solid var(--rp-border);
}
.rp-card-footer small {
    color: var(--rp-muted);
    font-size: 0.8125rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.rp-card-footer strong { color: var(--rp-fg); }

/* TOC (auto-generated) */
.rp-toc {
    background: var(--rp-accent-soft);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: var(--rp-radius);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2.5rem;
}
.rp-toc-title {
    font-family: var(--rp-font-serif);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rp-accent-dark);
    margin: 0 0 0.75rem;
    font-weight: 700;
}
.rp-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: rp-toc;
    columns: 2;
    column-gap: 2rem;
}
.rp-toc li {
    counter-increment: rp-toc;
    padding: 0.375rem 0;
    break-inside: avoid;
}
.rp-toc li::before {
    content: counter(rp-toc, decimal-leading-zero) '. ';
    color: var(--rp-accent);
    font-weight: 700;
    font-size: 0.875rem;
    margin-right: 0.5rem;
}
.rp-toc a {
    color: var(--rp-fg);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
}
.rp-toc a:hover { color: var(--rp-accent); text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
    .rp-card-header { grid-template-columns: 1fr; }
    .rp-card-image { aspect-ratio: 16 / 10; }
    .rp-card-meta { grid-template-columns: repeat(2, 1fr); }
    .rp-meta-item:nth-child(2) { border-right: 0; }
    .rp-card-body { grid-template-columns: 1fr; }
    .rp-section + .rp-section { border-left: 0; border-top: 1px solid var(--rp-border); }
    .rp-nutrition-grid { grid-template-columns: repeat(3, 1fr); }
    .rp-toc ol { columns: 1; }
}

/* Print */
@media print {
    .rp-recipe-card { box-shadow: none; border: 2px solid #000; }
    .rp-card-actions, .rp-toc { display: none !important; }
}