/* ==========================================================================
   tpl_magazin - Dark Theme
   Activated by:
   1. [data-theme="dark"] - manual toggle via JS
   2. @media (prefers-color-scheme: dark) - automatic system detection
   ========================================================================== */

/* --------------------------------------------------------------------------
   Manual dark mode toggle
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
	--color-body-bg: #0f1117;
	--color-surface: #1a1d27;
	--color-surface-raised: #222533;

	--color-text: #e1e4ea;
	--color-text-secondary: #b0b5c1;
	--color-text-muted: #8891a5;
	--color-heading: #f0f2f5;

	--color-border: #2d3040;
	--color-border-light: #252838;

	--color-gray-50: #1e2130;
	--color-gray-100: #252838;
	--color-gray-200: #2d3040;
	--color-gray-300: #3a3e52;
	--color-gray-400: #4d5268;
	--color-gray-500: #6b7185;
	--color-gray-600: #8a90a3;
	--color-gray-700: #b0b5c1;
	--color-gray-800: #d4d7df;
	--color-gray-900: #e8eaef;

	--color-primary-light: rgba(var(--color-primary-rgb), 0.15);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

	color-scheme: dark;
}

/* Logo dark variant (manual toggle) - handled in template.css via [data-theme="dark"] */

/* Alerts in dark mode */
[data-theme="dark"] .alert-message,
[data-theme="dark"] .alert-info {
	background: #163347;
	border-color: #1c4a66;
	color: #7ec8e3;
}

[data-theme="dark"] .alert-success {
	background: #14352a;
	border-color: #1a5038;
	color: #6ecf97;
}

[data-theme="dark"] .alert-warning {
	background: #3d3314;
	border-color: #574b1d;
	color: #f0c75e;
}

[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
	background: #3c1a1e;
	border-color: #55252b;
	color: #f0868e;
}

/* Badges in dark mode */
[data-theme="dark"] .wp-badge--success {
	background: rgba(39, 174, 96, 0.15);
	color: #6ecf97;
}

[data-theme="dark"] .wp-badge--warning {
	background: rgba(243, 156, 18, 0.15);
	color: #f0c75e;
}

[data-theme="dark"] .wp-badge--danger {
	background: rgba(231, 76, 60, 0.15);
	color: #f0868e;
}

/* Footer in dark mode - slightly different shade */
[data-theme="dark"] .wp-footer {
	background: #0a0c12;
	color: #9ca3af;
}

[data-theme="dark"] .wp-footer a {
	color: #9ca3af;
}

[data-theme="dark"] .wp-footer a:hover {
	color: #fff;
}

[data-theme="dark"] .wp-footer__bottom {
	border-top-color: #1e2130;
}

/* Topbar in dark mode — keep dark bg + light text (gray vars invert) */
[data-theme="dark"] .wp-topbar {
	background: #0a0c12;
	color: #9ca3af;
}

[data-theme="dark"] .wp-topbar a,
[data-theme="dark"] .wp-topbar .nav.menu > li > a,
[data-theme="dark"] .wp-topbar .nav.menu > li > .separator {
	color: #9ca3af;
}

[data-theme="dark"] .wp-topbar a:hover,
[data-theme="dark"] .wp-topbar .nav.menu > li > a:hover {
	color: #fff;
}

[data-theme="dark"] .wp-topbar .nav.menu > li + li::before {
	background: #2d3040;
}

/* Buttons: dark text on bright primary bg (all portal colors are too light for white) */
[data-theme="dark"] .wp-btn--primary,
[data-theme="dark"] .wp-btn--primary:hover {
	color: #0f1117;
}

[data-theme="dark"] .wp-btn--outline:hover {
	color: #0f1117;
}

[data-theme="dark"] .wp-articles__readmore {
	color: #0f1117;
}

[data-theme="dark"] .wp-articles__readmore:hover {
	color: #0f1117;
}

/* Form elements */
[data-theme="dark"] .wp-input,
[data-theme="dark"] .wp-select,
[data-theme="dark"] .wp-textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
	background: var(--color-gray-50);
	border-color: var(--color-border);
	color: var(--color-text);
}

/* Table */
[data-theme="dark"] th {
	background: var(--color-gray-50);
}

/* Hero section - darken in dark mode */
[data-theme="dark"] .wp-hero:not(.wp-hero--bg) {
	background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.8), rgba(var(--color-primary-rgb), 0.6));
}

/* Hero with background image - stronger overlay in dark mode */
[data-theme="dark"] .wp-hero--overlay-gradient::before {
	background: linear-gradient(
		135deg,
		rgba(var(--color-primary-rgb), 0.9) 0%,
		rgba(var(--color-primary-rgb), 0.75) 50%,
		rgba(0, 0, 0, 0.6) 100%
	);
}

[data-theme="dark"] .wp-hero--overlay-dark::before {
	background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .wp-hero--overlay-light::before {
	background: rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .wp-hero--overlay-light {
	color: var(--color-white);
}

[data-theme="dark"] .wp-hero--overlay-light h1,
[data-theme="dark"] .wp-hero--overlay-light h2,
[data-theme="dark"] .wp-hero--overlay-light h3,
[data-theme="dark"] .wp-hero--overlay-light a {
	color: var(--color-white);
}

/* Offcanvas in dark mode */
[data-theme="dark"] .wp-offcanvas-backdrop {
	background: rgba(0, 0, 0, 0.7);
}

/* Pagination — dark text on bright primary bg */
[data-theme="dark"] .pagination li a:hover,
[data-theme="dark"] .wp-pagination li a:hover {
	color: #0f1117;
}

[data-theme="dark"] .pagination li .active,
[data-theme="dark"] .pagination li.active span,
[data-theme="dark"] .pagination li.active a,
[data-theme="dark"] .wp-pagination li .active,
[data-theme="dark"] .wp-pagination li.active span,
[data-theme="dark"] .wp-pagination li.active a {
	color: #0f1117;
}

/* Well / login boxes in dark mode */
[data-theme="dark"] .wp-content .well {
	background: var(--color-surface-raised);
	border-color: var(--color-border);
}

/* JA Content Listing dark mode */
[data-theme="dark"] .mod_jacontentlisting {
	--light-reverse: var(--color-surface);
	--border-color: var(--color-border);
	--dark-reverse: var(--color-heading);
	--text-color: var(--color-text);
	--body-text-color: var(--color-text);
	--body-link-color: var(--color-heading);
	--body-link-hover-color: var(--color-primary);
	--heading-text-color: var(--color-heading);
	--heading-border-color: var(--color-border);
	--gray-900: var(--color-heading);
	--color-desc: var(--color-text-secondary);
	--meta-color: var(--color-text-muted);
	--meta-link-color: var(--color-text-secondary);
}

[data-theme="dark"] .jacl-item__title a {
	color: var(--color-heading);
}

[data-theme="dark"] .jacl-item__introtext {
	color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Automatic dark mode (system preference)
   Only applies when data-theme-auto="true" and no manual override
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) {
		--color-body-bg: #0f1117;
		--color-surface: #1a1d27;
		--color-surface-raised: #222533;

		--color-text: #e1e4ea;
		--color-text-secondary: #b0b5c1;
		--color-text-muted: #8891a5;
		--color-heading: #f0f2f5;

		--color-border: #2d3040;
		--color-border-light: #252838;

		--color-gray-50: #1e2130;
		--color-gray-100: #252838;
		--color-gray-200: #2d3040;
		--color-gray-300: #3a3e52;
		--color-gray-400: #4d5268;
		--color-gray-500: #6b7185;
		--color-gray-600: #8a90a3;
		--color-gray-700: #b0b5c1;
		--color-gray-800: #d4d7df;
		--color-gray-900: #e8eaef;

		--color-primary-light: rgba(var(--color-primary-rgb), 0.15);

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
		--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);

		color-scheme: dark;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-icon-sun { display: none; }
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-icon-moon { display: block; }

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-footer {
		background: #0a0c12;
		color: #9ca3af;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-footer a {
		color: #9ca3af;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-footer a:hover {
		color: #fff;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-footer__bottom {
		border-top-color: #1e2130;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-topbar {
		background: #0a0c12;
		color: #9ca3af;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-topbar a,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-topbar .nav.menu > li > a,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-topbar .nav.menu > li > .separator {
		color: #9ca3af;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-topbar a:hover,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-topbar .nav.menu > li > a:hover {
		color: #fff;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-topbar .nav.menu > li + li::before {
		background: #2d3040;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-btn--primary,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-btn--primary:hover {
		color: #0f1117;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-btn--outline:hover {
		color: #0f1117;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-articles__readmore,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-articles__readmore:hover {
		color: #0f1117;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero:not(.wp-hero--bg) {
		background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.8), rgba(var(--color-primary-rgb), 0.6));
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero--overlay-gradient::before {
		background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.9) 0%, rgba(var(--color-primary-rgb), 0.75) 50%, rgba(0, 0, 0, 0.6) 100%);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero--overlay-dark::before {
		background: rgba(0, 0, 0, 0.7);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero--overlay-light::before {
		background: rgba(0, 0, 0, 0.55);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero--overlay-light,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero--overlay-light h1,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero--overlay-light h2,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero--overlay-light h3,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-hero--overlay-light a {
		color: var(--color-white);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-message,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-info {
		background: #163347;
		border-color: #1c4a66;
		color: #7ec8e3;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-success {
		background: #14352a;
		border-color: #1a5038;
		color: #6ecf97;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-warning {
		background: #3d3314;
		border-color: #574b1d;
		color: #f0c75e;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-error,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .alert-danger {
		background: #3c1a1e;
		border-color: #55252b;
		color: #f0868e;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="text"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="email"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="password"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="search"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) input[type="number"],
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) select,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) textarea {
		background: #1e2130;
		border-color: #2d3040;
		color: #e1e4ea;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-offcanvas-backdrop {
		background: rgba(0, 0, 0, 0.7);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) th {
		background: #1e2130;
	}

	/* Pagination */
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .pagination li a:hover,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-pagination li a:hover {
		color: #0f1117;
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .pagination li .active,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .pagination li.active span,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .pagination li.active a,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-pagination li .active,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-pagination li.active span,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-pagination li.active a {
		color: #0f1117;
	}

	/* Well / login boxes */
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-content .well {
		background: #222533;
		border-color: #2d3040;
	}

	/* Logo auto dark mode */
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-logo--light {
		display: none;
	}
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-logo--dark.wp-logo--full {
		display: inline;
	}
}

/* CookieConsent dark */
[data-theme="dark"] #cc-main {
	--cc-bg: var(--color-gray-50);
	--cc-primary-color: var(--color-heading);
	--cc-secondary-color: var(--color-text-secondary);
	--cc-btn-primary-bg: var(--color-primary);
	--cc-btn-primary-color: var(--color-white);
	--cc-btn-primary-hover-bg: var(--color-primary-hover);
	--cc-btn-secondary-bg: var(--color-gray-800);
	--cc-btn-secondary-color: var(--color-gray-300);
	--cc-btn-secondary-border-color: var(--color-gray-700);
	--cc-btn-secondary-hover-bg: var(--color-gray-700);
	--cc-btn-secondary-hover-color: var(--color-white);
	--cc-btn-secondary-hover-border-color: var(--color-gray-600);
	--cc-separator-border-color: var(--color-gray-700);
	--cc-toggle-off-bg: var(--color-gray-600);
	--cc-toggle-readonly-bg: var(--color-gray-700);
	--cc-cookie-category-block-bg: var(--color-gray-800);
	--cc-cookie-category-block-border: var(--color-gray-700);
	--cc-cookie-category-block-hover-bg: var(--color-gray-700);
	--cc-cookie-category-block-hover-border: var(--color-gray-600);
	--cc-cookie-category-expanded-block-bg: transparent;
	--cc-cookie-category-expanded-block-hover-bg: var(--color-gray-700);
	--cc-footer-bg: var(--color-gray-900);
	--cc-footer-color: var(--color-gray-400);
	--cc-footer-border-color: var(--color-gray-700);
}

[data-theme="dark"] #cc-main .pm__section:not(:first-child) {
	border-color: var(--color-gray-700);
}

[data-theme="dark"] #cc-main .pm__section:not(:first-child):hover {
	background: var(--color-gray-800);
	border-color: var(--color-gray-600);
}

/* Share module dark */
[data-theme="dark"] .wp-share__link:hover {
	background: var(--color-gray-800);
}

[data-theme="dark"] .wp-share--labels .wp-share__link {
	border-color: var(--color-gray-700);
}

/* FAQ module dark */
[data-theme="dark"] .wp-faq__item {
	border-color: var(--color-gray-700);
}

[data-theme="dark"] .wp-faq__question {
	color: var(--color-text);
}

/* Articles module dark */
[data-theme="dark"] .wp-articles__card,
[data-theme="dark"] .wp-articles__hero,
[data-theme="dark"] .wp-articles__list-item {
	border-color: var(--color-border);
}

[data-theme="dark"] .wp-articles__image,
[data-theme="dark"] .wp-articles__hero-image,
[data-theme="dark"] .wp-articles__list-image {
	background: var(--color-gray-800);
}

/* Auto dark CookieConsent */
@media (prefers-color-scheme: dark) {
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) #cc-main {
		--cc-bg: var(--color-gray-50);
		--cc-primary-color: var(--color-heading);
		--cc-secondary-color: var(--color-text-secondary);
		--cc-btn-primary-bg: var(--color-primary);
		--cc-btn-primary-color: var(--color-white);
		--cc-btn-primary-hover-bg: var(--color-primary-hover);
		--cc-btn-secondary-bg: var(--color-gray-800);
		--cc-btn-secondary-color: var(--color-gray-300);
		--cc-btn-secondary-border-color: var(--color-gray-700);
		--cc-btn-secondary-hover-bg: var(--color-gray-700);
		--cc-btn-secondary-hover-color: var(--color-white);
		--cc-btn-secondary-hover-border-color: var(--color-gray-600);
		--cc-separator-border-color: var(--color-gray-700);
		--cc-toggle-off-bg: var(--color-gray-600);
		--cc-toggle-readonly-bg: var(--color-gray-700);
		--cc-cookie-category-block-bg: var(--color-gray-800);
		--cc-cookie-category-block-border: var(--color-gray-700);
		--cc-cookie-category-block-hover-bg: var(--color-gray-700);
		--cc-cookie-category-block-hover-border: var(--color-gray-600);
		--cc-cookie-category-expanded-block-bg: transparent;
		--cc-cookie-category-expanded-block-hover-bg: var(--color-gray-700);
		--cc-footer-bg: var(--color-gray-900);
		--cc-footer-color: var(--color-gray-400);
		--cc-footer-border-color: var(--color-gray-700);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) #cc-main .pm__section:not(:first-child) {
		border-color: var(--color-gray-700);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) #cc-main .pm__section:not(:first-child):hover {
		background: var(--color-gray-800);
		border-color: var(--color-gray-600);
	}
}

/* Auto dark JA Content Listing */
@media (prefers-color-scheme: dark) {
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .mod_jacontentlisting {
		--light-reverse: var(--color-surface);
		--border-color: var(--color-border);
		--dark-reverse: var(--color-heading);
		--text-color: var(--color-text);
		--body-text-color: var(--color-text);
		--body-link-color: var(--color-heading);
		--body-link-hover-color: var(--color-primary);
		--heading-text-color: var(--color-heading);
		--heading-border-color: var(--color-border);
		--gray-900: var(--color-heading);
		--color-desc: var(--color-text-secondary);
		--meta-color: var(--color-text-muted);
		--meta-link-color: var(--color-text-secondary);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .jacl-item__title a {
		color: var(--color-heading);
	}

	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .jacl-item__introtext {
		color: var(--color-text-secondary);
	}
}

/* Auto dark Share + FAQ + Articles */
@media (prefers-color-scheme: dark) {
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-share__link:hover {
		background: var(--color-gray-800);
	}
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-share--labels .wp-share__link {
		border-color: var(--color-gray-700);
	}
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-faq__item {
		border-color: var(--color-gray-700);
	}
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-articles__card,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-articles__hero,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-articles__list-item {
		border-color: var(--color-border);
	}
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-articles__image,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-articles__hero-image,
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-articles__list-image {
		background: var(--color-gray-800);
	}
}

/* Auto dark + mobile logo */
@media (prefers-color-scheme: dark) and (max-width: 767px) {
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-logo--full {
		display: none;
	}
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-logo--mobile.wp-logo--light {
		display: none;
	}
	html[data-theme-auto="true"]:not([data-theme="light"]):not([data-theme="dark"]) .wp-logo--mobile.wp-logo--dark {
		display: inline;
	}
}