/* ═══════════════════════════════════════════════════════════════════
   MidRecipes — BudgetBytes-Style Full Redesign v4.0
   Covers: Recipe pages, Blog posts, Article pages, Tool pages
   Primary: #2E7D32  |  Hover: #4CAF50  |  Light: #E8F5E9
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --bb-green:        #2E7D32;
    --bb-green-hover:  #4CAF50;
    --bb-green-light:  #E8F5E9;
    --bb-green-mid:    #c8e6c9;
    --bb-green-border: #A5D6A7;
    --bb-text:         #1a1a1a;
    --bb-text-muted:   #666;
    --bb-white:        #ffffff;
    --bb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bb-font-heading: 'Poppins', 'Inter', sans-serif;
}

/* ─── BASE BODY & TYPOGRAPHY ─── */
body.midrecipes-site {
    font-family: var(--bb-font-body) !important;
    color: var(--bb-text) !important;
    background: #fff !important;
}

/* ─── PAGE TITLE (H1) ─── */
.wp-block-post-title,
h1.wp-block-post-title,
.entry-title,
article h1,
.wp-block-post-content h1 {
    font-family: var(--bb-font-heading) !important;
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.01em !important;
    color: var(--bb-text) !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5em !important;
}

/* ─── ARTICLE BODY CONTENT ─── */
.entry-content,
.wp-block-post-content,
article .wp-block-group,
.single .post-content {
    font-family: var(--bb-font-body) !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: var(--bb-text) !important;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ─── H2 SECTION HEADERS ─── */
.entry-content h2,
.wp-block-post-content h2,
article h2 {
    font-family: var(--bb-font-heading) !important;
    font-size: clamp(1.3rem, 2.5vw, 1.7rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    color: var(--bb-text) !important;
    margin-top: 2.5em !important;
    margin-bottom: 0.8em !important;
    border-bottom: 3px solid var(--bb-green) !important;
    padding-bottom: 0.3em !important;
}

/* ─── H3 SUBHEADERS ─── */
.entry-content h3,
.wp-block-post-content h3,
article h3 {
    font-family: var(--bb-font-heading) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--bb-text) !important;
    margin-top: 1.8em !important;
    margin-bottom: 0.5em !important;
}

/* ─── PARAGRAPH TEXT ─── */
.entry-content p,
.wp-block-post-content p {
    font-size: 18px !important;
    line-height: 1.8 !important;
    margin-bottom: 1.2em !important;
    color: var(--bb-text) !important;
}

/* ─── INTERNAL CONTENT LINKS ─── */
.entry-content a,
.wp-block-post-content a {
    color: var(--bb-green) !important;
    text-decoration: none !important;
    background: var(--bb-green-mid) !important;
    padding: 0 3px !important;
    border-radius: 2px;
    transition: background 0.15s;
}
.entry-content a:hover,
.wp-block-post-content a:hover {
    background: var(--bb-green-border) !important;
    color: #1a5c1e !important;
}

/* ─── IMAGES ─── */
.entry-content img,
.wp-block-post-content img,
.wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 24px 0 !important;
}

/* ─── UNORDERED LISTS (bullet lists) ─── */
.entry-content ul,
.wp-block-post-content ul {
    padding-left: 1.5em !important;
    margin-bottom: 1.2em !important;
}
.entry-content ul li,
.wp-block-post-content ul li {
    font-size: 18px !important;
    line-height: 1.8 !important;
    margin-bottom: 0.5em !important;
    list-style-type: disc !important;
}
.entry-content ul li::marker,
.wp-block-post-content ul li::marker {
    color: var(--bb-green) !important;
}

/* ─── ORDERED LISTS (numbered with green square badges) ─── */
.entry-content ol,
.wp-block-post-content ol {
    list-style: none !important;
    counter-reset: bb-counter;
    padding-left: 0 !important;
    margin-bottom: 1.2em !important;
}
.entry-content ol li,
.wp-block-post-content ol li {
    counter-increment: bb-counter;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}
.entry-content ol li::before,
.wp-block-post-content ol li::before {
    content: counter(bb-counter) !important;
    background: var(--bb-green) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.85em !important;
    min-width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 3px !important;
    font-family: var(--bb-font-heading) !important;
    border-radius: 2px !important;
}

/* ─── BLOCKQUOTES / CALLOUT BOXES ─── */
.entry-content blockquote,
.wp-block-post-content blockquote,
.wp-block-quote {
    border-left: 5px solid var(--bb-green) !important;
    background: var(--bb-green-light) !important;
    padding: 16px 20px !important;
    margin: 24px 0 !important;
    border-radius: 0 6px 6px 0 !important;
    font-style: normal !important;
}
.entry-content blockquote p,
.wp-block-post-content blockquote p {
    font-size: 16px !important;
    margin-bottom: 0 !important;
    color: var(--bb-text) !important;
}

/* ─── AUTHOR BOX ─── */
.wp-block-post-author,
.author-box,
.post-author {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 16px 0 24px !important;
    font-size: 0.9em !important;
    color: var(--bb-text-muted) !important;
}
.wp-block-post-author__avatar img,
.author-avatar img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
}
.wp-block-post-author__name {
    font-weight: 700 !important;
    color: var(--bb-text) !important;
}

/* ─── FEATURED IMAGE (hero) ─── */
.wp-block-post-featured-image {
    margin: 0 0 28px !important;
}
.wp-block-post-featured-image img {
    border-radius: 12px !important;
    max-height: 520px !important;
    object-fit: cover !important;
    width: 100% !important;
}

/* ─── TABLE OF CONTENTS (toc+) ─── */
#toc_container {
    background: var(--bb-green-light) !important;
    border: 2px solid var(--bb-green-mid) !important;
    border-radius: 8px !important;
    padding: 18px 22px !important;
    margin: 24px 0 !important;
}
#toc_container .toc_title {
    font-weight: 800 !important;
    font-size: 1.1em !important;
    text-transform: uppercase !important;
    color: var(--bb-text) !important;
}
#toc_container ul li a {
    color: var(--bb-green) !important;
    background: none !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════
   RECIPE CARD (WPRM) STYLES
   ═══════════════════════════════════════════════════ */

.wprm-recipe-container,
.wprm-recipe-block-container {
    border: 2px solid var(--bb-green) !important;
    border-radius: 6px !important;
    padding: 24px !important;
    background: #fff !important;
    max-width: 760px !important;
    margin: 32px auto !important;
    font-family: var(--bb-font-body) !important;
}

/* Recipe title banner */
.wprm-recipe-name {
    font-family: var(--bb-font-heading) !important;
    font-size: 1.5em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: var(--bb-green) !important;
    padding: 14px 24px !important;
    margin: -24px -24px 20px -24px !important;
    display: block !important;
    line-height: 1.3 !important;
}

/* Stars green */
.wprm-recipe-rating .wprm-rating-star svg,
.wprm-rating-star-full,
.wprm-rating-star-full svg {
    fill: var(--bb-green) !important;
    color: var(--bb-green) !important;
}

/* WPRM labels */
.wprm-recipe-label {
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.9em !important;
    color: var(--bb-text) !important;
    min-width: 80px !important;
    display: inline-block !important;
}

/* Servings input */
.wprm-recipe-servings {
    width: 58px !important;
    height: 46px !important;
    border: 2px solid var(--bb-text) !important;
    border-radius: 3px !important;
    text-align: center !important;
    font-size: 1.2em !important;
    font-weight: 700 !important;
}
.wprm-recipe-servings-unit {
    font-style: italic !important;
    color: var(--bb-text-muted) !important;
    margin-left: 6px !important;
}

/* Time rows — each on own line */
.wprm-recipe-block-container-columns {
    display: block !important;
}
.wprm-recipe-block-container-column {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    flex: unset !important;
}

/* Three stacked buttons */
.wprm-recipe-print-link,
.wprm-recipe-action-buttons a,
.wprm-recipe-actions a,
a.wprm-recipe-print-link,
.wprm-print-recipe-shortcode {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 15px 20px !important;
    margin: 8px 0 !important;
    border: 2px solid var(--bb-green) !important;
    background: #fff !important;
    color: var(--bb-text) !important;
    font-weight: 700 !important;
    font-size: 0.88em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: background 0.2s, color 0.2s !important;
}
.wprm-recipe-print-link:hover,
.wprm-recipe-actions a:hover {
    background: var(--bb-green) !important;
    color: #fff !important;
}

/* Ingredients section header */
.wprm-recipe-ingredients-container h3,
.wprm-recipe-instructions-container h3,
.wprm-recipe-block-header {
    font-size: 1.15em !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-bottom: 2px solid var(--bb-green) !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
    color: var(--bb-text) !important;
}

/* Ingredient links */
.wprm-recipe-ingredient a,
.wprm-recipe-ingredient-name a {
    background: var(--bb-green-mid) !important;
    padding: 0 3px !important;
    color: var(--bb-text) !important;
    text-decoration: none !important;
    border-radius: 2px !important;
}

/* Notes callout */
.wprm-recipe-notes-container {
    border-left: 4px solid var(--bb-green) !important;
    background: var(--bb-green-light) !important;
    padding: 14px 18px !important;
    border-radius: 0 6px 6px 0 !important;
    margin-top: 16px !important;
}

/* Nutrition */
.wprm-nutrition-label-container {
    background: var(--bb-green-light) !important;
    border: 1px solid var(--bb-green-mid) !important;
    border-radius: 6px !important;
    padding: 16px !important;
    margin-top: 20px !important;
}

/* ─── FREE TOOLS PAGE STYLES ─── */
.page input[type="text"],
.page input[type="number"],
.page input[type="email"],
.page select,
.page textarea {
    border: 2px solid var(--bb-green) !important;
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 16px !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.page input:focus,
.page select:focus,
.page textarea:focus {
    border-color: var(--bb-green-hover) !important;
    box-shadow: 0 0 0 3px rgba(46,125,50,0.15) !important;
}
.page .wp-block-button__link,
.page button[type="submit"],
.page .tool-button,
.page input[type="submit"] {
    background: var(--bb-green) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 1em !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
.page .wp-block-button__link:hover,
.page button[type="submit"]:hover {
    background: var(--bb-green-hover) !important;
}

/* ─── SOCIAL SHARE BUTTONS ─── */
.social-share a,
.share-buttons a,
.sharedaddy .sd-button,
.jetpack-social-widget a {
    background: var(--bb-green) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin: 4px !important;
    transition: background 0.2s !important;
}
.social-share a:hover,
.share-buttons a:hover {
    background: var(--bb-green-hover) !important;
}

/* ─── MOBILE ─── */
@media (max-width: 768px) {
    .entry-content,
    .wp-block-post-content {
        font-size: 16px !important;
    }
    .wprm-recipe-container,
    .wprm-recipe-block-container {
        padding: 16px !important;
    }
    .wprm-recipe-name {
        margin: -16px -16px 16px -16px !important;
        font-size: 1.2em !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   RECIPE PAGES — Comprehensive Mobile + Desktop Optimization
   Added by Neo — April 2, 2026
   ═══════════════════════════════════════════════════════════════════ */

/* ─── GLOBAL RECIPE LAYOUT ─── */
.mrt-main {
    overflow-x: hidden;
}

.mrt-container {
    width: 100%;
    box-sizing: border-box;
}

.mrt-recipe-container {
    box-sizing: border-box;
    width: 100%;
}

/* ─── HERO IMAGE ─── */
.mrt-recipe-hero-image img,
.mrt-recipe-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

/* ─── BREADCRUMBS ─── */
.mrt-breadcrumbs {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── RECIPE TITLE ─── */
.mrt-recipe-title {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ─── NUTRITION FACTS ─── */
.mrt-nutrition-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mrt-nutrition-grid {
    min-width: 0;
}

/* ─── INGREDIENTS LIST ─── */
.mrt-ingredients-list li,
.mrt-instructions-list li {
    line-height: 1.6;
    padding: 6px 0;
}

/* ─── CTA BANNER (App Download) ─── */
.mrt-cta-banner {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

/* ─── RELATED RECIPES ─── */
.mrt-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.mrt-related-grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* ─── IMAGES GLOBAL ─── */
.mrt-main img,
.mrt-recipe-article img {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLET (≤1024px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .mrt-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .mrt-recipe-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE (≤768px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Recipe container */
    .mrt-recipe-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Recipe title */
    .mrt-recipe-title {
        font-size: 1.5em !important;
        line-height: 1.3 !important;
    }

    /* Recipe meta row */
    .mrt-recipe-meta-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Hero image */
    .mrt-recipe-hero-image img,
    .mrt-recipe-image img {
        border-radius: 8px;
        max-height: 300px;
        object-fit: cover;
    }

    /* Ingredients + Instructions */
    .mrt-ingredients-section,
    .mrt-instructions-section {
        padding: 16px !important;
    }

    .mrt-ingredients-list li,
    .mrt-instructions-list li {
        font-size: 15px !important;
        line-height: 1.7 !important;
        padding: 8px 0 !important;
    }

    /* Nutrition facts */
    .mrt-nutrition-section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mrt-nutrition-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .mrt-nutrition-item {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 120px !important;
    }

    /* CTA Banner */
    .mrt-cta-banner {
        padding: 20px 16px !important;
        border-radius: 14px !important;
        margin: 20px 0 !important;
    }

    .mrt-cta-banner > div {
        flex-direction: column !important;
        text-align: center !important;
    }

    .mrt-cta-banner img[alt="MidRecipes App"] {
        margin: 0 auto 8px !important;
    }

    .mrt-cta-banner a {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Related recipes */
    .mrt-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* Section titles */
    .mrt-section-title {
        font-size: 1.2em !important;
    }

    /* Breadcrumbs */
    .mrt-breadcrumbs {
        font-size: 0.8em !important;
        padding: 8px 16px !important;
    }

    /* Print/share buttons */
    .mrt-action-buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .mrt-action-buttons button,
    .mrt-action-buttons a {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* FAQ accordion */
    .mrt-faq-question {
        padding: 14px 16px !important;
        font-size: 15px !important;
        min-height: 44px !important;
    }

    /* Recipe card in related section */
    .mrt-recipe-card {
        border-radius: 10px !important;
    }

    .mrt-recipe-card__title {
        font-size: 0.85em !important;
        line-height: 1.3 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SMALL MOBILE (≤480px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .mrt-recipe-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mrt-recipe-title {
        font-size: 1.3em !important;
    }

    .mrt-nutrition-item {
        flex: 1 1 100% !important;
    }

    .mrt-related-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .mrt-breadcrumbs {
        font-size: 0.75em !important;
    }

    /* Stack CTA screenshots vertically */
    .mrt-cta-banner div[style*="display:flex"][style*="gap:8px"] {
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        padding-bottom: 4px !important;
    }

    .mrt-cta-banner div[style*="display:flex"][style*="gap:8px"] > div {
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   EXTRA SMALL (≤360px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .mrt-recipe-title {
        font-size: 1.15em !important;
    }

    .mrt-recipe-container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .mrt-ingredients-list li,
    .mrt-instructions-list li {
        font-size: 14px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP ENHANCEMENTS (≥1200px)
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    .mrt-recipe-container {
        max-width: 900px !important;
        margin: 0 auto !important;
    }

    .mrt-related-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }

    .mrt-recipe-hero-image img,
    .mrt-recipe-image img {
        max-height: 500px;
        border-radius: 16px;
    }
}