/* Light Override — Eddie Learns AI Theme
   Loaded after dark-override.css
   Activates when html.light-mode class is present */

/* ---------- 1. Theme Toggle Button Icons ---------- */
html .gh-theme-toggle .gh-icon-sun { display: block; }
html .gh-theme-toggle .gh-icon-moon { display: none; }
html.light-mode .gh-theme-toggle .gh-icon-sun { display: none; }
html.light-mode .gh-theme-toggle .gh-icon-moon { display: block; }

/* ---------- 2. Root Variables ---------- */
:root.light-mode {
    --color-white: #fff;
    --color-lighter-gray: rgb(0 0 0 / 0.05);
    --color-light-gray: #e6e6e6;
    --color-mid-gray: #ccc;
    --color-dark-gray: #444;
    --color-darker-gray: #15171a;
    --color-black: #000;
    --color-primary-text: var(--color-darker-gray);
    --color-secondary-text: rgb(0 0 0 / 0.55);
    --color-border: rgb(0 0 0 / 0.08);
    --color-dark-border: rgb(0 0 0 / 0.5);
    --background-color: #f5f5f5;
}

/* Override screen.css :root.has-light-text when both classes apply */
:root.light-mode.has-light-text {
    --color-lighter-gray: rgb(0 0 0 / 0.05);
    --color-darker-gray: #15171a;
    --color-secondary-text: rgb(0 0 0 / 0.55);
    --color-border: rgb(0 0 0 / 0.08);
    --color-dark-border: rgb(0 0 0 / 0.5);
}

/* ---------- 3. Body ---------- */
html.light-mode body {
    background-color: var(--background-color);
    color: var(--color-primary-text);
}

/* ---------- 4. Headings ---------- */
html.light-mode h1,
html.light-mode h2,
html.light-mode h3,
html.light-mode h4,
html.light-mode h5,
html.light-mode h6 {
    color: var(--color-darker-gray);
    letter-spacing: normal;
}

/* ---------- 5. Links ---------- */
html.light-mode a { color: var(--color-darker-gray); }
html.light-mode a:hover { color: var(--ghost-accent-color); opacity: 1; }

/* ---------- 6. Navigation ---------- */
html.light-mode .gh-navigation { background-color: #fff; border-bottom-color: var(--color-border); }
html.light-mode .gh-navigation a { color: var(--color-darker-gray); }
html.light-mode .gh-navigation a:hover { color: var(--ghost-accent-color); opacity: 1; }
html.light-mode .gh-navigation-members .gh-button { background-color: var(--ghost-accent-color); color: #fff; font-weight: 650; }

/* ---------- 7. Post Cards ---------- */
html.light-mode .gh-card-link:hover { opacity: 1; }
html.light-mode .gh-card-tag { color: var(--ghost-accent-color); font-weight: 600; letter-spacing: 0.02em; }
html.light-mode .gh-card-title { color: var(--color-darker-gray); font-weight: 700; letter-spacing: -0.02em; }
html.light-mode .gh-card-link:hover .gh-card-title { color: var(--ghost-accent-color); }
html.light-mode .gh-card-excerpt { color: var(--color-primary-text); }
html.light-mode .gh-card-meta { color: var(--color-secondary-text); }

/* ---------- 8. Article Page ---------- */
html.light-mode .gh-article-tag { color: var(--ghost-accent-color); font-weight: 600; }
html.light-mode .gh-article-title { color: var(--color-darker-gray); font-weight: 750; }
html.light-mode .gh-article-excerpt { color: var(--color-primary-text); }
html.light-mode .gh-article-meta { color: var(--color-secondary-text); }
html.light-mode .gh-article-author-name { color: var(--color-darker-gray); }

/* ---------- 9. Content Body ---------- */
html.light-mode .gh-content { color: var(--color-primary-text); }
html.light-mode .gh-content a { color: var(--ghost-accent-color); }
html.light-mode .gh-content a:hover { opacity: 0.85; }
html.light-mode .gh-content blockquote { border-left-color: var(--ghost-accent-color); color: var(--color-primary-text); }
html.light-mode .gh-content pre { background-color: #f5f5f5; border-color: var(--color-border); color: var(--color-primary-text); }
html.light-mode .gh-content :not(pre) > code { background-color: rgb(45 212 191 / 0.12); color: var(--ghost-accent-color); }
html.light-mode .gh-content hr { background-color: var(--color-border); }
html.light-mode .gh-content table { background-color: #fff; border-color: var(--color-border); }
html.light-mode .gh-content th { background-color: #f5f5f5; color: var(--color-darker-gray); }
html.light-mode .gh-content td { border-color: var(--color-border); }
html.light-mode .gh-content .kg-card { background-color: #fafafa; border-color: var(--color-border); }
html.light-mode .gh-content .kg-header-card h2,
html.light-mode .gh-content .kg-header-card h3 { color: var(--color-darker-gray); }
html.light-mode .gh-content .kg-file-card-caption { color: var(--color-secondary-text); }

/* ---------- 10. Pagination ---------- */
html.light-mode .gh-pagination { border-top-color: var(--color-border); }
html.light-mode .gh-pagination a { color: var(--color-darker-gray); }
html.light-mode .gh-pagination a:hover { color: var(--ghost-accent-color); }

/* ---------- 11. Subscribe Form ---------- */
html.light-mode .gh-form { background-color: #f5f5f5; border-color: var(--color-border); }
html.light-mode .gh-form-input { color: var(--color-primary-text); background-color: transparent; }
html.light-mode .gh-form-input::placeholder { color: var(--color-secondary-text); }
html.light-mode .gh-form .gh-button { background-color: var(--ghost-accent-color); color: #fff; }

/* ---------- 12. Buttons ---------- */
html.light-mode .gh-button { background-color: var(--ghost-accent-color); color: #fff; font-weight: 650; }
html.light-mode .gh-button:hover { opacity: 0.9; }

/* ---------- 13. Footer ---------- */
html.light-mode .gh-footer { background-color: #f5f5f5; border-top-color: var(--color-border); }
html.light-mode .gh-footer a { color: var(--color-darker-gray); }
html.light-mode .gh-footer a:hover { color: var(--ghost-accent-color); opacity: 1; }
html.light-mode .gh-footer-bar { border-block-color: var(--color-border); }
html.light-mode .gh-footer-signup-header { color: var(--color-darker-gray); }
html.light-mode .gh-footer-signup-subhead { color: var(--color-secondary-text); }
html.light-mode .gh-social-links a svg { color: var(--color-secondary-text); }
html.light-mode .gh-social-links a:hover svg { color: var(--ghost-accent-color); }

/* ---------- 14. Utilities ---------- */
html.light-mode ::selection { background-color: rgb(45 212 191 / 0.3); color: var(--color-darker-gray); }
html.light-mode :focus-visible { outline: 2px solid var(--ghost-accent-color); outline-offset: 2px; }
html.light-mode ::-webkit-scrollbar { width: 8px; }
html.light-mode ::-webkit-scrollbar-track { background: #f1f1f1; }
html.light-mode ::-webkit-scrollbar-thumb { background: #ccc; }
html.light-mode ::-webkit-scrollbar-thumb:hover { background: #999; }
html.light-mode img { background-color: transparent; }
html.light-mode figcaption { color: var(--color-secondary-text); }
html.light-mode .gh-search svg { color: var(--color-darker-gray); }
html.light-mode .gh-comments { border-top-color: var(--color-border); }