/* BakerMath calculator widget — scoped under .bm-calculator */

.bm-calculator {
    --bm-bg: #fff;
    --bm-text: #0f172a;
    --bm-muted: #64748b;
    --bm-border: #e2e8f0;
    --bm-accent: #2563eb;
    --bm-accent-light: #eff6ff;
    --bm-radius: 12px;
    --bm-shadow: 0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -2px rgba(0,0,0,.05);

    color: var(--bm-text);
    line-height: 1.6;
    margin: 2rem 0;
    font-size: 16px;
}

.bm-calculator *,
.bm-calculator *::before,
.bm-calculator *::after { box-sizing: border-box; }

.bm-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}
@media (min-width: 850px) {
    .bm-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.bm-card {
    background: var(--bm-bg);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    padding: 1.25rem;
    box-shadow: var(--bm-shadow);
    margin-bottom: 1.25rem;
}
.bm-card-title {
    font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem 0;
    padding-bottom: .75rem; border-bottom: 2px solid var(--bm-accent-light);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
}

/* Inputs */
.bm-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
}
.bm-input { display: flex; flex-direction: column; }
.bm-input label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    color: var(--bm-muted); letter-spacing: .05em; margin-bottom: .35rem;
}
.bm-input input {
    padding: .6rem .8rem;
    border: 1px solid var(--bm-border);
    border-radius: 8px;
    font-size: 1rem; font-weight: 600; color: var(--bm-text);
    background: #f8fafc; width: 100%;
    min-height: 42px; -webkit-appearance: none;
}
.bm-input input:focus {
    outline: none; border-color: var(--bm-accent); background: #fff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.bm-helper {
    font-size: .75rem; color: var(--bm-accent); margin-top: .4rem; font-weight: 600;
    display: block;
}

/* Method */
.bm-method { padding: 0; margin: 0; list-style: none; counter-reset: step; }
.bm-method li {
    position: relative; padding-left: 2.5rem; margin-bottom: 1.25rem; font-size: .95rem;
}
.bm-method li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: -.1rem;
    width: 1.75rem; height: 1.75rem;
    background: var(--bm-accent-light); color: var(--bm-accent);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700;
}

/* Results */
.bm-results .bm-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem 0; border-bottom: 1px dashed var(--bm-border); gap: .75rem;
}
.bm-results .bm-row:last-child { border-bottom: none; }
.bm-results .bm-row span { color: var(--bm-muted); display: flex; align-items: center; gap: .5rem; }
.bm-results .bm-row em {
    font-style: normal; font-size: .7rem;
    background: var(--bm-accent-light); color: var(--bm-accent);
    padding: .1rem .4rem; border-radius: 4px; font-weight: 700;
}
.bm-results .bm-row strong {
    color: var(--bm-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bm-badge {
    background: var(--bm-accent-light); color: var(--bm-accent);
    padding: .25rem .75rem; border-radius: 20px;
    font-size: .75rem; font-weight: 700; white-space: nowrap;
}

/* Nutrition */
.bm-nutrition {
    border: 2px solid #000; padding: .75rem; background: #fff; color: #000;
    font-family: Arial, Helvetica, sans-serif; max-width: 420px; margin: 0 auto;
}
.bm-nut-title {
    font-size: clamp(1.6rem, 5vw, 2rem); font-weight: 900; line-height: 1;
    letter-spacing: -.5px; border-bottom: 1px solid #000; padding-bottom: .25rem;
}
.bm-nut-servings { border-bottom: 10px solid #000; padding: .25rem 0; font-size: .95rem; }
.bm-nut-row {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #000; padding: .35rem 0; font-size: .9rem; gap: .5rem;
}
.bm-nut-disclaimer { font-size: .68rem; color: #555; margin-top: .5rem; line-height: 1.3; }

/* Single-recipe page */
.bm-recipe-article { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.bm-recipe-title { font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 0 0 .5rem; }
.bm-recipe-excerpt { color: var(--bm-muted); font-size: 1.1rem; }
.bm-recipe-image img { width: 100%; height: auto; border-radius: var(--bm-radius); }
.bm-recipe-intro { margin: 1.5rem 0; }

/* Related */
.bm-related { margin-top: 3rem; }
.bm-related-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.bm-related-card {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.bm-related-card:hover { transform: translateY(-2px); box-shadow: var(--bm-shadow); }
.bm-related-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.bm-related-card h3 { margin: 0; padding: .75rem 1rem; font-size: 1rem; }

/* Archive */
.bm-archive { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
.bm-archive-header { text-align: center; margin-bottom: 2rem; }
.bm-archive-grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.bm-archive-card {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--bm-border); border-radius: var(--bm-radius);
    overflow: hidden; transition: transform .2s, box-shadow .2s;
    background: var(--bm-bg);
}
.bm-archive-card:hover { transform: translateY(-2px); box-shadow: var(--bm-shadow); }
.bm-archive-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.bm-archive-card h2 { margin: 0; padding: 1rem 1rem .5rem; font-size: 1.2rem; }
.bm-archive-card p { margin: 0; padding: 0 1rem 1rem; color: var(--bm-muted); font-size: .9rem; }