/* ------------------------------------------------------------------ */
/* TriKdanG Theme Toggle — CSS custom properties                       */
/* Edit the two blocks below to match your brand colors.               */
/* ------------------------------------------------------------------ */

/* Defaults (no data-theme attribute yet, e.g. JS disabled) match the
   site's current dark-only look, so nothing shifts if JS never runs. */
:root {
	--tktt-bg-primary: #121316;
	--tktt-bg-surface: #1B1D22;
	--tktt-text-primary: #f5f1e6;
	--tktt-text-muted: #9a968c;
	--tktt-border: #3a3a3d;
	--tktt-accent: #e11d2e;
	--tktt-icon-color: #ffffff;

	/* Kept for back-compat with earlier versions of this file. */
	--tktt-bg: var( --tktt-bg-primary );
	--tktt-text: var( --tktt-text-primary );
}

:root[data-theme='dark'] {
	--tktt-bg-primary: #121316;
	--tktt-bg-surface: #1B1D22;
	--tktt-text-primary: #f5f1e6;
	--tktt-text-muted: #9a968c;
	--tktt-border: #3a3a3d;
	--tktt-accent: #e11d2e;
	--tktt-icon-color: #ffffff;

	--tktt-bg: var( --tktt-bg-primary );
	--tktt-text: var( --tktt-text-primary );
}

:root[data-theme='light'] {
	--tktt-bg-primary: #ffffff;
	--tktt-bg-surface: #f4f4f5;
	--tktt-text-primary: #16161a;
	--tktt-text-muted: #6b6b6b;
	--tktt-border: #d8d8db;
	--tktt-accent: #e11d2e;
	--tktt-icon-color: #16161a;

	--tktt-bg: var( --tktt-bg-primary );
	--tktt-text: var( --tktt-text-primary );
}

/* Body-wide light/dark switch. We tried this before and it exposed a
   visible white seam between your full-width homepage sections —
   that turned out to be a separate, pre-existing WordPress bug (the
   same "block-gap margin-block-start" issue your theme notes mention
   fixing before on the stats bar): alignfull sections get an
   unwanted top margin between them, which was invisible before only
   because everything nearby was already dark. The rule right below
   neutralizes that margin so the seam doesn't show in either theme,
   which is what actually lets this color switch work safely. */
html {
	transition: background-color 0.2s ease, color 0.2s ease;
}

body {
	background-color: var( --tktt-bg ) !important;
	color: var( --tktt-text ) !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Fix: remove the unwanted gap WordPress adds between consecutive
   full-width ("alignfull") sections, which is what let the body
   background show through as a seam. */
.wp-site-blocks > .alignfull,
body > .alignfull,
.entry-content > .alignfull {
	margin-block-start: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Header layout                                                       */
/* ------------------------------------------------------------------ */

/* Spacing is no longer hardcoded here — since you now place this
   block yourself, use the block's own Spacing controls in the editor
   sidebar (margin) to set however much room you want around it. */

/* ------------------------------------------------------------------ */
/* Toggle button                                                       */
/* ------------------------------------------------------------------ */

/* The header used to be a fixed dark bar regardless of page theme, so
   the icon was pinned to white to stay legible against it. The header
   now switches with the rest of the site, so the icon needs to switch
   too — point it at the same page-wide icon-color variable used
   everywhere else (dark icon in light mode, white icon in dark mode). */
:root {
	--tktt-header-icon-color: var( --tktt-icon-color );
	--tktt-header-icon-hover: var( --tktt-accent );
}

.tktt-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var( --tktt-header-icon-color ) !important;
	transition: opacity 0.2s ease, transform 0.1s ease, color 0.2s ease;
}

.tktt-toggle-btn:hover {
	color: var( --tktt-header-icon-hover ) !important;
	opacity: 0.7;
}

.tktt-toggle-btn:active {
	transform: scale( 0.95 );
}

.tktt-toggle-btn svg {
	stroke: currentColor;
}

/* Show the sun icon in light mode, the moon icon in dark mode.
   Both states are spelled out explicitly (rather than one theme
   relying on "no rule = default") and forced with !important so
   nothing in the parent theme's own icon/svg CSS can silently hide
   these again. */
:root[data-theme='light'] .tktt-toggle-btn .tktt-icon-sun,
:root:not( [data-theme] ) .tktt-toggle-btn .tktt-icon-sun {
	display: flex !important;
}

:root[data-theme='light'] .tktt-toggle-btn .tktt-icon-moon,
:root:not( [data-theme] ) .tktt-toggle-btn .tktt-icon-moon {
	display: none !important;
}

:root[data-theme='dark'] .tktt-toggle-btn .tktt-icon-sun {
	display: none !important;
}

:root[data-theme='dark'] .tktt-toggle-btn .tktt-icon-moon {
	display: flex !important;
}

/* Block editor canvas preview only (the disabled placeholder button
   shown while editing the header template) — not used on the front
   end. */
.tktt-editor-preview .tktt-toggle-btn {
	opacity: 0.9;
	cursor: default;
}