/* ==================================================
   Seasonal skin: Día de los Muertos
   A candle-lit night in magenta, marigold orange, teal and purple; Yeseva One headlines,
   a marigold garland, drifting petals (skin-effects.js), a blooming marigold beside the
   first headline and a floral calavera. Joyful remembrance, distinct from Halloween.
   Loaded after skin-layout.css and skin-polish.css while this skin is active
   (data-skin-tone="dark" switches on the dark-page rules in skin-layout.css).
   ================================================== */

html[data-skin="dia-de-los-muertos"] {
	--sk-heading-weight: 400;
	--sk-heading-tracking: -.01em;
	--sk-card-border: 1px solid rgba(255, 255, 255, .1);
	--sk-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
	--sk-stripe: linear-gradient(90deg, var(--sk-highlight) 0 25%, var(--sk-accent-2) 0 50%, var(--sk-accent) 0 75%, var(--sk-accent-3) 0);
	--sk-glow-1: rgba(255, 140, 26, .16);
	--sk-glow-2: rgba(139, 92, 246, .16);
	--sk-hero-art: var(--sk-art-marigold);
	--sk-hero-art-size: min(22vw, 280px);
	color-scheme: dark;
}

/* A third, magenta glow lower on the page. */
html[data-skin="dia-de-los-muertos"] body {
	background-image:
		radial-gradient(ellipse 55% 45% at 85% 0, var(--sk-glow-1), transparent 70%),
		radial-gradient(ellipse 45% 40% at 0 40%, var(--sk-glow-2), transparent 70%),
		radial-gradient(ellipse 40% 35% at 70% 90%, rgba(242, 92, 168, .12), transparent 70%),
		var(--sk-pattern);
	background-size: auto, auto, auto, var(--sk-pattern-size);
}

html[data-skin="dia-de-los-muertos"] .skin-greeting__text {
	color: var(--sk-highlight);
}

/* A marigold blooms beside the first headline. */
html[data-skin="dia-de-los-muertos"] #content > section:first-of-type::before {
	filter: drop-shadow(0 0 34px rgba(255, 176, 0, .5));
	animation: sk-dia-bloom 8s ease-in-out infinite alternate;
}

html[data-skin="dia-de-los-muertos"] body.event-has-garland #content > section:first-of-type::after,
html[data-skin="dia-de-los-muertos"] body.event-has-garland footer::before {
	filter: drop-shadow(0 0 10px rgba(255, 176, 0, .35));
}

/* ---------- Header over the dark page ---------- */

html[data-skin="dia-de-los-muertos"] header.header-v2.smaller,
html[data-skin="dia-de-los-muertos"] header.header-v2.header-mobile {
	background: rgba(18, 10, 26, .92);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-skin="dia-de-los-muertos"] .navBar > ul > li > a:hover,
html[data-skin="dia-de-los-muertos"] .navBar > ul > li.current-menu-item > a {
	color: var(--sk-highlight) !important;
}

/* Mobile menu toggle and icons drawn dark by the theme. */
html[data-skin="dia-de-los-muertos"] .stellarnav .menu-toggle,
html[data-skin="dia-de-los-muertos"] .stellarnav .menu-toggle span,
html[data-skin="dia-de-los-muertos"] #content i {
	color: var(--sk-highlight);
}

html[data-skin="dia-de-los-muertos"] .stellarnav .menu-toggle span.bars span {
	background: var(--sk-on-dark);
}

html[data-skin="dia-de-los-muertos"] #content h5 {
	color: var(--sk-highlight) !important;
}

/* ---------- Cards and panels ---------- */

html[data-skin="dia-de-los-muertos"] .blogBox:hover {
	border-color: rgba(255, 176, 0, .5);
	box-shadow: 0 0 0 1px rgba(255, 176, 0, .3), 0 24px 56px -22px rgba(255, 140, 26, .55);
}

html[data-skin="dia-de-los-muertos"] .testimonybox {
	background-color: var(--sk-surface);
}

html[data-skin="dia-de-los-muertos"] #content .box {
	background-color: transparent;
}

html[data-skin="dia-de-los-muertos"] .de-skill-item {
	background: var(--sk-surface);
}

/* Inputs on the dark page. */
html[data-skin="dia-de-los-muertos"] .form-control,
html[data-skin="dia-de-los-muertos"] .wpcf7-form-control:not(.wpcf7-submit) {
	color: var(--sk-text);
}

html[data-skin="dia-de-los-muertos"] #content .form-control {
	border-bottom-color: rgba(255, 255, 255, .35) !important;
}

/* ---------- Floral calavera (bottom-left, wide screens) ---------- */

.skin-calavera {
	--sk-corner-art: var(--sk-art-calavera);
	bottom: 8px;
	filter: drop-shadow(0 0 18px rgba(255, 176, 0, .35));
	transform-origin: 50% 100%;
	animation: sk-dia-nod 6s ease-in-out infinite alternate;
}

@keyframes sk-dia-bloom {
	from { transform: translateY(-50%) rotate(-8deg) scale(.96); }
	to   { transform: translateY(-50%) rotate(8deg) scale(1.02); }
}

@keyframes sk-dia-nod {
	from { transform: rotate(-3deg); }
	to   { transform: rotate(3deg); }
}

html.event-motion-paused[data-skin="dia-de-los-muertos"] #content > section:first-of-type::before,
html.event-motion-paused .skin-calavera {
	animation-play-state: paused;
}

/* The light logo tile makes the fixed mobile header taller: keep the first headline clear of it. */
@media (max-width: 991px) {
	html[data-skin="dia-de-los-muertos"] #content > section:first-of-type {
		margin-top: 34px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html[data-skin="dia-de-los-muertos"] #content > section:first-of-type::before,
	.skin-calavera {
		animation: none;
	}
}