/* ==================================================
   Seasonal skins: shared premium layer ("polish").

   Loaded after skin-layout.css, and before the skin's own stylesheet, for skins with
   'polish' => true. It gives them the same editorial finish as the Halloween and
   Christmas skins: Instrument Sans text with the skin's display font for headlines,
   soft glowing pill buttons, hairline cards with an accent top edge, eyebrow labels,
   illustrated garland dividers, a frosted sticky header and calm backgrounds made of
   colour glows and fine grain.

   Each skin stylesheet can tune it through the knobs below.
   ================================================== */

html[data-skin] {
	--body-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sk-heading-weight: 500;
	--sk-heading-tracking: -.02em;
	--sk-radius: 18px;
	--sk-btn-radius: 9999px;
	--sk-card-border: 1px solid color-mix(in srgb, var(--sk-border) 45%, transparent);
	--sk-shadow: 0 12px 30px -16px rgba(28, 25, 23, .28);
	--sk-btn-shadow: 0 0 0 1px rgba(var(--sk-accent-rgb), .25), 0 10px 26px -10px rgba(var(--sk-accent-rgb), .65);
	--sk-btn-shadow-hover: 0 0 0 1px rgba(var(--sk-accent-rgb), .4), 0 14px 32px -10px rgba(var(--sk-accent-rgb), .85);
	--sk-band-h: 52px;
	--sk-band-size: auto 100%;
	--sk-pattern-size: 160px;
	/* Accent stripe used on card tops and heading rules. */
	--sk-stripe: linear-gradient(90deg, var(--sk-accent) 0 33.3%, var(--sk-accent-2) 0 66.6%, var(--sk-accent-3) 0);
	/* Soft background glows. */
	--sk-glow-1: rgba(var(--sk-accent-rgb), .09);
	--sk-glow-2: color-mix(in srgb, var(--sk-accent-3) 14%, transparent);
}

/* ---------- Page ---------- */

html[data-skin] 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%),
		var(--sk-pattern);
	background-size: auto, auto, var(--sk-pattern-size);
	font-family: var(--body-font);
}

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

html[data-skin] #wrapper h1,
html[data-skin] #wrapper h2,
html[data-skin] #wrapper h3,
html[data-skin] #wrapper h4,
html[data-skin] footer h3 {
	font-weight: var(--sk-heading-weight);
	line-height: 1.1;
}

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

html[data-skin] #content h1 span,
html[data-skin] #content h2 span {
	font-style: italic;
}

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

/* A short three-colour rule under section headings. */
html[data-skin] #content h2.big::after,
html[data-skin] #content h2.ultra-big::after {
	content: "";
	display: block;
	width: 96px;
	height: 4px;
	margin-top: 16px;
	border-radius: 4px;
	background: var(--sk-stripe);
}

html[data-skin] #content .text-center h2::after,
html[data-skin] #content h2.text-center::after {
	margin-left: auto;
	margin-right: auto;
}

html[data-skin] .skin-greeting__text {
	font-weight: var(--sk-heading-weight);
	letter-spacing: -.01em;
}

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

html[data-skin] header.header-v2.smaller,
html[data-skin] header.header-v2.header-mobile {
	background: color-mix(in srgb, var(--sk-bg) 92%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 color-mix(in srgb, var(--sk-border) 40%, transparent);
}

html[data-skin] .navBar > ul > li > a {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

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

/* A slimmer garland under the header; full-size ones at the banner edge and above the footer. */
html[data-skin] body.event-has-garland header.header-v2::after {
	height: 22px;
}

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

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

html[data-skin] .btn-main:hover,
html[data-skin] a.btn-main:hover,
html[data-skin] .wpcf7-submit:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

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

/* Hairline cards with a three-colour top edge. */
html[data-skin] .blogBox,
html[data-skin] .accordion-item {
	position: relative;
	overflow: hidden;
	border-top: var(--sk-card-border);
	background-color: var(--sk-surface);
	background-image: var(--sk-stripe);
	background-size: 100% 4px;
	background-repeat: no-repeat;
}

html[data-skin] .blogBox:hover {
	border-color: rgba(var(--sk-accent-rgb), .45);
	box-shadow: 0 0 0 1px rgba(var(--sk-accent-rgb), .2), 0 22px 44px -20px rgba(var(--sk-accent-rgb), .45);
}

html[data-skin] .testimonybox {
	border: 0;
	background-image: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--sk-accent-3) 22%, transparent), transparent 60%);
}

/* Partner-logo tiles: the logos are white, so the tiles stay dark. */
html[data-skin] .de-skill-item {
	border: 1px solid rgba(255, 255, 255, .1);
	background: var(--sk-dark);
}

/* Category badges (blog cards): small pills. */
html[data-skin] .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;
}

/* Alternate sections: a garland along the top edge over a soft glow. */
html[data-skin] #section-testimony,
html[data-skin] .whiteBlug,
html[data-skin] .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, var(--sk-glow-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 44px, auto, var(--sk-pattern-size) !important;
}

/* ---------- Forms ---------- */

html[data-skin] #content .form-control {
	border-bottom: 1px solid color-mix(in srgb, var(--sk-text) 45%, transparent) !important;
}

html[data-skin] #content .form-control:focus {
	border-bottom-color: var(--sk-accent) !important;
}

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

html[data-skin] footer {
	background-image:
		radial-gradient(ellipse 50% 60% at 50% 0, rgba(var(--sk-accent-rgb), .22), transparent 70%),
		radial-gradient(ellipse 40% 50% at 100% 100%, color-mix(in srgb, var(--sk-accent-3) 22%, transparent), transparent 70%);
}

html[data-skin] footer h3 {
	color: var(--sk-on-dark) !important;
}

/* ---------- Motion ----------
   Gentle, GPU-friendly animation (transform / opacity only). All of it stops while the
   visitor has paused the seasonal animations and under prefers-reduced-motion. */

/* A soft sheen sweeps across the main buttons every few seconds. */
html[data-skin] .btn-main,
html[data-skin] .wpcf7-submit {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

html[data-skin] .btn-main::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .38) 50%, transparent 65%);
	transform: translateX(-120%);
	animation: sk-sheen 5.5s ease-in-out infinite;
	pointer-events: none;
}

/* Corner illustrations sway and bob in the breeze. */
.skin-corner-art--tr {
	transform-origin: 100% 0;
	animation: sk-sway-tr 6s ease-in-out infinite alternate;
}

.skin-corner-art--br {
	transform-origin: 50% 100%;
	animation: sk-bob 4.5s ease-in-out infinite alternate;
}

.skin-corner-art--bl {
	transform-origin: 0 100%;
	animation: sk-sway-bl 7s ease-in-out infinite alternate;
}

/* Scroll reveal (skin-motion.js adds .sk-reveal to content below the fold, then .sk-in). */
html[data-skin] .sk-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: var(--sk-delay, 0s);
}

html[data-skin] .sk-reveal.sk-in {
	opacity: 1;
	transform: none;
}

/* Section heading rules draw in from the left when revealed. */
html[data-skin] #content h2.sk-reveal::after {
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1) .35s;
}

html[data-skin] #content .text-center h2.sk-reveal::after,
html[data-skin] #content h2.text-center.sk-reveal::after {
	transform-origin: 50% 50%;
}

html[data-skin] #content h2.sk-reveal.sk-in::after {
	transform: scaleX(1);
}

@keyframes sk-sheen {
	0%, 55% { transform: translateX(-120%); }
	85%, 100% { transform: translateX(120%); }
}

@keyframes sk-sway-tr {
	from { transform: rotate(-2.5deg); }
	to   { transform: rotate(2deg); }
}

@keyframes sk-sway-bl {
	from { transform: rotate(-1.5deg); }
	to   { transform: rotate(2deg); }
}

@keyframes sk-bob {
	from { transform: translateY(0) rotate(-1deg); }
	to   { transform: translateY(-6px) rotate(1.5deg); }
}

@keyframes sk-hero-float {
	from { transform: translateY(-50%); }
	to   { transform: translateY(calc(-50% - 14px)); }
}

html.event-motion-paused[data-skin] .btn-main::after,
html.event-motion-paused .skin-corner-art,
html.event-motion-paused[data-skin] #content > section:first-of-type::before,
html.event-motion-paused[data-skin] #content h1 span,
html.event-motion-paused[data-skin] #content h2 span {
	animation-play-state: paused !important;
}

/* ---------- Small screens ---------- */

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

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

	/* Room for the garland under the first banner's button. */
	html[data-skin] body.event-has-garland #content > section:first-of-type {
		padding-bottom: 40px !important;
	}
}

@media (max-width: 575px) {
	/* skin-layout.css adds a hard offset shadow on phones; keep the soft glow instead. */
	html[data-skin] .btn-main,
	html[data-skin] a.btn-main {
		box-shadow: var(--sk-btn-shadow);
	}
}

@media (prefers-reduced-motion: reduce) {
	html[data-skin] .btn-main::after,
	.skin-corner-art,
	html[data-skin] #content > section:first-of-type::before,
	html[data-skin] #content h1 span,
	html[data-skin] #content h2 span {
		animation: none !important;
	}

	html[data-skin] .sk-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html[data-skin] #content h2.sk-reveal::after {
		transform: none;
	}

	html[data-skin] .btn-main:hover,
	html[data-skin] .blogBox:hover {
		transform: none;
	}
}