/* ==========================================================================
   Dark / Light theme switch — child theme styles
   --------------------------------------------------------------------------
   Layer 1: the toggle component (theme agnostic).
   Layer 2: dark theme tokens (standard CSS custom properties).
   Layer 3: small Blocksy component fixes for colours that the parent theme
            hard-codes in its generated stylesheet.

   Loaded after the Blocksy stylesheets (see inc/dark-mode.php), so the
   tokens below win without !important.

   Parent theme files are never modified.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Toggle component
   -------------------------------------------------------------------------- */

:root {
	--np-toggle-track: rgba(25, 42, 61, 0.10);
	--np-toggle-track-border: rgba(25, 42, 61, 0.16);
	--np-toggle-icon: rgba(25, 42, 61, 0.55);
	--np-toggle-active-icon: #192a3d;
	--np-toggle-thumb: #ffffff;
	--np-toggle-thumb-shadow: 0 1px 3px rgba(16, 24, 40, 0.28);
	--np-focus-ring: #2872fa;
}

.np-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 44px;
	min-height: 44px;
	padding: 6px 4px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.np-theme-toggle__track {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 54px;
	height: 28px;
	padding: 0 6px;
	border: 1px solid var(--np-toggle-track-border);
	border-radius: 999px;
	background-color: var(--np-toggle-track);
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.np-theme-toggle__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	color: var(--np-toggle-icon);
	transition: color 0.18s ease;
}

/* Light mode: sun is the active icon. */
.np-theme-toggle__icon--sun {
	color: var(--np-toggle-active-icon);
}

.np-theme-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: var(--np-toggle-thumb);
	box-shadow: var(--np-toggle-thumb-shadow);
	transform: translateX(0);
	transition: transform 0.18s ease, background-color 0.18s ease;
}

html[data-theme="dark"] .np-theme-toggle__thumb {
	transform: translateX(26px);
}

/* Dark mode: moon is the active icon. */
html[data-theme="dark"] .np-theme-toggle__icon--sun {
	color: var(--np-toggle-icon);
}

html[data-theme="dark"] .np-theme-toggle__icon--moon {
	color: var(--np-toggle-active-icon);
}

.np-theme-toggle:hover .np-theme-toggle__track {
	border-color: var(--np-toggle-active-icon);
}

.np-theme-toggle:focus-visible {
	outline: 2px solid var(--np-focus-ring);
	outline-offset: 3px;
}

/* Header placement: appended as the last item of the primary menu. */
.ct-header .menu > .np-theme-toggle-item {
	display: flex;
	align-items: center;
	margin-inline-start: 6px;
}

.ct-header .menu > .np-theme-toggle-item::before,
.ct-header .menu > .np-theme-toggle-item::after {
	content: none;
}

/* The drawer gets its own, labelled toggle (see layer 3). The menu copy is
   hidden there because the drawer menu <ul> has no .menu class. */
.ct-panel .np-theme-toggle-item {
	display: none;
}

/* Mobile drawer row. The drawer is dark in both colour modes, so the
   toggle always uses the "on dark" treatment here. */
.np-theme-panel-row {
	--np-toggle-track: rgba(255, 255, 255, 0.14);
	--np-toggle-track-border: rgba(255, 255, 255, 0.22);
	--np-toggle-icon: rgba(255, 255, 255, 0.55);
	--np-toggle-active-icon: #0d1319;
	--np-toggle-thumb: #eef3fa;
	--np-focus-ring: #8bbcff;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

.np-theme-panel-row__label {
	font-size: 0.95em;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Compact header (Blocksy switches below 1000px): the same toggle is
   mounted next to the menu trigger. Absolutely positioned so it never
   causes a layout shift. */
#header [data-device="mobile"] .ct-container {
	position: relative;
}

.np-mobile-toggle {
	position: absolute;
	top: 50%;
	right: 58px;
	display: flex;
	align-items: center;
	transform: translateY(-50%);
	z-index: 2;
}

.np-mobile-toggle .np-theme-toggle {
	padding: 6px 0;
}

.np-mobile-toggle .np-theme-toggle__label {
	display: none;
}

@media (max-width: 400px) {
	.np-mobile-toggle {
		right: 50px;
	}
}

.np-theme-toggle__label {
	font-size: 0.95em;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   2. Dark theme tokens
   --------------------------------------------------------------------------
   Blocksy exposes an eight colour palette plus a set of semantic tokens.
   Remapping the palette here re-colours header, navigation, cards, hero,
   footer, sidebar and forms in one place.
   -------------------------------------------------------------------------- */

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

	/* Palette */
	--theme-palette-color-1: #6aa6ff; /* accents / links */
	--theme-palette-color-2: #8dbcff; /* accent hover */
	--theme-palette-color-3: #c8d3e0; /* body text */
	--theme-palette-color-4: #edf2f7; /* headings */
	--theme-palette-color-5: #dfe7f0; /* light text on dark art */
	--theme-palette-color-6: #121a23; /* footer / hero surface */
	--theme-palette-color-7: #0d1319; /* page background */
	--theme-palette-color-8: #18212c; /* cards / content surface */

	/* Semantic tokens */
	--theme-text-color: var(--theme-palette-color-3);
	--theme-headings-color: var(--theme-palette-color-4);
	--theme-link-initial-color: var(--theme-palette-color-1);
	--theme-link-hover-color: var(--theme-palette-color-2);
	--theme-border-color: #26313f;
	--theme-selection-text-color: #08111c;
	--theme-selection-background-color: #6aa6ff;

	/* Dropdowns default to palette-4, which is a light colour in dark mode. */
	--dropdown-background-color: #111a24;

	/* Buttons keep a deeper accent so white button text stays readable. */
	--theme-button-background-initial-color: #2b6fe0;
	--theme-button-background-hover-color: #3d82f5;
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;

	/* Forms */
	--theme-form-text-initial-color: #e6edf5;
	--theme-form-text-focus-color: #ffffff;
	--theme-form-field-border-initial-color: #2f3b4a;
	--theme-form-field-border-focus-color: #6aa6ff;

	/* Toggle, on dark surfaces */
	--np-toggle-track: rgba(255, 255, 255, 0.12);
	--np-toggle-track-border: rgba(255, 255, 255, 0.20);
	--np-toggle-icon: rgba(255, 255, 255, 0.55);
	--np-toggle-active-icon: #0d1319;
	--np-toggle-thumb: #e8eef7;
	--np-focus-ring: #8bbcff;
}

/* --------------------------------------------------------------------------
   3. Component fixes
   -------------------------------------------------------------------------- */

/* The middle header row is hard-coded to #ffffff in the generated CSS. */
html[data-theme="dark"] [data-header*="type-1"] .ct-header [data-row*="middle"] {
	background-color: var(--theme-palette-color-8);
}

/* The dark utility row is kept, just aligned with the darker palette. */
html[data-theme="dark"] [data-header*="type-1"] .ct-header [data-row*="top"] {
	background-color: #111a24;
}

/* Header button element and search submit hard-code palette-1 as their
   background. Use the deeper accent so white labels stay readable. */
html[data-theme="dark"] [data-header*="type-1"] .ct-header [data-id="button"] .ct-button {
	--theme-button-background-initial-color: #2b6fe0;
	--theme-button-background-hover-color: #3d82f5;
	--theme-button-text-initial-color: #ffffff;
	--theme-button-text-hover-color: #ffffff;
}

html[data-theme="dark"] #search-modal .ct-search-form {
	--theme-button-background-initial-color: #2b6fe0;
	--theme-button-background-hover-color: #3d82f5;
}

/* The logo is a dark PNG on transparency — render it white in dark mode. */
html[data-theme="dark"] .site-logo-container img {
	filter: brightness(0) invert(1);
}

/* Cards need a little separation from the page background. */
html[data-theme="dark"] :is(.entry-card, .ct-featured-image, .ct-related-posts .entry-card) {
	box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

/* Trending strip: background and pattern are hard-coded. */
html[data-theme="dark"] .ct-trending-block {
	background-color: #17212c;
	background-image: none;
}

/* Cookie notice uses a light button treatment by default. */
html[data-theme="dark"] .cookie-notification .ct-cookies-decline-button {
	--theme-button-text-initial-color: #dbe5f0;
	--theme-button-text-hover-color: #ffffff;
	--theme-button-background-initial-color: rgba(255, 255, 255, 0.08);
	--theme-button-background-hover-color: rgba(255, 255, 255, 0.16);
}

/* Forms inside content and widgets (search and header forms keep the
   parent theme's underline style). */
html[data-theme="dark"] :is(.entry-content, .ct-sidebar, .ct-widget, .wpforms-container) :is(
		input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
		textarea,
		select
	) {
	background-color: #0f1721;
	color: var(--theme-text-color);
	border-color: var(--theme-form-field-border-initial-color);
}

html[data-theme="dark"] ::placeholder {
	color: #8fa0b2;
	opacity: 1;
}

/* Editorial content: borders, quotes, code and tables. */
html[data-theme="dark"] .entry-content :is(blockquote, pre, code, kbd, table, th, td, hr, .wp-block-separator) {
	border-color: var(--theme-border-color);
}

html[data-theme="dark"] .entry-content :is(pre, code, kbd) {
	background-color: #0f1721;
}

html[data-theme="dark"] .entry-content :is(th, td) {
	border-color: var(--theme-border-color);
}

/* Images and embeds sit on a dark canvas — soften very bright media. */
html[data-theme="dark"] .entry-content :is(img, iframe, video) {
	opacity: 0.94;
}

/* --------------------------------------------------------------------------
   4. Optional colour transition (respects reduced motion)
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html.np-theme-animating body,
	html.np-theme-animating .ct-header [data-row],
	html.np-theme-animating .ct-footer,
	html.np-theme-animating .entry-card,
	html.np-theme-animating .ct-widget {
		transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
	}
}

@media (prefers-reduced-motion: reduce) {
	.np-theme-toggle__track,
	.np-theme-toggle__icon,
	.np-theme-toggle__thumb {
		transition: none;
	}

	html.np-theme-animating body,
	html.np-theme-animating .ct-header [data-row],
	html.np-theme-animating .ct-footer,
	html.np-theme-animating .entry-card,
	html.np-theme-animating .ct-widget {
		transition: none;
	}
}