/* -----------------------------------------------------------
   Defend.IT Systems – Global Dark Mode Overrides
   site-dark.css
----------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	/* ------------------------------
	   1. Global Surfaces & Text
	------------------------------ */
	body {
		background: var(--surface-1);
		color: var(--text-1);
	}

	h1, h2, h3, h4 {
		color: var(--text-1);
	}

	p {
		color: var(--text-2);
	}

	/* ------------------------------
	   2. Header / Footer & Navigation
	------------------------------ */
	/* Lock header + footer to brand surface */
	.di-header,
	.di-footer {
		background-color: #121417 !important;
		color: #f5f7fa; /* your text-1 */
	}

	/* Navbar links */
	.di-navbar .nav-link {
		color: #d0d4d9; /* text-2 */
		transition: color 0.2s ease;
	}

		.di-navbar .nav-link:hover{
			color: var(--brand-secondary) !important;
		}
		.di-navbar .nav-link:focus {
			color: #ffffff;
		}

	/* Footer text */
	.di-footer .footer-text,
	.di-footer .footer-heading {
		color: #d0d4d9;
	}

	.di-footer .footer-heading {
		font-weight: 600;
	}

	.navbar,
	.navbar-brand,
	.navbar-nav,
	.nav-link {
		background: var(--surface-2) !important;
		color: var(--text-1) !important;
	}

		.navbar-nav .nav-link:hover {
			color: var(--brand-secondary) !important;
		}

	/* ------------------------------
	   3. Hero Sections
	------------------------------ */
	.hero {
		background: var(--surface-2);
		color: var(--text-1);
	}

		.hero h1 {
			color: var(--text-1);
		}

	.di-hero-title {
		color: var(--text-1);
	}

	.di-hero-card {
		background: var(--surface-2);
		color: var(--text-1);
	}

		.di-hero-card h5 {
			color: var(--text-1);
		}

	.hero-content {
		background: rgba(255,255,255,0.06);
		color: var(--text-1);
	}

		.hero-content h1 {
			color: var(--text-1);
		}

	/* ------------------------------
	   4. Cards (Clickable, Product, Kit)
	------------------------------ */

	/* Generic clickable cards */
	.card-clickable {
		background: var(--surface-2);
		color: var(--text-1);
		border: 1px solid var(--border-light);
	}

		.card-clickable:hover {
			background: var(--surface-3);
			border-color: var(--brand-secondary);
			box-shadow: 0 4px 12px rgba(0,0,0,0.4);
		}

	/* Product / feature cards */
	.di-card {
		background: var(--surface-2);
		border: 1px solid var(--border-medium);
		color: var(--text-1);
		box-shadow: 0 2px 4px rgba(0,0,0,0.25);
	}

	.di-card-link:hover .di-card {
		box-shadow: 0 4px 12px rgba(0,0,0,0.35);
	}

	.di-card h5 span {
		color: var(--text-1);
	}
	/* Make supplier cards dark‑aware */
	.di-product-card {
		background: var(--surface-2) !important;
		color: var(--text-1) !important;
	}

		/* Fix the short description */
		.di-product-card .text-muted,
		.di-product-card .card-text {
			color: var(--text-2) !important;
		}

		/* Optional: fix the title too */
		.di-product-card .card-title {
			color: var(--text-1) !important;
		}
	.di-card h5 i {
		color: var(--text-2);
	}
	.di-surface .card {
		background: var(--surface-2) !important;
		color: var(--text-1) !important;
		border-color: var(--border-light) !important;
	}

		.di-surface .card-text,
		.di-surface .card .text-muted {
			color: var(--text-2) !important;
		}

	.di-surface {
		background: var(--surface-2);
		color: var(--text-1);
	}

		.di-card .text-muted {
			color: var(--text-2) !important;
		}
		.di-surface .lead {
			color: var(--text-2) !important;
		}


	/* Kit cards */
	.di-kit-card {
		background: var(--surface-2);
		box-shadow: 0 4px 14px rgba(0,0,0,0.25);
	}

		.di-kit-card:hover {
			box-shadow: 0 8px 20px rgba(0,0,0,0.35);
		}

	.di-kit-desc {
		color: var(--text-2);
	}

	.di-kit-savings {
		background: rgba(14,165,102,0.15);
		color: #4be39b;
	}

	/* Glass badge */
	.di-glass-badge {
		background: rgba(255,255,255,0.12);
		border: 1px solid rgba(255,255,255,0.25);
		color: #fff;
	}

	/* ------------------------------
	   5. Buttons
	------------------------------ */
	.btn-primary {
		background-color: var(--brand-secondary);
		border-color: var(--brand-secondary);
		color: #fff;
	}

		.btn-primary:hover {
			background-color: #0c8f58;
			border-color: #0c8f58;
		}

	/* ------------------------------
	   6. Footer
	------------------------------ */
	.footer {
		background: var(--surface-2);
		color: var(--text-1);
		border-top: 1px solid var(--border-medium);
	}

	/* ------------------------------
	   7. Utility Classes
	------------------------------ */
	.text-muted-small {
		color: var(--text-3);
	}

	.shadow-soft {
		box-shadow: 0 4px 12px rgba(0,0,0,0.35);
	}

	/* ------------------------------
	   8. Layout Helpers
	------------------------------ */
	.section-light {
		background: var(--surface-2);
	}

	.section-divider {
		background: rgba(255,255,255,0.08);
	}

	/* ------------------------------
	   9. Images
	------------------------------ */
	.img-responsive,
	.img-left {
		border-radius: var(--radius-sm);
	}

	/* ------------------------------
	   10. Service Areas
	------------------------------ */
	.service-areas-hero {
		color: var(--text-1);
	}

	.cta-button {
		background: #ffcc33;
		color: #000;
	}

		.cta-button:hover {
			background: #ffdd55;
			color: var(--brand-secondary);
		}

	/* ------------------------------
	   11. Breadcrumbs
	------------------------------ */
	.breadcrumbs-track::before {
		color: var(--text-3);
	}
}