/*
 * LoyaltyDog Blog — Brand CSS (mu-plugin)
 * Scoped under .ld-post so styles don't leak into Elementor pages.
 *
 * Versions:
 *   1.0.0 — 2026-06-02 — initial release with Posts A and B
 *   1.1.0 — 2026-06-03 — add body.single-post .entry-title { display: none } to hide
 *                        the theme's auto-generated H1 on single-post pages only
 *                        (our posts render the title inside .ld-post as .ld-title)
 */

.ld-post {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
    font-size: 18px;
    line-height: 1.7;
    color: #1B1F23;
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 24px;
    box-sizing: border-box;
}

.ld-post * {
    box-sizing: border-box;
}

/* ----- Eyebrow / Title / Dek / Byline ----- */

.ld-post .ld-eyebrow {
    display: block;
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #CC1F39;
    margin: 0 0 12px 0;
}

.ld-post .ld-title {
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4.6vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #1B1F23;
    margin: 0 0 16px 0;
}

.ld-post .ld-dek {
    font-style: italic;
    font-size: 20px;
    line-height: 1.5;
    color: #5A5A5A;
    margin: 0 0 16px 0;
}

.ld-post .ld-byline {
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    color: #5A5A5A;
    margin: 0 0 32px 0;
    padding-bottom: 16px;
    border-bottom: 1px solid #E6E6E6;
}

/* ----- Headings (H2, H3) ----- */

.ld-post .ld-h2 {
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #1B1F23;
    margin: 40px 0 16px 0;
}

.ld-post .ld-h3 {
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.3;
    color: #3D4248;
    margin: 28px 0 12px 0;
}

.ld-post .ld-h3--teal {
    color: #54A6A7;
}

/* ----- Body paragraphs ----- */

.ld-post p {
    margin: 0 0 20px 0;
}

/* ----- TL;DR / Quick Answer box ----- */

.ld-post .ld-tldr {
    background: #E4F1F1;
    border-left: 4px solid #54A6A7;
    padding: 20px 24px;
    margin: 32px 0;
    border-radius: 0 4px 4px 0;
}

.ld-post .ld-tldr-label {
    display: block;
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #54A6A7;
    margin-bottom: 12px;
}

.ld-post .ld-tldr p,
.ld-post .ld-tldr ul {
    margin: 0 0 0 0;
    padding: 0;
}

.ld-post .ld-tldr p:last-child,
.ld-post .ld-tldr ul:last-child {
    margin-bottom: 0;
}

.ld-post .ld-tldr ul {
    list-style: disc;
    padding-left: 20px;
}

.ld-post .ld-tldr ul li {
    margin-bottom: 8px;
}

.ld-post .ld-tldr ul li:last-child {
    margin-bottom: 0;
}

/* ----- Stat block ----- */

.ld-post .ld-stat {
    background: #FAFAF8;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    padding: 28px 24px;
    margin: 32px 0;
    text-align: center;
}

.ld-post .ld-stat-number {
    display: block;
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(36px, 5vw, 48px);
    line-height: 1;
    color: #CC1F39;
    margin-bottom: 12px;
}

.ld-post .ld-stat-copy {
    font-size: 18px;
    line-height: 1.5;
    color: #1B1F23;
    margin: 0 0 8px 0;
}

.ld-post .ld-stat-source {
    font-size: 13px;
    color: #5A5A5A;
    margin: 0;
}

/* ----- Takeaway box ----- */

.ld-post .ld-takeaway {
    background: #FFF0F2;
    border-left: 4px solid #CC1F39;
    padding: 20px 24px;
    margin: 32px 0;
    border-radius: 0 4px 4px 0;
}

.ld-post .ld-takeaway-label {
    display: block;
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #CC1F39;
    margin-bottom: 8px;
}

.ld-post .ld-takeaway p {
    margin: 0;
    font-weight: 600;
    color: #1B1F23;
}

/* ----- FAQ ----- */

.ld-post .ld-faq {
    margin: 24px 0 32px 0;
}

.ld-post .ld-faq-item {
    border-bottom: 1px solid #E6E6E6;
    padding: 20px 0;
}

.ld-post .ld-faq-item:first-child {
    padding-top: 0;
}

.ld-post .ld-faq-item:last-child {
    border-bottom: none;
}

.ld-post .ld-faq-q {
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    color: #1B1F23;
    margin: 0 0 8px 0;
}

.ld-post .ld-faq-a {
    margin: 0;
    color: #1B1F23;
}

/* ----- CTA block ----- */

.ld-post .ld-cta {
    background: linear-gradient(135deg, #CC1F39 0%, #B11A30 100%);
    color: #FFFFFF;
    border-radius: 4px;
    padding: 36px 32px;
    margin: 40px 0;
    text-align: center;
}

.ld-post .ld-cta h3 {
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 12px 0;
}

.ld-post .ld-cta p {
    color: #FFFFFF;
    margin: 0 0 20px 0;
    opacity: 0.95;
}

.ld-post .ld-cta-btn {
    display: inline-block;
    background: #FFFFFF;
    color: #CC1F39;
    font-family: 'MoveSans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ld-post .ld-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ----- Image wrappers (Hero, Mid, CTA-adjacent) ----- */

.ld-post .ld-hero,
.ld-post .ld-mid-img,
.ld-post .ld-cta-img {
    margin: 32px 0;
}

.ld-post .ld-hero img,
.ld-post .ld-mid-img img,
.ld-post .ld-cta-img img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.ld-post .ld-hero {
    margin: 0 0 32px 0;
}

.ld-post .ld-mid-img,
.ld-post .ld-cta-img {
    text-align: center;
}

/* ----- Hide designer instruction box leaks (defensive) ----- */

.ld-post .ld-designer-note,
.ld-post .ld-internal,
.ld-post .ld-yellow-box {
    display: none !important;
}

/* ----- Hide the theme's auto-generated H1 on single-post pages -----
   The theme renders a duplicate <h1 class="entry-title"> before our
   content. We render the title ourselves inside .ld-post as .ld-title,
   so the theme's H1 is redundant. Scoped to body.single-post so Pages
   and other post-types are unaffected. Added 2026-06-03. */
body.single-post .entry-title {
    display: none !important;
}

/* ----- Responsive ----- */

@media (max-width: 600px) {
    .ld-post {
        padding: 16px;
    }
    .ld-post .ld-title {
        font-size: clamp(28px, 8vw, 38px);
    }
    .ld-post .ld-dek {
        font-size: 18px;
    }
    .ld-post .ld-cta {
        padding: 28px 20px;
    }
    .ld-post .ld-cta h3 {
        font-size: 21px;
    }
}