/*
 * Global Co-operation House — template styles.
 *
 * legacy/legacy.css carries the look of the old T3/Uber site unchanged; this file holds everything
 * the new template does differently: native <dialog> menu, scroll-reveal animations, and the
 * components that replaced Smart Slider, AddToAny, sticky banners and the YouTube plugin.
 */

/* Fonts (self-hosted, variable weight) */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto/roboto-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto/roboto-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto/roboto-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/roboto/roboto-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/montserrat/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Satisfy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/satisfy/satisfy-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/cabin/cabin-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Colours. index.php overrides these from the template style's Colours options; the defaults here cover
 * pages rendered without index.php (component.php). legacy/*.css refers to them in place of the old hex
 * values (tools/legacy-colours.mjs). The --background-color-* names are the old template's.
 */
:root {
	--background-color: #70c0e5;
	--background-color-hover: #4c95b7;
	--background-color-secondary: #c65d01;
	--background-color-terciary: #c29601;
	--gch-accent: #1e7a8c;
	/* The old theme's #48a3b8, darkened for 4.5:1 with white text. */
	--gch-accent-light: #387f90;
	--gch-menu: #b35841;
	--gch-menu-highlight: #b86c4c;
	/* The old theme's darker teals were fixed shades of the two accents. */
	--gch-accent-hover: color-mix(in srgb, var(--gch-accent) 70%, #000);
	--gch-accent-deep: color-mix(in srgb, var(--gch-accent) 55%, #000);
	--gch-accent-light-hover: color-mix(in srgb, var(--gch-accent-light) 80%, #000);
	/* Secondary (#c65d01) is 4.2:1 with white text; buttons use a shade 5% darker. */
	--gch-secondary-button: color-mix(in srgb, var(--background-color-secondary) 95%, #000);
	--gch-secondary-hover: color-mix(in srgb, var(--gch-secondary-button) 85%, #000);
	/* Footer: Primary hover, darkened so its white and light-grey text reach 4.5:1 (it was 2.9:1). */
	--gch-footer-bg: color-mix(in srgb, var(--background-color-hover) 72%, #000);
	/* Text on Primary buttons: dark enough for 4.5:1 on both Primary and Primary hover (white was 2:1). */
	--gch-cta-text: #222428;
}

:root {
	--gch-offcanvas-width: 250px;
	--gch-ease: cubic-bezier(.2, .7, .3, 1);
	--gch-duration: .5s;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

img,
video,
iframe {
	max-inline-size: 100%;
}

img {
	block-size: auto;
}

:focus-visible {
	outline: 2px solid var(--background-color-hover);
	outline-offset: 2px;
}

/* Off-canvas menu: a native modal <dialog> sliding in from the right */
.t3-off-canvas {
	position: fixed;
	inset: 0 0 0 auto;
	inline-size: var(--gch-offcanvas-width);
	max-inline-size: 100vw;
	block-size: 100dvh;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: visible;
	color: #fff;
	translate: 100% 0;
	transition:
		translate var(--gch-duration) ease,
		overlay var(--gch-duration) allow-discrete,
		display var(--gch-duration) allow-discrete;

	&[open] {
		translate: 0 0;

		@starting-style {
			translate: 100% 0;
		}
	}

	/* T3 dimmed the drawer with an overlay while it was closed; the dialog never needs it. */
	&::after {
		content: none;
	}

	&::backdrop {
		background: rgb(0 0 0 / 0);
		transition:
			background var(--gch-duration) ease,
			overlay var(--gch-duration) allow-discrete,
			display var(--gch-duration) allow-discrete;
	}

	&[open]::backdrop {
		background: rgb(0 0 0 / .2);

		@starting-style {
			background: rgb(0 0 0 / 0);
		}
	}

	.t3-off-canvas-header {
		display: flex;
		justify-content: flex-end;
		align-items: stretch;
	}

	.close {
		inline-size: 52px;
		block-size: 52px;
		margin: -10px 0;
		padding: 0;
		border: 0;
		font-size: 24px;
		line-height: 50px;
		color: #fff;
		opacity: .2;
		text-shadow: none;
		cursor: pointer;
		transition: opacity .2s;

		&:hover,
		&:focus-visible {
			opacity: .6;
		}
	}

	.t3-off-canvas-body {
		padding: 26px;

		.nav {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.nav > li > a {
			display: block;
			padding: 2px 0;
			font-weight: 300;
			line-height: 1.625;
			color: #d5dbdc;
			text-decoration: none;
			transition: color .2s;

			&:hover,
			&:focus-visible {
				color: #fff;
				background: none;
			}
		}

		.nav > li.active > a {
			font-weight: 500;
		}
	}
}

/*
 * Menu toggle (the button rules from T3's off-canvas.css). Scoped to the header so the page-specific
 * compat sheets' .btn / .btn-primary rules (loaded later) can't resize it on Home, About, Contact and Watch Live.
 */
.uber-header .off-canvas-toggle {
	z-index: 100;
	inline-size: auto;
	block-size: 52px;
	padding: 0 10px;
	border: 0;
	border-inline-start: 1px solid #ecf0f1;
	border-radius: 0;
	background-color: transparent;
	line-height: 52px;
	text-transform: uppercase;
	color: #505656;
	font-weight: 700;

	/* Only the icon shows, as on the old site, which hid this label with display: none (and so the button's name). */
	span {
		display: inline-block;
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	&:hover,
	&:focus,
	&:active {
		color: #505656;
		background-color: #eee;
		border-color: #ecf0f1;
	}

	/* Keyboard focus keeps the site-wide :focus-visible ring. */
	&:focus:not(:focus-visible) {
		outline: none;
	}
}

.uber-header .site-navigation-right > .off-canvas-toggle:hover {
	background-color: var(--gch-menu-highlight);
}

/*
 * Buttons. The old theme (and the compat sheets) gave them 0–5px corners, white or dark text on the Primary
 * colour, and an 80% fade or no change on hover. Every button now has 3px corners and darkens on hover.
 * The `body` prefix outranks the compat sheets, which load after this file.
 */
body .btn:not(.off-canvas-toggle) {
	border-radius: 3px;
}

/* Primary (light blue): "View all events", "Donate", "Events and Courses by Language" … */
body .btn-rounded-inverse {
	border-radius: 3px;
	color: var(--gch-cta-text) !important;
	background-color: var(--background-color);
	transition: background-color .3s;

	&:is(:hover, :focus, :active) {
		background-color: var(--background-color-hover);
		opacity: 1;
	}
}

/* Secondary (orange): "Courses view all" */
body .btn.btn-rounded-inverse2 {
	background-color: var(--gch-secondary-button);
	transition: background-color .3s;

	&:is(:hover, :focus-visible, :active) {
		background-color: var(--gch-secondary-hover);
	}
}

/*
 * Accent (teal). The old theme recoloured .btn-default and .btn-primary to the light accent but froze
 * .btn-default's hover with !important and left .btn-primary on Bootstrap's much darker hover; both get one hover.
 */
:is(.btn-default, .btn-primary:not(.off-canvas-toggle)):is(:hover, :focus-visible, :active) {
	color: #fff;
	background-color: var(--gch-accent-light-hover) !important;
	border-color: transparent;
}

/*
 * Bootstrap 5 buttons in old article content (About Us). This site's rem is 10px, so their rem-based sizes
 * came out at 8.75px, and in Bootstrap blue; give them the site's teal small-button look.
 */
.gch-compat-bs5 .article-content .btn {
	--bs-btn-font-size: 14px;
	--bs-btn-line-height: 26px;
	--bs-btn-padding-x: 18px;
	--bs-btn-padding-y: 6px;
	--bs-btn-border-radius: 3px;
	--bs-btn-font-weight: 300;
}

.gch-compat-bs5 .article-content .btn-primary {
	--bs-btn-bg: var(--gch-accent-light);
	--bs-btn-border-color: var(--gch-accent-light);
	--bs-btn-hover-bg: var(--gch-accent-light-hover);
	--bs-btn-hover-border-color: var(--gch-accent-light-hover);
	--bs-btn-active-bg: var(--gch-accent-light-hover);
	--bs-btn-active-border-color: var(--gch-accent-light-hover);
	--bs-btn-focus-shadow-rgb: 72, 163, 184;
}

html:has(.t3-off-canvas[open]) {
	overflow: hidden;
}


.visually-hidden {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* <gch-carousel>: replacement for the Smart Slider 3 sliders */
gch-carousel {
	--gch-carousel-speed: .8s;
	display: block;
	position: relative;
	inline-size: 100%;
	max-inline-size: var(--gch-carousel-max, none);
	margin-inline: auto;
	touch-action: pan-y;

	&[effect="vertical"] {
		touch-action: pan-x;
	}

	/* Before the element upgrades, show only the first slide at the right size. */
	&:not(:defined) {
		aspect-ratio: var(--gch-carousel-ratio, 16 / 9);
		overflow: hidden;

		> :not(:first-child) {
			display: none;
		}
	}

	&:focus-visible {
		outline-offset: -2px;
	}
}

.gch-carousel__viewport {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--gch-carousel-ratio, 16 / 9);
}

.gch-carousel__track {
	position: absolute;
	inset: 0;
}

.gch-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--gch-carousel-speed) ease,
		visibility 0s linear var(--gch-carousel-speed);

	&.is-active {
		opacity: 1;
		visibility: visible;
		transition: opacity var(--gch-carousel-speed) ease, visibility 0s;
	}

	> img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}
}

gch-carousel[effect="none"] .gch-carousel__slide {
	transition: none;
}

gch-carousel:is([effect="horizontal"], [effect="vertical"]) {
	.gch-carousel__track {
		display: flex;
		translate: calc(var(--gch-carousel-index, 0) * -100%) 0;
		transition: translate var(--gch-carousel-speed) cubic-bezier(.4, 0, .2, 1);
	}

	.gch-carousel__slide {
		position: relative;
		flex: 0 0 100%;
		opacity: 1;
		visibility: visible;
		transition: none;
	}
}

gch-carousel[effect="vertical"] .gch-carousel__track {
	flex-direction: column;
	translate: 0 calc(var(--gch-carousel-index, 0) * -100%);
}

.gch-carousel__arrow {
	position: absolute;
	z-index: 3;
	inline-size: 30px;
	block-size: 30px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: rgb(0 0 0 / .67) center / 26px no-repeat;
	cursor: pointer;
	transition: background-color .3s;

	&:hover,
	&:focus-visible {
		background-color: rgb(0 0 0 / .85);
	}
}

.gch-carousel__arrow--prev,
.gch-carousel__arrow--next {
	inset-block-start: 50%;
	translate: 0 -50%;
}

.gch-carousel__arrow--prev {
	inset-inline-start: 15px;
	background-image: url(../images/arrow-prev.svg);
}

.gch-carousel__arrow--next {
	inset-inline-end: 15px;
	background-image: url(../images/arrow-next.svg);
}

.gch-carousel__arrow--up,
.gch-carousel__arrow--down {
	inset-inline-end: 15px;
	inline-size: 32px;
	block-size: 32px;
	background-size: 32px;
	background-color: transparent;
}

.gch-carousel__arrow--up {
	inset-block-start: calc(50% - 36px);
	background-image: url(../images/arrow-up.svg);
}

.gch-carousel__arrow--down {
	inset-block-start: calc(50% + 4px);
	background-image: url(../images/arrow-down.svg);
}

/* <gch-youtube>: click-to-load YouTube player */
gch-youtube {
	display: block;
	position: relative;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;

	.gch-carousel__slide > & {
		block-size: 100%;
		aspect-ratio: auto;
	}

	iframe,
	.gch-youtube__play {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		border: 0;
	}
}

.gch-youtube__play {
	display: block;
	padding: 0;
	background: none;
	cursor: pointer;

	img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		margin: auto;
		inline-size: var(--gch-youtube-play-size, 48px);
		block-size: var(--gch-youtube-play-size, 48px);
		background: var(--gch-youtube-play, url(../images/play.svg)) center / contain no-repeat;
		transition: scale .2s ease;
	}

	&:hover::after,
	&:focus-visible::after {
		scale: 1.12;
	}
}

/* Thumbnail strip (Meditate Now video gallery) */
.gch-carousel__thumbs {
	position: relative;
	background: #242424;
}

.gch-carousel__thumbs-list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.gch-carousel__thumb {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	justify-content: flex-start;
	inline-size: 120px;
	min-block-size: 166px;
	padding: 0;
	border: 0;
	background: none;
	text-align: start;
	vertical-align: top;
	opacity: .4;
	cursor: pointer;
	scroll-snap-align: start;
	transition: opacity .3s;

	&.is-active,
	&:hover,
	&:focus-visible {
		opacity: 1;
	}

	img {
		display: block;
		inline-size: 120px;
		block-size: 60px;
		object-fit: cover;
	}

	span {
		display: block;
		padding: 3px 10px;
		font: 400 14px/1.4 Montserrat, Roboto, sans-serif;
		color: #fff;
	}
}

.gch-carousel__thumbs-scroll {
	position: absolute;
	inset-block-start: 27px;
	z-index: 2;
	inline-size: 26px;
	block-size: 26px;
	padding: 0;
	border: 0;
	background: center / contain no-repeat;
	cursor: pointer;
	/* The icons are Smart Slider's up/down chevrons, turned for a horizontal strip as it did. */
	rotate: -90deg;
}

.gch-carousel__thumbs-scroll--prev {
	inset-inline-start: 4px;
	background-image: url(../images/thumbs-prev.svg);
}

.gch-carousel__thumbs-scroll--next {
	inset-inline-end: 4px;
	background-image: url(../images/thumbs-next.svg);
}

/* Sticky "join our mailing list" badge (was mod_topstickybanner): slides up after scrolling */
.art-adsbottom828 {
	position: fixed;
	inset-inline: 0;
	inset-block-end: -100px;
	z-index: 10001;
	inline-size: 100px;
	block-size: 100px;
	margin-inline: auto;
	visibility: hidden;
	transition: inset-block-end 1s ease, visibility 1s;

	&.is-visible {
		inset-block-end: 10px;
		visibility: visible;
	}

	img {
		display: block;
		inline-size: 100px;
		block-size: 100px;
	}
}

/* Share bar (AddToAny look, no third-party script) */
.a2a_kit {
	line-height: 32px;

	a {
		display: inline-block;
		padding: 0 4px;
		line-height: 32px;
		text-decoration: none;
		vertical-align: middle;

		&:hover .a2a_svg,
		&:focus-visible .a2a_svg {
			opacity: .7;
		}
	}

	&:not(.a2a_kit_size_32) .a2a_label,
	&.a2a_kit_size_32 .a2a_label {
		position: absolute !important;
		clip-path: inset(50%);
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
	}
}

.a2a_svg {
	display: inline-block;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 4px;
	overflow: hidden;
	vertical-align: middle;
	transition: opacity .2s;

	svg {
		display: block;
		inline-size: 100%;
		block-size: 100%;
		fill: #fff;
	}
}

/* Google review call to action (was a one-slide Smart Slider) */
.gch-review-cta {
	padding-inline: 7%;

	a {
		display: block;
		padding: 12px 15px;
		border-radius: 3px;
		background: var(--background-color);
		font-size: 20px;
		line-height: 1.6;
		color: var(--gch-cta-text);
		text-align: center;
		text-decoration: none;
		transition: background-color .3s;

		&:hover,
		&:focus-visible {
			background: var(--background-color-hover);
			color: var(--gch-cta-text);
		}
	}
}

.gch-spacer {
	inline-size: 100%;
}

/* Dadi Janki tribute tile: the old slider kept its caption 320px below the top at every width. */
.gch-tribute {
	display: grid;
	grid-template-rows: 315px auto;
	row-gap: 5px;
	max-inline-size: 560px;

	> gch-carousel {
		align-self: start;
		margin-inline: 0;
	}

	> .gch-video-caption {
		margin-block-start: 0;
	}
}

/* Caption under the Dadi Janki tribute video (was a Smart Slider heading layer) */
.gch-video-caption {
	box-sizing: border-box;
	max-inline-size: 540px;
	margin: 5px 10px 10px;
	border: 5px solid rgb(230 134 168 / .93);
	background: rgb(230 134 168 / .93);
	font: 400 17px / normal Roboto, Arial, sans-serif;
	/* Dark text keeps the pink at 6.6:1; the slider's white was 2.3:1. */
	color: var(--gch-cta-text);
	text-align: center;
}

/* "Thought For Today" feed banner (mod_feed layout gch-thoughtfortoday) */
.gch-tft {
	--gch-tft-teal: #00c1c4;
	position: relative;
	color: #fff;
	background:
		linear-gradient(rgb(0 0 0 / .17), rgb(0 0 0 / .17)),
		var(--gch-tft-image, none) center / cover no-repeat,
		#1e7a8c;

	/* :hover too, or the home page's Bootstrap 4 compat sheet turns the links blue and underlined. */
	a,
	a:hover,
	a:focus-visible {
		color: inherit;
		text-decoration: none;
	}
}

.gch-tft__row {
	/* Full-width background; on wide screens the text lines up with the 1140px content column. */
	padding-inline: max(10px, (100% - 1170px) / 2);
	background: linear-gradient(to right, var(--gch-tft-teal), transparent);
}

.gch-tft__head {
	padding-block: 20px;
}

.gch-tft__title {
	margin: 0;
	padding-inline: 30px 35px;
	font: 400 39px / 1.5 Roboto, sans-serif;
	color: #fff;
}

.gch-tft__body {
	padding-block: 20px 10px;
}

.gch-tft__text {
	max-inline-size: 990px;
	padding: 10px 10px 0 20px;

	p {
		margin: 0;
		padding: 0 20px 0 10px;
		font: 400 17px / 1.5 Roboto, sans-serif;
		color: #fff;
	}
}

.gch-tft__foot {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 20px;
	padding-block: 25px 20px;
	border-block-start: 1px solid rgb(0 193 196 / .6);
}

.gch-tft__brand {
	display: grid;
	padding-inline-start: 30px;
}

.gch-tft__brand-name {
	font: 400 21px / 1.5 Satisfy, cursive;
}

.gch-tft__brand-tag {
	font: 400 11px / 1.5 Cabin, sans-serif;
	text-transform: capitalize;
}

.gch-tft__subscribe {
	justify-self: start;
	inline-size: min(100%, 265px);
	margin-inline-start: 35px;
	padding: 5px 20px;
	border-radius: 3px;
	background: var(--gch-accent-light);
	font: 400 15px / 1.5 Roboto, sans-serif;
	text-align: center;
	transition: background-color .3s;

	&:hover,
	&:focus-visible {
		background: var(--gch-accent-light-hover);
	}
}

@media (max-width: 767px) {
	.gch-tft__foot {
		grid-template-columns: 1fr;
		gap: 60px;
	}

	.gch-tft__subscribe {
		justify-self: center;
		margin-inline-start: 0;
	}
}

/* Image-only thumbnail strip (Video Resources gallery) */
gch-carousel[thumbnails="images"] {
	.gch-carousel__thumbs-list {
		padding-block: 5px;
	}

	.gch-carousel__thumb {
		min-block-size: 0;

		span {
			display: none;
		}
	}
}

.gch-carousel__thumbs:not(.is-scrollable) .gch-carousel__thumbs-scroll,
.gch-carousel__thumbs.at-start .gch-carousel__thumbs-scroll--prev,
.gch-carousel__thumbs.at-end .gch-carousel__thumbs-scroll--next {
	display: none;
}

/* Like the old sliders, the up/down arrows only appear on tablet and mobile widths. */
@media (min-width: 1200px) {
	gch-carousel[arrows="vertical"] .gch-carousel__arrow {
		display: none;
	}
}

/* Thumbnail strip shown on desktop widths only (Meditate Now gallery, as on the old slider) */
@media (max-width: 1199px) {
	gch-carousel[thumbnails="desktop"] .gch-carousel__thumbs {
		display: none;
	}
}

/* Footer (colours in legacy.css). background-color only, so a Footer Background Image still shows. */
.uber-footer.highlight-color {
	background-color: var(--gch-footer-bg);
}

/* The old hover turned these links deep teal, unreadable on the footer blue; keep them white, underlined. */
.uber-footer.highlight-color .footer-left a:is(:hover, :focus, :active) {
	color: #fff;
	border-bottom-color: #fff;
	text-decoration: underline;
}

/* Event page titles and subtitles: the old gold (#cea328) was 2.4:1 on white; this one is 3.6:1 (large text). */
.page-header h1,
.page-title,
.subtitle {
	color: #a58220;
}