/* ==================== DARK MODE STYLES ==================== */
/* Automatic Dark Mode for Spacematic Studio */
/* This file contains all dark mode specific styles */

/* ==================== CSS VARIABLES ==================== */

/* Light Mode Variables (Default) */
:root {
	--bg-color: #f9f6f4;
	--text-color: #000;
	--text-secondary: #4F4B48;
	--bg-secondary: #FFF;
	--header-bg: #f9f6f4;
	--footer-bg: #f9f6f4;
	--border-color: #FFF;
	--button-bg: #000;
	--button-text: #FFF;
	--link-color: #000;
	--hamburger-color: #000;
}

/* Dark Mode Variables */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #1a1a1a;
		--text-color: #ffffff;
		--text-secondary: #e0e0e0;
		--bg-secondary: #2a2a2a;
		--header-bg: #1a1a1a;
		--footer-bg: #1a1a1a;
		--border-color: #2a2a2a;
		--button-bg: #ffffff;
		--button-text: #1a1a1a;
		--link-color: #ffffff;
		--hamburger-color: #ffffff;
	}
}

/* ==================== SMOOTH TRANSITIONS ==================== */

body,
.sm--header,
.sm--header__bg,
.sm--footer,
.sm--footer__bg,
.sm--header__nav,
.sm--header__nav__item a,
button,
.button,
input,
textarea,
select,
a,
.hamburger .hamburger-inner,
.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease;
}

/* Disable transition on page load */
html.no-transition *,
html.no-transition *::before,
html.no-transition *::after {
	transition: none !important;
}

/* ==================== GLOBAL ELEMENTS ==================== */

html {
	background-color: var(--bg-color);
}

.sm--page-wrapper,
.sm--page-content {
	background-color: var(--bg-color);
}

/* ==================== HEADER ==================== */

.sm--header {
	background-color: var(--header-bg);
}

.sm--header__bg {
	background-color: var(--bg-secondary);
}

/* ==================== HAMBURGER MENU ==================== */

.hamburger .hamburger-inner,
.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after {
	background-color: var(--hamburger-color);
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
	background-color: var(--hamburger-color);
}

/* ==================== NAVIGATION ==================== */

.sm--header__nav {
	background-color: var(--header-bg);
	color: var(--text-color);
}

.sm--header__nav__item a {
	color: var(--text-color);
}

.sm--header__nav__item a:hover {
	color: var(--text-secondary);
}

/* ==================== FOOTER ==================== */

.sm--footer {
	background-color: var(--footer-bg);
	color: var(--text-color);
}

.sm--footer__bg {
	background-color: var(--bg-secondary);
}

.sm--footer__text,
.sm--footer__legal,
.sm--footer address {
	color: var(--text-color);
}

.sm--footer a {
	color: var(--link-color);
}

/* ==================== BUTTONS ==================== */

button,
.button,
input[type="submit"],
input[type="button"] {
	background-color: var(--button-bg);
	color: var(--button-text);
	border-color: var(--button-bg);
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: var(--text-secondary);
	color: var(--button-text);
	opacity: 0.9;
}

/* ==================== FORMS ==================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
	background-color: var(--bg-secondary);
	color: var(--text-color);
	border-color: var(--text-secondary);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
	color: var(--text-secondary);
}

/* ==================== LINKS ==================== */

a {
	color: var(--link-color);
}

/* ==================== CONTENT SECTIONS ==================== */

.sm--t06__below-fold,
.sm--t06__hero {
	background-color: var(--bg-color);
	color: var(--text-color);
}

/* Ensure all sections have proper background */
section {
	background-color: var(--bg-color);
}

.sm--page-content section {
	background-color: var(--bg-color);
}

.sm--mod--breakout-text,
.sm--t04__press {
	background-color: var(--bg-color);
}

/* ==================== CONTAINERS ==================== */

.container,
.row,
[class*="col-"] {
	color: var(--text-color);
}

/* ==================== PAGINATION ==================== */

.swiper-pagination-bullet {
	background-color: var(--text-secondary);
}

.swiper-pagination-bullet-active {
	background-color: var(--text-color);
}

/* ==================== DARK MODE SPECIFIC OVERRIDES ==================== */

@media (prefers-color-scheme: dark) {
	
	/* Page Container Background - Solid dark color to eliminate gradient gaps */
	.sm--page-container,
	.sm--page-container__bg {
		background: var(--bg-color) !important;
	}
	
	/* Page Wrapper and Content - Solid background */
	.sm--page-wrapper,
	.sm--page-content {
		background-color: var(--bg-color) !important;
	}
	
	/* Soft Gradient - Dark mode version */
	.softgrad {
		background: linear-gradient(180deg, rgba(26, 26, 26, 0) 70%, rgba(26, 26, 26, 1) 100%) !important;
	}
	
	/* SVG Logos */
	.sm--header__logo svg path,
	.sm--footer__logo svg path {
		fill: #ffffff;
	}
	
	.sm--header--light:not(.sm--header--active) .sm--header__logo svg path {
		fill: #ffffff;
	}
	
	.sm--header--dark:not(.sm--header--active) .sm--header__logo svg path {
		fill: #ffffff;
	}
	
	/* Hero Section Background */
	.sm--t06__hero {
		background-color: var(--bg-color) !important;
	}
	
	.sm--t06__hero__feature {
		background-color: var(--bg-color) !important;
	}
	
	/* Hero Bevels - Override background images with solid dark color */
	.sm--t06__hero__top-bevel,
	.sm--t06__hero__left-bevel,
	.sm--t06__hero__right-bevel {
		background-color: var(--bg-color) !important;
		background-image: none !important;
	}
	
	/* Bevel Corners */
	.sm--t06__hero__top-bevel__left-corner,
	.sm--t06__hero__top-bevel__right-corner {
		background-color: var(--bg-color) !important;
		background-image: none !important;
	}
	
	/* Bevel Gradients */
	.sm--t06__hero__left-bevel__grad,
	.sm--t06__hero__right-bevel__grad {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--bg-color) 78.17%) !important;
	}
	
	/* Hero Pagination */
	.sm--t06__hero__feature__carousel__pagination span {
		color: var(--text-color) !important;
	}
	
	/* Below Fold Text */
	.sm--mod--breakout-text,
	.sm--large-intro,
	.sm--large-intro p {
		color: var(--text-color) !important;
	}
	
	/* All Headings */
	h1, h2, h3, h4, h5, h6,
	.sm--h1, .sm--h2, .sm--h3, .sm--h4, .sm--h5, .sm--h6 {
		color: var(--text-color) !important;
	}
	
	/* Paragraphs and Text */
	p, span, div:not(.sm--img-bg):not(.swiper-slide):not(.swiper-wrapper), 
	a:not(.sm--img-bg) {
		color: var(--text-color) !important;
	}
	
	/* Links */
	a {
		color: var(--text-color) !important;
	}
	
	a:visited {
		color: var(--text-color) !important;
	}
	
	a:hover {
		color: var(--text-secondary) !important;
	}
	
	/* Bylines and Small Text */
	.sm--byline,
	.sm--byline__small,
	.sm--byline__xs {
		color: var(--text-color) !important;
	}
	
	/* Press Section */
	.sm--t04__press,
	.sm--t04__press__inner,
	.sm--t04__article-row__article,
	.sm--t04__article-row__article h3,
	.sm--t04__article-row__article span {
		color: var(--text-color) !important;
	}
	
	/* Navigation Menu - Explicit White Text */
	.sm--header__nav,
	.sm--header__nav ul,
	.sm--header__nav ul li,
	.sm--header__nav__item,
	.sm--header__nav__item a {
		color: var(--text-color) !important;
	}
	
	/* Specifically Target Navigation Text */
	.sm--header--active .sm--header__nav ul li a {
		color: var(--text-color) !important;
	}
	
	/* Text Utilities */
	.sm--txt--black {
		color: var(--text-color) !important;
	}
	
	/* Catch-all for Remaining Text Elements */
	section, article, aside, main {
		color: var(--text-color) !important;
	}
	
	section *, article *, aside *, main * {
		color: var(--text-color) !important;
	}
	
	/* Button Text - Force Black in Dark Mode */
	button,
	.button,
	.sm--btn,
	input[type="submit"],
	input[type="button"],
	a.sm--btn {
		color: #000 !important;
		background-color: #ffffff !important;
	}
	
	button:hover,
	.button:hover,
	.sm--btn:hover,
	a.sm--btn:hover,
	input[type="submit"]:hover,
	input[type="button"]:hover {
		color: #000 !important;
		background-color: rgba(255, 255, 255, 0.8) !important;
	}
	
	/* Hamburger - No Background on Hover */
	.hamburger:hover,
	.hamburger.is-active:hover,
	.sm--hamburger:hover {
		background-color: transparent !important;
		opacity: 1 !important;
	}
}