/*
 * ExamNeed dark mode.
 *
 * Loaded after style.css. Dark colours apply in two cases:
 *   1. Automatically, when the visitor's device is set to dark mode.
 *   2. Manually, when <html data-theme="dark"> is set (for a toggle button).
 * Setting <html data-theme="light"> forces the light theme, even on a
 * device set to dark.
 *
 * Colours are overridden through the CSS variables defined in style.css.
 * The component rules below only cover places where style.css uses a fixed
 * colour instead of a variable. They use :where() so they add no extra
 * specificity and cannot break buttons or other styled links.
 *
 * Note: while dark mode is active, the primary colour chosen in the
 * Customizer is replaced by a dark-friendly blue.
 */

/* ---- 1. Automatic: device is set to dark ---- */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--c-primary: #2563eb;
		--c-primary-dark: #1d4fd0;
		--c-text: #e6e9ee;
		--c-muted: #9aa5b5;
		--c-bg: #10151c;
		--c-card: #1a212b;
		--c-border: #2c3644;
		--c-table-line: #3b475a;
		--c-open: #4ade80;
		--c-closed: #f87171;
		--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	}

	:where(:root:not([data-theme="light"])) a {
		color: #8ab4ff;
	}

	:where(:root:not([data-theme="light"])) a:hover,
	:where(:root:not([data-theme="light"])) a:focus {
		color: #b5d0ff;
	}

	:where(:root:not([data-theme="light"])) .site-title,
	:where(:root:not([data-theme="light"])) .error-code {
		color: #8ab4ff;
	}

	:where(:root:not([data-theme="light"])) .skip-link:focus {
		background: var(--c-card);
		color: #8ab4ff;
	}

	:where(:root:not([data-theme="light"])) .topbar {
		background: #0b1626;
	}

	:where(:root:not([data-theme="light"])) .site-footer {
		background: #0b1626;
	}

	:where(:root:not([data-theme="light"])) .main-navigation {
		background: #16315c;
	}

	:where(:root:not([data-theme="light"])) .main-navigation .menu a:hover,
	:where(:root:not([data-theme="light"])) .main-navigation .menu a:focus,
	:where(:root:not([data-theme="light"])) .main-navigation .current-menu-item > a {
		background: #0f2447;
	}

	:where(:root:not([data-theme="light"])) .menu-toggle {
		background: var(--c-card);
		border-color: var(--c-border);
	}

	:where(:root:not([data-theme="light"])) .search-field,
	:where(:root:not([data-theme="light"])) .search-form input[type="search"],
	:where(:root:not([data-theme="light"])) .comment-form input[type="text"],
	:where(:root:not([data-theme="light"])) .comment-form input[type="email"],
	:where(:root:not([data-theme="light"])) .comment-form input[type="url"],
	:where(:root:not([data-theme="light"])) .comment-form textarea {
		background: #10151c;
		color: var(--c-text);
		border-color: var(--c-border);
	}

	:where(:root:not([data-theme="light"])) .news-ticker {
		background: #2a2314;
		border-bottom-color: #4a3c18;
	}

	:where(:root:not([data-theme="light"])) .post-card-cat,
	:where(:root:not([data-theme="light"])) .entry-cat {
		background: #1c2c4a;
		color: #9dc0ff;
	}

	:where(:root:not([data-theme="light"])) .job-table thead th,
	:where(:root:not([data-theme="light"])) .entry-content thead th {
		background: #222c3a;
	}

	:where(:root:not([data-theme="light"])) .job-table tbody tr:hover {
		background: #202a37;
	}

	:where(:root:not([data-theme="light"])) .entry-content table {
		background: var(--c-card);
	}

	:where(:root:not([data-theme="light"])) .quick-facts {
		background: #12301f;
		border-color: #1f5a38;
	}

	:where(:root:not([data-theme="light"])) .quick-facts.is-expired {
		background: #3a1816;
		border-color: #6b2a26;
	}

	:where(:root:not([data-theme="light"])) .join-box {
		background: #18202b;
	}

	:where(:root:not([data-theme="light"])) .candidate-notice {
		background: #2d2014;
	}

	:where(:root:not([data-theme="light"])) .share-btn {
		background: #263040;
		color: var(--c-text);
	}

	:where(:root:not([data-theme="light"])) .quick-links a {
		background: #222c3a;
	}

	:where(:root:not([data-theme="light"])) .pagination .page-numbers {
		background: var(--c-card);
		color: var(--c-text);
	}

	:where(:root:not([data-theme="light"])) .entry-content img {
		filter: brightness(0.92);
	}
}

/* ---- 2. Manual: data-theme="dark" on <html> ---- */
:root[data-theme="dark"] {
	color-scheme: dark;
	--c-primary: #2563eb;
	--c-primary-dark: #1d4fd0;
	--c-text: #e6e9ee;
	--c-muted: #9aa5b5;
	--c-bg: #10151c;
	--c-card: #1a212b;
	--c-border: #2c3644;
	--c-table-line: #3b475a;
	--c-open: #4ade80;
	--c-closed: #f87171;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

:where(:root[data-theme="dark"]) a {
	color: #8ab4ff;
}

:where(:root[data-theme="dark"]) a:hover,
:where(:root[data-theme="dark"]) a:focus {
	color: #b5d0ff;
}

:where(:root[data-theme="dark"]) .site-title,
:where(:root[data-theme="dark"]) .error-code {
	color: #8ab4ff;
}

:where(:root[data-theme="dark"]) .skip-link:focus {
	background: var(--c-card);
	color: #8ab4ff;
}

:where(:root[data-theme="dark"]) .topbar {
	background: #0b1626;
}

:where(:root[data-theme="dark"]) .site-footer {
	background: #0b1626;
}

:where(:root[data-theme="dark"]) .main-navigation {
	background: #16315c;
}

:where(:root[data-theme="dark"]) .main-navigation .menu a:hover,
:where(:root[data-theme="dark"]) .main-navigation .menu a:focus,
:where(:root[data-theme="dark"]) .main-navigation .current-menu-item > a {
	background: #0f2447;
}

:where(:root[data-theme="dark"]) .menu-toggle {
	background: var(--c-card);
	border-color: var(--c-border);
}

:where(:root[data-theme="dark"]) .search-field,
:where(:root[data-theme="dark"]) .search-form input[type="search"],
:where(:root[data-theme="dark"]) .comment-form input[type="text"],
:where(:root[data-theme="dark"]) .comment-form input[type="email"],
:where(:root[data-theme="dark"]) .comment-form input[type="url"],
:where(:root[data-theme="dark"]) .comment-form textarea {
	background: #10151c;
	color: var(--c-text);
	border-color: var(--c-border);
}

:where(:root[data-theme="dark"]) .news-ticker {
	background: #2a2314;
	border-bottom-color: #4a3c18;
}

:where(:root[data-theme="dark"]) .post-card-cat,
:where(:root[data-theme="dark"]) .entry-cat {
	background: #1c2c4a;
	color: #9dc0ff;
}

:where(:root[data-theme="dark"]) .job-table thead th,
:where(:root[data-theme="dark"]) .entry-content thead th {
	background: #222c3a;
}

:where(:root[data-theme="dark"]) .job-table tbody tr:hover {
	background: #202a37;
}

:where(:root[data-theme="dark"]) .entry-content table {
	background: var(--c-card);
}

:where(:root[data-theme="dark"]) .quick-facts {
	background: #12301f;
	border-color: #1f5a38;
}

:where(:root[data-theme="dark"]) .quick-facts.is-expired {
	background: #3a1816;
	border-color: #6b2a26;
}

:where(:root[data-theme="dark"]) .join-box {
	background: #18202b;
}

:where(:root[data-theme="dark"]) .candidate-notice {
	background: #2d2014;
}

:where(:root[data-theme="dark"]) .share-btn {
	background: #263040;
	color: var(--c-text);
}

:where(:root[data-theme="dark"]) .quick-links a {
	background: #222c3a;
}

:where(:root[data-theme="dark"]) .pagination .page-numbers {
	background: var(--c-card);
	color: var(--c-text);
}

:where(:root[data-theme="dark"]) .entry-content img {
	filter: brightness(0.92);
}

/* ---- 3. Light/dark toggle button (added by np-custom-scripts.js) ---- */
.theme-toggle {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 1px solid var(--c-border);
	border-radius: 50%;
	background: var(--c-card);
	color: var(--c-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.theme-toggle:hover {
	border-color: var(--c-primary);
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

@media print {
	.theme-toggle {
		display: none !important;
	}
}