/* ==================================================
   Seasonal skin: Halloween
   A refined after-dark look: near-black surfaces, pumpkin orange and amber,
   Instrument Serif headlines with Instrument Sans for text, lush autumn-bramble
   dividers, flying bats and embers (event-halloween.js), a dangling spider, a moon
   scene and a jack-o'-lantern. Loaded after skin-layout.css while this skin is active
   (data-skin-tone="dark" switches on the dark-page rules in skin-layout.css).
   ================================================== */

html[data-skin="halloween"] {
	--body-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sk-radius: 16px;
	--sk-btn-radius: 9999px;
	--sk-card-border: 1px solid rgba(255, 255, 255, .08);
	--sk-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9);
	--sk-btn-shadow: 0 0 0 1px rgba(249, 115, 22, .45), 0 10px 32px -8px rgba(249, 115, 22, .6);
	--sk-btn-shadow-hover: 0 0 0 1px rgba(253, 186, 116, .7), 0 14px 40px -8px rgba(249, 115, 22, .85);
	--sk-band-h: 44px;
	--sk-band-size: auto 100%;
	--sk-pattern-size: 160px;
	--sk-heading-tracking: -.025em;
	color-scheme: dark;
}

/* Colours for the strip, countdown, ticker, badge and pause button (event-base.css). */
body.event-halloween {
	--ev-strip-bg: linear-gradient(90deg, #ea580c, #f97316 50%, #ea580c);
	--ev-strip-text: #0b0b0d;
	--ev-strip-strong: #0b0b0d;
	--ev-strip-edge-h: 0;
	--ev-link-bg: #0b0b0d;
	--ev-link-text: #fdba74;
	--ev-link-hover-bg: #27272a;
	--ev-count-label: rgba(11, 11, 13, .78);
	--ev-count-border: transparent;
	--ev-count-bg: #0b0b0d;
	--ev-count-text: #fdba74;
	--ev-count-sub: #a1a1aa;
	--ev-flag-bg: #c2410c;
	--ev-flag-text: #fff;
	--ev-ticker-bg: #08080a;
	--ev-ticker-border: rgba(255, 255, 255, .08);
	--ev-ticker-text: #a1a1aa;
	--ev-ticker-highlight: #f97316;
	--ev-ticker-sep: rgba(249, 115, 22, .9);
	/* Outlined pill badge. */
	--ev-badge-border: #f97316;
	--ev-badge-bg: rgba(249, 115, 22, .15);
	--ev-badge-text: #f97316;
	--ev-toggle-border: #f97316;
	--ev-toggle-bg: #0b0b0d;
	--ev-toggle-text: #fafafa;
	--ev-toggle-hover: #fb923c;
}

/* After dark: near-black with a warm ember glow and a fine film grain (pattern.svg). */
html[data-skin="halloween"] body {
	background-image:
		radial-gradient(ellipse 60% 45% at 80% 0, rgba(249, 115, 22, .14), transparent 70%),
		radial-gradient(ellipse 50% 40% at 0 60%, rgba(194, 65, 12, .1), transparent 70%),
		var(--sk-pattern);
	background-size: auto, auto, var(--sk-pattern-size);
	font-family: var(--body-font);
}

/* ---------- Typography ---------- */

/* Instrument Serif headlines: light, large and tightly set. */
html[data-skin="halloween"] #wrapper h1,
html[data-skin="halloween"] #wrapper h2,
html[data-skin="halloween"] #wrapper h3,
html[data-skin="halloween"] #wrapper h4,
html[data-skin="halloween"] footer h3 {
	font-weight: 400;
	line-height: 1.08;
}

html[data-skin="halloween"] #wrapper h3,
html[data-skin="halloween"] #wrapper h4,
html[data-skin="halloween"] footer h3 {
	letter-spacing: -.01em;
}

html[data-skin="halloween"] #content h1 span,
html[data-skin="halloween"] #content h2 span {
	color: var(--sk-accent) !important;
	font-style: italic;
}

/* Small headings become uppercase orange eyebrow labels. */
html[data-skin="halloween"] #content h5 {
	color: var(--sk-accent) !important;
	font-family: var(--body-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

html[data-skin="halloween"] .skin-greeting__text {
	font-weight: 400;
	font-style: italic;
	font-size: 23px;
	letter-spacing: -.01em;
}

/* ---------- Header and navigation ---------- */

html[data-skin="halloween"] header.header-v2.smaller,
html[data-skin="halloween"] header.header-v2.header-mobile {
	background: rgba(8, 8, 10, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

html[data-skin="halloween"] .navBar > ul > li > a {
	color: #e4e4e7;
	font-weight: 500;
}

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

html[data-skin="halloween"] .stellarnav .menu-toggle,
html[data-skin="halloween"] .stellarnav .menu-toggle span {
	color: var(--sk-highlight);
}

/* A slimmer logo tile than the generic dark-skin one. */
html[data-skin="halloween"] #logo img {
	padding: 4px 8px;
	border-radius: 10px;
	background: rgba(250, 250, 250, .94);
}

/* ---------- Bramble dividers ---------- */

/* Thin line under the header; full dividers at the banner edge and the footer top. */
html[data-skin="halloween"] body.event-has-garland header.header-v2::after {
	height: 16px;
}

html[data-skin="halloween"] body.event-has-garland header.header-v2::after,
html[data-skin="halloween"] body.event-has-garland #content > section:first-of-type::after,
html[data-skin="halloween"] body.event-has-garland footer::before {
	filter: drop-shadow(0 0 10px rgba(249, 115, 22, .35));
}

/* ---------- Buttons ---------- */

html[data-skin="halloween"] .btn-main,
html[data-skin="halloween"] a.btn-main,
html[data-skin="halloween"] .wpcf7-submit {
	border: 0;
	font-family: var(--body-font);
	font-weight: 600;
	letter-spacing: 0;
}

html[data-skin="halloween"] .btn-main:hover,
html[data-skin="halloween"] a.btn-main:hover,
html[data-skin="halloween"] .wpcf7-submit:hover {
	background: #fb923c;
	transform: translateY(-1px);
}

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

html[data-skin="halloween"] .blogBox,
html[data-skin="halloween"] .testimonybox,
html[data-skin="halloween"] .accordion-item {
	background-color: var(--sk-surface);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 40%);
}

html[data-skin="halloween"] .blogBox:hover {
	border-color: rgba(249, 115, 22, .55);
	box-shadow: 0 0 0 1px rgba(249, 115, 22, .35), 0 24px 60px -24px rgba(249, 115, 22, .45);
}

/* Partner-logo tiles: dark with a hairline border. */
html[data-skin="halloween"] .de-skill-item {
	border: 1px solid rgba(255, 255, 255, .08);
	background: var(--sk-surface);
}

/* Alternate sections: a shade lighter, with a bramble divider along the top edge. */
html[data-skin="halloween"] #section-testimony,
html[data-skin="halloween"] .whiteBlug,
html[data-skin="halloween"] .footer-blog {
	background-color: var(--sk-bg-alt) !important; /* the testimony section sets an inline background */
	background-image: var(--sk-band), radial-gradient(ellipse 60% 50% at 50% 0, rgba(249, 115, 22, .1), transparent 70%), var(--sk-pattern);
	/* !important: the theme's JS adds an inline "background-size: cover" to sections. */
	background-position: 0 0, 0 0, 0 0 !important;
	background-repeat: repeat-x, no-repeat, repeat !important;
	background-size: auto 40px, auto, 160px !important;
}

html[data-skin="halloween"] #content .box {
	background-color: transparent;
}

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

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

/* Category badges (blog cards): small orange pills. */
html[data-skin="halloween"] .badge.bg-warning {
	padding: 5px 11px;
	border-radius: 9999px;
	background: var(--sk-accent) !important;
	color: var(--sk-on-accent) !important;
	font-family: var(--body-font);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
}

/* Badge and ticker keep their own colours on the dark page. */
html[data-skin="halloween"] #content span.event-badge {
	color: var(--ev-badge-text) !important;
	font-family: var(--body-font);
	font-size: 11px;
	letter-spacing: .13em;
}

html[data-skin="halloween"] #content .event-ticker li {
	color: var(--ev-ticker-text) !important;
	font-family: var(--body-font);
}

html[data-skin="halloween"] #content .event-ticker li:nth-of-type(4n+2) {
	color: var(--ev-ticker-highlight) !important;
}

/* ---------- Footer ---------- */

html[data-skin="halloween"] footer {
	background-color: var(--sk-dark);
	background-image: radial-gradient(ellipse 50% 60% at 50% 0, rgba(249, 115, 22, .12), transparent 70%);
}

html[data-skin="halloween"] footer h3 {
	color: var(--sk-heading) !important;
}

html[data-skin="halloween"] footer i {
	color: var(--sk-accent);
}

/* Jack-o'-lantern peeking over the footer edge. */
html[data-skin="halloween"] footer::after {
	left: 50%;
	right: auto;
	top: -58px;
	bottom: auto;
	width: 84px;
	height: 78px;
	margin-left: -42px;
	background: url(pumpkin.svg) center / contain no-repeat;
	filter: drop-shadow(0 0 18px rgba(249, 115, 22, .6));
	z-index: 2;
}

/* ---------- Announcement strip ---------- */

html[data-skin="halloween"] .event-strip__text strong {
	margin-right: 6px;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

html[data-skin="halloween"] .event-countdown__label {
	font-weight: 700;
	letter-spacing: .14em;
}

html[data-skin="halloween"] .event-countdown__timer > span {
	border-radius: 8px;
}

.event-strip__bat {
	width: 30px;
	height: auto;
	flex: 0 0 auto;
	color: #0b0b0d;
	transform-origin: 50% 40%;
	animation: event-hw-flap .32s ease-in-out infinite alternate;
}

.event-strip__bat--end {
	animation-delay: -.16s;
}

/* Ticker separator bat: wide enough for the scalloped wings to read. */
html[data-skin="halloween"] .event-ticker__sep {
	width: 30px;
}

/* ---------- Moon scene beside the first banner ---------- */

html[data-skin="halloween"] #content > section:first-of-type::before {
	right: 3%;
	top: 54%;
	width: min(24vw, 340px);
	background: url(moon-scene.svg) center / contain no-repeat;
	/* Fade the hill into the page instead of ending on a hard edge. */
	-webkit-mask-image: linear-gradient(#000 72%, transparent 98%);
	mask-image: linear-gradient(#000 72%, transparent 98%);
	filter: drop-shadow(0 0 40px rgba(253, 224, 71, .25));
	animation: event-hw-float 9s ease-in-out infinite;
}

/* Smaller moon on the short title banners of inner pages. */
html[data-skin="halloween"] #content > section.innerPage:first-of-type::before {
	right: 6%;
	top: 50%;
	width: min(14vw, 190px);
}

/* ---------- Dangling spider (moved into the header by event-theme.js) ---------- */

.event-spider {
	position: absolute;
	top: calc(100% + 4px);
	right: 24%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 26px;
	pointer-events: none;
	transition: opacity .3s;
}

.event-spider[hidden] {
	display: none;
}

.event-spider__thread {
	display: block;
	width: 1px;
	height: 60px;
	background: linear-gradient(rgba(250, 250, 250, .55), rgba(250, 250, 250, .25));
	animation: event-hw-drop 7s ease-in-out infinite alternate;
}

.event-spider__body {
	width: 26px;
	height: auto;
	margin-top: -2px;
	/* A rim of orange light keeps the black spider visible against the night sky. */
	filter: drop-shadow(0 0 2px rgba(251, 146, 60, .95)) drop-shadow(0 0 8px rgba(249, 115, 22, .6));
	transform-origin: 50% 0;
	animation: event-hw-swing 3.5s ease-in-out infinite alternate;
}

header.smaller .event-spider,
header.header-mobile .event-spider {
	opacity: 0;
}

/* ---------- Flying bats canvas + corner jack-o'-lantern ---------- */

/* Bats fly across the whole page: the canvas is pinned to the viewport, above the content
   (so solid section backgrounds don't hide it) but translucent and click-through. */
.event-bats {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	opacity: .7;
	pointer-events: none;
}

html.event-motion-paused .event-bats {
	display: none;
}

/* Carved jack-o'-lantern in the bottom-left corner: breathes slowly with a swelling orange
   glow, and shrinks once the visitor scrolls (body.event-scrolled, set by event-theme.js). */
.event-pumpkin {
	--hw-pumpkin-w: clamp(120px, 12vw, 175px);
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1001;
	display: none;
	width: var(--hw-pumpkin-w);
	pointer-events: none;
	transform-origin: 50% 100%;
	transition: width .45s;
	animation: event-hw-breathe 5.5s ease-in-out infinite;
}

body.event-scrolled .event-pumpkin {
	--hw-pumpkin-w: clamp(90px, 8vw, 125px);
}

.event-pumpkin__art {
	display: block;
	width: 100%;
	height: auto;
	filter: contrast(1.12) brightness(1.08);
	translate: 0 1.88%;
}

html.event-motion-paused .event-strip__bat,
html.event-motion-paused .event-pumpkin,
html.event-motion-paused .event-spider__thread,
html.event-motion-paused .event-spider__body,
html.event-motion-paused[data-skin="halloween"] #content > section:first-of-type::before {
	animation-play-state: paused !important;
}

/* ---------- Keyframes ---------- */

@keyframes event-hw-flap {
	from { transform: scaleY(1); }
	to   { transform: scaleY(-.35) translateY(-2px); }
}

@keyframes event-hw-float {
	0%, 100% { transform: translateY(-50%); }
	50%      { transform: translateY(calc(-50% - 12px)); }
}

@keyframes event-hw-drop {
	0%   { height: 40px; }
	40%  { height: 96px; }
	60%  { height: 88px; }
	100% { height: 130px; }
}

@keyframes event-hw-swing {
	from { transform: rotate(-8deg); }
	to   { transform: rotate(8deg); }
}

@keyframes event-hw-wobble {
	from { transform: rotate(-4deg); }
	to   { transform: rotate(4deg); }
}

@keyframes event-hw-breathe {
	0%, 100% {
		transform: scale(1) translateY(0);
		filter: drop-shadow(0 10px 32px rgba(0, 0, 0, .85)) drop-shadow(0 0 28px rgba(249, 115, 22, .42));
	}
	50% {
		transform: scale(1.035) translateY(-5px);
		filter: drop-shadow(0 14px 42px rgba(0, 0, 0, .92)) drop-shadow(0 0 48px rgba(249, 115, 22, .7));
	}
}

@keyframes event-hw-glow {
	0%   { opacity: .75; }
	30%  { opacity: 1; }
	45%  { opacity: .82; }
	70%  { opacity: 1; }
	100% { opacity: .9; }
}

/* ---------- Responsive ---------- */

@media (min-width: 1200px) {
	.event-pumpkin {
		display: block;
	}

	.event-pumpkin ~ .event-motion-toggle {
		bottom: calc(var(--hw-pumpkin-toggle, 175px) + 14px);
		transition: bottom .45s;
	}

	body.event-scrolled .event-pumpkin ~ .event-motion-toggle {
		--hw-pumpkin-toggle: clamp(90px, 8vw, 125px);
	}

	.event-pumpkin ~ .event-motion-toggle {
		--hw-pumpkin-toggle: clamp(120px, 12vw, 175px);
	}
}

@media (max-width: 991px) {
	html[data-skin="halloween"] {
		--sk-band-h: 32px;
	}

	html[data-skin="halloween"] #content > section:first-of-type::before {
		right: -8%;
		width: 42vw;
		opacity: .35;
	}

	html[data-skin="halloween"] #content > section.innerPage:first-of-type::before {
		width: 22vw;
	}

	.event-spider {
		display: none;
	}

	/* The mobile header is fixed over the content: keep the bramble for the banner and footer. */
	html[data-skin="halloween"] body.event-has-garland header.header-v2::after {
		display: none;
	}
}

@media (max-width: 575px) {
	html[data-skin="halloween"] #content > section:first-of-type::before {
		display: none;
	}

	.event-strip__bat {
		display: none;
	}

	/* Compact strip on phones: message and button on one line, countdown hidden. */
	html[data-skin="halloween"] .event-strip .event-countdown {
		display: none !important;
	}

	html[data-skin="halloween"] .event-strip__text {
		flex: 1 1 auto;
		text-align: left;
	}

	html[data-skin="halloween"] .event-strip__text strong {
		display: none;
	}

	html[data-skin="halloween"] .event-strip__link {
		flex: 0 0 auto;
		font-size: 12px;
	}

	/* Fainter on small screens, where text fills most of the view. */
	.event-bats {
		opacity: .45;
	}
}

/* Respect the operating-system reduced-motion setting */
@media (prefers-reduced-motion: reduce) {
	.event-bats {
		display: none;
	}

	.event-strip__bat,
	.event-pumpkin,
	.event-spider__thread,
	.event-spider__body,
	html[data-skin="halloween"] #content > section:first-of-type::before {
		animation: none !important;
	}

	html[data-skin="halloween"] #content > section:first-of-type::before {
		transform: translateY(-50%);
	}
}

/* Room for the bramble divider under the first banner's button on small screens. */
@media (max-width: 991px) {
	html[data-skin="halloween"] body.event-has-garland #content > section:first-of-type {
		padding-bottom: 44px !important;
	}
}