/* =============================================================
   Recipe Schema Plugin — recipe-card.css
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
.rsp-recipe-card {
    --rsp-bg:          #ffffff;
    --rsp-surface:     #fdf9f4;
    --rsp-border:      #e8dfd0;
    --rsp-ink:         #1e1812;
    --rsp-muted:       #7a6e5f;
    --rsp-accent:      #c05328;
    --rsp-accent-2:    #5a7a5e;
    --rsp-gold:        #b8861e;
    --rsp-star:        #e8a020;
    --rsp-radius:      14px;
    --rsp-shadow:      0 2px 20px rgba(30,24,18,0.10), 0 1px 4px rgba(30,24,18,0.06);
    --rsp-font-head:   'Lora', Georgia, serif;
    --rsp-font-body:   'Source Sans 3', sans-serif;
}

/* ── Card wrapper ───────────────────────────────────────────── */
.rsp-recipe-card {
    background: var(--rsp-bg);
    border: 1px solid var(--rsp-border);
    border-radius: var(--rsp-radius);
    box-shadow: var(--rsp-shadow);
    overflow: hidden;
    max-width: 680px;
    margin: 2rem auto;
    font-family: var(--rsp-font-body);
    font-size: 16px;
    color: var(--rsp-ink);
    line-height: 1.55;
}

/* ── Image / Placeholder ────────────────────────────────────── */
.rsp-image-wrap {
    overflow: hidden;
    max-height: 340px;
}

.rsp-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.rsp-image:hover { transform: scale(1.02); }

.rsp-image-placeholder {
    height: 160px;
    background: linear-gradient(135deg, var(--rsp-accent) 0%, #e07550 50%, var(--rsp-gold) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rsp-placeholder-icon {
    font-size: 4.5rem;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.2));
}

/* ── Card body ──────────────────────────────────────────────── */
.rsp-card-body {
    padding: 1.8rem 2rem 1.4rem;
}

/* ── Badges ─────────────────────────────────────────────────── */
.rsp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.rsp-badge {
    display: inline-block;
    background: var(--rsp-surface);
    border: 1px solid var(--rsp-border);
    color: var(--rsp-accent);
    font-family: var(--rsp-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
}

.rsp-badge--cuisine { color: var(--rsp-accent-2); }
.rsp-badge--diet    { color: var(--rsp-gold); }

/* ── Title & description ────────────────────────────────────── */
.rsp-title {
    font-family: var(--rsp-font-head);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--rsp-ink);
    margin: 0 0 0.6rem;
}

.rsp-description {
    font-size: 0.94rem;
    color: var(--rsp-muted);
    margin: 0 0 0.9rem;
    font-style: italic;
}

/* ── Rating & Author ────────────────────────────────────────── */
.rsp-header-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.rsp-rating {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.rsp-stars { display: flex; gap: 2px; }

.rsp-star         { color: var(--rsp-border); font-size: 1.1rem; }
.rsp-star--full   { color: var(--rsp-star); }
.rsp-star--half   { color: var(--rsp-star); }
.rsp-star--empty  { color: #ddd; }

.rsp-rating-val   { font-weight: 600; font-size: 0.9rem; color: var(--rsp-ink); }
.rsp-rating-count { font-size: 0.82rem; color: var(--rsp-muted); }

.rsp-author {
    font-size: 0.85rem;
    color: var(--rsp-muted);
    font-style: italic;
}

.rsp-author::before { content: 'By '; }

/* ── Meta bar (times + servings) ────────────────────────────── */
.rsp-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--rsp-surface);
    border: 1px solid var(--rsp-border);
    border-radius: 10px;
    padding: 0;
    margin: 1.2rem 0 1.6rem;
    overflow: hidden;
}

.rsp-meta-item {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 0.5rem;
    border-right: 1px solid var(--rsp-border);
    text-align: center;
}

.rsp-meta-item:last-child { border-right: none; }

.rsp-meta-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rsp-muted);
    margin-bottom: 0.2rem;
}

.rsp-meta-val {
    font-family: var(--rsp-font-head);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--rsp-ink);
}

/* ── Sections ───────────────────────────────────────────────── */
.rsp-section { margin-bottom: 1.6rem; }

.rsp-section-title {
    font-family: var(--rsp-font-head);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--rsp-accent);
    margin: 0 0 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.rsp-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rsp-border);
}

.rsp-per-serving {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--rsp-muted);
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
    font-family: var(--rsp-font-body);
}

/* ── Ingredients ────────────────────────────────────────────── */
.rsp-ingredients-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem 1.5rem;
}

@media (max-width: 500px) {
    .rsp-ingredients-list { grid-template-columns: 1fr; }
}

.rsp-ingredients-list li {
    font-size: 0.9rem;
    padding: 0.3rem 0 0.3rem 1.2rem;
    position: relative;
    border-bottom: 1px dashed var(--rsp-border);
    color: var(--rsp-ink);
}

.rsp-ingredients-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rsp-accent);
}

/* ── Instructions ───────────────────────────────────────────── */
.rsp-instructions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.rsp-instructions-list li {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.6;
}

.rsp-step-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    background: var(--rsp-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    margin-top: 2px;
    font-family: var(--rsp-font-head);
}

/* ── Nutrition ──────────────────────────────────────────────── */
.rsp-nut-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--rsp-border);
    border-radius: 10px;
    overflow: hidden;
}

@media (max-width: 480px) {
    .rsp-nut-grid { grid-template-columns: repeat(2, 1fr); }
}

.rsp-nut-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--rsp-border);
    border-bottom: 1px solid var(--rsp-border);
    text-align: center;
    background: var(--rsp-surface);
}

.rsp-nut-item:nth-child(3n)  { border-right: none; }
.rsp-nut-item:nth-last-child(-n+3) { border-bottom: none; }

.rsp-nut-label {
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rsp-muted);
    margin-bottom: 0.2rem;
}

.rsp-nut-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--rsp-ink);
    font-family: var(--rsp-font-head);
}

/* ── Action buttons ─────────────────────────────────────────── */
.rsp-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--rsp-border);
    margin-top: 1.4rem;
}

.rsp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem;
    border-radius: 7px;
    font-family: var(--rsp-font-body);
    font-size: 0.83rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.1s, color 0.18s;
    border: none;
    letter-spacing: 0.02em;
}

.rsp-btn:active { transform: scale(0.98); }

.rsp-btn--print {
    background: var(--rsp-accent);
    color: white;
}

.rsp-btn--print:hover { background: #a04220; }

.rsp-btn--copy {
    background: var(--rsp-surface);
    color: var(--rsp-ink);
    border: 1px solid var(--rsp-border);
}

.rsp-btn--copy:hover { background: var(--rsp-border); }

.rsp-btn--copied {
    background: var(--rsp-accent-2) !important;
    color: white !important;
    border-color: var(--rsp-accent-2) !important;
}

/* ════════════════════════════════════════════════════════════
   PRINT STYLES
   ════════════════════════════════════════════════════════════ */
@media print {

    body * { visibility: hidden !important; }

    .rsp-printing,
    .rsp-printing * { visibility: visible !important; }

    .rsp-printing {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.5in 0.6in !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        max-width: 100% !important;
        font-size: 11pt !important;
    }

    .rsp-image-placeholder,
    .rsp-actions { display: none !important; }

    .rsp-image {
        max-height: 200px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    .rsp-title { font-size: 22pt !important; }

    .rsp-meta-bar {
        border: 1px solid #ccc !important;
        background: #f8f8f8 !important;
    }

    .rsp-ingredients-list {
        grid-template-columns: 1fr 1fr !important;
    }

    .rsp-instructions-list li { page-break-inside: avoid; }

    .rsp-nut-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Print header branding */
    .rsp-printing::before {
        content: attr(data-recipe-name);
        display: block;
        font-family: Georgia, serif;
        font-size: 9pt;
        color: #888;
        text-align: right;
        margin-bottom: 0.2in;
        letter-spacing: 0.05em;
    }
}