/**
 * Theme Name: FanHub
 * Template: twentytwentyfour
 * Version: 1.0
 * Author: Matt D Woodman
 * Author URI: https://mdwoodman.co.uk/
 * Description: A child theme for Twenty Twenty Four.
 */

/* Setup */
:root {
	--jetpack--contact-form--error-color: #F64848;
    --jetpack--contact-form--inverted-text-color: var(--wp--preset--color--base);
}

body {
	--wp--preset--gradient--custom-fan-hub-gradient: linear-gradient(135deg,rgb(255,138,0) 0%,rgb(236,0,140) 100%) !important;
	--wp--preset--gradient--custom-fan-hub-gradient: linear-gradient(in lch 135deg,rgb(255,138,0) 0%,rgb(236,0,140) 100%) !important;
}

.stacking-context {
	z-index: 1;
}

.flex-grow {
	flex-grow: 1;
}

/* Header + navs */
header {
	position: sticky;
	top: 0;
	z-index: 9999;
	backdrop-filter: blur(10px);
}

header .current-menu-item a {
	text-decoration: underline; 
	text-decoration-color: var(--wp--preset--color--accent-2);
	text-decoration-thickness: .25em;
}

header .current-menu-item a:hover {
	text-decoration: none;
}

html.has-modal-open header {
	backdrop-filter: none;
}

.careers-link:after {
	--available: '2';
	content: var(--available);
	background: red;
    border-radius: 10rem;
    display: inline-block;
    width: 1rem;
    aspect-ratio: 1;
    margin: 0 0 0 0.5rem;
    text-align: center;
    font-size: 0.75em;
}

.inline-block {
	display: inline-block !important;
}

@media screen and (max-width: 600px) {
/* 	header {
		backdrop-filter: none;
	} */
	header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open  {
		background: var(--wp--preset--color--base-2);
	}
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 2rem;
}

/* Utility classes */
.hidden {
	display: none !important;
}

.desktop-only {
	display: block;
}

.mobile-only {
	display: none;
}

@media screen and (max-width: 600px) {
	.mobile-only {
		display: block;
	}
	.desktop-only {
		display: none;
	}
}

.height-auto {
	height: auto;
}

.stacked-group > *:nth-child(n + 2) {
	margin: 0 0 0 -1rem
}

/* Sticky */
.sticky {
	position: sticky;
	top: 120px;
}

/* <main> linear-gradient background */
main {
	background: radial-gradient(circle at 83% -6%, rgba(236,0,140,0.25), transparent 29vw), 
 	radial-gradient(circle at -13% 31%, rgba(255,138,0,.25), transparent 39vw), 
 	radial-gradient(circle at 103% 139%, rgba(236,0,140,.25), transparent 23vw);
	background-attachment: fixed;
}

/* Remove margin above footer */
:where(.wp-site-blocks) > * {
    margin-block-start: 0;
}

/* Buttons */
.wp-element-button:hover {
	text-decoration: underline;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	/* background-size: 100% 100%; */
	transition: all 400ms ease;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%2314141c" width="24" height="24"><path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z"/></svg>'), linear-gradient(to right, #0000, var(--wp--preset--color--accent-2));
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%2314141c" width="24" height="24"><path d="M7 7h8.586L5.293 17.293l1.414 1.414L17 8.414V17h2V5H7v2z"/></svg>'), linear-gradient(in lch to right, #0000, var(--wp--preset--color--accent-2));
    background-color: var(--wp--preset--color--accent);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
	background-repeat: no-repeat;
	background-position: calc(100% - 1rem) center, 0 0;
	padding-left: 2rem;
}

.wp-block-button > .wp-block-button__link:hover, .wp-block-button > .wp-block-button__link:active, .wp-block-button > .wp-block-button__link:focus {
	/* background-size: 125% 125%; */
	transition: all 400ms ease;
    background-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
	background-position: calc(100% - 0.75rem) center, 0 0;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background) {
	backdrop-filter: blur(10px);
	transition: all 400ms ease;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background):hover, .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background):active, .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color, .has-background):focus {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base-2);
    border-color: var(--wp--preset--color--contrast);
}

@media screen and (max-width: 600px) {
	.wp-block-buttons, .wp-block-button, .wp-element-button {
		width: 100%;
	}
}

/* Block link cards */
.block-link {
	height: 100%;
}

.block-link a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
	border-radius: 2rem;
}

.block-link:hover {
	background-color: var(--wp--preset--color--accent-4) !important;
}

.wp-block-column:has(.block-link) {
	transition: all 400ms ease;
}

.wp-block-column:has(.block-link):hover {
	transform: translateY(-1rem);
	transition: all 400ms ease;
}

/* Gradient border */
.gradient-border {
/* 	background: linear-gradient(var(--wp--preset--color--accent-3), var(--wp--preset--color--accent-3)), linear-gradient(120deg, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2));
	border: 2px solid transparent;
	background-clip: padding-box, border-box; */
	position: relative;
	box-sizing: border-box;
	border: 1px solid transparent;
	background-clip: padding-box; 
	border-radius: 2.5vw; 
	transition: 400ms all ease;
}

.gradient-border:hover {
	transition: 400ms all ease;
}

_::-webkit-full-page-media, _:future, :root .gradient-border .wp-block-cover__background {
	/* Safari 7.1+ hack */
	margin: 1px;
}

@property --r {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.gradient-border:before {
    content: '';
    position: absolute;
    inset: 0;
	margin: -1px;
    z-index: -1;
	border-radius: inherit;
	background: conic-gradient(from var(--r), var(--wp--preset--color--accent) 0%, var(--wp--preset--color--accent-2) 50%, var(--wp--preset--color--accent) 100%);
/*     background: linear-gradient(to right, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2)); */
	animation: glowing 2s linear infinite;
}

@keyframes glowing {
  0% {
  	--r: 0deg;
  }
  100% {
  	--r: 360deg;
  }
}

/* Media & Text block */
.wp-block-media-text {
	gap: 2rem;
}

.sticky-text-media figure {
    position: sticky;
    top: 7.5rem;
}

.wp-block-media-text__media {
	overflow: hidden;
}

.wp-block-media-text.alignwide .wp-block-media-text__media {
  border-radius: 2.5vw;
}

.wp-block-media-text.alignfull .wp-block-media-text__media {
  border-radius: 2.5vw 0 0 2.5vw;
}

@media screen and (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 1;
        grid-row: 1;
    }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
        grid-column: 1;
        grid-row: 2;
    }
	.wp-block-media-text.alignfull .wp-block-media-text__media {
		border-radius: 0;
	}
	.wp-block-media-text.alignwide .wp-block-media-text__content {
		padding: 0;
	}
}

/* Gradient hyperlink underline */
a {
	word-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-all;
    word-break: break-word;	
}

p:not(.back-to):not(.has-background):not(.post-nav-links) a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .wp-block-post-navigation-link:not(.current-menu-item ) a, li:not(.wp-social-link):not(.wp-block-post):not(.current-menu-item):not(.jetpack-sharing-button__list-item) a {
	text-decoration: none !important;
	transition: background-position 0ms ease, color 400ms ease,
	background-size 400ms ease;
	background-image: linear-gradient(to right, var(--wp--preset--color--contrast), var(--wp--preset--color--contrast)), linear-gradient(to right, var(--wp--preset--color--accent), var(--wp--preset--color--accent-2));
	background-size: 0% 0.075em, 100% 0.075em;
	background-position: right 100%, left 100%;
	background-repeat: no-repeat;
}

p.has-background a {
	text-decoration: underline;
}

p:not(.back-to) a:hover, p:not(.back-to) a:active, p:not(.back-to) a:focus, h1 a:hover, h1 a:active, h1 a:focus, h2 a:hover, h2 a:active, h2 a:focus, h3 a:hover, h3 a:active, h3 a:focus, h4 a:hover, h4 a:active, h4 a:focus, h5 a:hover, h5 a:active, h5 a:focus, h6 a:hover, h6 a:active, h6 a:focus, .wp-block-post-navigation-link:not(.current-menu-item) a:hover, .wp-block-post-navigation-link:not(.current-menu-item) a:active, .wp-block-post-navigation-link:not(.current-menu-item) a:focus, li:not(.wp-social-link):not(.wp-block-post):not(.current-menu-item) a:hover, li:not(.wp-social-link):not(.wp-block-post):not(.current-menu-item) a:active, li:not(.wp-social-link):not(.wp-block-post):not(.current-menu-item) a:focus {
	background-size: 100% 0.075em, 0% 0.075em;
	background-position: left 100%, right 100%;
	text-decoration: none !important;
}

ol a:where(:not(.wp-element-button)), ul a:where(:not(.wp-element-button)), :root :where(.wp-block-list a:where(:not(.wp-element-button))) {
    color: var(--wp--preset--color--accent);
}

/* Pills */
.is-style-pill a, .is-style-pill span:not([class], [data-rich-text-placeholder]) {
    display: inline-block;
    background-color: var(--wp--preset--color--accent-5);
    padding: 0.375rem 1rem;
	transition: all 400ms ease;
	border-radius: 10rem;
}
.wp-block-post-terms .wp-block-post-terms__prefix {
    margin-right: 0.25rem;
}

.is-style-pill a:hover, .is-style-pill a.selected {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
	transition: all 400ms ease;
}

/* Intersection Observer animation */
@keyframes fadeIn-up {
	from {
		opacity: 0;
		transform: translateY(3.125rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* "and (min-width: 1024px)" */
@media screen and (prefers-reduced-motion: no-preference) {
	.animate {
		opacity: 0;
		will-change: transform, opacity, background-color; 
	}
	.on-screen {
		opacity: 0;
		animation: fadeIn-up 1;
		animation-fill-mode: forwards;
		animation-duration: 1s;
		animation-delay: 400ms;
	}
}

/* Typography */
body { 
	--wp--preset--font-size--home-hero: clamp(1.875rem, 2.5vw + ((1vw - 0.2rem) * 2.25), 4rem) !important;
	--wp--preset--font-size--xx-large: clamp(1.5rem, 2.5vw + ((1vw - 0.2rem) * 1.25), 3.25rem) !important;
	--wp--preset--font-size--x-large: clamp(1.375rem, 2.5vw + ((1vw - 0.2rem) * 1), 2.5rem) !important;
	--wp--preset--font-size--statement: clamp(1.25rem, 2.5vw + ((1vw - 0.2rem) * 0.75), 1.875rem) !important;
	--wp--preset--font-size--large: clamp(1.125rem, 2.5vw + ((1vw - 0.2rem) * 0.75), 1.375rem) !important;
	text-wrap: pretty;
}

.statement {
	font-size: var(--wp--preset--font-size--statement) !important;
}

.home-hero-heading {
	font-size: var(--wp--preset--font-size--home-hero);
}

h1, h2, h3, h4, h5, h6, p {
	margin: 1em 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: var(--wp--preset--color--contrast);
}

h1 img {
    width: 1lh !important;
    height: 1lh !important;
    vertical-align: bottom;
}

.bold {
	font-weight: 700;
}

.max-width-960 {
	max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-post .wp-block-post-title a {
	display: inline;
}

ul:not(.is-style-checkmark-list) li::marker {
    color: var(--wp--preset--color--accent);
}

ul.is-style-checkmark-list, ol.wp-block-list {
	list-style-type: none;
	text-indent: -3rem;
	margin-left: 1em;
}

ul.is-style-checkmark-list li, ol.wp-block-list li {
	margin: 1rem 0;
	padding-inline-start: 1em;
}

ul.is-style-checkmark-list li::before {
    content: "\2713";
    background-color: #33d433;
	color: var(--wp--preset--color--base-2);
    display: inline-block;
    border-radius: 10rem;
    font-size: 75%;
    width: 1.25rem;
	height: 1.25rem;
    padding: 0.25rem;
    text-align: center;
    margin: 0 1.25rem 0 0;
	line-height: 1.5rem;
    text-indent: 0;
}

ul.is-style-checkmark-list.cross li::before {
	content: "\2715";
	background-color: #ff3333;
}

ol {
    counter-reset: numbering;
    padding-left: 32px;
}

ol li::marker {
	content:'';
}

ol li {
    counter-increment: numbering;
}

ol li:before {
    content: counters(numbering, '.') ' ';
    background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base-2);
    display: inline-block;
    border-radius: 10rem;
    font-size: 75%;
    width: 1.25rem;
	height: 1.25rem;
    padding: 0.25rem;
    text-align: center;
    margin: 0 1.25rem 0 0;
	line-height: 1.5rem;
    text-indent: 0;
}

p.has-background {
    border-radius: 0.5rem;
}

.back-to a {
    background: var(--wp--preset--color--accent-5);
    padding: 0.5rem 1rem;
    border-radius: 10rem;
	transition: all 400ms ease;
}

.back-to a:hover {
	background: var(--wp--preset--color--accent-2);
	text-decoration: underline;
	color: var(--wp--preset--color--base-2);
	transition: all 400ms ease;
}

.contact-form-submission .go-back-message .link {
	color: unset !important;
}

.steps-number {
	border-radius: 100px;
    padding: 1rem;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
    font-weight: bold;
    aspect-ratio: 1;
    position: absolute;
    height: 1rem;
    width: auto;
    text-align: center;
    line-height: 1;
}

/* Scroll reveal */
.scroll-reveal {
	font-size: var(--wp--preset--font-size--statement);
}

@supports (animation-timeline: scroll()) {
	.scroll-reveal > span {
	  width: 100%;
	  color: hsl(0deg 0% 100% / 15%);
	  background-clip: text;
	  background-repeat: no-repeat;
	  background-size: 0% 100%;
	  background-image: linear-gradient(90deg, var(--wp--preset--color--contrast), var(--wp--preset--color--contrast));
	  animation: scroll-reveal linear forwards;
	  animation-timeline: view();
	  animation-range-start: cover 20vh;
	  animation-range-end: cover 80vh;
	}

	@keyframes scroll-reveal {
	  to {
		background-size: 100% 100%;
	  }
	}
	
	/* .scroll-reveal span::after {
	  content: "";
	  background: rgba(0, 0, 0, 0);
	  height: 100%;
	  width: 100%;
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  z-index: 1;
	  backdrop-filter: grayscale(1) contrast(0) brightness(0.5);
	  background-size: 100% 100%;
	  animation: scroll-reveal-rev linear forwards;
	  animation-timeline: view();
	  animation-range-start: cover 20vh;
	  animation-range-end: cover 80vh;
	} */
	
	/* @keyframes scroll-reveal-rev {
	  to {
		transform: translateY(100%);
	  }
	} */
}

/* Duotone effect */
.duotone {
	overflow: hidden;
	border-radius: 2.5vw;
}

.duotone::before, .duotone::after {
	content: '';
	position: absolute;
	background-color: transparent;
    width: 100%;
	height: 100%;
	display: block;
	top: 0;
	left: 0;
	opacity: 1;
	transition: all 400ms ease-in-out;
	pointer-events: none;
}

.duotone::before {
    mix-blend-mode: darken;
	z-index: 1;
}

.duotone::after {
    mix-blend-mode: lighten;
    z-index: 0;
}

.duotone:hover::before {
	background-color: #ffb98a; /* light colour */
	transition: all 400ms ease-in-out;
}

.duotone:hover::after {
	background-color: var(--wp--preset--color--accent-2); /* dark colour */
	transition: all 400ms ease-in-out;
}

/* Brand grid */
.brand-grid {
	column-gap: 5vw;
    row-gap: 2.5vw;
	align-items: center;
}	

.brand-grid figure a {
	display: unset;
}

.brand-grid figure img {
	max-height: 5rem;
    margin: 0 auto;
    display: block;
	width: 100%;
}

.brand-grid-no-height {
	column-gap: 5vw;
    row-gap: 2.5vw;
	align-items: center;
}

.brand-grid-no-height figure a {
	display: unset;
}

.brand-grid-no-height figure img {
    margin: 0 auto;
    display: block;
	width: 100%;
}

/* Testimonial slider */
.testimonial-slider {
	overflow-x: scroll;
	flex-wrap: nowrap;
	/* scroll-snap-type: x proximity; */
	-webkit-overflow-scrolling: touch; /* momentum */
	scroll-padding: 0;
	scroll-padding-inline: 5vw;
	padding-inline: 0;
	transition: 400ms ease;
	cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.testimonial-slider:active {
	cursor: -webkit-grabbing;
    cursor: grabbing;
}

.testimonial-slider > * {
	flex: 0 0 420px;
	max-width: 420px;
	min-width: 300px;
	/* scroll-snap-align: center; */
	animation: highlight;
	animation-fill-mode: both;
	animation-timing-function: linear;
	animation-timeline: view(inline);
}

@media screen and (max-width: 600px) {
	.testimonial-slider > * {
		flex: 0 0 300px;
		max-width: 300px;
		min-width: 300px;
	}
}

@keyframes highlight {
	entry 10%, exit 100% { opacity: 0;}
	entry 100%, exit 10% { opacity: 1; }
}

.testimonial-slider > * blockquote {
	margin-inline-start: 0;
    margin-inline-end: 0;
	padding: var(--wp--preset--spacing--40);
}

/* Heroes */
.brand-hero :where(.contact-form textarea), .club-league-hero :where(.contact-form textarea), .tickethunter-hero :where(.contact-form textarea) {
    height: 120px;
}

.hero {
	background: radial-gradient(circle at 13% -6%, rgba(236,0,140,.25), transparent 29vw), 
	radial-gradient(circle at 45% 31%, rgba(255,138,0,.25), transparent 39vw), var(--wp--preset--color--base-2) 
/* 	radial-gradient(circle, rgba(200, 200, 200, 0.1) 0.1px, var(--wp--preset--color--base-2) 2px) repeat center center / 1.5rem 1.5rem, 
	repeating-linear-gradient(-55deg, var(--wp--preset--color--base-2) 0 59px, rgba(100,100,100,0.05) 0 60px) */;
}

.club-league-hero, .tickethunter-hero {
	background: radial-gradient(circle at 13% -6%, rgba(236,0,140,.25), transparent 29vw), 
	radial-gradient(circle at 45% 31%, rgba(236,0,140,.25), transparent 39vw), var(--wp--preset--color--base-2) 
/* 	radial-gradient(circle, rgba(200, 200, 200, 0.1) 0.1px, var(--wp--preset--color--base-2) 2px) repeat center center / 1.5rem 1.5rem, 
	repeating-linear-gradient(-55deg, var(--wp--preset--color--base-2) 0 59px, rgba(100,100,100,0.05) 0 60px) */;
}

.brand-hero {
	background: radial-gradient(circle at 13% -6%, rgba(255,138,0,.25), transparent 29vw), 
	radial-gradient(circle at 45% 31%, rgba(255,138,0,.25), transparent 39vw), var(--wp--preset--color--base-2)
/* 	radial-gradient(circle, rgba(200, 200, 200, 0.1) 0.1px, var(--wp--preset--color--base-2) 2px) repeat center center / 1.5rem 1.5rem, 
	repeating-linear-gradient(-55deg, var(--wp--preset--color--base-2) 0 59px, rgba(100,100,100,0.05) 0 60px) */;	
}

.repeating-bg {
	background: repeating-linear-gradient(-55deg, var(--wp--preset--color--base-2) 0 59px, rgba(100,100,100,0.15) 0 60px);
}

@supports (animation-timeline: scroll()) {
	.home-hero {
		transform-origin: 50% 0%;
		animation: scale-down both ease-in;
		animation-timeline: view();
		overflow: visible;
		animation-range: exit;
		/* view-timeline: --header; */
	}

	@keyframes scale-down {
		to {
			transform: scale(0.5);
		}
	}
}	

.wp-block-cover .wp-block-cover__background, .wp-block-cover picture, .wp-block-cover picture img, .wp-block-cover video, .wp-block-cover img {
	border-radius: inherit;
}

/* Pagination */
.post-nav-links {
	margin: 4rem auto !important;
	text-align: center;
}

.wp-block-query-pagination-numbers .page-numbers, .post-nav-links .post-page-numbers {
    margin-right: 1rem;
    background: var(--wp--preset--color--accent-5);
    padding: 1rem;
    border-radius: 10rem;
    text-align: center;
    width: 1.5rem;
    display: inline-block;
	text-decoration: none;
}

.post-nav-links .post-page-numbers {
	margin-right: 0;
	margin-left: 1rem;
}

.wp-block-query-pagination-numbers .page-numbers.current, .wp-block-query-pagination-numbers a.page-numbers:hover, .post-nav-links .post-page-numbers.current, .post-nav-links a.post-page-numbers:hover {
    background: var(--wp--preset--color--accent-2);
    color: var(--wp--preset--color--base-2);
	text-decoration: underline;
}

/* Logo marquee */
.marquee {
    gap: 2rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
	mask: unset;
}

.marquee > * {
	max-width: 12.5vw;
}

@media (prefers-reduced-motion: no-preference) {
	.marquee {
		--buff: 20rem;
		--inset: 5;
		--outset: 0;
		mask: linear-gradient(90deg, transparent, white var(--buff) calc(100% - var(--buff)), transparent);
		overflow: hidden;
    	gap: 0; /* negate prefers-reduced-motion */
		flex-wrap: nowrap; /* negate prefers-reduced-motion */
    	justify-content: unset; /* negate prefers-reduced-motion */
		max-width: calc(var(--count) * 160px) !important; /* ((var(--count) - 2) * var(--inset)) */
		padding-inline: 0;
	}
	
	.marquee.clubs {
		--count: 9;
		--speed: 20;
	}
	
	.marquee.brands {
		--count: 13;
		--speed: 30;
	}
	
	.marquee.leagues {
		--count: 10;
		--speed: 30;
	}
	
	.marquee.national-lylty-partners {
		--count: 7;
		--speed: 30;
	}

	.marquee:hover > *, .marquee:focus-within > * {
		animation-play-state: paused;
	}

	.marquee > *:nth-child(1) {
		--index: 1;
	}
	.marquee > *:nth-child(2) {
		--index: 2;
	}
	.marquee > *:nth-child(3) {
		--index: 3;
	}
	.marquee > *:nth-child(4) {
		--index: 4;
	}
	.marquee > *:nth-child(5) {
		--index: 5;
	}
	.marquee > *:nth-child(6) {
		--index: 6;
	}
	.marquee > *:nth-child(7) {
		--index: 7;
	}
	.marquee > *:nth-child(8) {
		--index: 8;
	}
	.marquee > *:nth-child(9) {
		--index: 9;
	}
	.marquee > *:nth-child(10) {
		--index: 10;
	}
	.marquee > *:nth-child(11) {
		--index: 11;
	}
	.marquee > *:nth-child(12) {
		--index: 12;
	}
	.marquee > *:nth-child(13) {
		--index: 13;
	}
	.marquee > *:nth-child(14) {
		--index: 14;
	}
	.marquee > *:nth-child(15) {
		--index: 15;
	}

	.marquee > * {
		--origin-x: calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
		--destination-x: calc(calc((var(--index) + 1 + var(--outset, 0)) * -100%));
		--duration: calc(var(--speed) * 1s);
		--delay: calc((var(--duration) / var(--count)) * (var(--index, 0) - (var(--count) * 0.5)));
		animation-name: slide;
		animation-duration: var(--duration);
		animation-delay: calc(var(--delay) - (var(--count) * 0.5s));
		animation-fill-mode: forwards;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-play-state: running;
		transform: translate(var(--origin-x), 0);
		flex: 0 0 auto;
		max-width: unset; /* negate prefers-reduced-motion */
	}
	@keyframes slide {
		100% {
    		transform: translate(var(--destination-x), 0);
		}
	}	
}

/* Statistics */
.stat {
	font-variant-numeric: tabular-nums;
}

.stat.plus:after {
	font-size: inherit;
	position: relative;
	content: '+';
	color: inherit;
	display: inline;
  	background-color: inherit;
	background-image: inherit;
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit; 
}

.stat.thousand-plus:after {
	font-size: inherit;
	position: relative;
	content: 'k+';
	color: inherit;
	display: inline;
  	background-color: inherit;
	background-image: inherit;
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit; 
}

.stat.million-plus:after {
	font-size: inherit;
	position: relative;
	content: 'm+';
	color: inherit;
	display: inline;
  	background-color: inherit;
	background-image: inherit;
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit; 
}

.stat.approx:before {
	font-size: inherit;
	position: relative;
	content: '~';
	color: inherit;
	display: inline;
  	background-color: inherit;
	background-image: inherit;
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit; 
}

.stat.years-old:after {
	font-size: inherit;
	position: relative;
	content: 'y/o';
	color: inherit;
	display: inline;
  	background-color: inherit;
	background-image: inherit;
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit; 
}

.stat.percent:after {
	font-size: inherit;
	position: relative;
	content: '%';
	color: inherit;
	display: inline;
  	background-color: inherit;
	background-image: inherit;
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit; 
}

/* Static gradient text */
.grad-text {
	color: var(--wp--preset--color--contrast);
  	background-color: var(--wp--preset--color--accent-2);
	background-image: var(--wp--preset--gradient--custom-fan-hub-gradient);
	background-size: 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}

/* Animated gradient text */
@media screen and (prefers-reduced-motion: no-preference) {
  @property --angle {
    inherits: true;
    initial-value: 180deg;
    syntax: '<angle>';
  }
  @keyframes rotate {
    to { --angle: 540deg; }
  }
}

.anim-grad-text {
	/* lh is line-height unit */
	--spread: 1;
	--highlight: 3;
	--anim-grad-text: conic-gradient(from var(--angle, 180deg) at 50% 70%, var(--wp--preset--color--contrast) 0deg, var(--wp--preset--color--accent-2) 72deg, var(--wp--preset--color--accent) 144deg, var(--wp--preset--color--accent-2) 216deg, var(--wp--preset--color--accent) 288deg, var(--wp--preset--color--contrast) 1turn);
    overflow: hidden;
    background: var(--anim-grad-text), linear-gradient(var(--wp--preset--color--contrast) 0 calc(var(--spread) * 1lh), transparent);
    background-repeat: repeat;
    background-size: 100% calc(var(--highlight) * 1lh), 100% calc(100% - (var(--highlight) * 1lh));
    background-position: 0 0, 0 calc(var(--highlight) * 1lh);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
	animation: rotate 6s infinite linear;
}

@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
	.anim-grad-text {
		animation: none !important; /* Target Safari */
	}
}	

/* Blobs */
.blobs {
	--size: 1.5rem;
	background: var(--wp--preset--color--base-2);
	width: calc(var(--size) * 5);
	height: calc(var(--size) * 4);
	display: grid;
	position: relative;
	pointer-events: none;
	margin-block-start: 0 !important;
	/* The magic piece */
	filter: blur(5px) contrast(30);
	mix-blend-mode: color-dodge;
}

/* .blobs::after {
	content: '';
	position: absolute;
	inset: 0;
	background: #d474ae;
	z-index: 1;
	mix-blend-mode: multiply;
} */

.blob {
	transform: translate3d(0, 0, 0);
	background: var(--wp--preset--color--contrast);
	width: var(--size);
	aspect-ratio: 1;
	position: absolute;
	top: 35%;
	left: 50%;
	translate: -50% -50%;
	border-radius: 10rem;
}

.blob:nth-of-type(1) {
  	animation: blob 1s infinite alternate ease-in-out;
}

.blob:nth-of-type(2) {
  	animation: blob-rev 1s infinite alternate ease-in-out;
}

.blob:nth-of-type(3) {
  	top: 70%;
	transform: scale(1.15);
	aspect-ratio: 1 / 1.25;
}

.blob:nth-of-type(4) {
  	transform: scale(0.8);
	top: 35%;
}

@keyframes blob {
  0% { transform: translateX(150%); }
  100% { transform: translate(0%, 150%); }
}

@keyframes blob-rev {
  0% { transform: translateX(-150%); }
  100% { transform: translate(0%, 150%); }
}


/* Custom scrollbar */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px !important;
	scroll-snap-align: start;
}	

::-webkit-scrollbar {
  	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track:vertical {
  	background: linear-gradient(0deg, var(--wp--preset--color--accent-2) 0%, var(--wp--preset--color--accent) 100%);
}

::-webkit-scrollbar-thumb:vertical {
  	background: transparent;
  	box-shadow: 0px 0px 0px 100000vh var(--wp--preset--color--base-2);
	border-radius: 10rem;
}

::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
  	background: var(--wp--preset--color--contrast);
}

::-webkit-scrollbar-corner {
	background: transparent;
}

::-webkit-scrollbar-track:horizontal {
  	background: var(--wp--preset--color--base-2);
	border-radius: 10rem;
}

::-webkit-scrollbar-thumb:horizontal {
	border-radius: 10rem;
	background: var(--wp--preset--color--accent-2);
	
}

::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:start:decrement {
	display: none;
}

::-webkit-scrollbar-button:horizontal:end:increment {
	background: linear-gradient(210deg, var(--wp--preset--color--base-2) 40%, rgba(0, 0, 0, 0) 41%),
		linear-gradient(330deg, var(--wp--preset--color--base-2) 40%, rgba(0, 0, 0, 0) 41%),
		linear-gradient(90deg, var(--wp--preset--color--base-2) 30%, rgba(0, 0, 0, 0) 31%);
	border-width: 1px 1px 1px 0;
}

::-webkit-scrollbar-button:horizontal:end:increment:hover {
	background: linear-gradient(210deg, var(--wp--preset--color--accent-2) 40%, rgba(0, 0, 0, 0) 41%),
		linear-gradient(330deg, var(--wp--preset--color--accent-2) 40%, rgba(0, 0, 0, 0) 41%),
		linear-gradient(90deg, var(--wp--preset--color--accent-2) 30%, rgba(0, 0, 0, 0) 31%);
}

::-webkit-scrollbar-button:horizontal:end:decrement {
	background: linear-gradient(30deg, var(--wp--preset--color--base-2) 40%, rgba(0, 0, 0, 0) 41%),
		linear-gradient(150deg, var(--wp--preset--color--base-2) 40%, rgba(0, 0, 0, 0) 41%),
		linear-gradient(270deg, var(--wp--preset--color--base-2) 30%, rgba(0, 0, 0, 0) 31%);
	border-width: 1px 0 1px 1px;
}

::-webkit-scrollbar-button:horizontal:end:decrement:hover {
	background: linear-gradient(30deg, var(--wp--preset--color--accent-2) 40%, rgba(0, 0, 0, 0) 41%),
		linear-gradient(150deg, var(--wp--preset--color--accent-2) 40%, rgba(0, 0, 0, 0) 41%),
		linear-gradient(270deg, var(--wp--preset--color--accent-2) 30%, rgba(0, 0, 0, 0) 31%);
}
	
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
	display: block;
	width: 20px;
	border-color: var(--wp--preset--color--accent-2);
	border-style: solid;
	background-color: var(--wp--preset--color--accent-2);		
}

::-webkit-scrollbar-button:horizontal:end:increment:hover, ::-webkit-scrollbar-button:horizontal:end:increment:active,
::-webkit-scrollbar-button:horizontal:end:decrement:hover, ::-webkit-scrollbar-button:horizontal:end:decrement:active {
	background-color: var(--wp--preset--color--base-2);
	cursor: pointer;
}

/* Selection */
::selection {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
	text-shadow: none;
}

::-moz-selection {
	background: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
	text-shadow: none;
}

img::selection {
	background: var(--wp--preset--color--accent-2);
}

img::-moz-selection {
	background: var(--wp--preset--color--accent-2);
}

::target-text {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border-radius: 0.25rem;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

:target {
	transition: all 400ms $cubic-bezier;
}

h1:target, h2:target, h3:target, h4:target p:target {
	color: var(--wp--preset--color--base-2);
	background: var(--wp--preset--color--accent-2);
	width: fit-content;
	padding: 0 1rem;
	border-radius: 0.25rem;
	transition: all 400ms $cubic-bezier;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* CookieYes */
.cky-consent-container:before {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: block;
		background: rgba(0, 0, 0, 0.75);
		content: '';
		z-index: -1;
}

.cky-consent-container.cky-hide:before {
	display: none;
}

/* Embeds */
.wp-block-cover .wp-block-embed {
    min-height: unset;
    min-width: unset;
}

/* Forms */
.hide-input {
  display: none !important;
}

input.checkbox-multiple, input.radio, input.checkbox {
  border: 1px solid var(--wp--preset--color--accent-2);
  accent-color: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--accent-2);
}

.contact-form .grunion-field-wrap input.checkbox {
  appearance: none;
  border: 1px solid;
  box-sizing: border-box;
  height: var(--jetpack--contact-form--font-size);
  margin-inline-end: calc(var(--jetpack--contact-form--font-size) / 2);
  outline-offset: 4px;
  padding: 0;
  position: relative;
  min-width: var(--jetpack--contact-form--font-size);
}	

.contact-form .grunion-field-wrap input.checkbox:checked:before {
  content: "✓";
  display: block;
  font-size: var(--jetpack--contact-form--font-size);
  left: calc(var(--jetpack--contact-form--font-size) / 2);
  line-height: 1;
  position: absolute;
  top: calc(var(--jetpack--contact-form--font-size) / 2);
  transform: translate(-50%, -50%);
}

input:disabled {
  background: #00000020 !important;
  color: #535369 !important;
}

:where(.contact-form textarea) {
    height: 120px;
	resize: vertical;
}

.contact-form-submission {
	color: var(--wp--preset--color--contrast);
	border: 0;
}

.contact-form-submission #contact-form-success-header {
	font-weight: 700;
}

.contact-form-submission .field-name {
	font-weight: 700;
}

.contact-form-submission .field-value {
	color: var(--wp--preset--color--contrast-2);
	font-weight: 400;
}

.ui-datepicker {
	background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--accent);
    border-radius: 0.25rem;
    border-top: 1px solid var(--wp--preset--color--accent);
}

.ui-datepicker td {
    border: 1px solid var(--wp--preset--color--accent-5);
}	

.ui-datepicker td.ui-datepicker-week-end {
    background-color: var(--wp--preset--color--base-2);
    border: 1px solid var(--wp--preset--color--accent-5);
}

.ui-datepicker td.ui-datepicker-today {
    background-color: unset;
}

.ui-datepicker td.ui-datepicker-today a {
	font-weight: bold;
	color: var(--wp--preset--color--contrast);
}

.ui-datepicker td .ui-state-default {
	color: var(--wp--preset--color--contrast-3);
}

.ui-datepicker td.ui-datepicker-current-day {
    background: var(--wp--preset--color--accent-2);
}

.ui-datepicker td.ui-datepicker-current-day a {
	font-weight: bold;
	color: var(--wp--preset--color--base);
}

.contact-form__error {
	border-radius: 0.5rem;
}

.contact-form__error a {
    color: inherit !important;
	background-image: linear-gradient(to right, var(--wp--preset--color--base), var(--wp--preset--color--base)), linear-gradient(to right, var(--wp--preset--color--base), var(--wp--preset--color--base)) !important;
}

.contact-form__error .contact-form__warning-icon {
    background-color: var(--jetpack--contact-form--inverted-text-color);
    border: 1px solid var(--jetpack--contact-form--inverted-text-color);
    color: var(--jetpack--contact-form--error-color);
}

.contact-form__error ul li::marker {
	color: inherit !important;
}

/* Carousel */
body {
	--wp--custom--carousel-block--navigation-size: 32px;
	--wp--custom--carousel-block--navigation-sides-offset: 8px;
	--wp--custom--carousel-block--navigation-color: var(--wp--preset--color--contrast);
	--wp--custom--carousel-block--navigation-fullwidth-color: var(--wp--preset--color--contrast);
	--wp--custom--carousel-block--pagination-top: auto;
	--wp--custom--carousel-block--pagination-bullet-size: 16px;
	--wp--custom--carousel-block--pagination-bullet-color: var(--wp--preset--color--contrast);
	--wp--custom--carousel-block--pagination-bullet-active-color: var(--wp--preset--color--accent-2);
	--wp--custom--carousel-block--pagination-bullet-opacity: 1;
	--wp--custom--carousel-block--pagination-bullet-active-opacity: 1;
	--wp--custom--carousel-block--pagination-bullet-horizontal-gap: 8px; /* Doesn't appear to work! */
	--swiper-pagination-bullet-horizontal-gap: 8px;
	--wp--custom--carousel-block--pagination-bullet-vertical-gap: 20px;
	/* --wp--custom--carousel-block--image-margin-top: Top spacing for image blocks;
	--wp--custom--carousel-block--image-margin-bottom: Bottom spacing for image blocks;
	--wp--custom--carousel-block--cover-margin-top: Top spacing for cover blocks;
	--wp--custom--carousel-block--cover-margin-bottom: Bottom spacing for cover blocks; */
}

.swiper-slide {
	cursor: grab;
}

.swiper-slide:active {
	cursor: grabbing;
}

/* Accordions */
details {
    background: var(--wp--preset--color--accent-4);
	border: 1px solid var(--wp--preset--color--accent-5);
    border-radius: 0.5rem;
}

details summary {
	/* font-weight: 700; */
	font-size: var(--wp--preset--font-size--large);
	padding-top: 1rem;
	display: flex;
    justify-content: space-between;
	gap: 2rem;
}

details summary:after {
	/* content: "\005E"; */
	/* border-width: 12px 12px 0 12px; */
	/* border-color: white transparent transparent transparent; */
	/* padding-left: 2rem; */
	content: "";
	margin-top: 0.35rem;
	border-left: 0.125rem solid var(--wp--preset--color--contrast);
	border-bottom: 0.125rem solid var(--wp--preset--color--contrast);
	width: 0.75rem;
	height: 0.75rem;
	flex: 0 0 0.75rem;
	transform: rotate(-45deg);
	transition: all 400ms ease;
}

details[open] summary:after {
	margin-top: 0.5rem;
	transform: rotate(-225deg);
	transition: all 400ms ease;
}

details * {
	padding: 0 1rem 1rem 1rem;
}

details a {
	padding: 0;
}

details summary:hover, details summary:focus, details[open] summary {
	/* text-decoration: underline; */
}

details[open] {
	border: 1px solid var(--wp--preset--color--accent);
}

summary::marker, summary::-webkit-details-marker {
	content: "";
	display: none;
}

/* Countdown */
#countdown {
    color: var(--wp--preset--color--contrast);
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.5rem);
	margin: 1em 0;
}

#countdown-timer span, #countdown-closed {
    background: #ffffff2b;
    padding: 0.25rem 0.25rem;
    margin: 0.125rem 0.125rem;
    min-width: clamp(1.25em, 2.5vw, 1.75em);
    display: inline-block;
    border-radius: 0.25rem;
	text-align: center;
}

#countdown-timer span.timeframe {
    margin-right: 1rem;
}

#countdown-closed {
	letter-spacing: 0.5em;
}