/* ══════════════════════════════════════════════════════════════════
   Cococure blog skin — editorial typography layer over the Avada blog.
   Scoped to blog body classes only (.blog, .single-post, post archives)
   so nothing bleeds into other templates. Fonts match the brunch/dine
   pages: Fraunces (display) · Inter (body) · JetBrains Mono (labels).
   ══════════════════════════════════════════════════════════════════ */

body.blog, body.single-post, body.archive.category, body.archive.tag,
body.archive.author, body.archive.date {
    --coco-serif: "Fraunces", "Playfair Display", Georgia, serif;
    --coco-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --coco-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --coco-bg:      #F2EADC;
    --coco-surface: #FAF5EA;
    --coco-ink:     #1F1410;
    --coco-muted:   #6B5D4F;
    --coco-border:  #C9B89F;
    --coco-gold:    #c9a96e;
    --coco-goldink: #7c5f2a;

    background: var(--coco-bg) !important;
    color: var(--coco-ink);
}
body.blog #main, body.single-post #main, body.archive.category #main,
body.archive.tag #main, body.archive.author #main, body.archive.date #main {
    background: var(--coco-bg) !important;
    padding-top: 40px;
}

/* ── Typography ──────────────────────────────────────────────────── */
body.single-post #main h1, body.single-post #main h2, body.single-post #main h3,
body.single-post #main .fusion-title-heading,
body.blog #main h1, body.blog #main h2,
body.archive #main .fusion-rollover-title,
body.blog #main .fusion-rollover-title {
    font-family: var(--coco-serif) !important;
    font-weight: 550;
    letter-spacing: -0.01em;
    color: var(--coco-ink) !important;
    text-wrap: balance;
}
/* The page-title-bar heading is THE hero; content h1s are section
   headings in these posts (the venues post has seven), so they get a
   calmer scale — blowing every h1 to 52px made a wall of headlines. */
body.single-post #main .fusion-page-title-bar {
    background: transparent !important;
    border: none !important;
    padding: 34px 20px 6px;
}
body.single-post #main .fusion-page-title-bar .entry-title {
    font-family: var(--coco-serif) !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: 1.1 !important;
    color: var(--coco-ink) !important;
    max-width: 900px;
    margin: 0 auto;
    text-wrap: balance;
}
body.single-post #main h1.fusion-title-heading {
    font-size: clamp(25px, 3.6vw, 34px) !important;
    line-height: 1.2 !important;
    margin-top: 1.2em;
}
body.single-post #main h2, body.single-post #main h2.fusion-title-heading {
    font-size: clamp(24px, 3.4vw, 34px) !important;
    line-height: 1.18 !important;
    margin-top: 1.6em;
}
body.single-post #main h3 { font-size: 22px !important; line-height: 1.25 !important; }

body.single-post #main p, body.single-post #main li,
body.single-post #main .fusion-text {
    font-family: var(--coco-sans) !important;
    font-size: 17.5px;
    line-height: 1.78;
    color: var(--coco-ink);
}
/* Reading measure — keep long-form text at a readable width. */
body.single-post #main .fusion-text p,
body.single-post #main .fusion-text ul,
body.single-post #main .fusion-text ol,
body.single-post #main .post-content > p,
body.single-post #main .post-content > ul,
body.single-post #main .post-content > ol {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

body.single-post #main a:not(.fusion-button):not(.coco-btn),
body.blog #main .fusion-post-content a:not(.fusion-button) {
    color: var(--coco-goldink);
    text-decoration: underline;
    text-decoration-color: rgba(201, 169, 110, 0.55);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease;
}
body.single-post #main a:not(.fusion-button):hover { text-decoration-color: var(--coco-goldink); }

/* Blockquotes — the editorial pull-quote treatment. */
body.single-post #main blockquote {
    font-family: var(--coco-serif) !important;
    font-size: 22px;
    line-height: 1.45;
    font-style: italic;
    color: var(--coco-ink);
    border-left: 3px solid var(--coco-gold);
    background: var(--coco-surface);
    border-radius: 0 12px 12px 0;
    padding: 22px 28px;
    max-width: 720px;
    margin: 32px auto;
}
body.single-post #main blockquote p { font-family: inherit !important; font-size: inherit; margin: 0; }

/* Images — rounded, soft shadow. */
body.single-post #main .post-content img,
body.single-post #main .fusion-text img {
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(31, 20, 16, 0.12);
    height: auto;
}

/* Meta line (date · author · categories) — mono kicker style. */
body.single-post #main .fusion-meta-info,
body.blog #main .fusion-meta-info,
body.archive #main .fusion-meta-info {
    font-family: var(--coco-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--coco-muted) !important;
    border: none !important;
}
body.single-post #main .fusion-meta-info a,
body.blog #main .fusion-meta-info a { color: var(--coco-goldink) !important; text-decoration: none; }

/* ── Archive cards (/blog/, categories, tags) ────────────────────── */
body.blog #main .fusion-post-grid .fusion-post-wrapper,
body.archive #main .fusion-post-grid .fusion-post-wrapper {
    background: var(--coco-surface) !important;
    border: 1px solid var(--coco-border) !important;
    border-radius: 16px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    box-shadow: 0 2px 10px rgba(31, 20, 16, 0.05);
}
body.blog #main .fusion-post-grid .fusion-post-wrapper:hover,
body.archive #main .fusion-post-grid .fusion-post-wrapper:hover {
    transform: translateY(-4px);
    border-color: var(--coco-gold) !important;
    box-shadow: 0 14px 34px rgba(31, 20, 16, 0.14);
}
body.blog #main .fusion-post-content h2,
body.blog #main .fusion-post-content .blog-shortcode-post-title,
body.archive #main .fusion-post-content h2 {
    font-family: var(--coco-serif) !important;
    font-size: 22px !important;
    line-height: 1.22 !important;
}
body.blog #main .fusion-post-content h2 a,
body.archive #main .fusion-post-content h2 a { color: var(--coco-ink) !important; text-decoration: none; }
body.blog #main .fusion-post-content h2 a:hover,
body.archive #main .fusion-post-content h2 a:hover { color: var(--coco-goldink) !important; }

body.blog #main .fusion-post-content-container p,
body.archive #main .fusion-post-content-container p {
    font-family: var(--coco-sans) !important;
    font-size: 15px;
    line-height: 1.65;
    color: var(--coco-muted);
}

/* Read-more → gold pill. */
body.blog #main .fusion-read-more,
body.archive #main .fusion-read-more {
    font-family: var(--coco-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--coco-goldink) !important;
    border: 1px solid var(--coco-goldink);
    border-radius: 999px;
    padding: 8px 16px;
    display: inline-block;
    margin-top: 10px;
    transition: background .15s ease, color .15s ease;
}
body.blog #main .fusion-read-more:hover,
body.archive #main .fusion-read-more:hover {
    background: var(--coco-gold) !important;
    color: var(--coco-ink) !important;
    border-color: var(--coco-gold);
}
body.blog #main .fusion-read-more::after, body.archive #main .fusion-read-more::after { display: none !important; }

/* Kill the dated separators/rollover chrome. */
body.blog #main .fusion-content-sep, body.archive #main .fusion-content-sep { border: none !important; height: 8px; }
body.blog #main .fusion-rollover, body.archive #main .fusion-rollover {
    background: linear-gradient(180deg, rgba(31,20,16,0.15), rgba(31,20,16,0.6)) !important;
}

/* Pagination. */
body.blog #main .pagination a, body.archive #main .pagination a,
body.blog #main .pagination .current, body.archive #main .pagination .current {
    font-family: var(--coco-mono) !important;
    border-radius: 999px !important;
    border: 1px solid var(--coco-border) !important;
    color: var(--coco-goldink) !important;
    background: var(--coco-surface) !important;
}
body.blog #main .pagination .current { background: var(--coco-gold) !important; color: var(--coco-ink) !important; }

/* ── Single-post furniture ───────────────────────────────────────── */
/* Author box, related posts, comments — soften to match. */
body.single-post #main .about-author, body.single-post #main .related-posts,
body.single-post #main #comments {
    background: var(--coco-surface);
    border: 1px solid var(--coco-border);
    border-radius: 16px;
    padding: 24px 28px;
    max-width: 860px;
    margin: 40px auto;
}
body.single-post #main .about-author .fusion-title h3,
body.single-post #main .related-posts .fusion-title h3 { font-family: var(--coco-serif) !important; }

/* Featured image on single → hero treatment. */
body.single-post #main .fusion-flexslider,
body.single-post #main .single-featured-image {
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(31, 20, 16, 0.16);
    max-width: 1000px;
    margin: 0 auto 34px;
}

@media (max-width: 768px) {
    body.single-post #main h1 { font-size: 32px !important; }
    body.single-post #main p, body.single-post #main li { font-size: 16.5px; }
}

/* ── Listicle venue cards (.coco-lst) — used by editorial guide posts ── */
body.single-post #main .coco-lst-intro {
    font-family: var(--coco-serif) !important;
    font-size: 21px !important;
    line-height: 1.55 !important;
    color: var(--coco-ink);
    max-width: 720px;
    margin: 0 auto 36px;
}
body.single-post #main .coco-lst-card {
    background: var(--coco-surface);
    border: 1px solid var(--coco-border);
    border-radius: 18px;
    padding: 26px 30px;
    max-width: 860px;
    margin: 0 auto 22px;
    box-shadow: 0 3px 14px rgba(31,20,16,0.06);
}
body.single-post #main .coco-lst-card--ours {
    border-color: var(--coco-gold);
    background: linear-gradient(180deg, var(--coco-surface) 0%, rgba(201,169,110,0.12) 100%);
}
body.single-post #main .coco-lst-kicker {
    font-family: var(--coco-mono) !important;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--coco-goldink);
    margin-bottom: 6px;
}
body.single-post #main .coco-lst-badge {
    display: inline-block;
    background: var(--coco-gold);
    color: var(--coco-ink);
    border-radius: 999px;
    font-family: var(--coco-mono) !important;
    font-size: 10px;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    margin-left: 8px;
    vertical-align: 2px;
}
body.single-post #main .coco-lst-card h2 {
    margin: 0 0 10px !important;
    font-size: clamp(22px, 3vw, 28px) !important;
}
body.single-post #main .coco-lst-card h2 a { text-decoration: none; color: var(--coco-ink) !important; }
body.single-post #main .coco-lst-card h2 a:hover { color: var(--coco-goldink) !important; }
body.single-post #main .coco-lst-card figure { margin: 14px 0; }
body.single-post #main .coco-lst-card img { width: 100%; border-radius: 12px; }
body.single-post #main .coco-lst-card ul.coco-lst-facts {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
    max-width: none;
}
body.single-post #main .coco-lst-facts li {
    padding: 7px 0 7px 26px;
    position: relative;
    border-bottom: 1px dashed rgba(201,184,159,0.6);
    font-size: 15.5px;
}
body.single-post #main .coco-lst-facts li:last-child { border-bottom: none; }
body.single-post #main .coco-lst-facts li::before {
    content: '◆';
    position: absolute; left: 4px; top: 8px;
    color: var(--coco-gold);
    font-size: 10px;
}
body.single-post #main .coco-lst-cta {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--coco-mono) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--coco-goldink) !important;
    border: 1px solid var(--coco-goldink);
    border-radius: 999px;
    padding: 9px 18px;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
body.single-post #main .coco-lst-cta:hover { background: var(--coco-gold); color: var(--coco-ink) !important; }
body.single-post #main .coco-lst-close {
    background: radial-gradient(ellipse at top, rgba(201,169,110,0.18), transparent 65%), var(--coco-surface);
    border: 1px solid var(--coco-border);
    border-radius: 18px;
    text-align: center;
    padding: 40px 28px;
    max-width: 860px;
    margin: 40px auto;
}
body.single-post #main .coco-lst-close h2 { font-size: clamp(26px, 3.6vw, 36px) !important; margin-top: 0 !important; }


/* Image placeholder — for listicle cards without photography. */
body.single-post #main .coco-lst-ph {
    margin: 14px 0;
    height: 130px;
    border-radius: 12px;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(201,169,110,0.35), transparent 55%),
        linear-gradient(135deg, #EFE3CB 0%, #E4D3B2 100%);
    border: 1px solid var(--coco-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
body.single-post #main .coco-lst-ph span {
    font-family: var(--coco-serif) !important;
    font-size: 54px;
    font-style: italic;
    color: rgba(124, 95, 42, 0.5);
    line-height: 1;
}