/* ============================================================
   Fun & Tasty Recipes — Custom CSS
   ============================================================ */

/* -- Hide Ranna's built-in fullscreen modal on mobile (we use our custom overlay) -- */
@media (max-width: 768px) {
    /* Hide the theme's expand icon that triggers #fsModal */
    button[data-toggle="modal"][data-target="#fsModal"],
    a[data-toggle="modal"][data-target="#fsModal"],
    .action-item button[data-toggle="modal"] {
        display: none !important;
    }

    /* Prevent #fsModal from ever opening on mobile */
    #fsModal {
        display: none !important;
    }
}

/* -- Hide built-in 0/5 star display (replaced by FAT rating widget) -- */
ul.avg.item-rating {
    display: none !important;
}

/* ============================================================
   MOBILE FULLSCREEN CLOSE BUTTON — complete rewrite
   Uses a fixed-position close button + backdrop tap dismiss
   ============================================================ */

/* Fixed close button always in top-right, above everything */
.fat-close-btn {
    display: none;
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 2147483647 !important; /* max z-index */
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #ddd !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    line-height: 1 !important;
    text-align: center !important;
    cursor: pointer !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    color: #333 !important;
    font-weight: bold !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    touch-action: manipulation !important;
}

@media (max-width: 768px) {
    /* Hide the original modal close button that doesn't work */
    #fsModal .close,
    #fsModal .modal-header .close {
        display: none !important;
    }

    #fsModal .modal-dialog {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
    }

    #fsModal .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        overflow: auto !important;
    }

    /* Show the FAT close button when modal is open */
    body.modal-open .fat-close-btn {
        display: flex !important;
    }
}

/* Inject the close button via JS — see fat-mobile-close.js */

/* ============================================================
   PRINT RECIPE — Page 1: title/image/info/ingredients+nutrition
                  Page 2+: directions
   ============================================================ */

@media print {

    /* ── 1. Hide ALL non-recipe chrome ─────────────────────────────────── */
    #masthead,
    .header-area,
    #header-area-space,
    #header-search,
    .footer-area,
    #preloader,
    .sidebar-widget-area,
    .action-item,
    .entry-metas,
    .tag-share,
    .related-recipe-wrap,
    .related-recipes-area,
    .author-box,
    #comments,
    .comments-recipe,
    .navigation,
    .pagi-nav,
    .breadcrumb-area,
    .single-portfolio-slider,
    /* hamburger / mobile nav */
    .navbar-toggle,
    .menu-toggle,
    .hamburger,
    [class*="navbar-toggle"],
    [class*="menu-toggle"],
    /* post meta: likes / cuisine / views / author / date / categories */
    .post-meta,
    .item-rating-count,
    .item-rating,
    .entry-meta,
    .by-author,
    .post-author,
    .post-date,
    .post-categories,
    .cat-links,
    .recipe-categories,
    [class*="item-author"],
    [class*="post-by"],
    /* modals / overlays */
    #fsModal,
    .modal,
    .modal-backdrop,
    .modal-dialog,
    .popup,
    .overlay,
    .instagram-popup,
    .ig-popup,
    [class*="instagram"],
    [class*="popup"],
    [class*="banner"],
    [class*="newsletter"],
    [class*="subscribe"],
    [class*="cookie"],
    [id*="popup"],
    [id*="modal"]:not(#page),
    /* item description / intro — hidden so we can control via .item-description below */
    .fat-close-btn,
    .fat-mobile-fullscreen-btn,
    .fat-fullscreen-overlay,
    .section-to-print ~ *,
    button,
    .btn,
    nav,
    script,
    noscript,
    iframe,
    .widget,
    .ads,
    [class*="ad-"],
    [id*="ad-"] {
        display: none !important;
    }

    /* ── 2. Page setup ─────────────────────────────────────────────────── */
    @page {
        margin: 0.6in 0.7in;
        size: letter portrait;
    }

    /* No running header — remove @top-center entirely */
    @page {
        @bottom-center {
            content: "funandtastyrecipes.com";
            font-family: Georgia, 'Times New Roman', serif;
            font-size: 8pt;
            color: #aaa;
        }
    }

    /* ── 3. Base reset ─────────────────────────────────────────────────── */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 10pt;
        color: #1a1a1a;
        background: #fff;
        margin: 0;
        padding: 0;
    }

    /* No page header text — blank out both pseudo-elements */
    body::before {
        content: none !important;
        display: none !important;
    }

    /* Page footer fallback (for browsers that skip @bottom-center) */
    body::after {
        content: "funandtastyrecipes.com";
        display: block;
        font-family: Georgia, serif;
        font-size: 8pt;
        color: #aaa;
        text-align: center;
        border-top: 0.5pt solid #eee;
        padding-top: 3pt;
        margin-top: 12pt;
    }

    #page,
    #content,
    #primary,
    .site-main,
    .container,
    .single-recipe-layout1 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        display: block !important;
    }

    /* Kill Bootstrap grid */
    [class*="col-"],
    .row {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ── 4. Recipe title — 24pt centered Playfair ─────────────────────── */
    h1.item-title,
    .item-title {
        font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
        font-size: 24pt !important;
        font-weight: bold !important;
        line-height: 1.15 !important;
        margin: 0 0 6pt 0 !important;
        padding: 0 !important;
        border: none !important;
        color: #111 !important;
        text-align: center !important;
    }

    h1.item-title::after,
    .single-recipe-layout1 > h1::after {
        content: none !important;
    }

    /* ── 5. Description / intro — italic 10pt, max 2 lines ───────────── */
    .item-description,
    .recipe-description,
    .entry-content > p:first-of-type {
        display: block !important;
        font-size: 10pt !important;
        font-style: italic !important;
        color: #555 !important;
        text-align: center !important;
        margin: 0 0 6pt 0 !important;
        line-height: 1.4 !important;
        max-height: 2.8em !important;
        overflow: hidden !important;
    }

    /* ── 6. Hero image — max 2.5 inches tall, centered ───────────────── */
    .single-recipe-main-banner {
        display: block !important;
        text-align: center !important;
        margin: 0 0 8pt 0 !important;
        page-break-inside: avoid !important;
    }

    .single-recipe-main-banner .item-figure,
    .single-recipe-main-banner figure {
        display: block !important;
        margin: 0 auto !important;
    }

    .single-recipe-main-banner img {
        max-width: 380pt !important;
        max-height: 180pt !important; /* 2.5 inches at 72dpi */
        width: auto !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
        border-radius: 2pt !important;
    }

    /* ── 7. Info row: Prep | Cook | Total | Servings ─────────────────── */
    .item-feature {
        display: block !important;
        border: 1pt solid #ddd !important;
        border-radius: 2pt !important;
        padding: 0 !important;
        margin: 0 0 10pt 0 !important;
        background: #fff !important;
        page-break-inside: avoid !important;
        height: 36pt !important; /* 0.5 inches */
        overflow: hidden !important;
    }

    .item-feature ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        height: 36pt !important;
    }

    .item-feature ul li {
        flex: 1 1 25% !important;
        padding: 4pt 4pt !important;
        border-right: 0.5pt solid #ddd !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 36pt !important;
        box-sizing: border-box !important;
    }

    .item-feature ul li:last-child {
        border-right: none !important;
    }

    .feature-icon {
        display: none !important;
    }

    .feature-title {
        font-family: Helvetica, Arial, sans-serif !important;
        font-size: 6pt !important;
        text-transform: uppercase !important;
        letter-spacing: 0.08em !important;
        color: #999 !important;
        display: block !important;
        margin-bottom: 1pt !important;
        line-height: 1 !important;
    }

    .feature-sub-title {
        font-family: Georgia, serif !important;
        font-size: 9pt !important;
        font-weight: bold !important;
        color: #222 !important;
        display: block !important;
        line-height: 1.2 !important;
    }

    /* ── 8. Page-1 two-column: ingredients 45% LEFT, nutrition 35% RIGHT  */
    .ingridients-wrap {
        display: inline-block !important;
        vertical-align: top !important;
        width: 45% !important;
        padding-right: 12pt !important;
        border-right: 1pt solid #e0d5c0 !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
    }

    .nutrition-wrap {
        display: inline-block !important;
        vertical-align: top !important;
        width: 35% !important;
        padding-left: 12pt !important;
        box-sizing: border-box !important;
        border: none !important;
        margin-top: 0 !important;
        clear: none !important;
    }

    /* Directions pushed to page 2 */
    .direction-wrap-layout1 {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        page-break-before: always !important;
        break-before: page !important;
    }

    /* ── 9. Section headings ─────────────────────────────────────────── */
    .ingridients-wrap h3.item-title,
    .ingridients-wrap h3 {
        font-family: 'Playfair Display', Georgia, serif !important;
        font-size: 11pt !important;
        font-weight: bold !important;
        color: #333 !important;
        border-bottom: 1pt solid #c8a96e !important;
        padding-bottom: 3pt !important;
        margin: 0 0 6pt 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        text-align: left !important;
    }

    /* ── 10. Ingredients — 9pt, tight spacing ────────────────────────── */
    .ingridients-wrap .ingredient-list {
        columns: 1 !important;
    }

    .ingridients-wrap .ingredient-list .row,
    .ingridients-wrap .ingredient-list [class*="col-"] {
        display: block !important;
        width: 100% !important;
        columns: 1 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .ingridients-wrap .ingredient-item,
    .ingridients-wrap li,
    .ingridients-wrap .rn-ingredient-row {
        display: flex !important;
        align-items: baseline !important;
        padding: 1.5pt 0 !important;
        border-bottom: 0.5pt solid #f0ebe0 !important;
        font-size: 9pt !important;
        line-height: 1.25 !important;
        break-inside: avoid !important;
    }

    .ingridients-wrap .ingredient-item::before,
    .ingridients-wrap li::before {
        content: "•" !important;
        color: #c8a96e !important;
        font-size: 9pt !important;
        margin-right: 4pt !important;
        flex-shrink: 0 !important;
    }

    .ingridients-wrap .ingredient-quantity,
    .ingridients-wrap .rn-ingredient-quantity {
        font-weight: bold !important;
        margin-right: 3pt !important;
        white-space: nowrap !important;
    }

    /* ── 11. Nutrition facts panel — 9pt ─────────────────────────────── */
    .nutrition-wrap h3 {
        font-family: 'Playfair Display', Georgia, serif !important;
        font-size: 11pt !important;
        font-weight: bold !important;
        margin: 0 0 4pt 0 !important;
        color: #333 !important;
        border-bottom: 1pt solid #c8a96e !important;
        padding-bottom: 3pt !important;
    }

    .nutrition-wrap ul,
    .nutrition-wrap .nutrition-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .nutrition-wrap ul li,
    .nutrition-wrap .nutrition-item {
        font-size: 9pt !important;
        line-height: 1.3 !important;
        padding: 1.5pt 0 !important;
        border-bottom: 0.5pt solid #f0f0f0 !important;
        display: flex !important;
        justify-content: space-between !important;
    }

    /* ── 12. Logo — bottom-right of page 1, 1 inch wide ─────────────── */
    .site-logo,
    .custom-logo,
    .navbar-brand img,
    .logo img,
    [class*="site-logo"] img {
        display: block !important;
        max-width: 72pt !important;
        height: auto !important;
        margin-left: auto !important;
        margin-top: 8pt !important;
    }

    /* ── 13. Directions heading — Playfair 18pt with coral accent ─────── */
    .direction-wrap-layout1 h2.item-heading,
    .direction-wrap-layout1 > h2,
    .direction-wrap-layout1 h2 {
        font-family: 'Playfair Display', Georgia, serif !important;
        font-size: 18pt !important;
        font-weight: bold !important;
        color: #111 !important;
        margin: 0 0 6pt 0 !important;
        padding-bottom: 5pt !important;
        border-bottom: 2pt solid #ff4a52 !important;
        text-transform: none !important;
        column-span: all !important;
    }

    /* ── 14. Direction steps — 3-column layout to fit on one page ─────── */
    .direction-wrap-layout1 {
        columns: 3 !important;
        column-gap: 16pt !important;
        column-rule: 0.5pt solid #eee !important;
    }

    .direction-wrap-layout1 .direction-box-layout1 {
        padding: 0 0 12pt 0 !important;
        border: none !important;
        background: none !important;
        margin-bottom: 0 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        display: block !important;
        -webkit-column-break-inside: avoid !important;
    }

    /* Step number badge / serial — hide red box, use coral text */
    .direction-box-layout1 .serial-number,
    .direction-box-layout1 .step-number,
    .direction-box-layout1 [class*="serial"],
    .direction-box-layout1 [class*="step-num"] {
        display: none !important;
    }

    /* Step title: "Step N: Title" — injected via content or the strong tag */
    .direction-box-layout1 .item-content strong:first-child,
    .direction-box-layout1 strong.step-title,
    .direction-box-layout1 h4,
    .direction-box-layout1 h3 {
        display: block !important;
        font-family: Georgia, 'Times New Roman', serif !important;
        font-size: 12pt !important;
        font-weight: bold !important;
        color: #ff4a52 !important;
        margin-bottom: 3pt !important;
        line-height: 1.2 !important;
    }

    /* Step body text */
    .direction-box-layout1 .item-content p,
    .direction-box-layout1 p {
        font-size: 11pt !important;
        line-height: 1.5 !important;
        margin: 0 0 0 0 !important;
        color: #222 !important;
    }

    /* Hide step images on page 2 */
    .direction-box-layout1 .item-figure,
    .direction-box-layout1 figure,
    .direction-box-layout1 img {
        display: none !important;
    }

    .verticle-line {
        display: none !important;
    }

    /* ── 15. Suppress URLs after links ───────────────────────────────── */
    a[href]:after {
        content: none !important;
    }
}