/* ==================================================
   Seasonal skin: Kwanzaa
   Candle-warm cream with red, black, green and gold; soft Fraunces headlines, a woven
   mkeka-inspired garland, a candle-light glow beside the first headline and a
   kinara-inspired candle display. Loaded after skin-layout.css and skin-polish.css
   while this skin is active.
   ================================================== */

html[data-skin="kwanzaa"] {
	--sk-heading-weight: 500;
	--sk-heading-tracking: -.02em;
	--sk-band-h: 46px;
	--sk-stripe: linear-gradient(90deg, var(--sk-accent-2) 0 33.3%, var(--sk-heading) 0 66.6%, var(--sk-accent) 0);
	--sk-btn-shadow: 0 0 0 1px rgba(229, 181, 58, .6), 0 10px 26px -10px rgba(242, 193, 78, .9);
	--sk-btn-shadow-hover: 0 0 0 2px #e5b53a, 0 14px 32px -10px rgba(242, 193, 78, 1);
	--sk-glow-1: rgba(242, 193, 78, .26);
	--sk-glow-2: rgba(178, 34, 52, .07);
	/* Warm candle-light glow beside the first headline. */
	--sk-hero-art: radial-gradient(circle, rgba(242, 193, 78, .55) 0, rgba(229, 181, 58, .25) 35%, rgba(229, 181, 58, 0) 68%);
	--sk-hero-art-size: min(34vw, 460px);
}

html[data-skin="kwanzaa"] #content > section:first-of-type::before {
	animation: sk-kw-glow 5s ease-in-out infinite alternate;
}

html[data-skin="kwanzaa"] #content h1 span,
html[data-skin="kwanzaa"] #content h2 span {
	color: var(--sk-accent-2);
}

/* Heading rule glows like candle light. */
html[data-skin="kwanzaa"] #content h2.big::after,
html[data-skin="kwanzaa"] #content h2.ultra-big::after {
	box-shadow: 0 0 12px rgba(242, 193, 78, .8);
}

html[data-skin="kwanzaa"] .blogBox:hover {
	border-color: var(--sk-accent-3);
	box-shadow: 0 0 0 1px var(--sk-accent-3), 0 0 36px -8px rgba(242, 193, 78, .8);
}

/* Testimonials: black panels lit by candle glow. */
html[data-skin="kwanzaa"] .testimonybox {
	background-color: var(--sk-dark);
	background-image: radial-gradient(circle at 50% 0, rgba(242, 193, 78, .3), transparent 60%);
}

html[data-skin="kwanzaa"] .navBar > ul > li > a:hover,
html[data-skin="kwanzaa"] .navBar > ul > li.current-menu-item > a {
	color: var(--sk-accent-2) !important;
}

html[data-skin="kwanzaa"] footer {
	background-image: radial-gradient(ellipse 50% 60% at 50% 0, rgba(242, 193, 78, .24), transparent 70%), radial-gradient(ellipse 40% 50% at 100% 100%, rgba(178, 34, 52, .25), transparent 70%);
}

/* ---------- Kinara-inspired candles (bottom-left, wide screens) ---------- */

.skin-kinara {
	--sk-corner-art: var(--sk-art-kinara);
	aspect-ratio: 190 / 145;
	filter: drop-shadow(0 -6px 22px rgba(242, 193, 78, .35));
}

/* Flames sit on the candle wicks (positions match kinara.svg). */
.skin-kinara i {
	position: absolute;
	bottom: 63%;
	width: 8px;
	height: 15px;
	margin-left: -4px;
	border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
	background: radial-gradient(ellipse at 50% 75%, #FFF6D6 0, #FFD45E 35%, #F59F00 70%, rgba(245, 159, 0, 0) 100%);
	box-shadow: 0 0 10px 3px rgba(255, 196, 37, .55);
	transform-origin: 50% 100%;
	animation: sk-kw-flicker 1.6s ease-in-out infinite alternate;
}

.skin-kinara i:nth-child(1) { left: 11.6%; animation-delay: -.2s; }
.skin-kinara i:nth-child(2) { left: 23.2%; animation-delay: -.9s; }
.skin-kinara i:nth-child(3) { left: 34.7%; animation-delay: -.5s; }
.skin-kinara i:nth-child(4) { left: 47.4%; bottom: 70%; animation-delay: -1.2s; }
.skin-kinara i:nth-child(5) { left: 60%;   animation-delay: -.3s; }
.skin-kinara i:nth-child(6) { left: 71.6%; animation-delay: -1s; }
.skin-kinara i:nth-child(7) { left: 83.2%; animation-delay: -.6s; }

@keyframes sk-kw-flicker {
	0%   { transform: scale(1, 1) rotate(-2deg); opacity: .92; }
	40%  { transform: scale(.94, 1.08) rotate(2deg); opacity: 1; }
	100% { transform: scale(1.04, .95) rotate(-1deg); opacity: .88; }
}

@keyframes sk-kw-glow {
	from { opacity: .75; }
	to   { opacity: 1; }
}

html.event-motion-paused .skin-kinara i,
html.event-motion-paused[data-skin="kwanzaa"] #content > section:first-of-type::before {
	animation-play-state: paused;
}

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