/* -----------------------------------------------------------
   Defend.IT Systems – Global Dark Mode Overrides
   site-dark.css - updated 30/04/26 : 9:30pm
----------------------------------------------------------- */

@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;
		}

	/* ------------------------------
   Dark Mode – Navbar Toggler Icon
------------------------------ */
	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23f5f7fa' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
	}

	/* 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);
		}


	.di-graphic-wrapper {
		background: var(--surface-3);
		border-color: var(--border-dark);
		box-shadow: 0 0 12px rgba(0,0,0,0.4);
	}

	/* ------------------------------
	   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.56);
		}
/* -----------------------------------------------------------
   DI CARD — BASE (Dark Mode)
----------------------------------------------------------- */

	.di-card {
		background: var(--surface-2);
		
		box-shadow: 0 4px 12px rgba(0,0,0,0.6);
	}

	/* Title + icon green */
	.di-card-title span,
	.di-card-icon {
		color: var(--text-1) !important;
	}

	di.card-clickable {
		background: var(--surface-2);
		color: var(--text-1);
		border: 1px solid var(--border-light);
	}
	/* Hover (clickable only) */
	.di-card-clickable:hover {
		background: var(--surface-3); /* lighter body */
		border-color: var(--brand-secondary);
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(0,0,0,0.75);
	}

	/* Static cards */
	.di-card-static {
		box-shadow: 0 2px 6px rgba(0,0,0,0.4);
		cursor: default;
	}


	/* -----------------------------------------
   KIT CARD — Dark Mode
----------------------------------------- */

	.kit-card {
			background: var(--surface-2);
			border: 1px solid var(--border-medium);
			box-shadow: 0 2px 6px rgba(0,0,0,0.25);
		}

			.kit-card .card-title a {
				color: var(--text-1);
			}

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

			/* CTA button inside card */
			.kit-card .btn-primary {
				background: var(--brand-secondary);
				border-color: var(--brand-secondary);
				color: #fff;
			}

				.kit-card .btn-primary:hover {
					background: #0c8f58; /* your hover token */
					border-color: #0c8f58;
				}

		.kit-card .card-title a {
			color: var(--text-1) !important;
		}

			.kit-card .card-title a:hover {
				color: var(--brand-secondary) !important;
				text-decoration-color: var(--brand-secondary) !important;
			}

		/* removed for general cards

	/* 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);
		}

		/* -----------------------------------------------------------
   BOOTSTRAP OVERRIDE PATCH — REQUIRED
----------------------------------------------------------- */

		.di-card {
			background: var(--surface-2) !important;
			border: 1px solid var(--text-1) !important;
		}


		.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);
		}

		/* ------------------------------
	   12. Button
	------------------------------ */
		button.btn.di-btn-primary {
			background-color: var(--brand-secondary) !important;
			border-color: var(--brand-secondary) !important;
			color: #fff !important;
			box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
		}

			button.btn.di-btn-primary:hover {
				background-color: #13c77a !important;
				border-color: #13c77a !important;
			}
	}