/* Basic darkmode variables and example overrides */
:root{
    --background: #ffffff;
    --text-color: #1a1a1a;
    --link-color: #0073aa;
}

html.po-dark{
    --background: #0b0b0c;
    --text-color: #e6e6e6;
    --link-color: #61dafb;
}

body{
    background: var(--background);
    color: var(--text-color);
}
a{ color: var(--link-color); }

/* Toggle button defaults — minimal, no shadows */
.po-darkmode-toggle{ box-shadow: none; background: transparent; border: none; padding: 6px; }

/* Floating variant (when injected by JS) */
.po-darkmode-toggle.po-darkmode-floating{ position: fixed; right: 12px; bottom: 12px; z-index: 99999; padding: 8px 10px; border-radius: 6px; }

/* Menu integration: ensure toggle looks good inside nav menus */
.menu-item-po-darkmode{ display: inline-flex; align-items: center; margin-right: 8px; }
.menu-item-po-darkmode .po-darkmode-toggle{ background: transparent; border: none; padding: 6px 8px; color: inherit; cursor: pointer; }
.menu-item-po-darkmode .po-darkmode-toggle svg{ display: block; }

/* Example: invert images that have darkmode variant not provided */
html.po-dark img.invert-for-dark{ filter: invert(1) hue-rotate(180deg); }

/* Ensure the site title is pure white in dark mode (color 7) */
html.po-dark .site-title, html.po-dark .site-title a { color: #ffffff !important; }

/* Specific header inner container background to pure white in dark mode */
html.po-dark #header > div > div { background: var(--theme-palette-color-3) !important; }

/* Ensure the toggle (by id) uses theme palette color 7 for its icon color */
#po-darkmode-toggle, .menu-item-po-darkmode #po-darkmode-toggle { color: var(--theme-palette-color-3) !important; }
#po-darkmode-toggle svg { fill: currentColor; }

/* Dark mode: force primary text elements to palette color 7 for good contrast */
html.po-dark h1,
html.po-dark h2,
html.po-dark h3,
html.po-dark h4,
html.po-dark h5,
html.po-dark h6,
html.po-dark p,
html.po-dark li,
html.po-dark blockquote,
html.po-dark label,
html.po-dark span,
html.po-dark strong,
html.po-dark em { color: var(--theme-palette-color-7) !important; }

/* Ensure SVG icons inherit text color in dark mode */
html.po-dark svg { fill: currentColor; }

/* Footer background uses palette color 3, only in dark mode */
html.po-dark #footer { background: var(--theme-palette-color-3) !important; background-color: var(--theme-palette-color-3) !important; }

/* In dark mode, make the toggle use palette color 7 */
html.po-dark #po-darkmode-toggle, html.po-dark .menu-item-po-darkmode #po-darkmode-toggle { color: var(--theme-palette-color-7) !important; }
html.po-dark #po-darkmode-toggle svg { fill: currentColor; }

/* Language current marker should also use palette color 7 */
.po-lang-current, .po-lang-current a { color: var(--theme-palette-color-3) !important; }
.po-lang-current svg { fill: currentColor; }

/* In dark mode, highlight current language with palette color 7 */
html.po-dark .po-lang-current, html.po-dark .po-lang-current a { color: var(--theme-palette-color-7) !important; }
html.po-dark .po-lang-current svg { fill: currentColor; }

/* Generic article card subtle background using palette color 7 at 10% opacity
    Implemented with a pseudo-element so child text keeps its color */
.pop-article-card{ position: relative; z-index: 0; background: unset!important;}
.pop-article-card::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: var(--theme-palette-color-7) !important; background-color: var(--theme-palette-color-7) !important; opacity: .05 !important; pointer-events: none; border-radius: inherit; }

/* Ensure sidebar polls have no background (override any card/bg rules) */
.publiconion-side-poll { background: transparent !important; background-color: transparent !important; }
.publiconion-side-poll::before { background: transparent !important; background-color: transparent !important; opacity: 0 !important; }