/* ==========================================================================
   MyFoodExplorer — Blog stylesheet
   --------------------------------------------------------------------------
   Loaded on blog archives, single posts, pages, and search results (NOT on
   recipe singles — those use recipe.css). Provides:
     1. Blog post card layout (mirrors the recipe card visually)
     2. Single blog post layout (header, meta, featured, content, tags, related)
     3. FAQ accordion styles (identical to recipe.css so the post/page FAQ
        accordion matches recipe pages exactly — duplicated here because
        recipe.css only loads on recipe singles)
     4. Blog comment section styles (reuses .mfe-reviews-* from main.css)
   ========================================================================== */

/* ── 1. Blog post card ───────────────────────────────────────────────────── */
.mfe-post-card {
    background: var(--mfe-bg);
    border-radius: var(--mfe-radius);
    overflow: hidden;
    box-shadow: var(--mfe-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.mfe-post-card:hover { transform: translateY(-4px); box-shadow: var(--mfe-shadow-lg); }
.mfe-post-card-image-wrap {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--mfe-bg-alt);
}
.mfe-post-card-image-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.mfe-post-card:hover .mfe-post-card-image-wrap img { transform: scale(1.05); }
.mfe-post-card-cat-badge {
    position: absolute; top: .75rem; left: .75rem;
    background: var(--mfe-primary); color: #fff;
    padding: .25rem .7rem; border-radius: 50px;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
}
.mfe-post-card-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.mfe-post-card-meta { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--mfe-text-light); flex-wrap: wrap; }
.mfe-post-card-cat {
    color: var(--mfe-primary); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .72rem;
    text-decoration: none;
}
.mfe-post-card-cat:hover { text-decoration: underline; }
.mfe-post-card-date { color: var(--mfe-text-light); }
.mfe-post-card-title { font-size: 1.1rem; line-height: 1.3; font-weight: 700; margin: 0; font-family: var(--mfe-font-heading); }
.mfe-post-card-title a { color: var(--mfe-text); text-decoration: none; }
.mfe-post-card-title a:hover { color: var(--mfe-primary); }
.mfe-post-card-excerpt { color: var(--mfe-text-light); font-size: .9rem; line-height: 1.55; margin: 0; }
.mfe-post-card-footer {
    margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--mfe-border);
    display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.mfe-post-card-author { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--mfe-text-light); }
.mfe-post-card-author svg { width: 14px; height: 14px; }
.mfe-post-card-readmore {
    font-size: .82rem; font-weight: 600; color: var(--mfe-primary); text-decoration: none; white-space: nowrap;
}
.mfe-post-card-readmore:hover { text-decoration: underline; }
.mfe-post-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

/* ── 2. Single blog post ────────────────────────────────────────────────── */
.mfe-single-main { min-width: 0; }
.mfe-post-header { margin-bottom: 1.5rem; }
.mfe-post-cats { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.mfe-post-cat-link {
    background: var(--mfe-bg-alt); color: var(--mfe-primary);
    padding: .25rem .7rem; border-radius: 50px; font-size: .75rem; font-weight: 600;
    text-decoration: none; text-transform: uppercase; letter-spacing: .03em;
}
.mfe-post-cat-link:hover { background: var(--mfe-primary); color: #fff; text-decoration: none; }
.mfe-post-title { font-family: var(--mfe-font-heading); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; font-weight: 700; margin: 0 0 .75rem; color: var(--mfe-text); }
.mfe-post-meta { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; color: var(--mfe-text-light); font-size: .88rem; }
.mfe-post-meta svg { width: 16px; height: 16px; }
.mfe-post-author, .mfe-post-date { display: inline-flex; align-items: center; gap: .4rem; }
.mfe-post-featured { margin-bottom: 1.75rem; border-radius: var(--mfe-radius); overflow: hidden; }
.mfe-post-featured img { width: 100%; height: auto; display: block; }
.mfe-post-content { font-size: 1.02rem; line-height: 1.8; color: var(--mfe-text); }
.mfe-post-content h2, .mfe-post-content h3 { font-family: var(--mfe-font-heading); margin: 1.75rem 0 .75rem; line-height: 1.25; }
.mfe-post-content h2 { font-size: 1.5rem; }
.mfe-post-content h3 { font-size: 1.25rem; }
.mfe-post-content p { margin: 0 0 1.1rem; }
.mfe-post-content ul, .mfe-post-content ol { margin: 0 0 1.1rem 1.25rem; }
.mfe-post-content li { margin-bottom: .4rem; }
.mfe-post-content blockquote {
    border-left: 4px solid var(--mfe-primary); margin: 1.5rem 0; padding: .5rem 1.25rem;
    background: var(--mfe-bg-alt); border-radius: 0 var(--mfe-radius-sm) var(--mfe-radius-sm) 0; font-style: italic;
}
.mfe-post-content img { border-radius: var(--mfe-radius-sm); margin: 1rem 0; }
.mfe-post-content a { color: var(--mfe-primary); text-decoration: underline; }
.mfe-post-content pre {
    background: #1e1e1e; color: #f8f8f2; padding: 1rem 1.25rem; border-radius: var(--mfe-radius-sm);
    overflow-x: auto; font-size: .85rem; line-height: 1.6; margin: 1.25rem 0;
}
.mfe-post-content code { background: var(--mfe-bg-alt); padding: .15rem .4rem; border-radius: 4px; font-size: .88em; }
.mfe-post-content pre code { background: none; padding: 0; }
.mfe-page-links { margin-top: 1.5rem; }
.mfe-post-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.75rem 0; padding-top: 1.25rem; border-top: 1px solid var(--mfe-border); }
.mfe-post-tag {
    background: var(--mfe-bg-alt); color: var(--mfe-text-light); padding: .3rem .8rem; border-radius: 50px;
    font-size: .8rem; text-decoration: none; transition: background .2s, color .2s;
}
.mfe-post-tag:hover { background: var(--mfe-primary); color: #fff; text-decoration: none; }
.mfe-post-related { margin-top: 2.5rem; }

/* ── 3. FAQ accordion (identical to recipe.css so post/page FAQs match) ──── */
.mfe-faq-section { margin-block: 1.75rem; }
.mfe-faq-list { display: flex; flex-direction: column; gap: .5rem; }
.mfe-faq-item {
    border: 1.5px solid var(--mfe-border-light, var(--mfe-border)); border-radius: var(--mfe-radius-sm, 8px);
    overflow: hidden; transition: border-color .2s ease;
}
.mfe-faq-item.open { border-color: var(--mfe-primary); }
.mfe-faq-btn {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    gap: .75rem; padding: .9rem 1.1rem; background: var(--mfe-bg-alt);
    border: none; cursor: pointer; text-align: left; font-family: var(--mfe-font-body);
    font-size: .93rem; transition: background .2s ease;
}
.mfe-faq-btn:hover { background: var(--mfe-border); }
.mfe-faq-q { font-weight: 700; font-size: .93rem; color: var(--mfe-text); }
.mfe-faq-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--mfe-primary); transition: transform .25s ease; }
.mfe-faq-item.open .mfe-faq-icon { transform: rotate(45deg); }
.mfe-faq-answer { display: none; padding: .85rem 1.1rem; font-size: .9rem; line-height: 1.6; color: var(--mfe-text-light); border-top: 1px solid var(--mfe-border-light, var(--mfe-border)); }
.mfe-faq-item.open .mfe-faq-answer { display: block; }

/* ── 4. Blog comments + review form styles ─────────────────────────────────
   The blog comment form (inc/blog-comments.php) reuses the same .mfe-review-*
   classes as the recipe review form so the visual style is identical. Those
   styles normally live in recipe.css, which only loads on recipe singles —
   so they must be duplicated here for blog pages. Values are identical to
   recipe.css (including the email input selector) so both forms match exactly:
   spacing, padding, borders, hover, focus, button, mobile responsiveness. ─ */

.mfe-reviews-area { margin-top: 2.5rem; }
.mfe-reviews-empty { color: var(--mfe-text-light); font-style: italic; margin-bottom: 1.5rem; }

/* Status notice after submitting */
.mfe-review-notice {
    border-radius: var(--mfe-radius-sm, 8px); padding: .65rem 1rem; margin-bottom: 1.25rem;
    font-size: .9rem; font-weight: 600;
}
.mfe-review-notice-ok  { background: #D1FAE5; color: #065F46; }
.mfe-review-notice-err { background: #FEE2E2; color: #991B1B; }

/* Comment / review list */
.mfe-reviews-list { list-style: none; padding: 0; margin: 0 0 2rem; }
.mfe-review-item { padding: 1rem 0; border-bottom: 1px solid var(--mfe-border); }
.mfe-review-item:first-child { padding-top: 0; }
.mfe-review-head {
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-bottom: .4rem;
}
.mfe-review-stars { color: #FBBF24; font-size: .95rem; letter-spacing: 1px; }
.mfe-review-author { font-weight: 700; color: var(--mfe-text); font-size: .9rem; }
.mfe-review-date { color: var(--mfe-text-light); font-size: .8rem; }
.mfe-review-text {
    color: var(--mfe-text); line-height: 1.6; font-size: .92rem; margin: 0;
    overflow-wrap: break-word; word-break: break-word;
}
.mfe-blog-comments-list { margin: 0 0 2rem; }

/* Submission form (Name / Email / Textarea / Submit) */
.mfe-review-form {
    background: var(--mfe-bg-alt); border: 1px solid var(--mfe-border);
    border-radius: var(--mfe-radius, 12px); padding: 1.5rem;
}
.mfe-review-form-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; }
.mfe-review-field { margin-bottom: 1rem; }
.mfe-review-field label {
    display: block; font-weight: 600; font-size: .85rem; margin-bottom: .35rem; color: var(--mfe-text);
}
.mfe-review-field input[type=text],
.mfe-review-field input[type=email],
.mfe-review-field textarea {
    width: 100%; padding: .65rem 1rem; border: 1.5px solid var(--mfe-border);
    border-radius: var(--mfe-radius-sm, 8px); font-family: var(--mfe-font-body);
    outline: none; transition: border-color .2s ease; resize: vertical;
    font-size: max(.93rem, 16px); background: #fff;
}
.mfe-review-field input[type=text]:focus,
.mfe-review-field input[type=email]:focus,
.mfe-review-field textarea:focus { border-color: var(--mfe-primary); }
.mfe-review-submit { margin-top: .25rem; }

/* Honeypot — hidden */
.mfe-review-hp { display: none !important; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
    .mfe-post-title { font-size: 1.6rem; }
    .mfe-post-meta { gap: .75rem; font-size: .82rem; }
    .mfe-post-content { font-size: .98rem; }
    .mfe-faq-btn { min-height: 48px; }
    .mfe-faq-q { overflow-wrap: break-word; word-break: break-word; }
    .mfe-review-form { padding: 1.1rem; }
}