/**
 * Launchmind Blog - Adaptive Design v2.3
 * Inherits website styling automatically
 * 
 * Priority: Website CSS > Custom accent_color > Default
 */

/* ============================================
   CSS Variables - Easily Overridable
   Website can override these in their CSS
   ============================================ */

.launchmind-blog-list,
.launchmind-blog-intro,
.launchmind-single-wrapper {
    /* Accent kleur: overnemen van het thema van de klant, in volgorde van
       specifiek naar generiek. Elementor staat er sinds 5.9.4 bij en dat is
       geen detail: op bwnext.com biedt het thema alleen --e-global-color-*
       aan, waardoor deze keten door beide oude fallbacks heen viel en op
       currentColor uitkwam. Onze accenten hadden daar dus de kleur van de
       lopende tekst in plaats van hun huisstijl.

       Elementor's primaire kleur heet --e-global-color-primary; de
       cryptische varianten (--e-global-color-abc123) zijn per site anders en
       daar valt niet generiek op te mikken. Puur additief: elke extra schakel
       kan het alleen beter maken, nooit slechter. */
    --lm-accent: var(--theme-primary,
                  var(--wp--preset--color--primary,
                  var(--e-global-color-primary,
                  var(--wp--preset--color--accent,
                  var(--global-palette1, currentColor)))));
    --lm-accent-hover: var(--theme-primary-dark,
                       var(--e-global-color-secondary, var(--lm-accent)));
    
    /* Text colors - inherit from website */
    --lm-text-primary: inherit;
    --lm-text-secondary: currentColor;
    --lm-text-muted: currentColor;
    
    /* Card styling */
    --lm-card-bg: rgba(255, 255, 255, 0.95);
    --lm-card-border: rgba(0, 0, 0, 0.08);
    --lm-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --lm-card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
    --lm-card-radius: 12px;
    
    /* Spacing */
    --lm-gap: 1.5rem;
}

/* ============================================
   Automatic Dark/Light Mode Detection
   Detects user's system preference (phone/computer)
   Only applies when theme="auto" (default)
   ============================================ */

/* 
 * Automatic Dark Mode Detection
 * 
 * IMPORTANT: Only activates when theme="auto" is explicitly set AND no custom CSS overrides exist.
 * For backward compatibility: If no theme parameter is set, dark mode is DISABLED by default.
 * This ensures existing sites (like Broadwick) with custom CSS don't break.
 * 
 * To enable automatic dark mode, explicitly use: [launchmind_blog theme="auto"]
 */
@media (prefers-color-scheme: dark) {
    /* Auto-detect dark mode - ONLY when theme="auto" is explicitly set */
    .launchmind-blog-list.lm-theme-auto:not(.lm-dark):not(.lm-light),
    .launchmind-blog-intro.lm-theme-auto:not(.lm-dark):not(.lm-light),
    .launchmind-single-wrapper.lm-theme-auto:not(.lm-dark):not(.lm-light) {
        --lm-card-bg: rgba(30, 30, 30, 0.9);
        --lm-card-border: rgba(255, 255, 255, 0.1);
        --lm-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        --lm-card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4);
        --lm-text-primary: rgba(255, 255, 255, 0.95);
        --lm-text-secondary: rgba(255, 255, 255, 0.8);
        --lm-text-muted: rgba(255, 255, 255, 0.6);
    }
    
    /* Dark mode for single post container - only when theme="auto" */
    .launchmind-single-wrapper.lm-theme-auto:not(.lm-dark):not(.lm-light) .launchmind-post-single {
        background: rgba(30, 30, 30, 0.9);
        border-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.95);
    }
    
    /* Dark mode for tags - only when theme="auto" */
    .launchmind-blog-list.lm-theme-auto:not(.lm-dark):not(.lm-light) .launchmind-tag,
    .launchmind-single-wrapper.lm-theme-auto:not(.lm-dark):not(.lm-light) .launchmind-tag {
        background: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.9);
    }
    
    /* Dark mode for links - only when theme="auto" */
    .launchmind-single-wrapper.lm-theme-auto:not(.lm-dark):not(.lm-light) .launchmind-post-body a,
    .launchmind-blog-list.lm-theme-auto:not(.lm-dark):not(.lm-light) .launchmind-read-more {
        color: rgba(100, 200, 255, 0.9);
    }
}

/* ============================================
   Force Dark Mode (theme="dark")
   Overrides automatic detection
   ============================================ */
.lm-dark,
.launchmind-blog-list.lm-dark,
.launchmind-blog-intro.lm-dark,
.launchmind-single-wrapper.lm-dark {
    --lm-card-bg: rgba(30, 30, 30, 0.9) !important;
    --lm-card-border: rgba(255, 255, 255, 0.1) !important;
    --lm-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    --lm-card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
    --lm-text-primary: rgba(255, 255, 255, 0.95) !important;
    --lm-text-secondary: rgba(255, 255, 255, 0.8) !important;
    --lm-text-muted: rgba(255, 255, 255, 0.6) !important;
}

.lm-dark .launchmind-post-single {
    background: rgba(30, 30, 30, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.lm-dark .launchmind-tag {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.lm-dark .launchmind-post-body a,
.lm-dark .launchmind-read-more {
    color: rgba(100, 200, 255, 0.9) !important;
}

/* ============================================
   Force Light Mode (theme="light")
   Overrides automatic detection
   ============================================ */
.lm-light,
.launchmind-blog-list.lm-light,
.launchmind-blog-intro.lm-light,
.launchmind-single-wrapper.lm-light {
    --lm-card-bg: rgba(255, 255, 255, 0.98) !important;
    --lm-card-border: rgba(0, 0, 0, 0.08) !important;
    --lm-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    --lm-text-primary: inherit !important;
    --lm-text-secondary: currentColor !important;
    --lm-text-muted: currentColor !important;
}

.lm-light .launchmind-post-single {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: inherit !important;
}

/* ============================================
   Blog Intro - Inherits website typography
   ============================================ */

.launchmind-blog-intro {
    max-width: 800px;
    margin: 0 auto 1.5rem;
    padding: 0 2%;
}

.launchmind-blog-intro p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: inherit;
    opacity: 0.8;
    margin: 0;
    font-family: inherit;
}

.launchmind-blog-intro .launchmind-site-name {
    color: var(--lm-accent);
    font-weight: 700;
    opacity: 1;
}

@media (max-width: 768px) {
    .launchmind-blog-intro {
        padding: 0 1rem;
        margin-bottom: 1rem;
    }
    
    .launchmind-blog-intro p {
        font-size: 1rem;
    }
}

/* ============================================
   Blog Grid
   ============================================ */

.launchmind-blog-list {
    display: grid;
    gap: var(--lm-gap);
    margin: 0 auto 2rem;
    padding: 0 2%;
    width: 100%;
    max-width: 1600px;
}

.launchmind-columns-1 { grid-template-columns: 1fr; }
.launchmind-columns-2 { grid-template-columns: repeat(2, 1fr); }
.launchmind-columns-3 { grid-template-columns: repeat(3, 1fr); }
.launchmind-columns-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1400px) {
    .launchmind-columns-4 { grid-template-columns: repeat(3, 1fr); }
    }
    
@media (max-width: 1024px) {
    .launchmind-columns-3,
    .launchmind-columns-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .launchmind-columns-2,
    .launchmind-columns-3,
    .launchmind-columns-4 { grid-template-columns: 1fr; }
    
    .launchmind-blog-list {
        padding: 0 1rem;
    }
}

/* ============================================
   Card - Clean & Adaptive
   ============================================ */

.launchmind-post-card {
    background: var(--lm-card-bg);
    border-radius: var(--lm-card-radius);
    overflow: hidden;
    box-shadow: var(--lm-card-shadow);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--lm-card-border);
}

.launchmind-post-card:hover {
    box-shadow: var(--lm-card-shadow-hover);
    transform: translateY(-4px);
}

/* Image */
.launchmind-post-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
}

.launchmind-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.launchmind-post-card:hover .launchmind-post-image img {
    transform: scale(1.05);
}

/* Content */
.launchmind-post-content {
    padding: 1.25rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Title - Inherits website font */
.launchmind-post-title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--lm-text-primary, inherit);
    font-family: inherit;
}

.launchmind-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.launchmind-post-title a:hover {
    color: var(--lm-accent);
}

/* Meta */
.launchmind-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--lm-text-secondary, inherit);
    opacity: 0.6;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: inherit;
}

.launchmind-post-author::before {
    content: "·";
    margin-right: 0.5rem;
}

/* Excerpt */
.launchmind-post-excerpt {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--lm-text-secondary, inherit);
    opacity: 0.75;
    margin: 0.25rem 0 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: inherit;
}

/* Tags */
.launchmind-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* ==========================================================================
   Minimal inline language pills — shown next to author/date in the post meta.
   Replaces the old big centered "LANGUAGE: [flag] EN [flag]" block.
   ========================================================================== */
.launchmind-post-languages {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    font-size: 0.82rem;
    color: inherit;
    opacity: 0.7;
}
.launchmind-lang-pill {
    text-decoration: none;
    color: inherit;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: opacity 0.15s ease, color 0.15s ease;
    opacity: 0.6;
}
.launchmind-lang-pill:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.launchmind-lang-pill.is-active {
    opacity: 1;
    font-weight: 700;
    color: var(--lm-accent, #f5c518);
    pointer-events: none;
}
.launchmind-lang-sep {
    opacity: 0.3;
    user-select: none;
}

.launchmind-tag {
    padding: 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    /* Subtle accent tint for background while keeping text fully readable —
       the old rule used opacity: 0.15 on the whole element, which faded the
       label into invisibility on light themes. */
    background: color-mix(in srgb, var(--lm-accent) 12%, transparent);
    color: var(--lm-text, #1a1a1a);
    border: 1px solid color-mix(in srgb, var(--lm-accent) 20%, transparent);
    border-radius: 999px;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
/* Fallback for browsers without color-mix() (old Safari etc.) */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .launchmind-tag {
        background: rgba(245, 197, 24, 0.12);
        border-color: rgba(245, 197, 24, 0.25);
        color: #1a1a1a;
    }
}

/* Read More - Uses website accent color */
.launchmind-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--lm-accent);
    text-decoration: none;
    margin-top: 0.75rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.launchmind-read-more:hover {
    gap: 0.6rem;
}

.launchmind-read-more::after {
    content: "→";
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.launchmind-read-more:hover::after {
    transform: translateX(3px);
}

/* ============================================
   Single Post
   ============================================ */

.launchmind-single-wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 2rem 4%;
}

.launchmind-post-single {
    max-width: 800px;
    margin: 0 auto;
    background: var(--lm-card-bg);
    padding: 2.5rem;
    border-radius: var(--lm-card-radius);
    box-shadow: var(--lm-card-shadow);
    border: 1px solid var(--lm-card-border);
}

.launchmind-post-featured-image {
    margin: -2.5rem -2.5rem 2rem -2.5rem;
    border-radius: var(--lm-card-radius) var(--lm-card-radius) 0 0;
    overflow: hidden;
}

.launchmind-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.launchmind-post-single .launchmind-post-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem;
    color: var(--lm-text-primary, inherit);
    font-family: inherit;
}

.launchmind-post-single .launchmind-post-meta {
    font-size: 0.85rem;
    color: var(--lm-text-secondary, inherit);
    opacity: 0.6;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--lm-card-border);
}

/* Post body - Inherits all typography */
.launchmind-post-body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--lm-text-primary, inherit);
    font-family: inherit;
}

.launchmind-post-body h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2.5rem 0 1rem;
    color: inherit;
    /* Leave room below sticky site headers on themes that use them (Breakdance,
       Elementor Pro, etc.) so clicking a jump-link / landing on the heading
       doesn't hide it behind the top-bar. */
    scroll-margin-top: 6rem;
}

.launchmind-post-body h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 2rem 0 0.75rem;
    color: inherit;
    scroll-margin-top: 6rem;
}

/* First heading after the article title gets extra breathing room so it
   doesn't butt up against the page hero or the meta row. */
.launchmind-post-body > h2:first-child,
.launchmind-post-body > h3:first-child {
    margin-top: 1.5rem;
}

.launchmind-post-body p {
    margin-bottom: 1.25rem;
}

/* Content-body styling — triple-scoped: legacy wrapper + guaranteed CPT
   wrapper (.lm-article-body, added by Launchmind_Virtual_Filters) +
   body-class fallback. The .lm-article-body wrapper is the reliable one
   since some theme builders (Breakdance, Divi, Elementor Pro) skip
   body_class() on CPT templates — relying on body.single-launchmind_article
   alone leaves tables/hr/images unstyled there. */
.launchmind-post-body hr,
.lm-article-body hr,
.single-launchmind_article .entry-content hr,
.single-launchmind_article .post-content hr,
.single-launchmind_article article hr {
    border: 0;
    height: 1px;
    background: color-mix(in srgb, currentColor 12%, transparent);
    margin: 2.5rem auto;
    max-width: 60%;
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .launchmind-post-body hr,
    .lm-article-body hr,
    .single-launchmind_article .entry-content hr,
    .single-launchmind_article .post-content hr,
    .single-launchmind_article article hr { background: rgba(0, 0, 0, 0.1); }
}

.launchmind-post-body img,
.lm-article-body img,
.single-launchmind_article .entry-content img,
.single-launchmind_article .post-content img,
.single-launchmind_article article .entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.75rem auto;
    border-radius: 8px;
}

.launchmind-post-body ul,
.launchmind-post-body ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.launchmind-post-body li {
    margin-bottom: 0.5rem;
}

.launchmind-post-body a {
    color: var(--lm-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.launchmind-post-body a:hover {
    text-decoration: none;
}

.launchmind-post-body strong {
    font-weight: 700;
}

.launchmind-post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.launchmind-post-single .launchmind-post-tags {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lm-card-border);
}

.launchmind-tags-label {
    font-weight: 600;
    margin-right: 0.5rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.launchmind-back-link {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--lm-accent);
    color: white !important;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.launchmind-back-link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* ============================================
   Language Switcher
   ============================================ */

.launchmind-language-switcher,
.launchmind-language-switcher-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.5rem 0;
    border-top: 1px solid var(--lm-card-border);
    border-bottom: 1px solid var(--lm-card-border);
    flex-wrap: wrap;
    justify-content: center;
}

/* Inline version (between paragraphs) has slightly different styling */
.launchmind-language-switcher-inline {
    margin: 2.5rem 0;
    padding: 1.5rem;
    background: var(--lm-card-bg, rgba(255, 255, 255, 0.5));
    border-radius: 12px;
    border-top: 1px solid var(--lm-card-border);
    border-bottom: 1px solid var(--lm-card-border);
    border-left: none;
    border-right: none;
}

.launchmind-language-label {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--lm-text-secondary, inherit);
    opacity: 0.7;
    margin-right: 0.5rem;
}

.launchmind-language-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.launchmind-language-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--lm-card-bg, rgba(255, 255, 255, 0.95));
    border: 1px solid var(--lm-card-border, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    text-decoration: none;
    color: var(--lm-text-primary, inherit);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    font-family: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.launchmind-language-button:hover {
    background: var(--lm-card-bg, rgba(255, 255, 255, 0.98));
    border-color: var(--lm-accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.launchmind-language-active {
    background: var(--lm-accent) !important;
    color: white !important;
    border-color: var(--lm-accent) !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.launchmind-language-active:hover {
    background: var(--lm-accent-hover, var(--lm-accent)) !important;
    transform: translateY(-1px);
}

.launchmind-language-flag {
    font-size: 1.1rem;
    line-height: 1;
}

.launchmind-language-code {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.launchmind-language-check {
    margin-left: 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
}

/* Dark mode support for language switcher */
@media (prefers-color-scheme: dark) {
    .launchmind-single-wrapper:not(.lm-dark):not(.lm-light) .launchmind-language-button {
        background: rgba(40, 40, 40, 0.9);
        border-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
    }
    
    .launchmind-single-wrapper:not(.lm-dark):not(.lm-light) .launchmind-language-button:hover {
        background: rgba(50, 50, 50, 0.95);
        border-color: rgba(100, 200, 255, 0.5);
    }
}

.lm-dark .launchmind-language-button {
    background: rgba(40, 40, 40, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.lm-dark .launchmind-language-button:hover {
    background: rgba(50, 50, 50, 0.95) !important;
    border-color: rgba(100, 200, 255, 0.5) !important;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .launchmind-language-switcher {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .launchmind-language-buttons {
        width: 100%;
        gap: 0.5rem;
    }
    
    .launchmind-language-button {
        flex: 1;
        min-width: 0;
        justify-content: center;
        padding: 0.6rem 0.8rem;
    }
}

/* ============================================
   Mobile
   ============================================ */

@media (max-width: 768px) {
    .launchmind-single-wrapper {
        padding: 1rem;
    }
    
    .launchmind-post-single {
        padding: 1.5rem;
    }
    
    .launchmind-post-featured-image {
        margin: -1.5rem -1.5rem 1rem -1.5rem;
    }
    
    .launchmind-post-single .launchmind-post-title {
        font-size: 1.5rem;
    }
    
    .launchmind-post-content {
        padding: 1rem 1.25rem 1.25rem;
    }
    
    .launchmind-post-title {
        font-size: 1.05rem;
    }
}

@media (max-width: 480px) {
    .launchmind-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .launchmind-post-author::before {
        display: none;
    }
}

/* ============================================
   Error States
   ============================================ */

.launchmind-error,
.launchmind-empty {
    padding: 2rem;
    text-align: center;
    border-radius: var(--lm-card-radius);
    margin: 2rem auto;
    max-width: 500px;
}

.launchmind-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.launchmind-empty {
    background: var(--lm-card-bg);
    border: 1px dashed var(--lm-card-border);
    opacity: 0.7;
}

/* ============================================
   Custom Accent Color Support
   Add class like: lm-accent-teal, lm-accent-blue, etc.
   Or use inline style: style="--lm-accent: #00a69c"
   ============================================ */

.lm-accent-teal { --lm-accent: #00a69c !important; }
.lm-accent-blue { --lm-accent: #2563eb !important; }
.lm-accent-purple { --lm-accent: #7c3aed !important; }
.lm-accent-red { --lm-accent: #dc2626 !important; }
.lm-accent-orange { --lm-accent: #ea580c !important; }
.lm-accent-gold { --lm-accent: #d4a84b !important; }
.lm-accent-green { --lm-accent: #10b981 !important; }

/* ============================================
   Table Styling - Clean & Readable
   ============================================ */

/* Table styling — multi-scoped for reliability across rendering modes and
   theme builders:
   - Legacy mode: content lives inside .launchmind-single-wrapper.
   - CPT mode (4.10+): .lm-article-body wrapper (always rendered by
     Launchmind_Virtual_Filters::decorate_content — the reliable anchor).
   - Fallbacks: .lm-table class on every table our markdown converter emits,
     and body.single-launchmind_article for themes that do call body_class().
   !important on the critical visual properties so theme CSS resets
   (Breakdance, some block themes) can't strip our borders/padding. */
.launchmind-single-wrapper table,
.launchmind-single-wrapper .lm-table,
.lm-article-body table,
.lm-article-body .lm-table,
.single-launchmind_article table,
.lm-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1.75rem 0 !important;
    font-size: 0.95rem;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.18) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.launchmind-single-wrapper table thead,
.launchmind-single-wrapper .lm-table thead,
.lm-article-body table thead,
.lm-article-body .lm-table thead,
.single-launchmind_article table thead,
.lm-table thead {
    background: rgba(0, 0, 0, 0.06) !important;
}

.lm-dark .launchmind-single-wrapper table thead,
.lm-dark .launchmind-single-wrapper .lm-table thead,
.lm-dark .lm-article-body table thead,
.lm-dark .lm-article-body .lm-table thead,
.lm-dark .single-launchmind_article table thead,
.lm-dark .lm-table thead {
    background: rgba(255, 255, 255, 0.1) !important;
}

.launchmind-single-wrapper table th,
.launchmind-single-wrapper .lm-table th,
.lm-article-body table th,
.lm-article-body .lm-table th,
.single-launchmind_article table th,
.lm-table th {
    padding: 12px 16px !important;
    text-align: left !important;
    font-weight: 600 !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2) !important;
    background: rgba(0, 0, 0, 0.04) !important;
}

.launchmind-single-wrapper table td,
.launchmind-single-wrapper .lm-table td,
.lm-article-body table td,
.lm-article-body .lm-table td,
.single-launchmind_article table td,
.lm-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    vertical-align: top !important;
}

.launchmind-single-wrapper table tr:last-child td,
.launchmind-single-wrapper .lm-table tr:last-child td,
.lm-article-body table tr:last-child td,
.lm-article-body .lm-table tr:last-child td,
.single-launchmind_article table tr:last-child td,
.lm-table tr:last-child td {
    border-bottom: none !important;
}

.launchmind-single-wrapper table tbody tr:nth-child(even),
.launchmind-single-wrapper .lm-table tbody tr:nth-child(even),
.lm-article-body table tbody tr:nth-child(even),
.lm-article-body .lm-table tbody tr:nth-child(even),
.single-launchmind_article table tbody tr:nth-child(even),
.lm-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.035) !important;
}

.launchmind-single-wrapper table tr:hover,
.launchmind-single-wrapper .lm-table tr:hover,
.lm-article-body table tr:hover,
.lm-article-body .lm-table tr:hover,
.single-launchmind_article table tr:hover,
.lm-table tr:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

.lm-dark .launchmind-single-wrapper table tr:hover,
.lm-dark .launchmind-single-wrapper .lm-table tr:hover,
.lm-dark .lm-article-body table tr:hover,
.lm-dark .lm-article-body .lm-table tr:hover,
.lm-dark .single-launchmind_article table tr:hover,
.lm-dark .lm-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Horizontal-scroll wrapper for tables. The <table> itself stays as a
   real table (display:table) so thead/tbody/tr/td layout is preserved —
   iOS Safari mis-renders tables forced to display:block. The wrapper
   div (.lm-table-wrapper, injected by Launchmind_Virtual_Filters) is
   what carries the horizontal scroll when content is wider than the
   viewport. On screens where the table fits, the wrapper is invisible. */
.lm-table-wrapper {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 1.75rem 0 !important;
    border-radius: 8px;
}

.lm-table-wrapper > table,
.lm-table-wrapper > .lm-table {
    /* Reset the margin we moved to the wrapper to avoid doubling. */
    margin: 0 !important;
}

@media (max-width: 720px) {
    .lm-table-wrapper > table,
    .lm-table-wrapper > .lm-table {
        font-size: 0.9rem;
    }
    .lm-table-wrapper > table th,
    .lm-table-wrapper > table td,
    .lm-table-wrapper > .lm-table th,
    .lm-table-wrapper > .lm-table td {
        padding: 10px 12px !important;
        white-space: normal;
    }
    /* Visual hint that tables are scrollable on narrow viewports — a soft
       right shadow where content disappears off-screen. Using background
       scroll attachment so it only shows when the wrapper actually scrolls. */
    .lm-table-wrapper {
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center no-repeat,
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%) right center no-repeat,
            linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0)) left center no-repeat,
            linear-gradient(to left, rgba(0,0,0,0.08), rgba(0,0,0,0)) right center no-repeat;
        background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* Mobile table - horizontal scroll */
@media (max-width: 640px) {
    .launchmind-single-wrapper table,
    .launchmind-single-wrapper .lm-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .launchmind-single-wrapper table th,
    .launchmind-single-wrapper .lm-table th,
    .launchmind-single-wrapper table td,
    .launchmind-single-wrapper .lm-table td {
        padding: 10px 12px;
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.launchmind-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 40px 0 20px;
    flex-wrap: wrap;
}

.launchmind-pagination-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #374151;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    line-height: 1;
}

.launchmind-pagination-link:hover:not(.launchmind-pagination-disabled) {
    background: var(--lm-accent, #0d9488);
    border-color: var(--lm-accent, #0d9488);
    color: #ffffff;
    transform: translateY(-1px);
}

.launchmind-pagination-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.launchmind-pagination-current {
    font-size: 0.9rem;
    color: #6b7280;
    padding: 0 12px;
    font-weight: 500;
}

/* Dark theme pagination */
.launchmind-pagination.lm-dark .launchmind-pagination-link,
.launchmind-pagination.lm-theme-auto .launchmind-pagination-link {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

.launchmind-pagination.lm-dark .launchmind-pagination-current,
.launchmind-pagination.lm-theme-auto .launchmind-pagination-current {
    color: #9ca3af;
}

@media (prefers-color-scheme: dark) {
    .launchmind-pagination.lm-theme-auto:not(.lm-light) .launchmind-pagination-link {
        background: #1f2937;
        border-color: #374151;
        color: #e5e7eb;
    }
    .launchmind-pagination.lm-theme-auto:not(.lm-light) .launchmind-pagination-current {
        color: #9ca3af;
    }
}

@media (max-width: 480px) {
    .launchmind-pagination {
        gap: 8px;
    }
    .launchmind-pagination-link {
        padding: 8px 14px;
        font-size: 0.875rem;
    }
}

/* ============================================
   CPT article body — typography baseline
   ============================================

   The .lm-article-body wrapper gives CPT articles the same readable
   typography we had in legacy mode — line-height, heading scale,
   paragraph rhythm, list spacing — without overriding the theme's
   font family. On mobile these rules get tighter padding and a
   larger base font so body copy doesn't trigger iOS zoom when a user
   taps a link. */
.lm-article-body {
    line-height: 1.65;
    font-size: 1.0625rem;
    max-width: 100%;
    /* Breathing room at the top so overlapping floating theme elements
       (La Casserole's Breakdance circular logo hangs into the content
       zone; many premium themes do similar with sticky brand badges)
       don't obscure the first heading. Matches the scroll-margin-top
       we set on h1/h2/h3 so anchor-jumps land below sticky site nav. */
    padding-top: 2rem;
    /* Prevent a wide table or image from pushing the page sideways on
       mobile. Tables themselves get their own scroll container below; this
       is a safety net for any other wide child element. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Themes with floating brand badges that hang into the content column
   (Breakdance + custom site-logo layouts like La Casserole) need more
   top clearance on narrow screens where the badge is proportionally
   larger. */
body.breakdance .lm-article-body,
body.wp-theme-breakdance-zero .lm-article-body {
    padding-top: 4rem;
}

@media (max-width: 640px) {
    body.breakdance .lm-article-body,
    body.wp-theme-breakdance-zero .lm-article-body {
        padding-top: 5.5rem;
    }
}

.lm-article-body img,
.lm-article-body video,
.lm-article-body iframe {
    max-width: 100% !important;
    height: auto;
}

.lm-article-body p {
    margin: 0 0 1.15rem;
}

/* !important on font-size/margin: Breakdance and some block themes emit
   `.breakdance h2 { font-size: 38-48px }` mobile rules that load AFTER
   the Launchmind CSS in the combined bundle. Equal specificity (class +
   element), later rule wins — our article bodies got theme-sized headings
   mixed with body text and lost all visual hierarchy. !important here
   restores Launchmind's heading scale inside the article wrapper. */
.lm-article-body h1,
.lm-article-body h2,
.lm-article-body h3 {
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: inherit;
    scroll-margin-top: 6rem;
}

.lm-article-body h2 {
    font-size: 1.65rem !important;
    margin: 2.5rem 0 1rem !important;
}

.lm-article-body h3 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 2rem 0 0.75rem !important;
}

.lm-article-body > *:first-child {
    margin-top: 0;
}

.lm-article-body ul,
.lm-article-body ol {
    margin: 1rem 0 1.4rem;
    padding-left: 1.35rem;
}

.lm-article-body li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.lm-article-body li + li {
    margin-top: 0.15rem;
}

.lm-article-body blockquote {
    margin: 1.75rem 0;
    padding: 0.5rem 1.25rem;
    border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
    font-style: italic;
    opacity: 0.9;
}

/* Mobile — more generous spacing, bigger base type, looser headings.
   Also unwrap the overeager first-sentence underline that happens when
   the AI wraps a full sentence in an anchor — keeps the link but makes
   it far less visually dominant on narrow screens. */
@media (max-width: 640px) {
    .lm-article-body {
        font-size: 1.0625rem;
        line-height: 1.7;
    }

    .lm-article-body p {
        margin: 0 0 1.35rem;
    }

    .lm-article-body h2 {
        font-size: 1.4rem !important;
        margin: 2.25rem 0 0.85rem !important;
        line-height: 1.3 !important;
    }

    .lm-article-body h3 {
        font-size: 1.15rem !important;
        margin: 1.75rem 0 0.65rem !important;
    }

    .lm-article-body ul,
    .lm-article-body ol {
        padding-left: 1.2rem;
        margin: 0.85rem 0 1.5rem;
    }

    .lm-article-body li {
        margin-bottom: 0.75rem;
        line-height: 1.55;
    }

    .lm-article-body img {
        margin: 1.25rem auto;
    }

    .lm-article-body a {
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }
}

/* ==========================================================================
   Theme-leak hardening for the blog listing cards — v5.0.0
   --------------------------------------------------------------------------
   The rules above set up the card visually. The rules below DEFEND the card
   against generic theme CSS that otherwise leaks into it on Breakdance /
   Divi / Elementor / block-theme / custom commerce-theme setups. Same
   defensive posture we gave .lm-article-body in 4.11.x.

   Three symptoms this block eliminates:

   1. Grey band above the post image
      Themes ship `img { height: auto }` which wins over a plain
      `.launchmind-post-image img { height: 100% }` (either equal
      specificity + later load order, or theme uses an `!important`).
      The image then renders at natural aspect inside our 16:10 container
      and the placeholder gradient leaks above it.

   2. "·" separator dropping to its own line between date and author
      Themes blanket-set `span { display: block }` inside `.entry-content`,
      or a content filter injects `<br>` between our meta spans. Either
      way the flex row collapses into three stacked lines and the ::before
      dot looks like an orphan "." on a line of its own.

   3. Big vertical gap between the card title and the meta row
      Themes add `.entry-content > * { margin: 1em 0 }` to the main content
      flow. Inside our card, every direct child inherits that slack.

   We only harden layout-critical properties. Font-family, colour and accent
   still inherit so the card feels native to each site. Colour / typography
   inheritance is intentionally preserved via CSS variables declared higher
   up in this file — those are not !important and can still be overridden
   by customer CSS.
   ========================================================================== */

.launchmind-blog-list .launchmind-post-card {
    margin: 0 !important;
    padding: 0 !important;
}

.launchmind-blog-list .launchmind-post-card::before,
.launchmind-blog-list .launchmind-post-card::after {
    content: none !important;
}

/* Image container: block, zero padding/margin/border so the <img> really
   fills the aspect-ratio box top-to-bottom. */
.launchmind-blog-list .launchmind-post-card .launchmind-post-image {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.launchmind-blog-list .launchmind-post-card .launchmind-post-image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.launchmind-blog-list .launchmind-post-card .launchmind-post-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Content wrapper: keep our own padding (see the earlier .launchmind-post-content
   rule), just block theme-injected vertical rhythm on the direct children. */
.launchmind-blog-list .launchmind-post-card .launchmind-post-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.launchmind-blog-list .launchmind-post-card .launchmind-post-title {
    margin: 0 !important;
    padding: 0 !important;
}

/* Meta row: pin the flex layout so no block override and no injected <br>
   can break the single-line date · author pattern. */
.launchmind-blog-list .launchmind-post-card .launchmind-post-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

.launchmind-blog-list .launchmind-post-card .launchmind-post-meta > span,
.launchmind-blog-list .launchmind-post-card .launchmind-post-date,
.launchmind-blog-list .launchmind-post-card .launchmind-post-author {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Stop themes from adding decorative ::before / ::after on the date span —
   our "·" separator lives on the author span only. */
.launchmind-blog-list .launchmind-post-card .launchmind-post-date::before,
.launchmind-blog-list .launchmind-post-card .launchmind-post-date::after,
.launchmind-blog-list .launchmind-post-card .launchmind-post-author::after {
    content: none !important;
}

/* Re-assert our own · separator with !important so a theme that also
   targets this pseudo-element can't wipe or relocate it. */
.launchmind-blog-list .launchmind-post-card .launchmind-post-author::before {
    content: "·" !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    padding: 0 !important;
}

.launchmind-blog-list .launchmind-post-card .launchmind-post-excerpt {
    margin: 0.25rem 0 0 !important;
    padding: 0 !important;
}

.launchmind-blog-list .launchmind-post-card .launchmind-read-more {
    margin-top: 0.75rem !important;
    padding: 0 !important;
}

/* Intro paragraph: themes often apply `p { margin: 1em 0 }` which spaces our
   single intro paragraph awkwardly inside its wrapper. */
.launchmind-blog-intro p {
    margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Sticky topbar safety — paired with launchmind-sticky-detect.js.
 *
 * On host themes that pin a `position: fixed` topbar to the viewport but
 * don't compensate the single-post template with a matching padding-top,
 * the article title gets hidden under the bar. The companion JS measures
 * the real bar height and exposes it as `--lm-sticky-offset`. We use that
 * variable here to nudge the article title (whatever class the theme
 * uses for the h1) and to set scroll-padding so jump-links land below
 * the bar.
 *
 * Default value of `--lm-sticky-offset` is 0 — when no sticky bar is
 * detected (the vast majority of installs) these rules are no-ops and
 * existing layouts are untouched.
 *
 * Scoped strictly to `body.single-launchmind_post` so non-Launchmind
 * pages on the same site are never affected.
 * ------------------------------------------------------------------------- */
body.single-launchmind_post,
body.single-launchmind_article {
    scroll-padding-top: var(--lm-sticky-offset, 0px);
}

body.single-launchmind_post .entry-title,
body.single-launchmind_post h1.entry-title,
body.single-launchmind_post h1.wp-block-post-title,
body.single-launchmind_post h1.post-title,
body.single-launchmind_post h1.article-title,
body.single-launchmind_post .entry-header h1,
body.single-launchmind_post .post-header h1,
body.single-launchmind_post article > header h1:first-of-type,
body.single-launchmind_post .lm-article-body > h1:first-child,
body.single-launchmind_article .entry-title,
body.single-launchmind_article h1.entry-title,
body.single-launchmind_article h1.wp-block-post-title,
body.single-launchmind_article h1.post-title,
body.single-launchmind_article h1.article-title,
body.single-launchmind_article .entry-header h1,
body.single-launchmind_article .post-header h1,
body.single-launchmind_article article > header h1:first-of-type,
body.single-launchmind_article .lm-article-body > h1:first-child {
    margin-top: var(--lm-sticky-offset, 0px);
    scroll-margin-top: var(--lm-sticky-offset, 0px);
}

/* ---------------------------------------------------------------------------
 * Topbar backdrop — paired with launchmind-sticky-detect.js.
 *
 * Some themes (Twentynext-style agency themes, Wix-imports) use a
 * `position: fixed` topbar with a *transparent* background and white
 * logo + nav text, designed to overlay a dark hero section on the
 * homepage. On our single-article page the background is white, so the
 * white text becomes invisible against the body's white background.
 *
 * The detect script samples the topbar's text colour and, when it spots
 * the contrast collision, sets `--lm-topbar-backdrop` to a contrasting
 * colour (#101418 for light text, #f5f5f5 for dark text). This rule
 * paints a fixed band behind the topbar so the existing topbar text
 * stays clickable but becomes legible.
 *
 * Customers can override the colour without JS by setting
 * `--launchmind-article-topbar-bg` in their theme's CSS — the detect
 * script reads it first and uses that value verbatim if present.
 *
 * z-index: 1 keeps the band above the page background but below virtually
 * every theme topbar (which use z-index 100+). pointer-events: none
 * ensures the topbar's links stay clickable through the band.
 * ------------------------------------------------------------------------- */
body.single-launchmind_post::before,
body.single-launchmind_article::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--lm-sticky-offset, 0px);
    background: var(--lm-topbar-backdrop, transparent);
    pointer-events: none;
    z-index: 1;
    /* Smooth the transition when JS swaps the neutral fallback for the
     * brand-detected colour after the homepage sample completes. Without
     * this, the topbar visibly snaps from #101418 to e.g. #14525a. */
    transition: background-color 220ms ease-out;
}