/*!
Theme Name: wfcu
Theme URI: https://underscoretw.com/
Author: Spry Agency
Author URI: https://spryagency.com
Description: A custom theme based on _tw
Version: 0.1.0
Tested up to: 6.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wfcu
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

wfcu is based on _tw https://underscoretw.com/, (C) 2021-2024 Greg Sullivan
_tw is distributed under the terms of the GNU GPL v2 or later.

_tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2023 Automattic, Inc.
Underscores and Varia are distributed under the terms of the GNU GPL v2 or later.
*/

.ordinal {
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
}

.filter {
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
}

/* Modern reset: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */

body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: var(--color-link); /* color: currentColor; */
}

a:has([class]) {
	text-decoration-skip-ink: none;
	text-decoration: none;
	color: currentColor; /* color: currentColor; */
}

/* Make images easier to work with */

img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */

textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */

:target {
  scroll-margin-block: 5ex;
}

@font-face {
	font-family: 'Quattrocento';
	src:  url('/wp-content/themes/wfcu/theme/fonts/Quattrocento/Quattrocento-Bold.woff2') format('woff2'),
	url('/wp-content/themes/wfcu/theme/fonts/Quattrocento/Quattrocento-Bold.woff') format('woff');
	font-weight: 700;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Quattrocento Sans';
	src:  url('/wp-content/themes/wfcu/theme/fonts/Quattrocento_Sans/QuattrocentoSans-Regular.woff2') format('woff2'),
	url('/wp-content/themes/wfcu/theme/fonts/Quattrocento_Sans/QuattrocentoSans-Regular.woff') format('woff');
	font-weight: 400;
	font-display: swap;
	font-style: normal;
}

/**
* @license
*
* Font Family: Gambetta
* Designed by: Paul Troppmar
* URL: https://www.fontshare.com/fonts/gambetta
* © 2024 Indian Type Foundry
*
* Gambetta Variable (Variable font)
* Gambetta VariableItalic (Variable font)
*/

@font-face {
	font-family: 'Gambetta';
	src: url('/wp-content/themes/wfcu/theme/fonts/Gambetta_Complete/Fonts/WEB/fonts/Gambetta-Variable.woff2') format('woff2'),
	url('/wp-content/themes/wfcu/theme/fonts/Gambetta_Complete/Fonts/WEB/fonts/Gambetta-Variable.woff') format('woff'),
	url('/wp-content/themes/wfcu/theme/fonts/Gambetta_Complete/Fonts/WEB/fonts/Gambetta-Variable.ttf') format('truetype');
	font-weight: 300 700;
	font-display: swap;
	font-style: normal;
}

@font-face {
	font-family: 'Gambetta';
	src: url('/wp-content/themes/wfcu/theme/fonts/Gambetta_Complete/Fonts/WEB/fonts/Gambetta-VariableItalic.woff2') format('woff2'),
	url('/wp-content/themes/wfcu/theme/fonts/Gambetta_Complete/Fonts/WEB/fonts/Gambetta-VariableItalic.woff') format('woff'),
	url('/wp-content/themes/wfcu/theme/fonts/Gambetta_Complete/Fonts/WEB/fonts/Gambetta-VariableItalic.ttf') format('truetype');
	font-weight: 300 700;
	font-display: swap;
	font-style: italic;
}

/* Swiper */

/**
 * Swiper 11.1.15
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 18, 2024
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}

:root{--swiper-theme-color:#007aff}

:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}

.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}

.swiper-vertical>.swiper-wrapper{flex-direction:column}

.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}

.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}

.swiper-horizontal{touch-action:pan-y}

.swiper-vertical{touch-action:pan-x}

.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}

.swiper-slide-invisible-blank{visibility:hidden}

.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}

.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}

.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}

.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}

.swiper-3d .swiper-wrapper{transform-style:preserve-3d}

.swiper-3d{perspective:1200px}

.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}

.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}

.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}

.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}

.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}

.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}

.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}

.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}

.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}

.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}

.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}

.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}

.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}

.swiper-lazy-preloader-black{--swiper-preloader-color:#000}

@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}

:root{--swiper-navigation-size:44px}

.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}

.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}

.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}

.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}

.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}

.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}

.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}

.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}

.swiper-button-lock{display:none}

.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}

.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}

.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}

.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}

.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}

.swiper-pagination.swiper-pagination-hidden{opacity:0}

.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}

.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}

.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}

.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}

button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}

.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}

.swiper-pagination-bullet:only-child{display:none!important}

.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}

.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}

.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}

.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}

.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}

.swiper-pagination-lock{display:none}

.container {
  width: 100%;
}

@media (min-width: 330px) {

  .container {
    max-width: 330px;
  }
}

@media (min-width: 760px) {

  .container {
    max-width: 760px;
  }
}

@media (min-width: 940px) {

  .container {
    max-width: 940px;
  }
}

@media (min-width: 1350px) {

  .container {
    max-width: 1350px;
  }
}

:root {
  --color-dark: #0D0D0D;
  --color-dark-glare: #151a34;
  --color-mid: #ABA9A2;
  --color-light: #ffffff;
  --color-primary: #002e5e;
  --color-primary-light: #6f8fb6;
  --color-secondary: #cbb794;
  --color-text: #000000;
  --color-link: #0000EE;
  --color-link-visited: #551A8B;
  --color-link-active: #FF0000;
  --space-xs: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
  --space-s: clamp(0.875rem, 0.83rem + 0.20vw, 1rem);
  --space-m: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
  --space-l: clamp(2.1875rem, 2.09rem + 0.49vw, 2.5rem);
  --space-xl: clamp(3.0625rem, 2.92rem + 0.69vw, 3.5rem);
  --space-2xl: clamp(3.5rem, 3.34rem + 0.78vw, 4rem);
  --space-3xl: clamp(4.375rem, 4.17rem + 0.98vw, 5rem);
  --space-4xl: clamp(6.5625rem, 6.26rem + 1.47vw, 7.5rem);
  --space-s-m: clamp(0.875rem, 0.67rem + 0.98vw, 1.5rem);
  --space-xs-l: clamp(0.4375rem, -0.23rem + 3.24vw, 2.5rem);
  --space-m-l: clamp(1.3125rem, 0.93rem + 1.86vw, 2.5rem);
  --space-l-xl: clamp(2.1875rem, 1.76rem + 2.06vw, 3.5rem);
  --space-2xl-4xl: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);
  --size-step-000: clamp(0.79rem, 0.79rem + -0.01vw, 0.78125rem);
  --size-step-00: clamp(0.88875rem, 0.87rem + 0.08vw, 0.9375rem);
  --size-step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --size-step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);
  --size-step-2: clamp(1.265625rem, 1.15rem + 0.56vw, 1.62rem);
  --size-step-3: clamp(1.42375rem, 1.26rem + 0.82vw, 1.94375rem);
  --size-step-4: clamp(1.601875rem, 1.37rem + 1.15vw, 2.3325rem);
  --size-step-5: clamp(1.801875rem, 1.48rem + 1.56vw, 2.799375rem);
  --size-step-6: clamp(2.0275rem, 1.60rem + 2.09vw, 3.359375rem);
  --size-step-7: clamp(2.280625rem, 1.71rem + 2.75vw, 4.03125rem);
  --size-step-8: clamp(2.565625rem, 1.83rem + 3.56vw, 4.8375rem);
  --size-step-9: clamp(2.88625rem, 1.94rem + 4.58vw, 5.805rem);
  --size-step-10: clamp(3.2475rem, 2.04rem + 5.83vw, 6.965625rem);
  --leading-micro: 0.85;
  --leading-flat: 1;
  --leading-fine: 1.2;
  --leading-standard: 1.4;
  --leading-loose: 1.7;
  --font-heading: Quattrocento-Sans,sans-serif;
  --font-base: Gambetta,Inter,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-mono: DM Mono,monospace;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;
    --gutter: var(--space-m-l);
    --transition-base: 250ms ease;
    --transition-movement: 200ms linear;
    --transition-fade: 300ms ease;
    --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
    --stroke-width: 1px;
    --stroke: var(--stroke-width) dashed var(--color-mid);
    --stroke-solid: var(--stroke-width) solid var(--color-mid);
    --radius-s: 0.2rem;
    --radius-m: 0.75rem;
    --radius-l: 2.5rem;
    --uppercase-kerning: 0.04ch;
    --indent-size: var(--space-xs-l);
}

/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

body {
    /*background: var(--color-dark);*/
    color: var(--color-text);
    font-size: var(--size-step-1);
	font-family: var(--font-base), serif;
	font-variation-settings: 'wght' var(--font-weight);
	/*font-variation-settings: "wght" var(--font-medium);
	/*font-weight: var(--font-medium);*/
    line-height: var(--leading-standard);
    font-size-adjust: from-font;
    margin: 0;
}

:is(h1, h2, h3, h4) {
	font-family: var(--font-heading);
	font-weight: var(--font-bold);
	line-height: var(--leading-flat);
    text-wrap: balance;
}

h1 {
    font-size: var(--size-step-6);
    max-width: 35ch;	/* Previously 20ch */
}

h2 {
    font-size: var(--size-step-5);
    max-width: 35ch;
}

h3 {
    font-size: var(--size-step-4);
    max-width: 35ch;
}

:is(h4, h5, h6) {
    font-size: var(--size-step-3);
}

small {
    font-size: var(--size-step-0);
}

ins {
    text-decoration: none;
    background: var(--color-secondary);
    color: var(--color-text);
    padding-inline: 0.3em;
}

:is(code, kbd, samp) {
    font-family: var(--font-mono);
    padding: 0.2em 0.2em 0.05em 0.2em;
    hyphens: none;
    tab-size: 2;
    text-align: left;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    box-decoration-break: clone;
}

/* This is quite a new property, so we want code styles to at least, not be huge or tiny */

@supports not (font-size-adjust: from-font) {
    :is(code, kbd, samp) {
        font-size: 0.8em;
    }
}

pre:has(code) {
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
}

pre code {
    border: none;
    background: none;
    padding: 0;
}

kbd {
    border: 1px solid;
    padding-block-end: 0.1em;
}

var {
    font-style: normal;
    font-weight: var(--font-medium);
}

q {
    font-style: italic;
}

ul:has([class]),
ul[role='list'] {
	padding-inline-start: 0;
}

ul:not([class]):not([role='list']){
    padding-inline-start: 1.7ch;
    list-style-type: disc;
}

ul:not([class]):not([role='list']) > li {
    padding-inline-start: var(--space-xs);
}

ul ::marker {
    font-size: 0.8lh;
}

ol ::marker {
    font-size: 1em;
    font-weight: var(--font-bold);
}

/* Lists with classes and roles will be out of standard flow, so remove the default spacing */

[role='list'][class],
[role='tablist'][class] {
    margin-block: 0;
    padding: 0;
}

dt {
    font-weight: var(--font-medium);
}

dt + dd {
    margin-block-start: var(--space-xs);
}

dd + dt {
    margin-block-start: var(--space-s);
}

dd {
    margin-inline-start: 1.5ch;
}

blockquote {
    margin-inline: 0;
    color: var(--color-text);
}

blockquote footer {
    margin-block-start: var(--space-s);
    color: var(--color-primary);
    font-size: var(--size-step-0);
}

blockquote q {
    font-style: normal;
}

:is(video, iframe[src*='youtube'], iframe[src*='vimeo']) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

img {
    height: auto;
    max-width: 100%;
    display: block;
}

figcaption {
    padding-block-start: 0.5em;
    font-size: var(--size-step-0);
    font-family: monospace;
}

table {
    border: var(--stroke);
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
    font-weight: var(--font-bold);
    line-height: var(--leading-fine);
}

thead th {
    padding-block: var(--space-s);
}

td,
th {
    padding: var(--space-xs) var(--space-s);
}

th:not(:only-of-type) {
    border-block-end: var(--stroke);
}

th:only-of-type {
    border-inline-end: var(--stroke);
}

:is(th, td) ~ :is(th, td) {
    border-inline-start: var(--stroke);
}

tr + tr :is(th, td) {
    border-block-start: var(--stroke);
}

caption {
    caption-side: bottom;
    margin-block-start: var(--space-s);
}

article
a[href^='http']:not([href*='wfcu.local']):not([href*='wfcu-centre.com']):not([href*='wfcu.siteinprocess.com']):not(.button) {
	padding-inline-end: 0.5em;
	/*padding-inline-end: 0.8em;*/
}

/*article
a[href^='http']:not([href*='wfcu.local']):not([href*='wfcu-centre.com']):not([href*='wfcu.siteinprocess.com']):not(
    .no-indicator
  ){
	text-wrap: nowrap;
}*/

/* TODO FIX: icon can sometimes dangle onto next line */

article
a[href^='http']:not([href*='wfcu.local']):not([href*='wfcu-centre.com']):not([href*='wfcu.siteinprocess.com']):not(
    .no-indicator
  )::after {
	position: absolute;
	display: inline-block;
	inline-size: 1em;
	block-size: 1em;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath d='M5.63605 18.364L18.364 5.63603M18.364 5.63603L8.46446 5.63604M18.364 5.63603V15.5355' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");;
	mask-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath d='M5.63605 18.364L18.364 5.63603M18.364 5.63603L8.46446 5.63604M18.364 5.63603V15.5355' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");;
	mask-size: 60% auto;
	mask-repeat: no-repeat;

	/*margin-inline-start: -0.15em;*/
	/*background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath d='M5.63605 18.364L18.364 5.63603M18.364 5.63603L8.46446 5.63604M18.364 5.63603V15.5355' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");*
	background-position: center;
	background-size: 60% auto;*/
	/* alternative text rules */
	content: '(external link)';
	overflow: hidden;
	white-space: nowrap;
	text-indent: 1em; /* the width of the icon */
}

/* TODO Change colours based on link colour */

a:not([class]):hover {
	color: var(--color-link);
    /*text-underline-offset: 0.2lh;*/
}

a:not([class]):visited {
	color: var(--color-link-visited);
}

:is(h1, h2, h3, h4) a:not([class]) {
    text-decoration-thickness: 0.1ex;
    text-underline-offset: 0.2ex;
}

:is(h1, h2, h3, h4) a:not([class]):hover {
	color: var(--color-link);
}

:is(h1, h2, h3, h4) a:not([class]):visited {
	color: var(--color-link-visited);
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--focus-color, currentColor);
    outline-offset: var(--focus-offset, 0.2lh);
}

/* Firefox is the only browser that doesn't outline the whole element unless you make it display: inline-block. That in itself causes multiple flow issues so we can detect it, using its own vendor prefix and reduce focus offset
*/

@supports (-moz-appearance: none) {
    :root {
        --focus-offset: 0.08em;
    }
}

:target {
    scroll-margin-block: 5lh;
}

::selection {
    color: var(--color-text);
    background: var(--color-secondary);
}

hr {
    border: none;
    border-block-start: var(--hr-stroke, var(--stroke));
    margin-block: var(--flow-space, var(--space-xl));
}

svg:not([class]) {
    width: auto;
    height: 1lh;
}

svg {
    flex-shrink: 0;
}

svg[role='img'][width][height] {
    width: revert;
    height: revert;
}

/* There's a .flow composition, but this prevents forms from having to have that applied where markup is harder to control in certain systems. It still uses the --flow-space variables though to make managing space easier */

form > * + * {
    margin-top: var(--flow-space, 1rem);
}

:is(input, select, textarea) {
    accent-color: var(--color-primary);
}

:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea) {
    padding: 0.5em 0.8em;
    border-radius: var(--radius-s);
    border: var(--stroke-solid);
	/*background: var(--color-dark-glare);*/
    color: var(--color-text);
    width: 100%;
}

:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea)::placeholder {
        color: var(--color-mid);
        opacity: 1;
    }

:is(input[type='search']){
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='gray' %3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/%3E%3C/svg%3E");
	background-size: 3ex 3ex;
	background-repeat: no-repeat;
	background-position: 1ex center;
	padding-inline-start: 5ex;
}

label {
    line-height: var(--leading-fine);
    font-weight: var(--font-medium);
}

label::after {
    content: '\A';
    white-space: pre;
}

/* Usually label wraps checkbox and radio buttons, so we give ourselves more layout and text-flow control with flex */

label:has(input) {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    font-weight: var(--font-normal);
}

label:has(input) + label:has(input) {
    --flow-spce: var(--space-s-m);
}

/* Slightly adjusts the vertical position of the check/radio */

label:has(input) input {
    transform: translateY(-0.1ex);
}

input:disabled {
    background: var(--color-mid);
}

input:disabled,
label input:disabled + * {
    cursor: not-allowed;
}

/* Sets a sensible height if textarea rows attribute is missing */

textarea:not([rows]) {
    min-height: 10em;
}

fieldset {
    border: var(--stroke);
    padding: var(--space-s);
}

legend {
    font-weight: var(--font-medium);
    padding-inline: var(--space-xs);
}

summary {
    font-weight: var(--font-bold);
    cursor: pointer;
}

details[open] summary {
    margin-block-end: var(--space-s);
}

#content{ /* Padding main content on every page */
	padding-block: var(--space-xl);
}

.home #content{	/* No padding on top of homepage */
	padding-block-start: 0;
}

.button {
    --button-bg: var(--color-secondary);
    --button-text: var(--color-dark);
    --button-x-padding: 1.5em;
    --button-y-padding: 0.8em;
	--button-radius: 0.5em;
    --focus-color: var(--color-secondary);

	display: block;
    line-height: var(--leading-flat);
    border: none;
    cursor: pointer;
    background: var(--button-bg);
    color: var(--button-text);
    padding: var(--button-y-padding) var(--button-x-padding);
    text-transform: uppercase;
    letter-spacing: var(--uppercase-kerning);
    text-decoration: none;
	font-family: var(--font-heading);
    font-size: var(--size-step-0);
    font-weight: var(--font-bold);
	border-radius: var(--button-radius);
	text-wrap: nowrap;
	max-width: fit-content;
}

.button:hover {
    filter: brightness(105%);
}

.button:active {
    transform: scale(99%);
}

a[href^='http']:not([href*='wfcu.local']):not([href*='wfcu-centre.com']):not([href*='wfcu.siteinprocess.com']).button {
	padding-inline-end: calc(var(--button-x-padding) + 0.65em); /* 0.5em for half image, + 0.15em for icon offset */
}

/* Variant exceptions */

.button[data-button-variant='secondary'] {
    --button-bg: var(--color-dark-glare);
    --button-text: var(--color-light);
    --focus-color: var(--color-dark);
}

.button[data-button-variant='ghost'] {
	--button-bg: transparent;
	--button-text: var(--color-primary);
	--focus-color: var(--color-dark);

	border: 1px solid var(--color-primary)
}

.detailsSidebar {
	--flow-space: var(--space-m);

	font-size: var(--size-step-0);
}

.detailsSidebar h2{
	font-size: var(--size-step-2);
	margin-bottom: var(--space-xs);
}

.detailsSidebar h3{
	font-size: var(--size-step-0);
	margin-bottom: var(--space-xs);
}

#eventGrid {
	padding-top: var(--space-m-l)
}

.card{
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	border: 1px solid gray;
}

.card__image{
	position: relative;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.card__image img{
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
		width: 100%;
		object-fit: fill;
		max-height: 19rem; /* 304px */
	}

.card__dateBubble{
	background: #fff;
	position: absolute;
	bottom: var(--space-s);
	left: var(--space-s);
	padding: var(--space-xs) var(--space-s);
	border-radius: var(--space-xs);
	font-family: var(--font-heading), sans-serif;
	line-height: var(--leading-micro);
}

/* TODO separate light and dark theme buttons? */

.card__dateBubble[data-theme="light"]{
	background: #FFF;
	color: #000;
}

.card__dateBubble[data-theme="dark"]{
	background: #000;
	color: #FFF;
}

.card__details{
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 0 var(--space-s) var(--flow-space, 1em);
}

.card__title{
	font-size: var(--size-step-3);
	line-height: var(--leading-flat);
}

.card__subtitle{
	order: -1;
	font-size: var(--size-step-0);
	line-height: var(--leading-flat);
}

.card__summary{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card__buttons{
	--cluster-vertical-alignment: flex-end;
	--gutter: var(--space-s);
	flex-grow: 1;
}

/* Styling for list style cards */

/*
.card {
	!*--sidebar-target-width: 20rem;*!
	padding-block: var(--space-l);

!*
	background-color: white;
	filter: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
	border-radius: var(--radius-m);*!
}

.card__content {
	display: flex;
	flex-direction: column;
}

.card__date {
	--flow-space: var(--space-xs);
	font-size: var(--size-step-0);
	font-variation-settings: "wght" 550;
	line-height: var(--leading-flat);
	order: -1;
}

.card__dateBubble{
	--flow-space: var(--space-xs);
	!*font-size: var(--size-step-0);*!
	font-variation-settings: "wght" 550;
	line-height: var(--leading-flat);

	text-align: center;
	color: white;
	background: var(--color-primary);
	padding: var(--space-s) var(--space-m);
	border-radius: var(--radius-s);
	width: fit-content;
	margin-top: calc(var(--space-l) * -1);
	margin-left: var(--space-s-m);
	z-index: 10;
	position: absolute;
	filter: drop-shadow(0 -4px 3px rgba(255,255 ,255, 0.07)) drop-shadow(0 -2px 2px rgba(255,255,255, 0.06));

	& span{
		font-size: var(--size-step-3);
	}
}

.card__summary {
	--flow-space: var(--space-s);
}

.card__buttons {
	--switcher-target-container-width: 25rem; !* Length to keep "Tickets go on sale" one line *!
	--switcher-vertical-alignment: end; !* [1] *!
	--gutter: var(--space-s-m);

	flex-grow: 1; !* [1] *!
	text-wrap: balance;
	line-height: var(--leading-flat);

	!* 1.  Position buttons at bottom of image *!
}

.card img {
	!* TODO set a ratio? *!
	!*aspect-ratio: 320/213;
	object-fit: cover;*!
	border-radius: var(--radius-s);
}

.card:has([href]:hover) {
	background: rgb(from var(--color-dark-glare) r g b / 5%);
	transition: background var(--transition-fade);
}
*/

.eventFilter{
	--gutter: 0;

	position: sticky;
	top:0;
	z-index:10;
	background:#fff;

	font-family: var(--font-heading), sans-serif;
	border-bottom: 1px solid rgb(79, 88, 95); /* TODO change me or standardise color */
}

.eventFilter__count{
	font-size: var(--size-step-0);
	color: rgb(79, 88, 95); /* TODO change me or standardise color */
	padding-top: var(--space-xs);
}

.eventFilter__buttons {
	display: flex;
	border-left: 1px solid rgb(79, 88, 95);
}

.eventFilter__button{
	background: transparent;
	border: none;
	color: rgb(79, 88, 95); /* TODO change me or standardise color */
	padding : var(--space-xs) var(--space-xs);
	margin-inline: var(--space-xs);
}

.eventFilter__button:hover{
	cursor: pointer;
	color: var(--color-primary);
}

.eventFilter__button[aria-pressed="true"]{
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-primary);
}

.eventFilter_label{
	display: block;
	margin-top: -0.5em;
}

.eventFilter_icon{
	width: 1lh;
	height: 1lh;
}

#resetFilterBtn{
	color: #811719;
}

/*TODO add indicator you can scroll*/

/*.eventFilter.reel.overflowing{
	-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0, 0));
}*/

.featured-events-wrapper{
	--gutter: 0;
	border-radius: var(--radius-s);
}

.wrapper.featured-events-wrapper{
	padding-block-start: 0;
}

.featured-events-slider{
	width: 100%;
	background: var(--color-dark);
}

.featured-events-slider img{
	width: 100%;
	aspect-ratio: 912/360;
}

.featured-events-slider__bottom{
	--gutter: var(--space-m);

	position: relative;
	background: var(--color-dark);
	padding: var(--space-l) var(--space-xl);

	flex-grow: 1; /* fill available space */
}

.featured-events-slider .details{
	color: var(--color-light);
}

/* Whole slide a link */

.featured-events-slider .swiper-slide {
		position: relative;

		/* all slides same height */
		height: auto;
		display: flex;
		flex-direction: column;
	}

.featured-events-slider .swiper-slide .button::before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

.featured-events-slider .swiper-slide:hover {
		cursor: pointer;
	}

.featured-events-slider .swiper-slide:hover,
	.featured-events-slider .swiper-slide:focus-within {
		filter: brightness(105%);
	}

/* Style swiper pagination bullets */

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
	bottom: 30px;
}

.swiper-pagination-bullet{
	background: var(--color-light);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active{
	background: var(--color-secondary);
}

.swiper-button-next, .swiper-button-prev{
	color: var(--color-secondary);
	filter: drop-shadow(0 1px 1px rgb(0 0 0 / 1));
}

.hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: center;
    position: relative;
    border-radius: var(--radius-m);
    overflow: hidden;
}

.hero::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 50%) 100%);
}

.hero img {
    grid-column: 1;
    grid-row: 1;
}

.hero__skip-link {
    --skip-link-color: var(--color-primary);
    --flow-space: var(--space-xs);

    grid-column: 1;
    grid-row: 1;
    z-index: 1;
    font-weight: var(--font-medium);
    font-size: var(--size-step-0);
    text-align: center;
    text-decoration: none;
    line-height: var(--leading-fine);
    color: var(--skip-link-color);
    max-width: 12ch;
}

.hero__skip-link-icon {
    display: grid;
    place-items: center;
    margin-inline: auto;
    font-size: var(--size-step-2);
    height: max(50px, var(--size-step-7));
    aspect-ratio: 1/1;
    background: var(--skip-link-color);
    color: var(--color-dark);
    border-radius: 50%;
}

.hero__skip-link-label {
    display: block;
}

.hero__skip-link:hover .hero__skip-link-icon {
    transform: translateY(5%);
    transition: transform var(--transition-bounce);
}

/* Layouts are completely controlled by the layout compositions, flow and cluster. All we do in this component is configure their spacing and the visual appearance of links. */

.nav {
    --flow-space: var(--space-m);
    /*--gutter: var(--space-m) var(--space-l);*/

    line-height: var(--leading-flat);
}

/* The default behaviour for links is to have an underline. We remove that only if the item isn't the current active page */

.nav a:not([aria-current='page']) {
    text-decoration: none;
}

.shiftnav-search .shiftnav-searchform{
	background: transparent !important;
}

.prose {
    --flow-space: var(--space-l);
}

.prose :is(h1, h2, h3) {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.prose :is(p, li, dl, figcaption, blockquote) {
    max-width: 60ch;
    text-wrap: pretty;
}

.prose :is(h1, h2, h3, h4) + *:not([class]) {
    --flow-space: var(--space-m);
}

/* Add more space on and around figures and tables */

.prose :is(figure, table),
.prose :is(figure, table) + * {
    --flow-space: var(--space-2xl);
}

/* Add more space to headings on block start */

.prose * + :is(h1, h2, h3, h4):not([class]) {
    --flow-space: var(--space-xl);
}

.prose :is(ul, ol):not([class]) li + li,
.prose :is(ul, ol):not([class]) li > :is(ol, ul) {
    --flow-space: var(--space-xs);
}

.prose hr {
    --flow-space: var(--space-2xl);
}

.prose :is(img, picture, video) {
    border: var(--stroke-solid);
}

@media (min-width: 760px) {
    .prose :is(h1, h2, h3) {
        overflow-wrap: unset;
        hyphens: unset;
    }
}

.search {
	--flow-space: var(--space-s);
}

.search .page-header {
	padding-block-end: var(--space-m);
}

.search h3{
	font-weight: normal;
	font-size: var(--size-step-0);
}

.search-result{
	padding-block: var(--space-s);
}

.site-foot {
	--cluster-vertical-alignment: top;
	--gutter: var(--space-s);
    /*background: var(--color-dark-glare);
    color: var(--color-light);*/

	border-top: 1px solid rgb(79, 88, 95);

    line-height: var(--leading-flat);
    padding-block: var(--space-m) 0;
	font-size: var(--size-step-00);
}

.site-foot h2{
	font-size: var(--size-step-1);
}

.site-foot ul{
	margin-block-start: 0.5em;
}

.site-foot__top{
	--gutter: var(--space-m-l);
	width: fit-content;
}

.site-foot__top li{
	line-height: var(--leading-standard);
}

.site-foot__bottom {
	border-top: 1px solid rgb(79, 88, 95);
	padding-block: var(--space-s);
}

.footer__contact{
	--gutter: var(--space-s);
	--cluster-vertical-alignment: center;
}

.site-head {
	--gutter: var(--space-m);

    /*text-transform: uppercase;
    letter-spacing: var(--uppercase-kerning);*/
    line-height: var(--leading-flat);
	font-family: var(--font-heading), sans-serif;
    font-size: var(--size-step-00);
    font-weight: var(--font-bold);
    padding-block-end: var(--space-xs);

	/*position: fixed;*/
	z-index: 90;
	width: 100%;
	background: white;
}

.site-head__utility{

	--flow-space: 0;
	--cluster-horizontal-alignment: flex-end;
	--cluster-vertical-alignment: baseline;

	padding-block: var(--space-xs);
	background: var(--color-dark);
}

/* TODO fix hover state colours */

.site-head__utility a:not([class]),
.site-head__utility a:not([class]):visited{
	color: white;
}

.site-head__utility a:not([class]):hover {
	color: var(--color-secondary);
}

.site-head__lower{
	padding-block: var(--space-xs);
	position: fixed;
	background: white;
	width: 100%;
	z-index: 10;
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.site-head__lower.nav--scrolling{
	top: 0;
}

.site-head__brand {
	width: clamp(25ch, 60%, 50rem);
}

.site-head__nav{
	--gutter: var(--space-m) var(--space-l);

	padding-top: .85em !important;
	font-size: var(--size-step-1);
}

.site-head hr {
    --flow-space: var(--space-xs);
    --hr-stroke: var(--stroke-width) solid var(--color-primary);
}

.site-head input{
	max-width: 15rem;
}

.breadcrumb-border * + *{
	border-left: 1px solid gray;
	padding-left: var(--gutter, var(--space-m));
}

/******************/

/* Navigation Specific Styles */

.menu-item {
	position: relative;
}

.menu-item a {
	color: var(--color-text, #333);
	text-decoration: none;
	display: block;
	white-space: nowrap;
}

.sub-menu .menu-item a {
	padding: 0.5rem 1rem;
}

.sub-menu .menu-item a:hover {
	background: var(--color-secondary);
	color: black;
}

/* Style last nav item (buy button) */

.site-nav ul:not(.sub-menu) > li:last-of-type a{
	background: var(--color-secondary);
	border-radius: var(--button-radius, 0.5em);
	color: black;
	padding: 0.5rem 1rem;
}

.site-nav ul:not(.sub-menu) > li:last-of-type a:hover {
		filter: brightness(105%);
	}

.site-nav ul:not(.sub-menu) > li:last-of-type a:active {
		transform: scale(99%);
	}

/* Dropdown Styles */

.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	min-width: 200px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.2s ease-in-out;
	z-index: 100;
}

.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:focus-within .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.shiftnav-toggle.shiftnav-toggle-button{
	background: transparent;
	font-size: 2rem;
	color: var(--color-primary);
}

.shiftnav-toggle.shiftnav-toggle-button:hover{
	background: transparent;
	color: var(--color-primary);
}

#content{
	margin-top:80px;
}

.nav-logo{
	max-width: 60vw;
}

.site-head__utility,
.site-nav {
	display: none;
}

@media (min-width: 998px) {
	.nav-logo{
		max-width: unset;
	}
	.site-head__utility,
	.site-nav{
		display: block;
	}
	.shiftnav-toggle,
	#shiftnav-main {
		display: none!important;
	}
}

/* Responsive Adjustments */

/*@media (max-width: 40em) {
	.cluster {
		flex-direction: column;
		align-items: stretch;
	}

	.sub-menu {
		position: static;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		padding-left: 1rem;
	}

	.menu-item a {
		padding: 0.75rem 1rem;
	}
}*/

/* Add a small indicator for dropdown items */

.menu-item-has-children > a::after {
	content: "▾";
	margin-left: 0.5em;
	display: inline-block;
	transition: transform 0.2s ease;
}

.menu-item-has-children:hover > a::after {
	transform: rotate(180deg);
}

.skip-link {
	clip: rect(1px, 1px, 1px, 1px);
	display: block;
	block-size: 1px;
	overflow: hidden;
	position: absolute;
	inline-size: 1px;
	top: 1rem;
	left: 1rem;
	z-index: 999;
}

.skip-link:focus {
	clip: auto;
	block-size: auto;
	overflow: visible;
	inline-size: auto;
	background-color: var(--color-light);
	color: var(--color-text);
	padding: var(--space-xs) var(--space-s-m);
	border-radius: var(--border-radius);
	line-height: 1;
}

.skip-link:not(:focus) {
	border: 0;
	clip: rect(0 0 0 0);
	block-size: auto;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	inline-size: 1px;
	white-space: nowrap;
}

.sponsors img{
	/*height: var(--space-l-xl);*/
	width: var(--space-2xl-4xl);
}

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start): How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment (center): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-m));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}

/*
FLOW COMPOSITION
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/blog/my-favourite-3-lines-of-css/
*/

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(
    var(--grid-placement, auto-fill),
    minmax(var(--grid-min-item-size, 16rem), 1fr)
  );
  gap: var(--gutter, var(--space-l));
}

/* A split 50/50 layout */

.grid[data-layout='50-50'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 33rem);
}

/* Three column grid layout */

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

.reel {
	position: unset; /* fix for calendar popup */
	display: flex;
	block-size: auto;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-color: #fff #000;
}

.reel::-webkit-scrollbar {
	block-size: 1rem;
}

.reel::-webkit-scrollbar-track {
	background-color: #000;
}

.reel::-webkit-scrollbar-thumb {
	background-color: #000;
	background-image: linear-gradient(#000 0, #000 0.25rem, #fff 0.25rem, #fff 0.75rem, #000 0.75rem);
}

.reel > * {
	flex: 0 0 auto;
}

.reel > img {
	block-size: 100%;
	flex-basis: auto;
	width: auto;
}

/* Not needed? this messes with divider spacing */

/*.reel > * + * {
	margin-inline-start: 1rem;
}*/

.reel.overflowing {
	padding-block-end: 1rem;
}

.reel-instructions{
	font-family: var(--font-heading), sans-serif;
	font-weight: bold;
	display: none;
}

/* Show scroll directions when reel is scrollable */

.reel.overflowing+.reel-instructions{
	display: block;
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--repel-vertical-alignment (center): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-m));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

/* 
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right 
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

.sidebar[data-reversed] {
  flex-direction: row-reverse;
}

.sidebar[data-direction='rtl'] > :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-width: var(--sidebar-content-min-width, 50%);
}

/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment (flex-start): How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 4 items,
so anything greater than 4 is ful width */

.switcher > :nth-child(n + 5) {
  flex-basis: 100%;
}

/*
WRAPPER COMPOSITION 
A common wrapper/container
*/

.wrapper {
  margin-inline: auto;
  max-width: var(--wrapper-max-width, 1360px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

.indent {
    border-inline-start: var(--indent-size, var(--space-xs-l)) solid
    var(--indent-color, currentColor);
}

/* 
REGION UTILITY
Consistent block padding for page sections
*/

.region {
  padding-block: var(--region-space, var(--space-m));
  position: relative;
}

/* 
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/ 
*/

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.-order-1 {
  order: -1;
}

.-order-2 {
  order: -2;
}

.-order-3 {
  order: -3;
}

.mt-m {
  margin-top: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.resize {
  resize: both;
}

.columns-2 {
  columns: 2;
}

.flex-col {
  flex-direction: column;
}

.text-step-1 {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);
}

.font-bold {
  font-weight: 700;
}

.lowercase {
  text-transform: lowercase;
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.content-none {
  --tw-content: none;
  content: var(--tw-content);
}