/*
 * Claprocker Halloween 2026
 * Theme-unabhängiger Overlay-Look. Nur Systemschriften, keine externen Anfragen (DSGVO-freundlich).
 * Einzige Bewegung: das Kerzenflackern des Seitentitels (bei "Bewegung reduzieren" aus).
 */

html.cr-theme-halloween {
	color-scheme: dark;
	--hw-night: #1b1326;
	--hw-night-2: #251a35;
	--hw-deep: #100a19;
	--hw-line: #4a3a63;
	--hw-bone: #efe6d2;
	--hw-mist: #b9aec8;
	--hw-pumpkin: #f28a1f;
	--hw-slime: #9bd17a;
}

/* ---------- Grundfläche ---------- */
html.cr-theme-halloween body {
	background-color: var(--hw-night) !important;
	background-image: radial-gradient(ellipse at 50% -10%, rgba(242, 138, 31, 0.16), transparent 55%);
	background-repeat: no-repeat;
	color: var(--hw-bone) !important;
}

html.cr-theme-halloween body :is(.site, #page, #content, .site-content, .content-area, .wp-site-blocks, main, .site-main, article, .hentry, .widget, aside, .sidebar) {
	background-color: transparent !important;
}

html.cr-theme-halloween body :is(p, li, dd, dt, td, th, label, figcaption, cite, .entry-content) {
	color: var(--hw-bone);
}

html.cr-theme-halloween body :is(.entry-meta, .posted-on, .byline, .wp-block-post-date, time, small) {
	color: var(--hw-mist);
}

html.cr-theme-halloween ::selection {
	background: var(--hw-pumpkin);
	color: var(--hw-night);
}

/* ---------- Überschriften ---------- */
html.cr-theme-halloween body :is(h1, h2, h3, h4, h5, h6, .entry-title, .wp-block-post-title, .page-title, .widget-title) {
	font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--hw-bone);
}

html.cr-theme-halloween body :is(h1, h2, .entry-title, .wp-block-post-title, .page-title) {
	color: var(--hw-pumpkin);
	text-shadow: 0 0 0.5em rgba(242, 138, 31, 0.4);
}

html.cr-theme-halloween body :is(.entry-title, .wp-block-post-title) a {
	color: inherit;
}

/* ---------- Kopfbereich: der eine große Moment ---------- */
html.cr-theme-halloween body :is(.site-header, #masthead, header.wp-block-template-part, #header) {
	background-color: var(--hw-night-2) !important;
	border-bottom: 3px solid var(--hw-pumpkin) !important;
	box-shadow: 0 6px 24px -8px rgba(242, 138, 31, 0.5);
}

html.cr-theme-halloween body :is(.site-title, .wp-block-site-title) {
	font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-shadow: 0 0 0.4em rgba(242, 138, 31, 0.7), 0 0 1.2em rgba(242, 138, 31, 0.35);
	animation: hw-flicker 7s infinite;
}

html.cr-theme-halloween body :is(.site-title, .wp-block-site-title) a {
	color: var(--hw-pumpkin) !important;
}

/* ---------- Header-Logo: Halloween-Version ---------- */
html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container,
html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo a {
	position: relative;
	display: inline-block;
	overflow: visible;
	isolation: isolate;
}

html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo img {
	position: relative;
	z-index: 2;
	filter:
		brightness(0)
		saturate(100%)
		invert(57%)
		sepia(96%)
		saturate(1827%)
		hue-rotate(347deg)
		brightness(101%)
		contrast(91%)
		drop-shadow(0 0 5px rgba(242, 138, 31, 0.9))
		drop-shadow(0 0 12px rgba(155, 209, 122, 0.28));
	transform: rotate(-1.5deg) scale(1.03);
	transform-origin: center;
	animation: hw-logo-haunt 3.6s ease-in-out infinite;
}

/* Spinnennetz oben rechts am Logo. */
html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo a::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: -9px;
	right: -10px;
	width: 39px;
	aspect-ratio: 1;
	background: url("assets/halloween-logo-web.svg") center / contain no-repeat;
	opacity: 0.78;
	pointer-events: none;
	filter: drop-shadow(0 0 4px rgba(242, 138, 31, 0.32));
}

/* Kleines Kürbis-Abzeichen unten rechts. */
html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo a::after {
	content: "";
	position: absolute;
	z-index: 4;
	right: -8px;
	bottom: -7px;
	width: 25px;
	aspect-ratio: 64 / 60;
	background: url("assets/halloween-logo-pumpkin.svg") center / contain no-repeat;
	pointer-events: none;
	filter: drop-shadow(0 0 6px rgba(242, 138, 31, 0.75));
	animation: hw-logo-pumpkin 2.8s ease-in-out infinite;
}

@keyframes hw-logo-haunt {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.84; }
}

@keyframes hw-logo-pumpkin {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50% { transform: translateY(-2px) rotate(4deg); }
}

@keyframes hw-flicker {
	0%, 40%, 44%, 80%, 85%, 100% { opacity: 1; }
	41% { opacity: 0.7; }
	42% { opacity: 1; }
	43% { opacity: 0.85; }
	81% { opacity: 0.75; }
	83% { opacity: 1; }
}

/* ---------- Navigation ---------- */
html.cr-theme-halloween body :is(.site-header, #masthead, header.wp-block-template-part, #header) :is(nav, .wp-block-navigation, .main-navigation, .menu) a {
	color: var(--hw-bone);
}

html.cr-theme-halloween body :is(.site-header, #masthead, header.wp-block-template-part, #header) :is(nav, .wp-block-navigation, .main-navigation, .menu) a:is(:hover, :focus) {
	color: var(--hw-pumpkin);
}

/* ---------- Links ---------- */
html.cr-theme-halloween body a {
	color: var(--hw-pumpkin);
	text-underline-offset: 0.18em;
}

html.cr-theme-halloween body a:is(:hover, :focus) {
	color: var(--hw-slime);
}

html.cr-theme-halloween body :focus-visible {
	outline: 2px solid var(--hw-slime);
	outline-offset: 2px;
}

/* ---------- Buttons ---------- */
html.cr-theme-halloween body :is(
	button:not([aria-expanded]):not(.menu-toggle):not(.cr-theme-option):not(.hw-pumpkin-btn),
	input[type="submit"],
	input[type="button"],
	.button:not(.cr-theme-option),
	.wp-block-button__link,
	.wp-element-button,
	.more-link
) {
	background: var(--hw-pumpkin) !important;
	color: var(--hw-night) !important;
	border: 0 !important;
	border-radius: 0.35em;
	font-weight: 700;
	text-decoration: none;
}

html.cr-theme-halloween body :is(
	button:not([aria-expanded]):not(.menu-toggle):not(.cr-theme-option):not(.hw-pumpkin-btn),
	input[type="submit"],
	input[type="button"],
	.button:not(.cr-theme-option),
	.wp-block-button__link,
	.wp-element-button,
	.more-link
):is(:hover, :focus) {
	background: var(--hw-slime) !important;
	color: var(--hw-night) !important;
}

/* ---------- Formulare ---------- */
html.cr-theme-halloween body :is(
	input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
	textarea,
	select
) {
	background: var(--hw-night-2) !important;
	color: var(--hw-bone) !important;
	border: 1px solid var(--hw-line) !important;
}

html.cr-theme-halloween body :is(input, textarea, select)::placeholder {
	color: var(--hw-mist);
}

/* ---------- Zitate, Trenner, Code, Tabellen ---------- */
html.cr-theme-halloween body blockquote {
	background: var(--hw-night-2);
	color: var(--hw-bone);
	border-left: 4px solid var(--hw-pumpkin);
	padding: 1em 1.25em;
}

html.cr-theme-halloween body :is(hr, .wp-block-separator) {
	background: none !important;
	border: 0 !important;
	border-top: 2px dotted var(--hw-pumpkin) !important;
	height: 0;
	opacity: 1;
}

html.cr-theme-halloween body :is(code, pre, kbd) {
	background: var(--hw-night-2);
	color: var(--hw-slime);
}

html.cr-theme-halloween body :is(table, td, th) {
	border-color: var(--hw-line) !important;
}

/* ---------- Fußbereich ---------- */
html.cr-theme-halloween body :is(.site-footer, #colophon, footer.wp-block-template-part, #footer) {
	background-color: var(--hw-deep) !important;
	color: var(--hw-mist) !important;
	border-top: 3px solid var(--hw-pumpkin) !important;
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	html.cr-theme-halloween body :is(.site-title, .wp-block-site-title) {
		animation: none;
	}

	html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo img,
	html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo a::after {
		animation: none;
	}
}

@media (max-width: 767px) {
	html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo a::before {
		top: -6px;
		right: -7px;
		width: 31px;
	}

	html.cr-theme-halloween body header.elementor-location-header .elementor-widget-theme-site-logo a::after {
		right: -5px;
		bottom: -4px;
		width: 20px;
	}
}