/*
 * Lani Core Theme — common CTA/UI compatibility layer (v1.6.4).
 *
 * Additive, plugin-hosted, and free of external asset requests. Loaded ONLY on
 * Platform-owned article surfaces whose stored body contains a recognized
 * marker (M&M un_cta, Cocoon toggle, Lazy Blocks accordion, or Twitter embed), via
 * includes/lani-core-theme.php. Everything is scoped under
 * .lani-section-article__content so none of it can leak onto Cocoon pages.
 *
 * Purpose:
 *  1. Detach M&M CTA presentation from the Cocoon child stylesheet
 *     (cta_mandm/m_and_m_cta.css) by re-implementing the un_cta layout here,
 *     using section design tokens. Existing Shortcoder markup/classes/hrefs are
 *     styled as-is; only audited asset URLs and one dead affiliate are repaired.
 *  2. Provide generic, attribute-preserving compatibility for CTA-like markup
 *     whose concrete variant is not yet evidenced (divination CTA = unknown).
 *     No product-specific selector, href, or asset is assumed.
 *  3. Migrate the audited Cocoon dependencies (toggle + Lazy Blocks
 *     accordion) to a conservative NO-JS readable fallback: content is always
 *     visible; disclosure styling degrades gracefully. No JavaScript added.
 */

/* ==========================================================================
   1. M&M CTA (un_cta) — detached layout
   ========================================================================== */

.lani-section-article__content .un_cta {
    background: var(--lani-section-soft, #fbf6f1);
    border: 1px solid var(--lani-section-line, #eadbd4);
    border-radius: 16px;
    margin-block: 1.8em;
    overflow: hidden;
}

.lani-section-article__content .un_cta_header {
    background: linear-gradient(135deg, var(--lani-section-primary, #7b2948) 0%, var(--lani-section-primary-dark, #512034) 100%);
    color: #fff;
    padding: 22px 20px 20px;
    position: relative;
}

.lani-section-article__content .un_cta_header_balloon {
    background: #fff;
    border-radius: 999px;
    color: var(--lani-section-primary-dark, #512034);
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 5px 14px;
}

.lani-section-article__content .un_cta_header_cont {
    margin-top: 12px;
}

.lani-section-article__content .un_cta_header_ttl {
    line-height: 1.4;
}

.lani-section-article__content .un_cta_header_ttlMain {
    display: inline-block;
    font-size: clamp(18px, 4.5vw, 24px);
    font-weight: 900;
}

.lani-section-article__content .un_cta_header_ttlSub {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
}

.lani-section-article__content .un_cta_header_ttlSub span {
    color: var(--lani-section-cyan, #d6aa8f);
    font-weight: 900;
}

.lani-section-article__content .un_cta_header_list {
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.lani-section-article__content .un_cta_header_list li {
    align-items: flex-start;
    display: flex;
    font-size: 13px;
    line-height: 1.6;
}

.lani-section-article__content .un_cta_header_list li::before {
    content: "✓";
    color: var(--lani-section-cyan, #d6aa8f);
    font-weight: 900;
    margin-right: 8px;
}

.lani-section-article__content .un_cta_header_list li span {
    font-weight: 800;
}

.lani-section-article__content .un_cta_body {
    display: grid;
    gap: 16px;
    padding: 20px;
}

.lani-section-article__content .un_cta_body_imgWrapper {
    margin: 0;
    text-align: center;
}

.lani-section-article__content .un_cta_body_imgWrapper img {
    height: auto;
    max-width: 100%;
    width: 260px;
}

.lani-section-article__content .un_cta_body_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lani-section-article__content .un_cta_body_list li {
    background: #fff;
    border: 1px solid var(--lani-section-line, #eadbd4);
    border-radius: 999px;
    color: var(--lani-section-primary-dark, #512034);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 12px;
}

.lani-section-article__content .un_cta_body_btns {
    display: grid;
    gap: 12px;
}

.lani-section-article__content .un_cta_body_btn {
    align-items: center;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
    color: #fff;
    display: flex;
    flex-direction: column;
    font-weight: 800;
    justify-content: center;
    min-height: 56px;
    padding: 12px 20px;
    text-align: center;
    text-decoration: none;
}

.lani-section-article__content .un_cta_body_btn:focus-visible {
    box-shadow: 0 0 0 4px var(--lani-section-focus, #6b203f);
    outline: none;
}

.lani-section-article__content .un_cta_body_btn__line {
    background: linear-gradient(135deg, #06c755 0%, #04a346 100%);
}

.lani-section-article__content .un_cta_body_btn__official {
    background: linear-gradient(135deg, var(--lani-section-primary, #7b2948) 0%, var(--lani-section-primary-dark, #512034) 100%);
}

.lani-section-article__content .un_cta_body_btnTxtMain {
    font-size: 16px;
    line-height: 1.4;
}

.lani-section-article__content .un_cta_body_btnTxtSub {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.92;
}

.lani-section-article__content .un_cta_body_balloon {
    align-items: center;
    background: #fff;
    border: 1px dashed var(--lani-section-accent, #b65f42);
    border-radius: 12px;
    color: var(--lani-section-accent, #b65f42);
    display: flex;
    font-size: 12px;
    font-weight: 800;
    gap: 4px;
    justify-content: center;
    justify-self: center;
    padding: 6px 14px;
}

@media (min-width: 640px) {
    .lani-section-article__content .un_cta_body {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        grid-template-areas:
            "img list"
            "img btns"
            "img balloon";
        align-items: center;
    }

    .lani-section-article__content .un_cta_body_imgWrapper {
        grid-area: img;
    }

    .lani-section-article__content .un_cta_body_list {
        grid-area: list;
        justify-content: flex-start;
    }

    .lani-section-article__content .un_cta_body_btns {
        grid-area: btns;
    }

    .lani-section-article__content .un_cta_body_balloon {
        grid-area: balloon;
        justify-self: start;
    }
}

/* ==========================================================================
   2. Generic CTA compatibility (divination CTA variant = unknown)
   Attribute-preserving defaults only. No product-specific selector/asset.
   ========================================================================== */

.lani-section-article__content .un_cta a,
.lani-section-article__content .c-button__cv__wrapper a,
.lani-section-article__content .wp-block-lazyblock-lani-button a {
    word-break: break-word;
}

/* Unknown CTA images never overflow the content column. */
.lani-section-article__content .un_cta img,
.lani-section-article__content .c-button__cv__wrapper img {
    height: auto;
    max-width: 100%;
}

/* ==========================================================================
   3. Cocoon toggle — conservative NO-JS readable fallback
   Content is always visible; the label reads as a sub-heading. This keeps
   fallback9 toggle posts readable on Platform without Cocoon CSS/JS and
   without rewriting post text.
   ========================================================================== */

.lani-section-article__content .toggle-wrap,
.lani-section-article__content .wp-block-cocoon-blocks-toggle {
    border: 1px solid var(--lani-section-line, #eadbd4);
    border-radius: 12px;
    margin-block: 1.4em;
    overflow: hidden;
}

.lani-section-article__content .toggle-wrap > input.toggle-checkbox + label.toggle-button,
.lani-section-article__content .toggle-wrap > .toggle-button,
.lani-section-article__content .wp-block-cocoon-blocks-toggle .toggle-button {
    background: var(--lani-section-soft, #fbf6f1);
    border-bottom: 1px solid var(--lani-section-line, #eadbd4);
    color: var(--lani-section-primary-dark, #512034);
    display: block;
    font-weight: 800;
    padding: 12px 16px;
}

/* The Cocoon toggle hides content via its own CSS/JS. On Platform that CSS is
   absent, so explicitly force the content visible and readable (no-JS). */
.lani-section-article__content .toggle-wrap > input.toggle-checkbox + label.toggle-button + span.toggle-content,
.lani-section-article__content .toggle-wrap > .toggle-content,
.lani-section-article__content .toggle-content,
.lani-section-article__content .wp-block-cocoon-blocks-toggle .toggle-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 16px;
    visibility: visible !important;
}

/* The hidden checkbox that drives the Cocoon toggle is inert without its CSS;
   keep it from creating a focusable/visual artifact. */
.lani-section-article__content .toggle-wrap > input.toggle-checkbox,
.lani-section-article__content .toggle-checkbox {
    display: none;
}

/* ==========================================================================
   4. Lazy Blocks accordion — conservative NO-JS readable fallback
   The accordion block is "unsupported" (its CSS/JS is not loaded on Platform).
   Show every panel expanded and readable; style the headers. No JavaScript.
   ========================================================================== */

.lani-section-article__content .wp-block-lazyblock-lani-accordion-block > .accordion {
    border: 1px solid var(--lani-section-line, #eadbd4);
    border-radius: 12px;
    margin-block: 1.4em;
}

.lani-section-article__content .wp-block-lazyblock-lani-accordion-block .accordion__title,
.lani-section-article__content .wp-block-lazyblock-lani-accordion-block .js-accordion-title {
    background: var(--lani-section-soft, #fbf6f1);
    border-bottom: 1px solid var(--lani-section-line, #eadbd4);
    color: var(--lani-section-primary-dark, #512034);
    font-weight: 800;
    padding: 12px 16px;
}

.lani-section-article__content .wp-block-lazyblock-lani-accordion-block > section.accordion > .accordion__container > .accordion__title.js-accordion-title + .accordion__content,
.lani-section-article__content .wp-block-lazyblock-lani-accordion-block .accordion__content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 14px 16px;
    visibility: visible !important;
}

/* ==========================================================================
   5. Twitter embed — preserve the third-party widget and readable fallback
   ========================================================================== */

.lani-section-article__content blockquote.twitter-tweet {
    border-left: 4px solid var(--lani-section-primary, #7b2948);
    margin: 1.4em 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 12px 16px;
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .lani-section-article__content .un_cta,
    .lani-section-article__content .un_cta_body_btn,
    .lani-section-article__content .toggle-wrap,
    .lani-section-article__content .wp-block-lazyblock-lani-accordion-block {
        scroll-behavior: auto;
        transition: none;
    }
}