/* ==========================================================================
   EduInvesting Reader Light Mode — Article-body-only stylesheet
   --------------------------------------------------------------------------
   Philosophy: don't fight the dark theme. Just make the ARTICLE BODY
   readable in light mode. The header, footer, nav, ticker tape, search bar,
   sidebar — all of that stays exactly as the theme designed it.

   The user came to read an article. We make the article readable. Done.
   ========================================================================== */

html.eilm-light {
    --eilm-bg: #ffffff;
    --eilm-surface: #f7f8fa;
    --eilm-surface-2: #eef0f4;
    --eilm-text: #16181d;
    --eilm-muted: #5a6270;
    --eilm-border: #e3e6eb;
    --eilm-accent: #2563eb;
    --eilm-link: #1d4ed8;
    --eilm-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   THE ARTICLE BODY CONTAINERS
   --------------------------------------------------------------------------
   We target every common WordPress + Elementor pattern for the post body.
   Each rule scoped under html.eilm-light so it ONLY fires in reader mode.
   -------------------------------------------------------------------------- */
html.eilm-light .eilm-article,
html.eilm-light article.post,
html.eilm-light article.single-post,
html.eilm-light .single-post article,
html.eilm-light .entry-content,
html.eilm-light .post-content,
html.eilm-light .elementor-widget-theme-post-content,
html.eilm-light .elementor-widget-theme-post-content > .elementor-widget-container,
html.eilm-light .elementor-widget-theme-post-title,
html.eilm-light .elementor-widget-theme-post-title > .elementor-widget-container,
html.eilm-light .elementor-widget-theme-post-excerpt,
html.eilm-light .elementor-widget-theme-post-excerpt > .elementor-widget-container,
html.eilm-light .elementor-widget-post-info,
html.eilm-light .elementor-widget-post-info > .elementor-widget-container {
    background-color: var(--eilm-bg) !important;
    background-image: none !important;
    color: var(--eilm-text) !important;
    border-radius: 12px !important;
}

/* Padding / breathing room — applied only to the main content body so the
   title widget sits flush above it like a typical article layout */
html.eilm-light .entry-content,
html.eilm-light .post-content,
html.eilm-light .elementor-widget-theme-post-content > .elementor-widget-container {
    padding: 32px 36px !important;
    box-shadow: var(--eilm-shadow) !important;
}

/* Title widget — same light card, but with bottom rounded corners removed so
   it visually merges with the content below it */
html.eilm-light .elementor-widget-theme-post-title > .elementor-widget-container {
    padding: 32px 36px 8px !important;
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important;
}

html.eilm-light .elementor-widget-theme-post-content > .elementor-widget-container {
    border-radius: 0 0 12px 12px !important;
    margin-top: 0 !important;
}

/* Post info widget (date, author, category) — neutral light card slot */
html.eilm-light .elementor-widget-post-info > .elementor-widget-container {
    padding: 0 36px !important;
    background-color: var(--eilm-bg) !important;
    border-radius: 0 !important;
}

/* --------------------------------------------------------------------------
   ARTICLE TYPOGRAPHY
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content,
html.eilm-light .post-content,
html.eilm-light .elementor-widget-theme-post-content,
html.eilm-light .eilm-article {
    /* All direct prose elements */
}

html.eilm-light .entry-content p,
html.eilm-light .entry-content li,
html.eilm-light .entry-content span,
html.eilm-light .entry-content strong,
html.eilm-light .entry-content em,
html.eilm-light .entry-content figcaption,
html.eilm-light .post-content p,
html.eilm-light .post-content li,
html.eilm-light .post-content span,
html.eilm-light .post-content strong,
html.eilm-light .post-content em,
html.eilm-light .post-content figcaption,
html.eilm-light .elementor-widget-theme-post-content p,
html.eilm-light .elementor-widget-theme-post-content li,
html.eilm-light .elementor-widget-theme-post-content span,
html.eilm-light .elementor-widget-theme-post-content strong,
html.eilm-light .elementor-widget-theme-post-content em,
html.eilm-light .elementor-widget-theme-post-content figcaption {
    color: var(--eilm-text) !important;
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   HEADINGS — kill gradient-clip text effects (the "watermark H1" issue)
   --------------------------------------------------------------------------
   Many themes render H1 with `background-clip: text` + `color: transparent`
   for a gradient look. On a light card that becomes a faded ghost. We unclip
   the background entirely and force solid text.
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content h1,
html.eilm-light .entry-content h2,
html.eilm-light .entry-content h3,
html.eilm-light .entry-content h4,
html.eilm-light .entry-content h5,
html.eilm-light .entry-content h6,
html.eilm-light .post-content h1,
html.eilm-light .post-content h2,
html.eilm-light .post-content h3,
html.eilm-light .post-content h4,
html.eilm-light .post-content h5,
html.eilm-light .post-content h6,
html.eilm-light .elementor-widget-theme-post-content h1,
html.eilm-light .elementor-widget-theme-post-content h2,
html.eilm-light .elementor-widget-theme-post-content h3,
html.eilm-light .elementor-widget-theme-post-content h4,
html.eilm-light .elementor-widget-theme-post-content h5,
html.eilm-light .elementor-widget-theme-post-content h6,
html.eilm-light .elementor-widget-theme-post-title h1,
html.eilm-light .elementor-widget-theme-post-title h2,
html.eilm-light .elementor-widget-theme-post-title .elementor-heading-title {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--eilm-text) !important;
    color: var(--eilm-text) !important;
}

/* Inner spans inside headings — same fix (gradient text often wraps in span) */
html.eilm-light .entry-content h1 span,
html.eilm-light .entry-content h2 span,
html.eilm-light .entry-content h3 span,
html.eilm-light .post-content h1 span,
html.eilm-light .post-content h2 span,
html.eilm-light .elementor-widget-theme-post-content h1 span,
html.eilm-light .elementor-widget-theme-post-content h2 span,
html.eilm-light .elementor-widget-theme-post-title h1 span,
html.eilm-light .elementor-widget-theme-post-title .elementor-heading-title span {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
}

/* --------------------------------------------------------------------------
   LINKS inside the article
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content a,
html.eilm-light .post-content a,
html.eilm-light .elementor-widget-theme-post-content a {
    color: var(--eilm-link) !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
html.eilm-light .entry-content a:hover,
html.eilm-light .post-content a:hover,
html.eilm-light .elementor-widget-theme-post-content a:hover {
    color: var(--eilm-accent) !important;
}

/* --------------------------------------------------------------------------
   CODE / PRE / KBD inside the article
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content code,
html.eilm-light .entry-content pre,
html.eilm-light .entry-content kbd,
html.eilm-light .post-content code,
html.eilm-light .post-content pre,
html.eilm-light .post-content kbd,
html.eilm-light .elementor-widget-theme-post-content code,
html.eilm-light .elementor-widget-theme-post-content pre,
html.eilm-light .elementor-widget-theme-post-content kbd {
    background-color: var(--eilm-surface-2) !important;
    color: var(--eilm-text) !important;
    border: 1px solid var(--eilm-border) !important;
}

/* --------------------------------------------------------------------------
   BLOCKQUOTE inside the article
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content blockquote,
html.eilm-light .post-content blockquote,
html.eilm-light .elementor-widget-theme-post-content blockquote {
    background-color: var(--eilm-surface) !important;
    border-left: 4px solid var(--eilm-accent) !important;
    color: var(--eilm-text) !important;
    padding: 16px 20px !important;
    border-radius: 0 8px 8px 0 !important;
}

/* --------------------------------------------------------------------------
   TABLES inside the article
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content table,
html.eilm-light .entry-content th,
html.eilm-light .entry-content td,
html.eilm-light .post-content table,
html.eilm-light .post-content th,
html.eilm-light .post-content td,
html.eilm-light .elementor-widget-theme-post-content table,
html.eilm-light .elementor-widget-theme-post-content th,
html.eilm-light .elementor-widget-theme-post-content td {
    background-color: var(--eilm-bg) !important;
    color: var(--eilm-text) !important;
    border-color: var(--eilm-border) !important;
}
html.eilm-light .entry-content thead th,
html.eilm-light .post-content thead th,
html.eilm-light .elementor-widget-theme-post-content thead th {
    background-color: var(--eilm-surface) !important;
}
html.eilm-light .entry-content tbody tr:nth-child(even),
html.eilm-light .post-content tbody tr:nth-child(even),
html.eilm-light .elementor-widget-theme-post-content tbody tr:nth-child(even) {
    background-color: var(--eilm-surface) !important;
}

/* --------------------------------------------------------------------------
   HR / divider inside the article
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content hr,
html.eilm-light .post-content hr,
html.eilm-light .elementor-widget-theme-post-content hr {
    border-color: var(--eilm-border) !important;
    background-color: var(--eilm-border) !important;
}

/* --------------------------------------------------------------------------
   POST META widgets (date, author, reading time) — keep them visible on light
   bg by overriding any white-text rules from the theme
   -------------------------------------------------------------------------- */
html.eilm-light .elementor-widget-post-info span,
html.eilm-light .elementor-widget-post-info a,
html.eilm-light .elementor-widget-post-info time,
html.eilm-light .elementor-widget-post-info .elementor-icon-list-text {
    color: var(--eilm-muted) !important;
}
html.eilm-light .elementor-widget-post-info svg,
html.eilm-light .elementor-widget-post-info i {
    fill: var(--eilm-muted) !important;
    color: var(--eilm-muted) !important;
}

/* --------------------------------------------------------------------------
   BUTTONS / CTAs inside the article — keep them as accent buttons
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content .elementor-button,
html.eilm-light .entry-content .wp-block-button__link,
html.eilm-light .entry-content button,
html.eilm-light .post-content .elementor-button,
html.eilm-light .post-content .wp-block-button__link,
html.eilm-light .post-content button,
html.eilm-light .elementor-widget-theme-post-content .elementor-button,
html.eilm-light .elementor-widget-theme-post-content .wp-block-button__link,
html.eilm-light .elementor-widget-theme-post-content button {
    background-color: var(--eilm-accent) !important;
    color: #ffffff !important;
    border-color: var(--eilm-accent) !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   SELECTION inside the article only
   -------------------------------------------------------------------------- */
html.eilm-light .entry-content ::selection,
html.eilm-light .post-content ::selection,
html.eilm-light .elementor-widget-theme-post-content ::selection {
    background-color: rgba(37, 99, 235, 0.18);
    color: var(--eilm-text);
}

/* --------------------------------------------------------------------------
   SMOOTH TRANSITION when toggling
   -------------------------------------------------------------------------- */
html.eilm-transitioning .entry-content,
html.eilm-transitioning .post-content,
html.eilm-transitioning .elementor-widget-theme-post-content,
html.eilm-transitioning .elementor-widget-theme-post-title,
html.eilm-transitioning .elementor-widget-post-info,
html.eilm-transitioning .entry-content *,
html.eilm-transitioning .post-content *,
html.eilm-transitioning .elementor-widget-theme-post-content *,
html.eilm-transitioning .elementor-widget-theme-post-title * {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* --------------------------------------------------------------------------
   MOBILE — slightly tighter padding on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    html.eilm-light .entry-content,
    html.eilm-light .post-content,
    html.eilm-light .elementor-widget-theme-post-content > .elementor-widget-container {
        padding: 20px 18px !important;
        border-radius: 8px !important;
    }
    html.eilm-light .elementor-widget-theme-post-title > .elementor-widget-container {
        padding: 20px 18px 4px !important;
        border-radius: 8px 8px 0 0 !important;
    }
    html.eilm-light .elementor-widget-post-info > .elementor-widget-container {
        padding: 0 18px !important;
    }
    html.eilm-light .entry-content blockquote,
    html.eilm-light .post-content blockquote,
    html.eilm-light .elementor-widget-theme-post-content blockquote {
        padding: 12px 14px !important;
    }
}