/*
 * Dark is the default palette; :root[data-theme="light"] overrides it.
 *
 * These redefine Kadence's own --global-palette* custom properties (rather than
 * a disconnected set of variables) since virtually all of Kadence's rendering -
 * backgrounds, headings, body text, buttons, borders - already reads from them.
 * !important guarantees these win regardless of where Kadence prints its own
 * inline :root block relative to this stylesheet.
 */

:root {
	--global-palette1: #4f8dfd !important;
	--global-palette2: #3672d9 !important;
	--global-palette3: #e6e8eb !important;
	--global-palette4: #cdd2d8 !important;
	--global-palette5: #9aa3ad !important;
	--global-palette6: #6b7480 !important;
	--global-palette7: #21252c !important;
	--global-palette8: #181b21 !important;
	--global-palette9: #0f1115 !important;
	--global-palette-btn: #ffffff !important;
	--global-palette-btn-hover: #ffffff !important;
	--global-palette-btn-sec: #e6e8eb !important;
	--global-palette-btn-sec-hover: #ffffff !important;
	--bmc-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

:root[data-theme="light"] {
	--global-palette1: #2563eb !important;
	--global-palette2: #1d4ed8 !important;
	--global-palette3: #1b1e22 !important;
	--global-palette4: #3f4650 !important;
	--global-palette5: #5b6470 !important;
	--global-palette6: #88919b !important;
	--global-palette7: #eceef1 !important;
	--global-palette8: #f5f6f8 !important;
	--global-palette9: #ffffff !important;
	--global-palette-btn: #ffffff !important;
	--global-palette-btn-hover: #ffffff !important;
	--global-palette-btn-sec: #1b1e22 !important;
	--global-palette-btn-sec-hover: #ffffff !important;
	--bmc-card-shadow: 0 8px 24px rgba(15, 17, 21, 0.12);
}

html {
	background: var(--global-palette9) !important;
}

body {
	background-color: var(--global-palette9) !important;
	color: var(--global-palette3) !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Kadence sets the header's background as a hardcoded hex value from the
 * customizer's "header background color" option, not through the global
 * palette variables, so it has to be overridden directly.
 */
#masthead,
#masthead .site-header-row-container-inner,
#masthead .site-header-upper-wrap,
#masthead .site-header-main-wrap,
#masthead .site-header-mobile-wrap,
.site-header-row-container-inner {
	background-color: var(--global-palette9) !important;
	transition: background-color 0.15s ease;
}

/* Card treatment for each post in the loop (Kadence's own box-shadow on .loop-entry is too faint to read, especially on a dark background) */
.loop-entry {
	background-color: var(--global-palette8) !important;
	border: 1px solid var(--global-palette6) !important;
	border-radius: 12px !important;
	box-shadow: var(--bmc-card-shadow) !important;
	overflow: hidden;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * SyntaxHighlighter Evolved's "RDark" theme (set as the site-wide plugin
 * setting) is our dark-mode code block styling. It has no light counterpart
 * of its own and every rule in it is !important, so light mode needs an
 * equally-specific override here rather than relying on cascade order.
 */
:root[data-theme="light"] .syntaxhighlighter {
	background-color: var(--global-palette8) !important;
}
:root[data-theme="light"] .syntaxhighlighter .line.alt1,
:root[data-theme="light"] .syntaxhighlighter .line.alt2 {
	background-color: var(--global-palette8) !important;
}
:root[data-theme="light"] .syntaxhighlighter .line.highlighted.alt1,
:root[data-theme="light"] .syntaxhighlighter .line.highlighted.alt2 {
	background-color: var(--global-palette7) !important;
}
:root[data-theme="light"] .syntaxhighlighter .line.highlighted.number,
:root[data-theme="light"] .syntaxhighlighter table caption {
	color: var(--global-palette3) !important;
}
:root[data-theme="light"] .syntaxhighlighter .gutter {
	color: var(--global-palette5) !important;
}
:root[data-theme="light"] .syntaxhighlighter .gutter .line {
	border-right: 3px solid var(--global-palette6) !important;
}
:root[data-theme="light"] .syntaxhighlighter .gutter .line.highlighted {
	background-color: var(--global-palette6) !important;
	color: var(--global-palette8) !important;
}
:root[data-theme="light"] .syntaxhighlighter .toolbar {
	color: var(--global-palette3) !important;
	background: var(--global-palette7) !important;
	border: none !important;
}
:root[data-theme="light"] .syntaxhighlighter .toolbar a {
	color: var(--global-palette3) !important;
}
:root[data-theme="light"] .syntaxhighlighter .toolbar a:hover {
	color: var(--global-palette1) !important;
}
:root[data-theme="light"] .syntaxhighlighter .collapsed .toolbar {
	color: var(--global-palette1) !important;
	background: var(--global-palette9) !important;
	border: 1px solid var(--global-palette6) !important;
}
:root[data-theme="light"] .syntaxhighlighter .plain,
:root[data-theme="light"] .syntaxhighlighter .plain a {
	color: var(--global-palette3) !important;
}
:root[data-theme="light"] .syntaxhighlighter .comments,
:root[data-theme="light"] .syntaxhighlighter .comments a {
	color: var(--global-palette5) !important;
}
:root[data-theme="light"] .syntaxhighlighter .string,
:root[data-theme="light"] .syntaxhighlighter .string a {
	color: #2f9e44 !important;
}
:root[data-theme="light"] .syntaxhighlighter .keyword {
	color: var(--global-palette1) !important;
}
:root[data-theme="light"] .syntaxhighlighter .preprocessor {
	color: var(--global-palette6) !important;
}
:root[data-theme="light"] .syntaxhighlighter .variable {
	color: #b45309 !important;
}
:root[data-theme="light"] .syntaxhighlighter .value {
	color: #008200 !important;
}
:root[data-theme="light"] .syntaxhighlighter .functions {
	color: #b45309 !important;
}
:root[data-theme="light"] .syntaxhighlighter .constants {
	color: #6d28d9 !important;
}
:root[data-theme="light"] .syntaxhighlighter .script {
	color: var(--global-palette1) !important;
	background-color: none !important;
}
:root[data-theme="light"] .syntaxhighlighter .color1,
:root[data-theme="light"] .syntaxhighlighter .color1 a {
	color: var(--global-palette4) !important;
}
:root[data-theme="light"] .syntaxhighlighter .color2,
:root[data-theme="light"] .syntaxhighlighter .color2 a {
	color: var(--global-palette3) !important;
}
:root[data-theme="light"] .syntaxhighlighter .color3,
:root[data-theme="light"] .syntaxhighlighter .color3 a {
	color: #b45309 !important;
}

/*
 * The related-posts carousel (Splide.js) mounts its prev/next arrows as a
 * sibling of .splide__track, positioned absolute relative to the outer
 * .splide element (.entry-related-carousel itself) - not the track - so the
 * gutter has to be reserved on that outer element for the arrows to land
 * outside the card row instead of on top of it.
 */
.entry-related-carousel.splide {
	padding-left: 3.5rem;
	padding-right: 3.5rem;
}

@media (max-width: 600px) {
	.entry-related-carousel.splide {
		padding-left: 2.75rem;
		padding-right: 2.75rem;
	}
}

/*
 * Theme toggle switch, fixed to the top-right corner regardless of header
 * layout. Styled as a labeled pill (icon + "Light mode"/"Dark mode" text)
 * rather than an icon-only circle, so its purpose is clear at a glance - the
 * icon and label always describe the action a click will take, not the
 * current state.
 */
.bmc-theme-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	background-color: var(--global-palette8);
	border: 1px solid var(--global-palette6);
	color: var(--global-palette3);
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bmc-theme-toggle:hover {
	background-color: var(--global-palette7);
	/*
	 * Kadence's own generic button-hover rule pulls text color from
	 * --global-palette-btn-hover, which this theme pins to white in both
	 * palettes (for real accent-colored buttons, where hovering also swaps the
	 * background). This toggle's hover only lightens the background slightly,
	 * so inheriting white text there washed out to near-invisible in light
	 * mode. Keep the same readable text color as the resting state instead.
	 */
	color: var(--global-palette3) !important;
}

.bmc-theme-toggle svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
	flex-shrink: 0;
}

.bmc-toggle-action {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.bmc-toggle-action-dark {
	display: none;
}

:root[data-theme="light"] .bmc-toggle-action-light {
	display: none;
}

:root[data-theme="light"] .bmc-toggle-action-dark {
	display: inline-flex;
}

@media (max-width: 480px) {
	.bmc-theme-toggle {
		top: 0.5rem;
		right: 0.5rem;
	}

	.bmc-toggle-label {
		display: none;
	}
}