/**
 * Shared light/dark appearance for wenpai-* sites (kit).
 * Dark mode flips theme.json semantic tokens so has-*-color blocks follow.
 * Brand accent dark values: child assets/css/appearance-brand.css
 * Pattern: wptea / cocoBook html.cb-dark.
 */

html {
	color-scheme: light;
}

html.wenpai-dark {
	color-scheme: dark;
}

/* Toggle — icon only */
.wenpai-appearance-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-inline-start: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
	flex-shrink: 0;
}

.wenpai-appearance-toggle:hover,
.wenpai-appearance-toggle:focus-visible {
	outline: none;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.wenpai-appearance-toggle__icon {
	display: none;
}

.wenpai-appearance-toggle[data-mode="light"] .wenpai-appearance-toggle__icon[data-icon="sun"],
.wenpai-appearance-toggle[data-mode="dark"] .wenpai-appearance-toggle__icon[data-icon="moon"] {
	display: block;
}

.wenpai-appearance-toggle-fallback {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 1000;
}

header.site-header .wenpai-appearance-toggle,
.wp-block-template-part .wenpai-appearance-toggle {
	align-self: center;
}

/* Nav + toggle stay one flex cluster so header space-between stays title | controls */
.wenpai-appearance-nav-cluster {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	min-width: 0;
}

/*
 * Semantic palette flip. Named black/white stay as authored.
 * Brand primary/accent defaults are lifted neutrals; children override.
 */
html.wenpai-dark {
	--wp--preset--color--base: #1c1c1c;
	--wp--preset--color--contrast: #e8e8e8;
	--wp--preset--color--neutral: #242424;
	--wp--preset--color--quaternary: #2a2a2a;
	--wp--preset--color--primary: #9ca3af;
	--wp--preset--color--secondary: #d1d5db;
	--wp--preset--color--tertiary: #e5e7eb;
	--wp--preset--color--accent: #9ca3af;
	--wp--preset--color--accent-80: #9ca3afcc;
	--wp--preset--color--accent-60: #9ca3af99;
	--wp--preset--color--accent-50: #9ca3af80;
	--wp--preset--color--accent-20: #9ca3af33;
	--wp--preset--color--accent-10: #9ca3af1a;
	--wenpai-link: #8ab4ff;
	--wenpai-muted: #b0b0b0;
	--wenpai-line: rgba(255, 255, 255, 0.18);
}

html.wenpai-dark body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

html.wenpai-dark .has-base-color {
	color: #e8e8e8 !important;
}

html.wenpai-dark a:where(:not(.wp-element-button)) {
	color: var(--wenpai-link);
}

html.wenpai-dark a:where(:not(.wp-element-button)):hover {
	color: #b3d0ff;
}

html.wenpai-dark .wp-block-navigation a,
html.wenpai-dark .wp-block-navigation .wp-block-navigation-item__content,
html.wenpai-dark .wp-block-site-title a,
html.wenpai-dark .wp-block-loginout a,
html.wenpai-dark .wp-block-post-title a,
html.wenpai-dark .wp-block-post-author-name a,
html.wenpai-dark .wp-block-post-terms a,
html.wenpai-dark .wp-block-post-date a,
html.wenpai-dark .wenpai-appearance-toggle,
html.wenpai-dark .has-base-color a:where(:not(.wp-element-button)),
html.wenpai-dark .wp-block-cover .wp-block-heading a:where(:not(.wp-element-button)),
html.wenpai-dark .wp-block-cover__inner-container a:where(:not(.wp-element-button)) {
	color: #e8e8e8;
}

html.wenpai-dark .has-base-color a:where(:not(.wp-element-button)):hover,
html.wenpai-dark .wp-block-cover .wp-block-heading a:where(:not(.wp-element-button)):hover,
html.wenpai-dark .wp-block-cover__inner-container a:where(:not(.wp-element-button)):hover {
	color: #fff;
}

html.wenpai-dark .wp-block-post-author-name a:hover,
html.wenpai-dark .wp-block-post-terms a:hover,
html.wenpai-dark .wp-block-navigation a:hover,
html.wenpai-dark .wp-block-loginout a:hover {
	color: var(--wenpai-link);
}

html.wenpai-dark .wp-block-post-date,
html.wenpai-dark .wp-block-post-author-name,
html.wenpai-dark .wp-block-post-terms,
html.wenpai-dark .wp-block-latest-posts__post-date,
html.wenpai-dark .wp-block-latest-comments__comment-date {
	color: var(--wenpai-muted);
}

html.wenpai-dark .has-contrast-background-color,
html.wenpai-dark .has-contrast-background-color p,
html.wenpai-dark .has-contrast-background-color li,
html.wenpai-dark .has-contrast-background-color .wp-block-heading:not(.has-base-color) {
	color: #c8c8c8;
}

/* Logo wordmarks authored as dark ink */
html.wenpai-dark .wp-block-site-logo img,
html.wenpai-dark .custom-logo {
	filter: invert(1) hue-rotate(180deg);
}

html.wenpai-dark input,
html.wenpai-dark textarea,
html.wenpai-dark select {
	background-color: #242424;
	color: #e8e8e8;
	border-color: #3a3a3a;
}

html.wenpai-dark input::placeholder,
html.wenpai-dark textarea::placeholder {
	color: #a1a1a1;
}

html.wenpai-dark hr,
html.wenpai-dark .wp-block-separator:not(.is-style-dots) {
	border-color: var(--wenpai-line);
	color: var(--wenpai-line);
	background-color: var(--wenpai-line);
}

/* Cover / contrast bars: keep dark surfaces after token flip.
 * Exclude buttons — higher-specificity cover rules were beating ghost CTAs
 * and leaving black-brick hero buttons (2026-11-07 ecosite audit). */
html.wenpai-dark .wp-block-cover__background.has-contrast-background-color,
html.wenpai-dark .wp-block-cover .has-contrast-background-color:not(.wp-element-button):not(.wp-block-button__link),
html.wenpai-dark .wp-block-group.has-contrast-background-color:not(.has-base-color):not(.wp-element-button):not(.wp-block-button__link),
html.wenpai-dark .wp-block-columns.has-contrast-background-color:not(.wp-element-button):not(.wp-block-button__link) {
	background-color: #0a0a0a !important;
}

html.wenpai-dark pre,
html.wenpai-dark .wp-block-code,
html.wenpai-dark .wp-block-preformatted {
	background-color: #242424;
	color: #e8e8e8;
}

html.wenpai-dark .wp-block-table td,
html.wenpai-dark .wp-block-table th {
	border-color: rgba(255, 255, 255, 0.12);
}

html.wenpai-dark .wp-block-post-title,
html.wenpai-dark .wp-block-post-title a,
html.wenpai-dark .wp-block-heading:not(.has-base-color):not(.has-primary-color):not(.has-secondary-color) {
	color: #e8e8e8 !important;
}

/*
 * Dark buttons (ecosite heros often use default fill / contrast|neutral bg,
 * not has-primary-background-color). Ghost-all washed them out; tea keeps its
 * own child CSS (this module skips when wenpai_wptea_appearance_boot exists).
 *
 * - Default / fill / solid theme backgrounds → brand primary + dark ink
 * - is-style-outline / explicit transparent → ghost stroke
 * - has-primary|accent-background → same primary fill (explicit keep)
 */
html.wenpai-dark .wp-element-button,
html.wenpai-dark .wp-block-button__link,
html.wenpai-dark .wp-block-cover .wp-element-button,
html.wenpai-dark .wp-block-cover .wp-block-button__link {
	background-color: var(--wp--preset--color--primary) !important;
	color: #0a0a0a !important;
	border: 1px solid transparent !important;
	box-shadow: none !important;
}

html.wenpai-dark .wp-element-button:hover,
html.wenpai-dark .wp-block-button__link:hover,
html.wenpai-dark .wp-block-cover .wp-element-button:hover,
html.wenpai-dark .wp-block-cover .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 85%, #fff) !important;
	border-color: transparent !important;
	color: #0a0a0a !important;
}

html.wenpai-dark .has-primary-background-color.wp-element-button,
html.wenpai-dark .has-primary-background-color.wp-block-button__link,
html.wenpai-dark .has-accent-background-color.wp-element-button,
html.wenpai-dark .has-accent-background-color.wp-block-button__link,
html.wenpai-dark .wp-block-cover .has-primary-background-color.wp-element-button,
html.wenpai-dark .wp-block-cover .has-primary-background-color.wp-block-button__link,
html.wenpai-dark .wp-block-cover .has-accent-background-color.wp-element-button,
html.wenpai-dark .wp-block-cover .has-accent-background-color.wp-block-button__link {
	background-color: var(--wp--preset--color--primary) !important;
	color: #0a0a0a !important;
	border-color: transparent !important;
}

/* Outline / ghost only — keep stroke, do not brand-fill */
html.wenpai-dark .wp-block-button.is-style-outline .wp-block-button__link,
html.wenpai-dark .wp-block-button[class*="is-style-outline"] .wp-block-button__link,
html.wenpai-dark .wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link,
html.wenpai-dark .wp-block-cover .wp-block-button[class*="is-style-outline"] .wp-block-button__link,
html.wenpai-dark .wp-element-button[style*="background:transparent"],
html.wenpai-dark .wp-element-button[style*="background-color:transparent"],
html.wenpai-dark .wp-block-button__link[style*="background:transparent"],
html.wenpai-dark .wp-block-button__link[style*="background-color:transparent"],
html.wenpai-dark .wp-element-button[style*="background: transparent"],
html.wenpai-dark .wp-element-button[style*="background-color: transparent"],
html.wenpai-dark .wp-block-button__link[style*="background: transparent"],
html.wenpai-dark .wp-block-button__link[style*="background-color: transparent"] {
	background-color: transparent !important;
	color: #e8e8e8 !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	box-shadow: none !important;
}

html.wenpai-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
html.wenpai-dark .wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover,
html.wenpai-dark .wp-block-cover .wp-block-button.is-style-outline .wp-block-button__link:hover,
html.wenpai-dark .wp-block-cover .wp-block-button[class*="is-style-outline"] .wp-block-button__link:hover,
html.wenpai-dark .wp-element-button[style*="background:transparent"]:hover,
html.wenpai-dark .wp-element-button[style*="background-color:transparent"]:hover,
html.wenpai-dark .wp-block-button__link[style*="background:transparent"]:hover,
html.wenpai-dark .wp-block-button__link[style*="background-color:transparent"]:hover,
html.wenpai-dark .wp-element-button[style*="background: transparent"]:hover,
html.wenpai-dark .wp-element-button[style*="background-color: transparent"]:hover,
html.wenpai-dark .wp-block-button__link[style*="background: transparent"]:hover,
html.wenpai-dark .wp-block-button__link[style*="background-color: transparent"]:hover {
	background-color: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	color: #fff !important;
}

/* Photo groups: keep image via invert (same rule as tea fog modules) */
html.wenpai-dark .wp-block-group.has-background[style*="background-image"] {
	filter: invert(1);
}

html.wenpai-dark .wp-block-group.has-background[style*="background-image"] > * {
	filter: invert(1);
}