/* NextFrame Dark Mode */

html.nf-dark {
	color-scheme: dark;

	--nfdm-bg: #0f1113;
	--nfdm-surface: #16191d;
	--nfdm-surface-alt: #1c2127;
	--nfdm-border: #2c3239;
	--nfdm-text: #d7dce1;
	--nfdm-heading: #f4f6f8;
	--nfdm-muted: #a8b0b8;
	--nfdm-accent: #10a54a;
	--nfdm-accent-hover: #1550d6;

	--global-palette1: var(--nfdm-accent);
	--global-palette2: var(--nfdm-accent-hover);
	--global-palette3: var(--nfdm-heading);
	--global-palette4: var(--nfdm-text);
	--global-palette5: var(--nfdm-muted);
	--global-palette6: var(--nfdm-border);
	--global-palette7: var(--nfdm-surface-alt);
	--global-palette8: var(--nfdm-surface);
	--global-palette9: var(--nfdm-bg);

	--global-palette-highlight: var(--nfdm-accent);
	--global-palette-highlight-alt: var(--nfdm-accent-hover);
	--global-palette-highlight-alt2: #ffffff;

	--global-palette-btn: #ffffff;
	--global-palette-btn-bg: var(--nfdm-accent);
	--global-palette-btn-hover: #ffffff;
	--global-palette-btn-bg-hover: var(--nfdm-accent-hover);
}

html.nf-dark,
html.nf-dark body,
html.nf-dark #wrapper,
html.nf-dark .content-bg,
html.nf-dark .entry-content,
html.nf-dark .content-area,
html.nf-dark .site-main,
html.nf-dark .wp-site-blocks {
	background-color: var(--nfdm-bg);
	color: var(--nfdm-text);
}

html.nf-dark h1,
html.nf-dark h2,
html.nf-dark h3,
html.nf-dark h4,
html.nf-dark h5,
html.nf-dark h6 {
	color: var(--nfdm-heading);
}

html.nf-dark .site-header,
html.nf-dark #main-header,
html.nf-dark .site-footer,
html.nf-dark .site-top-header-wrap,
html.nf-dark .site-middle-header-wrap,
html.nf-dark .site-bottom-header-wrap,
html.nf-dark .site-top-footer-wrap,
html.nf-dark .site-middle-footer-wrap,
html.nf-dark .site-bottom-footer-wrap,
html.nf-dark .mobile-navigation,
html.nf-dark #mobile-drawer .drawer-inner,
html.nf-dark .header-navigation .header-menu-container ul ul.sub-menu {
	background-color: var(--nfdm-surface);
	color: var(--nfdm-text);
}

html.nf-dark .widget,
html.nf-dark .sidebar-inner-wrap,
html.nf-dark .comment-body,
html.nf-dark .entry-related,
html.nf-dark .kadence-cards,
html.nf-dark .loop-entry,
html.nf-dark .entry-author-profile,
html.nf-dark blockquote,
html.nf-dark pre,
html.nf-dark code {
	background-color: var(--nfdm-surface);
	border-color: var(--nfdm-border);
	color: var(--nfdm-text);
}

html.nf-dark hr,
html.nf-dark table,
html.nf-dark th,
html.nf-dark td,
html.nf-dark .entry-content :is(hr, table, th, td) {
	border-color: var(--nfdm-border);
}

/* WP Job Manager */
html.nf-dark ul.job_listings li.job_listing,
html.nf-dark ul.job_listings li.no_job_listings_found,
html.nf-dark .job_listing_preview,
html.nf-dark .single_job_listing .company,
html.nf-dark div.job_listings .load_more_jobs,
html.nf-dark .job_filters,
html.nf-dark .job_filters .search_jobs,
html.nf-dark .job_filters .showing_jobs,
html.nf-dark .job-manager-form fieldset {
	background-color: var(--nfdm-surface);
	color: var(--nfdm-text);
	border-color: var(--nfdm-border);
}

html.nf-dark ul.job_listings li.job_listing a,
html.nf-dark ul.job_listings li.no_job_listings_found a,
html.nf-dark .single_job_listing .company a {
	color: var(--nfdm-text);
}

html.nf-dark ul.job_listings li.job_listing .company,
html.nf-dark ul.job_listings li.job_listing .location,
html.nf-dark ul.job_listings li.job_listing .meta,
html.nf-dark ul.job_listings li.job_listing .date,
html.nf-dark .job_filters .showing_jobs {
	color: var(--nfdm-muted);
}

html.nf-dark ul.job_listings li.job_listing:hover {
	background-color: var(--nfdm-surface-alt);
}

html.nf-dark li.job_listing .job-type,
html.nf-dark .job-type {
	color: #ffffff;
}

/* WP Job Manager filter bar */
html.nf-dark .job_filters ul.job_types,
html.nf-dark .job_filters ul.job_types li,
html.nf-dark .job_filters .search_categories,
html.nf-dark .job_filters .job_types li label,
html.nf-dark div.job_listings .job_filters {
	background-color: var(--nfdm-surface-alt);
	border-color: var(--nfdm-border);
	color: var(--nfdm-text);
}

html.nf-dark .job_filters ul.job_types li a,
html.nf-dark .job_filters .showing_jobs a,
html.nf-dark .job-manager-pagination a {
	color: var(--nfdm-text);
}

html.nf-dark ul.job_listings,
html.nf-dark ul.job_listings li.job_listing,
html.nf-dark ul.job_listings li.job_listing:last-child {
	border-color: var(--nfdm-border);
}

html.nf-dark input[type="checkbox"],
html.nf-dark input[type="radio"] {
	accent-color: var(--nfdm-accent);
}

/* Category dropdown, whether rendered by Chosen or Select2 */
html.nf-dark .chosen-container-single .chosen-single,
html.nf-dark .chosen-container-multi .chosen-choices,
html.nf-dark .chosen-container .chosen-drop,
html.nf-dark .chosen-container .chosen-results,
html.nf-dark .chosen-container-single .chosen-search input[type="text"] {
	background-image: none;
	background-color: var(--nfdm-surface-alt);
	border-color: var(--nfdm-border);
	color: var(--nfdm-heading);
	box-shadow: none;
}

html.nf-dark .chosen-container .chosen-results li.active-result:hover,
html.nf-dark .chosen-container .chosen-results li.highlighted {
	background-image: none;
	background-color: var(--nfdm-accent);
	color: #ffffff;
}

html.nf-dark .select2-container--default .select2-selection--single,
html.nf-dark .select2-container--default .select2-selection--multiple,
html.nf-dark .select2-dropdown,
html.nf-dark .select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: var(--nfdm-surface-alt);
	border-color: var(--nfdm-border);
	color: var(--nfdm-heading);
}

html.nf-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.nf-dark .select2-container--default .select2-selection--single .select2-selection__placeholder,
html.nf-dark .select2-results__option {
	color: var(--nfdm-text);
}

html.nf-dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--nfdm-accent);
	color: #ffffff;
}

/* Form controls */
html.nf-dark input[type="text"],
html.nf-dark input[type="email"],
html.nf-dark input[type="url"],
html.nf-dark input[type="search"],
html.nf-dark input[type="tel"],
html.nf-dark input[type="number"],
html.nf-dark input[type="date"],
html.nf-dark input[type="password"],
html.nf-dark select,
html.nf-dark textarea {
	background-color: var(--nfdm-surface-alt);
	color: var(--nfdm-heading);
	border-color: var(--nfdm-border);
}

html.nf-dark ::placeholder {
	color: var(--nfdm-muted);
	opacity: 1;
}

/* Mobile drawer. ID selectors are needed to beat Kadence's inline customizer CSS. */
html.nf-dark #mobile-drawer .drawer-inner,
html.nf-dark #mobile-drawer .drawer-content,
html.nf-dark #mobile-drawer .drawer-header {
	background-color: var(--nfdm-surface);
}

html.nf-dark #mobile-drawer .drawer-inner,
html.nf-dark #mobile-drawer .drawer-content,
html.nf-dark #mobile-drawer .mobile-navigation ul li a,
html.nf-dark #mobile-drawer .drawer-content .mobile-navigation ul li a,
html.nf-dark #mobile-drawer .drawer-header .drawer-toggle,
html.nf-dark #mobile-drawer .drawer-toggle,
html.nf-dark #mobile-drawer .drawer-toggle .toggle-close,
html.nf-dark #mobile-drawer .search-toggle-open {
	color: var(--nfdm-heading);
}

html.nf-dark #mobile-drawer .mobile-navigation ul li a:hover,
html.nf-dark #mobile-drawer .mobile-navigation ul li.current-menu-item > a,
html.nf-dark #mobile-drawer .mobile-navigation ul li.current_page_item > a {
	color: var(--nfdm-accent);
}

html.nf-dark #mobile-drawer .mobile-navigation ul li,
html.nf-dark #mobile-drawer .mobile-navigation ul li a,
html.nf-dark #mobile-drawer .drawer-header {
	border-color: var(--nfdm-border);
}

/* Header navigation and toggles */
html.nf-dark #main-header .header-navigation ul li a,
html.nf-dark #main-header .header-menu-container ul li a,
html.nf-dark #main-header .site-branding .site-title,
html.nf-dark #main-header .site-branding .site-description,
html.nf-dark .mobile-toggle-open-container .menu-toggle-open,
html.nf-dark .mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon,
html.nf-dark .search-toggle-open-container .search-toggle-open,
html.nf-dark .header-account-button {
	color: var(--nfdm-heading);
}

html.nf-dark #main-header .header-navigation ul li.current-menu-item > a,
html.nf-dark #main-header .header-navigation ul li a:hover {
	color: var(--nfdm-accent);
}

html.nf-dark .menu-toggle-open .kadence-svg-icon,
html.nf-dark .drawer-toggle .kadence-svg-icon,
html.nf-dark .search-toggle-open .kadence-svg-icon {
	fill: currentColor;
}

/* Toggle */
.nf-dark-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	background-color: var(--nfdm-accent, #10a54a);
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.nf-dark-toggle:hover,
.nf-dark-toggle:focus-visible {
	background-color: var(--nfdm-accent-hover, #1550d6);
}

.nf-dark-toggle--fixed {
	position: fixed;
	bottom: 18px;
	z-index: 9999;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nf-dark-toggle--bottom-right {
	right: 18px;
}

.nf-dark-toggle--bottom-left {
	left: 18px;
}

@media (prefers-reduced-motion: reduce) {
	.nf-dark-toggle {
		transition: none;
	}
}