/* Mikuni scoped dark mode: core page chrome + elements added this session.
   Does NOT attempt full coverage of every plugin-rendered widget (contact
   forms, quiz plugin, etc.) -- see mikuni-dark-mode.php header comment. */

html.mikuni-dark {
	--mikuni-bg-main: #1a1d21;
	--mikuni-bg-elevated: #24282e;
	--mikuni-bg-header: #1f2226;
	--mikuni-text-main: #d8dee4;
	--mikuni-text-muted: #8b95a1;
	--mikuni-border: #383d44;
	--mikuni-accent: #5b9dff;
	--mikuni-link: #ff8a8a;
}

html.mikuni-dark,
html.mikuni-dark body,
html.mikuni-dark #wrapper-1,
html.mikuni-dark #content-container,
html.mikuni-dark #page-content,
html.mikuni-dark #home-page-content,
html.mikuni-dark .entry {
	background-color: var(--mikuni-bg-main);
	color: var(--mikuni-text-main);
}

html.mikuni-dark #top-elements,
html.mikuni-dark #top-wrapper {
	background-color: var(--mikuni-bg-header);
}

html.mikuni-dark #navigation-menu ul.sf-menu > li > a,
html.mikuni-dark #navigation-menu ul.sf-menu > li > a > span {
	color: var(--mikuni-text-main);
}

/* Superfish dropdown submenus: hidden until hover, but styled with their own
   near-white li background + gray link text regardless. */
html.mikuni-dark #navigation-menu .sub-menu li {
	background-color: var(--mikuni-bg-elevated) !important;
	border-color: var(--mikuni-border) !important;
}
html.mikuni-dark #navigation-menu .sub-menu a {
	color: var(--mikuni-text-main) !important;
}
html.mikuni-dark #navigation-menu .sub-menu li:hover {
	background-color: var(--mikuni-bg-header) !important;
}

html.mikuni-dark a {
	color: var(--mikuni-link);
}

html.mikuni-dark h1,
html.mikuni-dark h2,
html.mikuni-dark h3,
html.mikuni-dark h4,
html.mikuni-dark h5,
html.mikuni-dark h6 {
	color: var(--mikuni-text-main);
}

/* The page-title header (e.g. "#page-title h1.pagetitle") lives in its own
   #page-content-title section outside .entry/#page-content/#home-page-content,
   with its own inline-ish theme color -- needs its own override. */
html.mikuni-dark #page-content-title,
html.mikuni-dark #page-title h1 {
	color: var(--mikuni-text-main) !important;
}

/* Individual pages (e.g. the E-juku FullWidth-template page) set their own
   text colors directly on headings/paragraphs/spans -- often plain black or
   dark gray -- with enough specificity to beat the generic rules above.
   Force light text on the common content tags within any of the three known
   content wrappers; re-assert link color afterward since it targets a
   different tag (a) and so doesn't conflict. */
html.mikuni-dark .entry p, html.mikuni-dark .entry h1, html.mikuni-dark .entry h2,
html.mikuni-dark .entry h3, html.mikuni-dark .entry h4, html.mikuni-dark .entry h5,
html.mikuni-dark .entry h6, html.mikuni-dark .entry li, html.mikuni-dark .entry span,
html.mikuni-dark .entry div, html.mikuni-dark .entry strong, html.mikuni-dark .entry b,
html.mikuni-dark #home-page-content p, html.mikuni-dark #home-page-content h1,
html.mikuni-dark #home-page-content h2, html.mikuni-dark #home-page-content h3,
html.mikuni-dark #home-page-content h4, html.mikuni-dark #home-page-content span,
html.mikuni-dark #home-page-content div,
html.mikuni-dark #page-content p, html.mikuni-dark #page-content h1,
html.mikuni-dark #page-content h2, html.mikuni-dark #page-content h3,
html.mikuni-dark #page-content h4, html.mikuni-dark #page-content span,
html.mikuni-dark #page-content div,
html.mikuni-dark .entry td, html.mikuni-dark .entry th, html.mikuni-dark .entry label,
html.mikuni-dark #home-page-content td, html.mikuni-dark #home-page-content th,
html.mikuni-dark #home-page-content label,
html.mikuni-dark #page-content td, html.mikuni-dark #page-content th,
html.mikuni-dark #page-content label {
	color: var(--mikuni-text-main) !important;
}
html.mikuni-dark .entry a,
html.mikuni-dark #home-page-content a,
html.mikuni-dark #page-content a {
	color: var(--mikuni-link) !important;
}

/* Exception: the course/lesson prev-next-menu nav buttons are styled as solid
   blue/gray buttons with their own intentional white text (inline style=""),
   not plain inline links -- the broad rule above was overriding that white
   text with the general link color. The base rule includes #home-page-content
   a / #page-content a, which are ID selectors (specificity 0,1,0,1) -- a
   bare .course-lesson-nav a (0,0,1,1) can never beat that regardless of
   source order, since ID always outweighs class. Matching the same ID/class
   ancestor here so each selector is at least as specific as its counterpart
   in the base rule. */
html.mikuni-dark .entry .course-lesson-nav a,
html.mikuni-dark .entry .kids-lesson-nav a,
html.mikuni-dark #home-page-content .course-lesson-nav a,
html.mikuni-dark #home-page-content .kids-lesson-nav a,
html.mikuni-dark #page-content .course-lesson-nav a,
html.mikuni-dark #page-content .kids-lesson-nav a {
	color: #fff !important;
}

/* Translation/Vocabulary/Grammar reveal boxes and their toggle links: these
   come from a completely separate stylesheet
   (wp-content/uploads/englishCourses/english.css and its per-chapter Kids
   English copies), not the theme or page content -- lightcyan/lightyellow/
   lightpink backgrounds with plain black text, invisible against a dark
   background. Targeted by class name since all 8 copies of that file share
   the same class names. */
html.mikuni-dark .transText,
html.mikuni-dark .vocabText,
html.mikuni-dark .grammarText {
	background: var(--mikuni-bg-elevated) !important;
	color: var(--mikuni-text-main) !important;
}
html.mikuni-dark .transToggle,
html.mikuni-dark .vocabToggle,
html.mikuni-dark .grammarToggle {
	color: var(--mikuni-accent) !important;
}

html.mikuni-dark #bottom,
html.mikuni-dark #bottom-bg {
	background-color: var(--mikuni-bg-elevated);
	color: var(--mikuni-text-muted);
}

html.mikuni-dark #footer,
html.mikuni-dark #footer-bg,
html.mikuni-dark #footer_text {
	background-color: var(--mikuni-bg-header);
	color: var(--mikuni-text-muted);
}

/* Elements added this session -- already have proper classes, easy to theme. */
html.mikuni-dark .mikuni-quick-links a,
html.mikuni-dark .mikuni-lesson-grid a,
html.mikuni-dark .mikuni-video-consent-btn {
	background-color: var(--mikuni-bg-elevated);
	color: var(--mikuni-accent);
	border-color: var(--mikuni-border);
}
html.mikuni-dark .mikuni-quick-links a:hover,
html.mikuni-dark .mikuni-lesson-grid a:hover,
html.mikuni-dark .mikuni-video-consent-btn:hover {
	background-color: #2d323a;
}
html.mikuni-dark .mikuni-video-consent-placeholder {
	background-color: var(--mikuni-bg-elevated);
	border-color: var(--mikuni-border);
}
html.mikuni-dark .mikuni-video-consent-placeholder p {
	color: var(--mikuni-text-muted);
}
html.mikuni-dark .mikuni-eyebrow {
	color: var(--mikuni-text-muted);
}
html.mikuni-dark #bottom_2 .bottom-col-title {
	color: var(--mikuni-text-muted);
}
html.mikuni-dark .mikuni-footer-info {
	color: var(--mikuni-text-muted);
}
html.mikuni-dark .mikuni-footer-info i {
	color: var(--mikuni-accent);
}

/* The homepage notice box and a few inline-styled spans use inline style=""
   attributes rather than classes, so they need attribute-selector overrides
   with !important (inline style specificity otherwise beats any stylesheet
   rule). Matches the exact colors used in that content. */
html.mikuni-dark [style*="background-color: #f4f7f9"] {
	background-color: var(--mikuni-bg-elevated) !important;
	border-color: var(--mikuni-border) !important;
}
html.mikuni-dark [style*="color: #5e6d82"] {
	color: var(--mikuni-text-muted) !important;
}

/* Comprehensive sweep of inline light background colors found across all
   published/private/draft page content site-wide (course lessons, drills,
   etc. each hand-styled with their own inline colors over the years).
   Covers both `background:` and `background-color:` property names, with
   and without a space after the colon, since both forms appear in the data. */
html.mikuni-dark [style*="background-color: #ffffff"],
html.mikuni-dark [style*="background-color:#ffffff"],
html.mikuni-dark [style*="background: #ffffff"],
html.mikuni-dark [style*="background:#ffffff"],
html.mikuni-dark [style*="background-color: #fff"],
html.mikuni-dark [style*="background-color:#fff"],
html.mikuni-dark [style*="background: #fff"],
html.mikuni-dark [style*="background:#fff"],
html.mikuni-dark [style*="background-color: #f9f9f9"],
html.mikuni-dark [style*="background-color:#f9f9f9"],
html.mikuni-dark [style*="background: #f9f9f9"],
html.mikuni-dark [style*="background:#f9f9f9"],
html.mikuni-dark [style*="background-color: #f4f7f9"],
html.mikuni-dark [style*="background-color:#f4f7f9"],
html.mikuni-dark [style*="background: #f4f7f9"],
html.mikuni-dark [style*="background:#f4f7f9"],
html.mikuni-dark [style*="background-color: #f5f5f5"],
html.mikuni-dark [style*="background-color:#f5f5f5"],
html.mikuni-dark [style*="background: #f5f5f5"],
html.mikuni-dark [style*="background:#f5f5f5"],
html.mikuni-dark [style*="background-color: #fcf8e3"],
html.mikuni-dark [style*="background-color:#fcf8e3"],
html.mikuni-dark [style*="background: #fcf8e3"],
html.mikuni-dark [style*="background:#fcf8e3"],
html.mikuni-dark [style*="background-color: #e8f0fe"],
html.mikuni-dark [style*="background-color:#e8f0fe"],
html.mikuni-dark [style*="background: #e8f0fe"],
html.mikuni-dark [style*="background:#e8f0fe"],
html.mikuni-dark [style*="background-color: #fffacd"],
html.mikuni-dark [style*="background-color:#fffacd"],
html.mikuni-dark [style*="background: #fffacd"],
html.mikuni-dark [style*="background:#fffacd"],
html.mikuni-dark [style*="background-color: #eaeaea"],
html.mikuni-dark [style*="background-color:#eaeaea"],
html.mikuni-dark [style*="background: #eaeaea"],
html.mikuni-dark [style*="background:#eaeaea"],
html.mikuni-dark [style*="background-color: #e6e6e6"],
html.mikuni-dark [style*="background-color:#e6e6e6"],
html.mikuni-dark [style*="background: #e6e6e6"],
html.mikuni-dark [style*="background:#e6e6e6"],
html.mikuni-dark [style*="background-color: #cae7fc"],
html.mikuni-dark [style*="background-color:#cae7fc"],
html.mikuni-dark [style*="background: #cae7fc"],
html.mikuni-dark [style*="background:#cae7fc"],
html.mikuni-dark [style*="background-color: #e0e0e0"],
html.mikuni-dark [style*="background-color:#e0e0e0"],
html.mikuni-dark [style*="background: #e0e0e0"],
html.mikuni-dark [style*="background:#e0e0e0"],
html.mikuni-dark [style*="background-color: #ffe2ad"],
html.mikuni-dark [style*="background-color:#ffe2ad"],
html.mikuni-dark [style*="background: #ffe2ad"],
html.mikuni-dark [style*="background:#ffe2ad"],
html.mikuni-dark [style*="background-color: #daf5bc"],
html.mikuni-dark [style*="background-color:#daf5bc"],
html.mikuni-dark [style*="background: #daf5bc"],
html.mikuni-dark [style*="background:#daf5bc"],
html.mikuni-dark [style*="background-color: #ffdfa3"],
html.mikuni-dark [style*="background-color:#ffdfa3"],
html.mikuni-dark [style*="background: #ffdfa3"],
html.mikuni-dark [style*="background:#ffdfa3"],
html.mikuni-dark [style*="background-color: #ffe699"],
html.mikuni-dark [style*="background-color:#ffe699"],
html.mikuni-dark [style*="background: #ffe699"],
html.mikuni-dark [style*="background:#ffe699"],
html.mikuni-dark [style*="background-color: #d3d3d3"],
html.mikuni-dark [style*="background-color:#d3d3d3"],
html.mikuni-dark [style*="background: #d3d3d3"],
html.mikuni-dark [style*="background:#d3d3d3"],
html.mikuni-dark [style*="background-color: #c2edad"],
html.mikuni-dark [style*="background-color:#c2edad"],
html.mikuni-dark [style*="background: #c2edad"],
html.mikuni-dark [style*="background:#c2edad"] {
	background-color: var(--mikuni-bg-elevated) !important;
	background: var(--mikuni-bg-elevated) !important;
	border-color: var(--mikuni-border) !important;
}

/* Toggle button: fixed, bottom-right, always present regardless of theme. */
#mikuni-theme-toggle {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: #ffffff;
	border: 1px solid #ddd;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 9999;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
html.mikuni-dark #mikuni-theme-toggle {
	background-color: var(--mikuni-bg-elevated);
	border-color: var(--mikuni-border);
}
#mikuni-theme-toggle i {
	font-size: 20px;
	color: #555;
}
html.mikuni-dark #mikuni-theme-toggle i {
	color: var(--mikuni-accent);
}