/* === cta-accent ===
 * Full-width accent-color CTA bridge. Heading + body + button row.
 * v3.5.54 — texture moved from child div to ::before pseudo (editor-friendly).
 *
 * @updated 3.5.54
 */
.ssla-section[data-ssla-type="cta-accent"] {
    padding: var(--paint-section-padding, 100px) 48px;
    background: var(--ssla-bg-color, var(--shell-accent, var(--preset-primary, currentColor)));
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Texture: dot pattern overlay. Replaces v3.5.53's <div class="rct-texture">.
 * ::before is editor-invisible but renders identically on the front-end. */
.ssla-section[data-ssla-type="cta-accent"]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='80' height='80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='1' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
/* Legacy texture div (if any preset still emits it from old translator)
 * is hidden — not removed in render but rendered invisibly. */
.rct-texture {
    display: none !important;
}

/* v3.5.61 (B26-headings) — Specificity hardened.
 * Two selectors: (1) the h2 directly, (2) h2 with rich field-type marker.
 * (2) is required because if heading content contains nested <p> (rich
 * editor brings paragraph tags into short headings), the h2 itself was
 * being de-prioritized in cascade order on Glenn's home cta-accent walk.
 * The [data-ssla-field-type] qualifier raises specificity to (0,1,2)
 * which beats any single-class rule from the theme that might be
 * targeting `h2` generically.
 */
.ssla-section[data-ssla-type="cta-accent"] h2,
.ssla-section[data-ssla-type="cta-accent"] h2[data-ssla-field-type="rich"] {
    font-size: var(--paint-h2-size, clamp(30px, 4vw, 46px));
    font-weight: var(--paint-heading-weight, 800);
    letter-spacing: var(--paint-heading-letter-spacing-h2, -0.5px);
    text-transform: var(--paint-heading-case-h2, none);
    color: var(--shell-text-inverted, #F3EDE4);
    margin: 0 auto 16px;
    max-width: 720px;
    position: relative;
    z-index: 2;
    line-height: 1.15;
}
.ssla-section[data-ssla-type="cta-accent"] h2 em {
    font-weight: 300;
    font-style: italic;
}
.ssla-section[data-ssla-type="cta-accent"] h2 .gold,
.ssla-section[data-ssla-type="cta-accent"] h2 .ssla-accent {
    color: var(--shell-accent, var(--preset-accent, #E2A03F));
}

.ssla-section[data-ssla-type="cta-accent"] p,
.ssla-section[data-ssla-type="cta-accent"] [data-ssla-field-type="rich"] {
    /* v3.5.60.2 (B26-padding) — Both selectors needed.
     * Pre-v3.5.60: `<p data-ssla-field="body" data-ssla-field-type="rich">` —
     * the field wrapper itself was the <p> that this `p` rule selected.
     * Post-v3.5.60 (B15 systemic <p>→<div>): wrapper is now `<div>`, not `<p>`.
     * The original `p` selector still matches NESTED <p> inside the div
     * (rich content brings its own paragraph tags), so font-size/color/
     * line-height effectively cascade — but properties that need to apply
     * at the WRAPPER level (max-width, margin: 0 auto for centering, the
     * 36px bottom margin holding buttons clear) were lost. Re-attach those
     * to the rich-field div directly. cta-accent is the only section where
     * this regressed visibly per Glenn's v3.5.60.1 staging walk.
     */
    font-size: var(--paint-body-size, 17px);
    color: rgba(255, 255, 255, 0.75);
    max-width: 560px;
    margin: 0 auto 36px;
    line-height: var(--paint-body-line-height, 1.7);
    position: relative;
    z-index: 2;
}

.rct-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

/* Local button styles. Ship D will move these to a shared utility but for now
 * keep them in the section to avoid cross-section dependency. */
.ssla-section[data-ssla-type="cta-accent"] .btn {
    display: inline-block;
    padding: 14px 32px;
    font-size: var(--paint-button-size, 0.78rem);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--paint-button-radius, 0);
    transition: var(--paint-motion-timing, 0.3s);
}
.ssla-section[data-ssla-type="cta-accent"] .btn-white {
    background: var(--shell-bg-warm, #F3EDE4);
    color: var(--shell-accent, var(--preset-primary, currentColor));
    font-weight: 800;
}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ssla-section[data-ssla-type="cta-accent"] .btn-white:hover {
 *     background: #fff;
 *     transform: translateY(var(--paint-hover-lift, -2px));
 *     box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
 * }
 */
.ssla-section[data-ssla-type="cta-accent"] .btn-white:hover{
    transform: translateY(var(--paint-hover-lift, -2px));
}
.ssla-section[data-ssla-type="cta-accent"] .btn-ghost-white {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.32);
}
/* v3.12.24 (#5) — button-hover paint retired (Glenn 2026-05-21 walk).
 * Unified hover treatment now ships from 0-shared.css (lift only,
 * no paint shift). Original rule preserved here for reference.
 * Original:
 * .ssla-section[data-ssla-type="cta-accent"] .btn-ghost-white:hover {
 *     border-color: rgba(255, 255, 255, 0.6);
 *     background: rgba(255, 255, 255, 0.08);
 * }
 */
.ssla-section[data-ssla-type="cta-accent"] .btn-ghost-white:hover{/* paint retired; global rule provides lift */}
.ssla-section[data-ssla-type="cta-accent"] .btn:empty {
    display: none;
}

@media (max-width: 768px) {
    .ssla-section[data-ssla-type="cta-accent"] {
        padding: 80px 24px;
    }
    .rct-btns {
        flex-direction: column;
        align-items: center;
    }
    .ssla-section[data-ssla-type="cta-accent"] .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* v3.12.02 — tone override classes. ssla-tone-dark inverts text
 * to read against dark bgs; ssla-tone-light inverts to read against
 * light bgs. Surgical inversion of headings/body/eyebrow; complete
 * coverage will iterate per Glenn's walks. */
.ssla-tone-dark[data-ssla-type="cta-accent"] h2{color: var(--shell-text-inverted, #F3EDE4)}
.ssla-tone-dark[data-ssla-type="cta-accent"] p{color: rgba(255, 255, 255, 0.75)}
.ssla-tone-light[data-ssla-type="cta-accent"] h2{color: var(--shell-h, #1a1d21)}
.ssla-tone-light[data-ssla-type="cta-accent"] p{color: var(--shell-t, #4a5568)}