/*
 * Netfors Website Auto Dark Theme
 * Automatically activates when the visitor's browser is in dark mode.
 * Uses @media (prefers-color-scheme: dark) — no plugin or toggle needed.
 *
 * Based on the Converio parent theme + NetforsChildTheme styles.
 * The site uses .color-custom and .boxed body classes, so selectors
 * must include those for sufficient specificity.
 *
 * Accent color: #3f92c8 (Netfors blue, matching the theme customizer).
 *
 * Installation:
 *   Paste into WordPress Admin → Appearance → Customize → Additional CSS
 *   (wrap the entire content inside the @media query)
 */

@media (prefers-color-scheme: dark) {
	:root {
		--nf-accent: #3f92c8;
		--nf-accent-hover: #5ba8d8;
		--nf-bg-primary: #1a1d21;
		--nf-bg-secondary: #22262b;
		--nf-bg-elevated: #2a2e34;
		--nf-text-primary: #d4d4d4;
		--nf-text-secondary: #999;
		--nf-text-heading: #e0e0e0;
		--nf-border-color: #3a3f47;
	}

	/* =============================================
	   Base / Body
	   ============================================= */
	html {
		background: var(--nf-bg-primary) !important;
	}

	body,
	body.color-custom,
	body.color-custom.boxed,
	body.custom-background,
	body.custom-background.color-custom.boxed {
		background-color: var(--nf-bg-primary) !important;
		background-image: none !important;
		color: var(--nf-text-primary) !important;
	}

	/* Boxed layout wrapper + root container */
	body.boxed .root {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
	}

	body.boxed .page-wrapper,
	body.boxed .page-wrapper > .inner,
	.root,
	.root > .inner {
		background: var(--nf-bg-primary) !important;
	}

	/* =============================================
	   Header / Top Bar
	   ============================================= */
	header,
	header.h1,
	header.h1 .main-header,
	header.h1 section.main-header {
		background: var(--nf-bg-secondary) !important;
	}

	/* Sticky header */
	header.h1.sticky.sticky-opacity-enabled .main-header,
	.h1.sticky.sticky-opacity-enabled .main-header {
		background: rgba(34, 38, 43, 0.97) !important;
	}

	/* Top bar (if present) */
	header .top-bar,
	header .topbar {
		background: var(--nf-bg-elevated) !important;
		border-bottom-color: var(--nf-border-color) !important;
	}

	/* =============================================
	   Top-level Menu Items (Desktop)
	   ============================================= */
	/* Normal state — override the #3f3f3f dark text */
	.color-custom .h1 nav.mainmenu li.menu-item.mi-depth-0 > .submenu-trigger,
	.color-custom .h1 nav.mainmenu li.page_item.pi_depth_0 > .submenu-trigger,
	.h1 nav.mainmenu li.menu-item.mi-depth-0 > .submenu-trigger,
	.h1 nav.mainmenu li.page_item.pi_depth_0 > .submenu-trigger,
	header .submenu-trigger,
	header a.submenu-trigger {
		color: var(--nf-text-primary) !important;
	}

	/* Hover state */
	.color-custom .h1 nav.mainmenu li.menu-item.mi-depth-0 > .submenu-trigger:hover,
	.color-custom .h1 nav.mainmenu li.menu-item.mi-depth-0.menu-item-has-children:hover > .submenu-trigger,
	.color-custom .h1 nav.mainmenu li.page_item.pi_depth_0 > .submenu-trigger:hover,
	.color-custom .h1 nav.mainmenu li.page_item.pi_depth_0.page_item_has_children:hover > .submenu-trigger,
	.no-touch header li.menu-item.mi-depth-0 > .submenu-trigger:hover,
	.no-touch header li.menu-item.mi-depth-0.menu-item-has-children:hover > .submenu-trigger,
	.no-touch header li.page_item.pi_depth_0 > .submenu-trigger:hover {
		color: var(--nf-accent) !important;
		border-bottom-color: var(--nf-accent) !important;
	}

	/* Current / active menu item */
	.color-custom .h1 nav.mainmenu li.menu-item.mi-depth-0.current-menu-ancestor > .submenu-trigger,
	.color-custom .h1 nav.mainmenu li.menu-item.mi-depth-0.current-menu-item > .submenu-trigger,
	.color-custom .h1 nav.mainmenu li.page_item.pi_depth_0.current_page_ancestor > .submenu-trigger,
	.color-custom .h1 nav.mainmenu li.page_item.pi_depth_0.current_page_item > .submenu-trigger,
	.color-custom .menu-container li.menu-item.current-menu-item > a,
	.color-custom header li.menu-item.current-menu-item > .submenu-trigger,
	.color-custom header li.menu-item.current-menu-item > .submenu-trigger-container .submenu-trigger,
	.color-custom header li.menu-item.current-menu-ancestor > .submenu-trigger {
		color: var(--nf-accent) !important;
	}

	/* =============================================
	   Dropdown Menus
	   ============================================= */
	.dropdownmenu > ul,
	.dropdownmenu-default > ul {
		background: rgba(30, 33, 38, 0.97) !important;
	}

	.dropdownmenu-default li.menu-item > .submenu-trigger,
	.dropdownmenu-default li.page_item > .submenu-trigger {
		color: #ccc !important;
		border-bottom-color: var(--nf-border-color) !important;
	}

	.dropdownmenu-default li.menu-item:first-child > .submenu-trigger,
	.dropdownmenu-default li.page_item:first-child > .submenu-trigger {
		border-top-color: var(--nf-border-color) !important;
	}

	.dropdownmenu-default li.menu-item:hover > .submenu-trigger,
	.dropdownmenu-default li.page_item:hover > .submenu-trigger,
	.color-custom .dropdownmenu-default li.menu-item:hover > .submenu-trigger,
	.color-custom .dropdownmenu-default li.page_item:hover > .submenu-trigger {
		color: #fff !important;
		background-color: rgba(255, 255, 255, 0.08) !important;
	}

	.color-custom .dropdownmenu-default li.menu-item.current-menu-item > .submenu-trigger,
	.color-custom .dropdownmenu-default li.menu-item.current-menu-ancestor > .submenu-trigger,
	.color-custom .dropdownmenu-default li.menu-item.current-menu-item:hover > .submenu-trigger,
	.color-custom .dropdownmenu-default li.menu-item.current-menu-ancestor:hover > .submenu-trigger {
		color: var(--nf-accent) !important;
		background-color: rgba(255, 255, 255, 0.05) !important;
	}

	/* =============================================
	   Mobile Menu (below 980px)
	   ============================================= */
	@media screen and (max-width: 980px) {
		header .submenu-trigger {
			border-bottom-color: var(--nf-border-color) !important;
		}

		header li.menu-item:hover > .submenu-trigger,
		header li.menu-item:hover > .submenu-trigger-container .submenu-trigger {
			background-color: rgba(255, 255, 255, 0.06) !important;
			color: #fff !important;
		}

		.color-custom header li.menu-item.current-menu-item:hover > .submenu-trigger,
		.color-custom header li.menu-item.current-menu-item:hover > .submenu-trigger-container .submenu-trigger {
			color: var(--nf-accent) !important;
		}

		.menu-container > ul {
			background: var(--nf-bg-secondary) !important;
		}
	}

	/* Mobile nav icons */
	.h1 .mobile-nav a.search,
	.h1 .mobile-nav a.cart {
		border-left-color: var(--nf-border-color) !important;
	}

	/* =============================================
	   Content Area
	   ============================================= */
	.content,
	.content .main,
	.content .main article,
	.content .main .entry-content,
	.content .main .entry-content p,
	.content .main .entry-content li,
	.content .main .entry-content td,
	.content .main .entry-content th,
	.content .main .entry-content span,
	.content .main .entry-content div {
		color: var(--nf-text-primary) !important;
	}

	h1, h2, h3, h4, h5, h6,
	.content h1, .content h2, .content h3,
	.content h4, .content h5, .content h6 {
		color: var(--nf-text-heading) !important;
	}

	a {
		color: var(--nf-accent) !important;
	}

	a:hover {
		color: var(--nf-accent-hover) !important;
	}

	/* =============================================
	   Page Title / Breadcrumb Bar
	   ============================================= */
	.page-title-section,
	.page-title-section .page-title-wrapper {
		background: var(--nf-bg-elevated) !important;
	}

	.page-title-section h1,
	.page-title-section .page-title {
		color: var(--nf-text-heading) !important;
	}

	.page-title-section .breadcrumb,
	.page-title-section .breadcrumb a,
	.page-title-section .breadcrumb span {
		color: var(--nf-text-secondary) !important;
	}

	/* =============================================
	   Sidebar
	   ============================================= */
	.content aside,
	.content aside section,
	.content aside .widget {
		background: var(--nf-bg-secondary) !important;
		color: var(--nf-text-primary) !important;
	}

	.content aside section h3,
	.content aside .widget h3,
	.content aside .widget-title {
		color: var(--nf-text-heading) !important;
	}

	/* Sidebar navigation menu */
	.color-custom .content aside section ul.menu a,
	.content aside section ul.menu a,
	.widget_nav_menu a {
		color: var(--nf-text-primary) !important;
		border-color: var(--nf-border-color) !important;
	}

	.color-custom .content aside section ul.menu li:hover > a,
	.content aside section ul.menu li:hover > a,
	.widget_nav_menu a:hover {
		color: var(--nf-accent) !important;
		background-color: var(--nf-bg-elevated) !important;
	}

	.color-custom .content aside section ul.menu li.current-menu-item > a {
		color: var(--nf-accent) !important;
		background: none !important;
	}

	/* =============================================
	   Buttons
	   ============================================= */
	.btn-primary,
	.btn-primary:visited,
	a.btn-primary,
	input[type="submit"],
	button[type="submit"],
	.wpcf7-submit {
		background: var(--nf-accent) !important;
		border-color: var(--nf-accent) !important;
		color: #fff !important;
	}

	.btn-primary:hover,
	a.btn-primary:hover,
	input[type="submit"]:hover,
	button[type="submit"]:hover {
		background: var(--nf-accent-hover) !important;
		border-color: var(--nf-accent-hover) !important;
	}

	/* =============================================
	   Forms
	   ============================================= */
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="search"],
	input[type="url"],
	input[type="tel"],
	input[type="number"],
	textarea,
	select {
		background: var(--nf-bg-elevated) !important;
		color: var(--nf-text-primary) !important;
		border-color: var(--nf-border-color) !important;
	}

	input::placeholder,
	textarea::placeholder {
		color: var(--nf-text-secondary) !important;
	}

	/* =============================================
	   Tables
	   ============================================= */
	table,
	table th,
	table td {
		border-color: var(--nf-border-color) !important;
	}

	table th {
		background: var(--nf-bg-elevated) !important;
		color: var(--nf-text-heading) !important;
	}

	table td {
		background: var(--nf-bg-secondary) !important;
		color: var(--nf-text-primary) !important;
	}

	table tr:nth-child(even) td {
		background: var(--nf-bg-primary) !important;
	}

	/* =============================================
	   Footer
	   ============================================= */
	footer,
	footer .footer-wrapper,
	footer .footer-top,
	footer .footer-bottom,
	.footer-wrapper {
		background: var(--nf-bg-secondary) !important;
		color: var(--nf-text-primary) !important;
	}

	footer h3,
	footer h4,
	footer .widget-title {
		color: var(--nf-text-heading) !important;
	}

	footer a {
		color: var(--nf-text-secondary) !important;
	}

	footer a:hover {
		color: var(--nf-accent) !important;
	}

	footer .footer-bottom {
		border-top-color: var(--nf-border-color) !important;
	}

	/* =============================================
	   Converio Specific Components
	   ============================================= */

	/* Icon boxes */
	.icon-box,
	.icon-box .icon-box-content {
		color: var(--nf-text-primary) !important;
	}

	.icon-box h3,
	.icon-box h4 {
		color: var(--nf-text-heading) !important;
	}

	/* Testimonials */
	.testimonial-box,
	.testimonial-content {
		background: var(--nf-bg-elevated) !important;
		color: var(--nf-text-primary) !important;
	}

	/* Pricing tables */
	.pricing-table {
		background: var(--nf-bg-secondary) !important;
		border-color: var(--nf-border-color) !important;
	}

	.pricing-table .pricing-header {
		background: var(--nf-bg-elevated) !important;
	}

	.pricing-table .pricing-header h3,
	.pricing-table .pricing-price {
		color: var(--nf-text-heading) !important;
	}

	.pricing-table .pricing-content li {
		color: var(--nf-text-primary) !important;
		border-bottom-color: var(--nf-border-color) !important;
	}

	/* Tabs */
	.nav-tabs > li > a {
		color: var(--nf-text-primary) !important;
		border-color: var(--nf-border-color) !important;
	}

	.nav-tabs > li.active > a,
	.nav-tabs > li > a:hover {
		background: var(--nf-bg-elevated) !important;
		color: var(--nf-text-heading) !important;
	}

	.tab-content {
		background: var(--nf-bg-secondary) !important;
		border-color: var(--nf-border-color) !important;
	}

	/* Accordions */
	.panel,
	.panel-default {
		background: var(--nf-bg-secondary) !important;
		border-color: var(--nf-border-color) !important;
	}

	.panel-heading,
	.panel-default > .panel-heading {
		background: var(--nf-bg-elevated) !important;
		color: var(--nf-text-heading) !important;
	}

	.panel-body {
		color: var(--nf-text-primary) !important;
	}

	/* Separators / dividers */
	hr,
	.separator,
	.divider {
		border-color: var(--nf-border-color) !important;
	}

	/* =============================================
	   Row / Section Backgrounds
	   ============================================= */
	/* Light grey sections → dark */
	.vc_row[data-vc-full-width],
	.wpb_row,
	.vc_section {
		/* Only override rows without explicit background images */
	}

	.vc_row .vc_column-inner,
	.wpb_column > .wpb_wrapper {
		color: var(--nf-text-primary) !important;
	}

	/* White/light background rows */
	.bg-white,
	.bg-light,
	section.bg-white,
	section.bg-light {
		background: var(--nf-bg-primary) !important;
	}

	/* Grey background rows */
	.bg-grey,
	.bg-gray,
	section.bg-grey,
	section.bg-gray {
		background: var(--nf-bg-secondary) !important;
	}

	/* =============================================
	   Search Box
	   ============================================= */
	.search-box,
	.h1 .search-box {
		background: var(--nf-bg-elevated) !important;
	}

	.search-box input[type="text"],
	.search-box input[type="search"] {
		background: var(--nf-bg-primary) !important;
		color: var(--nf-text-primary) !important;
		border-color: var(--nf-border-color) !important;
	}

	/* =============================================
	   Misc / Utility
	   ============================================= */
	/* Code blocks */
	pre, code {
		background: var(--nf-bg-elevated) !important;
		color: var(--nf-text-primary) !important;
		border-color: var(--nf-border-color) !important;
	}

	/* Blockquotes */
	blockquote {
		border-left-color: var(--nf-accent) !important;
		color: var(--nf-text-secondary) !important;
		background: var(--nf-bg-secondary) !important;
	}

	/* Images — subtle border for visibility */
	img {
		opacity: 0.92;
	}

	/* Scrollbar (Webkit) */
	::-webkit-scrollbar {
		background: var(--nf-bg-primary);
	}

	::-webkit-scrollbar-thumb {
		background: var(--nf-bg-elevated);
		border-radius: 4px;
	}

	/* Selection */
	::selection {
		background: var(--nf-accent) !important;
		color: #fff !important;
	}
}