/**
 * Cultivate Membership shared styles.
 *
 * Sections:
 *   1. Reusable buttons (cv-btn variants)
 *   2. Locked-content preview (singular + archive)
 *   3. End-of-course CTA + final-project submission
 *   4. /how-to-study/ landing
 *   5. Founding cap markers
 *   6. Form messages
 */

/* 1. Buttons --------------------------------------------------------- */

.cv-btn {
    display: inline-block;
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 14px;
    padding: 14px 28px;
    border-radius: var(--cv-radius-pill, 9999px);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cv-btn.cv-btn-primary {
    background: var(--cv-accent-fill, #A8470A);   /* darkened so cream text reaches AA (5.31:1); terracotta failed at 3.89:1 */
    color: var(--cv-text-on-dark, #F7F3E9);
    border-color: var(--cv-accent-fill, #A8470A);
}
.cv-btn-primary:hover {
    background: #B34A00;
    border-color: #B34A00;
}
.cv-btn-secondary {
    background: transparent;
    color: var(--cv-text-on-cream, #000000);
    border-color: var(--cv-text-on-cream, #000000);
}
.cv-btn-secondary:hover {
    background: var(--cv-text-on-cream, #000000);
    color: var(--cv-text-on-dark, #F7F3E9);
}
.cv-locked-dark .cv-btn-secondary,
.cv-course-cta-dark .cv-btn-secondary {
    color: var(--cv-text-on-dark, #F7F3E9);
    border-color: var(--cv-text-on-dark, #F7F3E9);
}
.cv-locked-dark .cv-btn-secondary:hover,
.cv-course-cta-dark .cv-btn-secondary:hover {
    background: var(--cv-text-on-dark, #F7F3E9);
    color: var(--cv-bg-secondary, #000000);
}

/* 2. Locked-content preview ------------------------------------------ */

.cv-locked {
    padding: 80px 24px;
}
.cv-locked-cream {
    background: var(--cv-bg-cream, #F7F3E9);
    color: var(--cv-text-on-cream, #000000);
}
.cv-locked-dark {
    background: var(--cv-bg-secondary, #000000);
    color: var(--cv-text-on-dark, #F7F3E9);
}
.cv-locked-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.cv-locked-eyebrow {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    color: var(--cv-accent, #CC5500);   /* correct on the dark locked variant (4.87:1) */
    margin: 0 0 16px;
}
/* On the cream locked variant, terracotta fails AA as small text - use ink. */
.cv-locked-cream .cv-locked-eyebrow {
    color: var(--cv-accent-ink, #9A3E00);
}
.cv-locked-title {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
    margin: 0 0 16px;
}
/* Dark-surface legibility fix. The gated single/section interceptor renders
   this preview *over* a page whose own cascade still applies: Kadence's
   single-post <h1> color and, on study sections, the cv-study-* surface
   classes. The title has no own color, so it inherits the dark-surface cream
   - which a direct theme h1 rule overrides, leaving it dark-on-black; the
   eyebrow can lose the same way. Pin both to the dark palette with !important
   (the idiom study-rich.css already uses to hold cream on its dark surfaces)
   so the lock screen is always legible regardless of the page it interrupts.
   Scoped to .cv-locked-dark, so the cream variant is untouched. */
.cv-locked-dark .cv-locked-eyebrow {
    color: var(--cv-accent, #CC5500) !important;
}
.cv-locked-dark .cv-locked-title {
    color: var(--cv-text-on-dark, #F7F3E9) !important;
}
/* Descriptor note: cream on the dark locked card (warm stone is banned on
   text). Pinned like the title/eyebrow so a theme <p> rule cannot override. */
.cv-locked-dark .cv-locked-note {
    color: var(--cv-text-on-dark, #F7F3E9) !important;
}
.cv-locked-excerpt {
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 32px;
}
.cv-locked-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}
.cv-locked-note {
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}
.cv-locked-archive {
    /* When the archive page renders, give the locked block enough vertical
       presence that the surrounding chrome doesn't dominate. */
}
.cv-locked-main {
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.cv-locked-main > .cv-locked {
    width: 100%;
}

/* 3. End-of-course CTA + final-project submission ------------------- */

.cv-course-cta {
    margin: 64px 0;
    padding: 56px 32px;
    text-align: center;
    border-radius: var(--cv-radius-md, 16px);
}
.cv-course-cta-dark {
    background: var(--cv-bg-secondary, #000000);
    color: var(--cv-text-on-dark, #F7F3E9);
    border: 1px solid var(--cv-border-medium, #2F2F2F);
}
.cv-course-cta-eyebrow {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    color: var(--cv-accent, #CC5500);
    margin: 0 0 12px;
}
.cv-course-cta-title {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.05;
    margin: 0 0 16px;
}
.cv-course-cta-body {
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 24px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.cv-course-cta-actions {
    margin: 0;
}

.cv-lesson-submission {
    margin: 64px 0;
    padding: 40px 32px;
    background: var(--cv-bg-cream, #F7F3E9);
    color: var(--cv-text-on-cream, #000000);
    border-radius: var(--cv-radius-md, 16px);
}
.cv-lesson-submission-title {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 30px;
    margin: 0 0 16px;
}
.cv-lesson-submission-form label {
    display: block;
    margin: 16px 0;
}
.cv-lesson-submission-form input,
.cv-lesson-submission-form textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--cv-radius-sm, 8px);
    border: 1px solid rgba(140, 130, 121, 0.4);
    background: #FFFFFF;
    color: var(--cv-text-on-cream, #000000);
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 15px;
}
.cv-lesson-submission-form input:focus,
.cv-lesson-submission-form textarea:focus {
    border-color: var(--cv-accent, #CC5500);
}
/* Keyboard focus: visible ring; mouse-click focus drops it. */
.cv-lesson-submission-form input:focus-visible,
.cv-lesson-submission-form textarea:focus-visible {
    outline: 2px solid var(--cv-accent-ink, #9A3E00);
    outline-offset: 2px;
}
.cv-lesson-submission-form input:focus:not(:focus-visible),
.cv-lesson-submission-form textarea:focus:not(:focus-visible) {
    outline: none;
}

/* Shared form labels */
.cv-form-label {
    display: block;
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--cv-text-on-cream, #000000);
}
body.cv-locked-dark .cv-form-label {
    color: var(--cv-text-on-dark, #F7F3E9);
}

/* 4. /how-to-study/ landing ----------------------------------------- */

.cv-how-to-study {
    background: var(--cv-bg-cream, #F7F3E9);
    color: var(--cv-text-on-cream, #000000);
    padding: 80px 24px;
}
.cv-hts-hero {
    max-width: 760px;
    margin: 0 auto 80px;
    text-align: center;
}
.cv-hts-eyebrow {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 13px;
    color: var(--cv-accent-ink, #9A3E00);
    margin: 0 0 16px;
}
.cv-hts-title {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: clamp(48px, 7vw, 88px);
    line-height: 1;
    margin: 0 0 24px;
}
.cv-hts-lede {
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--cv-text-on-cream, #000000);
    margin: 0 0 32px;
}
.cv-hts-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
.cv-hts-h2 {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 36px;
    margin: 0 0 16px;
}
.cv-hts-lessons,
.cv-hts-final,
.cv-hts-upsell {
    max-width: 760px;
    margin: 0 auto 64px;
}
.cv-hts-lesson-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cv-hts-lesson-list li {
    padding: 20px 0;
    border-bottom: 1px solid rgba(140, 130, 121, 0.25);
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 17px;
    line-height: 1.5;
}
.cv-hts-lesson-list li:last-child {
    border-bottom: 0;
}
.cv-hts-lesson-list strong {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
}

/* 5. Founding cap markers ------------------------------------------- */

.cv-founding-seats {
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 14px;
    color: var(--cv-text-on-cream, #000000);
    margin: 0 0 24px;
    text-align: center;
}
.cv-founding-closed {
    text-align: center;
    padding: 40px;
    background: var(--cv-bg-secondary, #000000);
    color: var(--cv-text-on-dark, #F7F3E9);
    border-radius: var(--cv-radius-md, 16px);
}
.cv-founding-closed h2 {
    font-family: var(--cv-font-headline, 'Bebas Neue'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 36px;
    margin: 0 0 16px;
}

/* 6. Form messages -------------------------------------------------- */

.cv-form-msg {
    padding: 12px 16px;
    border-radius: var(--cv-radius-sm, 8px);
    font-family: var(--cv-font-body, 'Inter'), sans-serif;
    font-size: 14px;
    margin: 16px 0;
}
.cv-form-msg-success {
    background: rgba(58, 125, 68, 0.12);
    color: #2F6537;
}
.cv-form-msg-error {
    background: rgba(204, 85, 0, 0.12);
    color: var(--cv-accent-ink, #9A3E00);   /* text-safe on the light error tint (5.33:1); terracotta failed at 3.35:1 */
}

/* Cream/dark surface helpers */
.cv-cream-surface {
    background: var(--cv-bg-cream, #F7F3E9);
    color: var(--cv-text-on-cream, #000000);
}
.cv-locked-dark-surface {
    background: var(--cv-bg-primary, #000000);
    color: var(--cv-text-on-dark, #F7F3E9);
}

/* =============================================================================
 * 7. CourseIt classroom - dark lesson tiles on cream page.
 *
 * The MemberPress Courses (CourseIt) addon ships its own classroom template
 * that doesn't honor the brand by default. Phase 3.1 spec: lesson tiles
 * render as black cards with cream text inside, terracotta accents on
 * progress + active states.
 * ============================================================================= */

body.mpcs-classroom {
    background: var(--cv-bg-primary, #F7F3E9);
    color: var(--cv-text-primary, #000000);
}

body.mpcs-classroom .mpcs-cards .mpcs-card,
body.mpcs-classroom .mpcs-classroom-card,
body.mpcs-classroom .mpcs-section .mpcs-section-title,
body.mpcs-classroom .mpcs-lesson-card,
body.mpcs-classroom .mpcs-course-card {
    background: var(--cv-bg-secondary, #000000);
    color: var(--cv-text-on-dark, #F7F3E9);
    border-radius: var(--cv-radius-md, 16px);
    border: 1px solid var(--cv-border-on-dark, rgba(247, 243, 233, 0.18));
    box-shadow: var(--cv-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
body.mpcs-classroom .mpcs-cards .mpcs-card:hover,
body.mpcs-classroom .mpcs-classroom-card:hover,
body.mpcs-classroom .mpcs-lesson-card:hover {
    border-color: var(--cv-accent, #CC5500);
    transform: translateY(-2px);
    box-shadow: var(--cv-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.12));
}

body.mpcs-classroom .mpcs-cards .mpcs-card a,
body.mpcs-classroom .mpcs-cards .mpcs-card .card-title,
body.mpcs-classroom .mpcs-classroom-card a,
body.mpcs-classroom .mpcs-classroom-card h2,
body.mpcs-classroom .mpcs-classroom-card h3 {
    color: var(--cv-text-on-dark, #F7F3E9);
}

body.mpcs-classroom .mpcs-progress-ring,
body.mpcs-classroom .mpcs-progress-bar,
body.mpcs-classroom .progress-fill {
    color: var(--cv-accent, #CC5500);
    background: var(--cv-accent, #CC5500);
}

body.mpcs-classroom .mpcs-classroom-card .mpcs-meta,
body.mpcs-classroom .mpcs-card .mpcs-meta {
    color: var(--cv-text-on-dark, #F7F3E9);
}

/* Page wrapper inside CourseIt - keep it cream so the dark cards pop. */
body.mpcs-classroom .mpcs-classroom,
body.mpcs-classroom #mpcs-courses-page,
body.mpcs-classroom .container.mpcs-container {
    background: var(--cv-bg-primary, #F7F3E9);
    color: var(--cv-text-primary, #000000);
}