/*
 * Sara Movers — dark mode.
 * <html data-theme="dark"> is set before first paint by the head script in functions.php
 * (saved choice, else the system setting); the header switch toggles it (runtime.js).
 * modern.css paints with --sm-* variables, so most of the theme is the variable swap below.
 */

/* ---------- Header switch (both themes) ---------- */

/* Positioned so it paints above the header row's absolutely placed ::before overlay; ordered last so it
   sits right of "Get free quote" (and of the hamburger on tablets and phones). */
body.sara-movers .sara-theme-toggle {
	position: relative;
	z-index: 1;
	order: 1;
	display: inline-grid;
	place-items: center;
	flex: none;
	align-self: center;
	width: 42px;
	height: 42px;
	margin: 0 4px;
	padding: 0;
	border: 1px solid var(--sm-line);
	border-radius: 50%;
	background: var(--sm-card);
	color: var(--sm-ink);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

body.sara-movers .sara-theme-toggle:hover {
	color: var(--sm-green);
	transform: rotate(-12deg);
}

body.sara-movers .sara-theme-toggle:focus-visible {
	outline: 2px solid var(--sm-green);
	outline-offset: 2px;
}

body.sara-movers .sara-theme-toggle svg {
	width: 19px;
	height: 19px;
}

body.sara-movers .sara-theme-toggle__sun,
html[data-theme="dark"] body.sara-movers .sara-theme-toggle__moon {
	display: none;
}

html[data-theme="dark"] body.sara-movers .sara-theme-toggle__sun {
	display: block;
	color: #facc15;
}

/* ---------- Dark palette ---------- */

html[data-theme="dark"] {
	color-scheme: dark;
}

/* Navy surfaces. Green on navy was tiring, so in dark mode the accents (headings, numbers, labels,
   links, menu highlight, dividers) are a soft light blue, and green is kept only for the action
   buttons, in a deeper shade, and the small tick icons. */
html[data-theme="dark"] body.sara-movers {
	--sm-green: #8ec5f2;
	--sm-green-50: #13304f;
	--sm-green-600: #8ec5f2;
	--sm-gradient: linear-gradient(135deg, #3b8c22 0%, #2a6b16 100%);
	--sm-ink: #e6edf5;
	--sm-text: #b4c0ce;
	--sm-muted: #8b9bb0;
	--sm-line: #1c3350;
	--sm-surface: #07121f;
	--sm-soft: #0b1a2b;
	--sm-card: #0e2036;
	--sm-glass: 10 22 38;
	--sm-body: #c3cdd9;
	--sm-shadow-sm: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px rgb(0 0 0 / .25);
	--sm-shadow: 0 10px 30px -12px rgb(0 0 0 / .6), 0 4px 10px -6px rgb(0 0 0 / .4);
	--sm-shadow-lg: 0 24px 48px -18px rgb(0 0 0 / .7);
	background: var(--sm-surface);
}

/* ---------- Hard-coded colours from the imported pages ---------- */

/* Near-black text, tagged by runtime.js. */
html[data-theme="dark"] body.sara-movers .sara-ink {
	color: var(--sm-ink) !important;
	-webkit-text-stroke-color: transparent;
}

/* The homepage orbit's names sit on white pills in both themes, so they stay navy here. */
html[data-theme="dark"] body.sara-movers .sara-orbit__node a {
	color: #0b2545 !important;
}

html[data-theme="dark"] body.sara-movers .sara-orbit__node a:is(:hover, :focus-visible) {
	color: #fff !important;
}

/* Its white centre holds the logo, whose artwork has a white background. */
html[data-theme="dark"] body.sara-movers .sara-orbit .sara-orbit__core {
	background-color: #fff !important;
}

/* Footer: the navy gradient without the green glow the light theme uses. */
html[data-theme="dark"] body.sara-movers .elementor-location-footer > :is(.elementor-section, .e-con):first-child {
	background: linear-gradient(180deg, #102030 0%, #0b1824 100%) !important;
}

/* Green accents painted by the imported widget CSS or hard-coded in modern.css, in the light blue. */
html[data-theme="dark"] body.sara-movers :is(.elementor-divider-separator, .elementskit-border-star) {
	border-color: rgb(142 197 242 / .5) !important;
	background-color: transparent !important;
}

html[data-theme="dark"] body.sara-movers .elementskit-border-star::before,
html[data-theme="dark"] body.sara-movers .elementskit-border-star::after {
	background: #8ec5f2 !important;
}

html[data-theme="dark"] body.sara-movers .sara-footer-map__title::after {
	background: rgb(142 197 242 / .5);
}

html[data-theme="dark"] body.sara-movers :is(.sara-hero__eyebrow, .elementor-location-footer .sara-footer-map__link, [data-id="c4b93e8"] span) {
	color: #8ec5f2 !important;
}

html[data-theme="dark"] body.sara-movers .swiper-pagination-bullet-active {
	background: #8ec5f2 !important;
}

/* Our Strength counters: a plain card instead of the green-tinted gradient and mint border. */
html[data-theme="dark"] body.sara-movers .e-con:has(> .elementor-widget-counter) {
	background: var(--sm-card) !important;
	border-color: var(--sm-line) !important;
}

/* Homepage "WhatsApp us" button uses the blue as its text colour; on dark slate it needs light text. */
html[data-theme="dark"] body.sara-movers .sara-welcome__btn:not(.sara-welcome__btn--primary) {
	border-color: var(--sm-line);
	color: var(--sm-ink) !important;
}

/* Homepage reviews: the imported section paints a white overlay (::before) over its background,
   which runtime.js cannot tag, so the light heading sat on white. The only such overlay on the site. */
html[data-theme="dark"] body.sara-movers .elementor-element-dceeb7::before {
	background-color: var(--sm-surface) !important;
}

/* Solid white panels, tagged by runtime.js. */
html[data-theme="dark"] body.sara-movers .sara-paper {
	background-color: var(--sm-card) !important;
}

/* Inline colours typed into the page content. */
html[data-theme="dark"] body.sara-movers [style*="color: #000000"],
html[data-theme="dark"] body.sara-movers [style*="color: #000080"] {
	color: var(--sm-ink) !important;
}

html[data-theme="dark"] body.sara-movers [style*="color: #008000"] {
	color: #8ec5f2 !important;
}

/* Text links (green in modern.css) are the light accent blue on the dark background. */
:where(html[data-theme="dark"]) a {
	color: #8ec5f2;
}

/* White panels styled by the imported widget CSS rather than modern.css. */
html[data-theme="dark"] body.sara-movers :is(.elementskit-post-body, .elementor-image-box-wrapper, .elementor-toc__header, .elementor-toc__body) {
	background-color: var(--sm-card) !important;
}

html[data-theme="dark"] body.sara-movers :is(input, select, textarea)::placeholder {
	color: var(--sm-muted) !important;
}

/* The logo artwork has a white background; round it so it reads as a badge on the dark header. */
html[data-theme="dark"] body.sara-movers .elementor-location-header [data-id="0953593"] img {
	border-radius: 10px;
}

/* Blog "Delete" button (articles.php): a lighter red on the dark background. */
html[data-theme="dark"] body.sara-movers .sara-article__tools .sara-article__tool--danger {
	color: #fda29b !important;
}