/**
 * Optimasi Blog Post Styles
 *
 * All rules are scoped to .opt-blog-content (injected by the Optimasi publisher
 * as a wrapper around every published post body) so they are fully isolated from
 * theme styles, WooCommerce pages, archives, and the homepage.
 *
 * Featured image: set as WP featured_media - position and display are controlled
 * by your theme settings (Appearance > Customize or theme panel). No override
 * needed here.
 *
 * Tags: assigned via the WP REST API. Display is a theme template decision;
 * enable/disable in your theme's post-meta settings.
 *
 * To use without the plugin: copy these rules into
 * WP Admin > Appearance > Customize > Additional CSS.
 *
 * Section classes emitted by the Optimasi LLM prompts:
 *   .opt-blog-subtitle        - h2 subtitle immediately after the post title
 *   .opt-blog-tldr            - TL;DR summary div (after subtitle, before intro)
 *   .opt-blog-faq-heading     - h3 heading for the FAQ section
 *   .opt-blog-recommendation  - h2 heading for the closing/recommendation section
 *   .opt-blog-cta             - CTA anchor button near the end
 *   .opt-about-brand          - About Brand shortcode wrapper
 */


/* -- Heading rhythm -------------------------------------------------------- */

/* H1 post title - tighten line-height so long titles don't look double-spaced.
 * Note: this targets the theme's title element outside .opt-blog-content. */
.single-post h1.entry-title,
.single-post .entry-title,
.single-post h1.post-title {
    line-height: 1.2;
}

/* H2 section headings - breathing room below each heading */
.opt-blog-content h2,
.single-post .entry-content h2 {
    margin-top: 2rem;
    margin-bottom: 0.85rem;
    line-height: 1.25;
}

/* H3 section headings */
.opt-blog-content h3,
.single-post .entry-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

/* Body paragraphs */
.opt-blog-content p,
.single-post .entry-content p {
    margin-bottom: 1.1em;
    line-height: 1.75;
}


/* -- Subtitle (opt-blog-subtitle) ------------------------------------------ */
/*
 * The subtitle h2 sits immediately after the H1 title.
 * It's a secondary descriptor, not a structural heading, so it should look
 * lighter and smaller than a normal H2.
 */
.opt-blog-content h2.opt-blog-subtitle,
.single-post .entry-content h2.opt-blog-subtitle {
    margin-top: 0.4rem;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    font-weight: 400;
    color: #555;
    line-height: 1.4;
    font-style: italic;
}


/* -- TL;DR block (opt-blog-tldr) ------------------------------------------- */
/*
 * Prominent summary box displayed above the intro paragraph.
 * Left border accent + light tinted background.
 */
.opt-blog-content .opt-blog-tldr,
.single-post .entry-content .opt-blog-tldr {
    border-left: 4px solid #2d6a9f;
    background: #f0f6ff;
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.25rem 1rem 1.4rem;
    margin: 0 0 2rem;
    font-size: 0.95rem;
    line-height: 1.65;
}

.opt-blog-content .opt-blog-tldr p:last-child,
.opt-blog-content .opt-blog-tldr ul:last-child,
.single-post .entry-content .opt-blog-tldr p:last-child,
.single-post .entry-content .opt-blog-tldr ul:last-child {
    margin-bottom: 0;
}

.opt-blog-content .opt-blog-tldr ul,
.single-post .entry-content .opt-blog-tldr ul {
    margin: 0.5rem 0 0 1rem;
    padding: 0;
}

.opt-blog-content .opt-blog-tldr li,
.single-post .entry-content .opt-blog-tldr li {
    margin-bottom: 0.35rem;
}


/* -- FAQ section heading (opt-blog-faq-heading) ----------------------------- */
/*
 * A subtle visual separator before the FAQ section.
 */
.opt-blog-content h3.opt-blog-faq-heading,
.single-post .entry-content h3.opt-blog-faq-heading {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.25rem;
    margin-top: 2rem;
}


/* -- Closing / Recommendation heading (opt-blog-recommendation) ------------- */
/*
 * The closing h2 wraps the final verdict or recommendation section.
 * Slightly stronger visual presence to signal the post is ending.
 */
.opt-blog-content h2.opt-blog-recommendation,
.single-post .entry-content h2.opt-blog-recommendation {
    border-top: 2px solid #e2e8f0;
    padding-top: 1.25rem;
    margin-top: 2.25rem;
}


/* -- About Brand section (opt-about-brand) --------------------------------- */
/*
 * Subtle visual separation for the brand profile block.
 */
.opt-blog-content .opt-about-brand,
.single-post .entry-content .opt-about-brand {
    border-left: 3px solid #cbd5e0;
    padding-left: 1.1rem;
    color: #4a5568;
    font-size: 0.95rem;
}


/* ─── CTA button (opt-blog-cta) ─────────────────────────────────────────── */
/*
 * A clean, high-contrast call-to-action link styled as a button.
 * Neutral dark background works on any site colour scheme.
 * Users can override with their brand colour via Additional CSS.
 */
.opt-blog-content a.opt-blog-cta,
.single-post .entry-content a.opt-blog-cta {
    display: inline-block;
    background: #1a202c;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 0.65rem 1.75rem;
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin-top: 0.75rem;
    transition: background 0.15s ease, transform 0.1s ease;
}

.opt-blog-content a.opt-blog-cta:hover,
.opt-blog-content a.opt-blog-cta:focus,
.single-post .entry-content a.opt-blog-cta:hover,
.single-post .entry-content a.opt-blog-cta:focus {
    background: #2d3748;
    transform: translateY(-1px);
    outline: none;
}

.opt-blog-content a.opt-blog-cta:active,
.single-post .entry-content a.opt-blog-cta:active {
    background: #1a202c;
    transform: translateY(0);
}