/* MidRecipes Custom Design v3.0 — Global overrides for non-homepage */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');

:root {
    --mr-green: #22C55E;
    --mr-green-dark: #16A34A;
    --mr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mr-font-heading: 'Poppins', 'Inter', sans-serif;
}

body.midrecipes-site {
    font-family: var(--mr-font);
    -webkit-font-smoothing: antialiased;
}

body.midrecipes-site a:hover {
    color: var(--mr-green);
}

/* Override theme link colors */
body.midrecipes-site .entry-content a,
body.midrecipes-site .wp-block-post-content a {
    color: var(--mr-green-dark);
}
body.midrecipes-site .entry-content a:hover,
body.midrecipes-site .wp-block-post-content a:hover {
    color: var(--mr-green);
}

/* Hide ALL theme footers — NEVER on homepage (handled by homepage.css) */
.wp-site-blocks > footer:not(.mr-footer),
.wp-block-template-part[data-slug="footer"],
footer.wp-block-template-part,
footer.midrecipes-footer {
    display: none !important;
}

/* Only show the midrecipes-homepage footer */
footer.mr-footer {
    display: block !important;
}
/* ═══════════════════════════════════════════════════════════════════
   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;
    }
}

/* ===============================================================
   TOOL PAGES — Hide ugly theme header, fix layout on mobile
   These pages have their own <nav id="site-nav"> so the theme
   header (with huge AI-generated logo) must be hidden.
   =============================================================== */

/* Hide the Hostinger theme header completely on all pages */
header.site-header.wp-block-template-part,
header.wp-block-template-part {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide theme page title (tools have their own h1) */
.hostinger-ai-page-title,
.wp-block-post-title {
    display: none !important;
}

/* Hide Table of Contents plugin */
#toc_container, .toc_widget, .toc_list,
div#toc_container, .ez-toc-container,
.toc_toggle, .toc_title, p.toc_title {
    display: none !important;
}

/* Full-width content for tool pages */
.entry-content, .wp-block-post-content {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}

/* Mobile: make tool page nav responsive */
@media (max-width: 768px) {
    #site-nav .nav-inner {
        flex-direction: column !important;
        gap: 8px;
        padding: 12px 16px;
    }
    #site-nav .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }
    #site-nav .nav-links a {
        font-size: 0.85em;
        padding: 5px 10px;
    }
    #site-nav .nav-logo {
        font-size: 1.1em;
    }

    /* Fix tool hero section on mobile */
    .mr-tool-hero {
        padding: 30px 16px !important;
    }
    .mr-tool-hero h1 {
        font-size: 1.5em !important;
    }

    /* Fix feature cards grid on mobile */
    .features {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
}

/* ================================================================
   MidRecipes Tool Pages — Comprehensive Mobile/Responsive CSS
   Added: 2026-04-02
   Target: 2000+ tool pages (calorie calc, nutrition calc, etc.)
   All fixes applied via global CSS — no post_content edits needed
   ================================================================ */

/* ── GLOBAL RESET: Prevent horizontal overflow ── */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* ── CONTAINER: Add side padding on mobile ── */
.container {
    width: 100% !important;
    max-width: 860px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── TOOL-BOX: Better padding on mobile ── */
.tool-box {
    overflow: hidden !important;
    width: 100% !important;
}

/* ── TOOL-INPUT: Full width with 16px font (prevents iOS zoom) ── */
.tool-input,
input.tool-input,
.entry-content .tool-input,
.wp-block-post-content .tool-input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;           /* iOS zoom prevention */
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 44px !important;          /* touch target */
}

/* ── TOOL-BTN: Ensure 44px touch target ── */
.tool-btn,
button.tool-btn,
.entry-content .tool-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    font-size: 16px !important;
    touch-action: manipulation !important;
}

/* ── RESULT-BOX: Make sure it's readable & wraps text ── */
.result-box {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-size: 1em !important;
    line-height: 1.6 !important;
}

/* ── FEATURES GRID: Default desktop 3-4 cols, set safe minimum ── */
.features {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 14px !important;
    margin: 20px 0 !important;
    width: 100% !important;
}

/* ── FEATURE CARD ── */
.feature {
    width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
}

/* ── CTA-HERO: Prevent overflow, padding safety ── */
.cta-hero {
    box-sizing: border-box !important;
    width: 100% !important;
    word-wrap: break-word !important;
}

/* ── CTA-BUTTON: Enforce touch target size ── */
.cta-button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
}

/* ── MR-TOOL-HERO H1: Limit font size on desktop ── */
.mr-tool-hero h1 {
    font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ── NAV: Ensure nav links are accessible ── */
#site-nav .nav-links a,
.nav-links a {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    touch-action: manipulation !important;
}

/* ── READABLE FONT SIZES: Base standards ── */
.container p,
.tool-box p,
.feature p,
.cta-hero p {
    font-size: max(14px, 0.9rem) !important;
    line-height: 1.6 !important;
}

/* ── H1 inside content pages: responsive clamp ── */
.container h1 {
    font-size: clamp(1.4rem, 5vw, 2em) !important;
    word-break: break-word !important;
}

/* ── H2 inside content pages: responsive clamp ── */
.container h2 {
    font-size: clamp(1.1rem, 3.5vw, 1.3em) !important;
    word-break: break-word !important;
}

/* ================================================================
   TABLET: max-width 768px
   ================================================================ */
@media screen and (max-width: 768px) {

    /* Container: safe horizontal padding */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 16px !important;
    }

    /* NAV: stack logo + links vertically, wrap links */
    #site-nav .nav-inner,
    .nav-inner {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 10px 16px !important;
        position: relative !important;
    }
    #site-nav .nav-logo,
    .nav-logo {
        font-size: 1.15em !important;
        flex: 1 1 auto !important;
    }
    #site-nav .nav-links,
    .nav-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 4px 0 !important;
    }
    #site-nav .nav-links a,
    .nav-links a {
        font-size: 0.85em !important;
        padding: 8px 12px !important;
        min-height: 40px !important;
    }

    /* Tool box: tighter padding */
    .tool-box {
        padding: 18px 14px !important;
        border-radius: 12px !important;
    }

    /* Tool input: full width, proper sizing */
    .tool-input,
    input.tool-input {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        min-height: 44px !important;
        margin: 6px 0 !important;
    }

    /* Tool button: full width on mobile */
    .tool-btn {
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1em !important;
        min-height: 48px !important;
        border-radius: 10px !important;
    }

    /* Result box: good padding, readable text */
    .result-box {
        padding: 14px !important;
        font-size: 0.95em !important;
        border-radius: 8px !important;
    }

    /* Features grid: 2 columns on tablets */
    .features {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Feature cards: compact padding */
    .feature {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }
    .feature h4 {
        font-size: 0.95em !important;
        margin-bottom: 4px !important;
    }
    .feature p {
        font-size: 0.85em !important;
        line-height: 1.5 !important;
    }

    /* CTA hero: compact padding */
    .cta-hero {
        padding: 20px 16px !important;
        border-radius: 12px !important;
        margin: 16px 0 !important;
    }
    .cta-hero h2 {
        font-size: 1.25em !important;
        margin-bottom: 8px !important;
    }
    .cta-hero p {
        font-size: 0.9em !important;
        margin-bottom: 12px !important;
    }
    .cta-button {
        padding: 12px 24px !important;
        font-size: 0.95em !important;
        min-height: 44px !important;
    }

    /* mr-tool-hero: reduced heading */
    .mr-tool-hero {
        padding: 28px 16px !important;
    }
    .mr-tool-hero h1 {
        font-size: 1.6em !important;
        line-height: 1.25 !important;
    }

    /* H1 inside tool container */
    .container h1 {
        font-size: 1.5em !important;
        margin: 12px 0 8px !important;
    }
    .container h2 {
        font-size: 1.15em !important;
    }

    /* Footer inside tool pages */
    .entry-content footer,
    .wp-block-post-content footer {
        padding: 20px 16px !important;
    }

    /* Breadcrumbs: prevent overflow */
    .breadcrumbs {
        padding: 10px 16px !important;
        font-size: 0.8em !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* ================================================================
   SMALL MOBILE: max-width 480px
   ================================================================ */
@media screen and (max-width: 480px) {

    /* Container: tighter side padding on very small screens */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Features: single column on small mobile */
    .features {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Nav: make CTA button full width or hide text */
    .nav-cta {
        padding: 8px 14px !important;
        font-size: 0.8em !important;
    }
    .nav-links {
        gap: 2px !important;
    }
    .nav-links a:not(.nav-cta) {
        font-size: 0.8em !important;
        padding: 7px 9px !important;
    }

    /* Tool box: minimal padding */
    .tool-box {
        padding: 14px 12px !important;
    }

    /* H1: very small screens */
    .container h1 {
        font-size: 1.3em !important;
        line-height: 1.3 !important;
    }

    /* H2: very small screens */
    .container h2 {
        font-size: 1.05em !important;
    }

    /* CTA hero: very compact */
    .cta-hero {
        padding: 16px 12px !important;
    }
    .cta-hero h2 {
        font-size: 1.1em !important;
    }
    .cta-button {
        width: 100% !important;
        text-align: center !important;
        padding: 13px 16px !important;
        box-sizing: border-box !important;
    }

    /* mr-tool-hero heading: compact */
    .mr-tool-hero h1 {
        font-size: 1.35em !important;
    }

    /* Result box: very compact */
    .result-box {
        padding: 12px !important;
        font-size: 0.9em !important;
    }
}

/* ================================================================
   VERY SMALL: max-width 360px (small Android phones)
   ================================================================ */
@media screen and (max-width: 360px) {

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

    .container h1 {
        font-size: 1.2em !important;
    }

    .nav-links {
        gap: 2px !important;
    }
    .nav-links a {
        font-size: 0.75em !important;
        padding: 6px 8px !important;
    }

    .tool-box {
        padding: 12px 10px !important;
    }

    .tool-input {
        padding: 10px 12px !important;
    }

    .cta-hero {
        padding: 14px 10px !important;
    }
}

/* ================================================================
   SELECT/TEXTAREA: Full width + 16px font everywhere in tool pages
   ================================================================ */
.entry-content select,
.wp-block-post-content select,
.container select,
.tool-box select {
    width: 100% !important;
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.entry-content textarea,
.wp-block-post-content textarea,
.container textarea,
.tool-box textarea {
    width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    min-height: 80px !important;
}

/* ── All buttons/links in tool pages: 44px touch targets ── */
.container a,
.tool-box a,
.entry-content button,
.wp-block-post-content button {
    touch-action: manipulation !important;
}

/* ── Prevent images from overflowing ── */
.container img,
.tool-box img,
.entry-content img,
.wp-block-post-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── Tables: horizontal scroll on mobile ── */
.container table,
.tool-box table,
.entry-content table {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ── SVG inside nav logo: size control ── */
.nav-logo svg {
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* END MidRecipes Tool Pages Mobile Responsive CSS */