/* =========================================================================
 * EIASM Course Module Table — Base Stylesheet (v1.6.0)
 *
 * Loaded with `elementor-frontend` as a dependency so it cascades AFTER
 * Elementor's global CSS (see main plugin file wp_register_style).
 *
 * Specificity discipline:
 *   - Every rule uses `.eiasm-cmt-wrap.eiasm-cmt-wrap` (doubled class)
 *     to yield specificity (0,2,0) on the wrapper, beating Elementor's
 *     common (0,1,x) and (0,2,1) body/widget-level selectors.
 *   - `!important` is used ONLY on properties Elementor Global Fonts,
 *     Global Colors, or the Theme Style panel inject via CSS custom
 *     properties at `:root` or `body` scope — where selector doubling
 *     alone cannot win because the cascade operates at a different
 *     level. Each !important is commented with the Elementor mechanism
 *     it defeats.
 *
 * The wrapper div carries three modifier classes:
 *   .eiasm-cmt-wrap--{default|editorial|spotlight}  (variant)
 *   .eiasm-cmt-wrap--{fixed-track|elective-pool|tracked-pool|dual-stage}
 *   .eiasm-cmt-wrap--accent-{teal|dark|lime}        (legacy Default option)
 * ========================================================================= */

/* ── Design Tokens ───────────────────────────────────────────────────── */
.eiasm-cmt-wrap.eiasm-cmt-wrap {
    --eiasm-teal:       #1587A8;
    --eiasm-teal-dark:  #0F6B87;
    --eiasm-lime:       #A8C834;
    --eiasm-ink:        #0B1220;
    --eiasm-slate:      #475569;
    --eiasm-slate-soft: #94a3b8;
    --eiasm-border:     #E2E8F0;
    --eiasm-border-soft:#EEF2F6;
    --eiasm-bg:         #FFFFFF;
    --eiasm-bg-muted:   #F8FAFC;
    --eiasm-tealmist:   #E8F4F8;
    --eiasm-limemist:   #F7FBEA;

    --eiasm-radius-sm:  0.25rem;
    --eiasm-radius-md:  0.5rem;
    --eiasm-radius-lg:  0.75rem;
    --eiasm-radius-xl:  1rem;

    --eiasm-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --eiasm-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Wrapper-scope reset (defeats Elementor globals) ─────────────────── */
/*
 * Elementor's Theme Style and Global Fonts panels set font-family via
 * a CSS custom property on :root; plain selector doubling cannot beat
 * a property set at higher scope. !important on font-family/weight/color
 * is the only reliable way to guarantee our design tokens win.
 */
.eiasm-cmt-wrap.eiasm-cmt-wrap {
    font-family: var(--eiasm-font-body) !important; /* beats --e-global-typography-text-font-family */
    font-size: 14px;
    line-height: 1.5;
    color: var(--eiasm-ink) !important;            /* beats --e-global-color-text */
    text-align: left;
    box-sizing: border-box;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.eiasm-cmt-wrap.eiasm-cmt-wrap *,
.eiasm-cmt-wrap.eiasm-cmt-wrap *::before,
.eiasm-cmt-wrap.eiasm-cmt-wrap *::after {
    box-sizing: border-box;
}

/* Kill Elementor's injected heading font-family / weight / margin / line-height.
   Elementor widget templates set font-weight: 400 and inject large margins;
   Theme Style overrides font-family via CSS vars. !important on these four
   properties is required; other heading properties fall to doubled selectors. */
.eiasm-cmt-wrap.eiasm-cmt-wrap h1,
.eiasm-cmt-wrap.eiasm-cmt-wrap h2,
.eiasm-cmt-wrap.eiasm-cmt-wrap h3,
.eiasm-cmt-wrap.eiasm-cmt-wrap h4,
.eiasm-cmt-wrap.eiasm-cmt-wrap h5,
.eiasm-cmt-wrap.eiasm-cmt-wrap h6 {
    font-family: var(--eiasm-font-display) !important; /* beats Global Fonts */
    font-weight: 600 !important;                      /* beats Elementor heading w:400 */
    color: var(--eiasm-ink) !important;               /* beats --e-global-color-primary */
    line-height: 1.25 !important;                     /* beats Theme Style line-height */
    margin: 0;
    padding: 0;
    letter-spacing: normal;
    text-transform: none;
}

.eiasm-cmt-wrap.eiasm-cmt-wrap p {
    margin: 0;
    padding: 0;
    color: inherit;
    line-height: 1.5;
}

/* Buttons — Elementor injects padding, border-radius, background, and hover
   effects on button elements. Reset entirely, then reapply our own. */
.eiasm-cmt-wrap.eiasm-cmt-wrap button {
    font-family: inherit !important;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent !important;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: inherit;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none !important;  /* Elementor button shadow */
    border-radius: 0;
}
.eiasm-cmt-wrap.eiasm-cmt-wrap button:hover,
.eiasm-cmt-wrap.eiasm-cmt-wrap button:focus {
    background: transparent !important;
    color: inherit;
    box-shadow: none !important;
    transform: none !important;  /* Elementor hover-lift */
}
.eiasm-cmt-wrap.eiasm-cmt-wrap button:focus-visible {
    outline: 2px solid var(--eiasm-teal);
    outline-offset: 2px;
}

/* Anchors — kill inherited underline/color Elementor sets on .elementor-widget a */
.eiasm-cmt-wrap.eiasm-cmt-wrap a {
    color: var(--eiasm-teal) !important;  /* beats --e-global-color-accent */
    text-decoration: none;
    background: transparent;
}

/* Lists — Elementor resets these aggressively too; reassert structure */
.eiasm-cmt-wrap.eiasm-cmt-wrap ul,
.eiasm-cmt-wrap.eiasm-cmt-wrap ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.eiasm-cmt-wrap.eiasm-cmt-wrap li {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* Images inside (defensive — none should appear, but kill theme styles) */
.eiasm-cmt-wrap.eiasm-cmt-wrap img {
    max-width: 100%;
    height: auto;
    border: 0;
    vertical-align: middle;
}

/* Empty / missing state */
.eiasm-cmt-empty {
    padding: 1rem;
    color: var(--eiasm-slate);
    font-style: italic;
    font-size: 13px;
}

/* Footer note rendered by the widget after the partial */
.eiasm-cmt-wrap.eiasm-cmt-wrap .eiasm-cmt-footer-note {
    margin-top: 1rem;
    font-size: 12px;
    color: var(--eiasm-slate);
    line-height: 1.5;
}