/* =============================================================================
   CNX LMS — design tokens, scoped reset, shared typography

   Everything is scoped to .cnx-lms so the plugin never leaks into a theme, and
   every token reads a theme variable first: define --brown, --cream, --accent
   (etc.) in your theme and the LMS adopts them automatically.
   ========================================================================== */

.cnx-lms {
    /* Surfaces */
    --cnx-bg:       var(--bg,     #FAF6F1);
    --cnx-surface:  var(--surface, #FFFFFF);
    --cnx-cream:    var(--cream,  #F5EDE4);
    --cnx-beige:    var(--beige,  #D4B5A0);

    /* Brand — contrast-safe for white text (6.4:1) */
    --cnx-brand:      var(--brown,  #6F5B42);
    --cnx-brand-soft: color-mix(in srgb, var(--cnx-brand) 8%, transparent);
    --cnx-brand-line: color-mix(in srgb, var(--cnx-brand) 18%, transparent);
    --cnx-accent:     var(--accent, #B9772F);

    /* Text */
    --cnx-text:  var(--text-primary, #1F1B16);
    --cnx-muted: var(--text-muted,   #5F5648);

    /* Status */
    --cnx-success: #2E7D32;
    --cnx-warning: #8A5A00;

    /* Shape */
    --cnx-radius:    14px;
    --cnx-radius-sm: 10px;
    --cnx-radius-pill: 999px;
    --cnx-shadow-sm: 0 1px 2px rgba(31, 27, 22, .06), 0 2px 8px rgba(31, 27, 22, .04);
    --cnx-shadow:    0 2px 6px rgba(31, 27, 22, .06), 0 12px 28px rgba(31, 27, 22, .07);

    /* Rhythm */
    --cnx-gap:   clamp(16px, 2.2vw, 24px);
    --cnx-pad:   clamp(16px, 2.6vw, 28px);

    /* Inherit the theme's typography rather than imposing a webfont. */
    font: inherit;
    color: var(--cnx-text);
    background: var(--cnx-bg);
}

/* Fallback for browsers without color-mix() */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .cnx-lms {
        --cnx-brand-soft: rgba(111, 91, 66, .08);
        --cnx-brand-line: rgba(111, 91, 66, .18);
    }
}

.cnx-lms *,
.cnx-lms *::before,
.cnx-lms *::after { box-sizing: border-box; }

.cnx-lms__inner {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 28px);
    padding-block: clamp(16px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: var(--cnx-gap);
}

.cnx-lms img { max-width: 100%; height: auto; }

/* --- Focus: always visible, never removed ---------------------------------- */

.cnx-lms a:focus-visible,
.cnx-lms button:focus-visible {
    outline: 3px solid var(--cnx-accent);
    outline-offset: 2px;
    border-radius: var(--cnx-radius-sm);
}

/* --- Long-form content ----------------------------------------------------- */

.cnx-prose { line-height: 1.75; }
.cnx-prose > :first-child { margin-block-start: 0; }
.cnx-prose > :last-child { margin-block-end: 0; }
.cnx-prose p,
.cnx-prose ul,
.cnx-prose ol { margin-block: 0 1em; }
.cnx-prose ul,
.cnx-prose ol { padding-inline-start: 1.4em; }
.cnx-prose li { margin-block-end: .35em; }
.cnx-prose h2,
.cnx-prose h3,
.cnx-prose h4 { margin-block: 1.4em .5em; line-height: 1.3; }
.cnx-prose a { color: var(--cnx-brand); text-underline-offset: 2px; }

.cnx-prose img,
.cnx-prose iframe,
.cnx-prose video {
    max-width: 100%;
    border-radius: var(--cnx-radius-sm);
}

.cnx-prose iframe,
.cnx-prose video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    margin-block: 1.2em;
}

/* --- Icons ----------------------------------------------------------------- */

.cnx-lms-icon {
    flex: none;
    vertical-align: -.18em;
}

/* --- Motion: respect the user's setting ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .cnx-lms *,
    .cnx-lms *::before,
    .cnx-lms *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* [hidden] must win over any display set by a component class. */
.cnx-lms [hidden] { display: none !important; }