/* ==========================================================================
   SLIDESHOW (Slideshow tab of the template style)
   Markup: slideshow.php. Behaviour: js/slideshow.js.
   Loaded only when the slideshow is enabled (index.php).
   Per-style values (heights, speed, overlay, colours) arrive as --doo-ss-*
   custom properties on #doo-s-slideshow, already validated in PHP.
   ========================================================================== */

/* mobile.css hides #presentation below 951px (for every module in the
   diaporama position). index.php adds .doo-s-has-slideshow only when the
   "Show on tablets and phones" option is on; the extra class makes this
   rule win over mobile.css's plain #presentation selector. */
#presentation.doo-s-has-slideshow {
	display: block;
}

.doo-s-slideshow {
	position: relative;
	width: 100%;
	height: var(--doo-ss-height, 450px);
	overflow: hidden;
	background: #222;
	color: var(--doo-ss-text, #ffffff);
	text-align: left;
}

/* Proportional height ("Height: Proportional to the page width"): the box
   keeps the design size's width:height ratio, so it is always
   width / ratio tall - e.g. 1920 x 480 gives a quarter of the page width,
   exactly what Smart Slider's full-width mode did. --doo-ss-max-height
   reproduces Smart Slider's 3000px width limit. */
.doo-s-slideshow--ratio {
	height: auto;
	aspect-ratio: var(--doo-ss-ratio, 4 / 1);
	max-height: var(--doo-ss-max-height, none);
}

/* Under 768px a banner this flat would be too short for its text, so phones
   always use the fixed phone height. */
@media (max-width: 767px) {
	.doo-s-slideshow,
	.doo-s-slideshow--ratio {
		height: var(--doo-ss-height-m, 260px);
		aspect-ratio: auto;
		max-height: none;
	}
}

.doo-s-slideshow__track {
	position: absolute;
	inset: 0;
	touch-action: pan-y;
}

/* ----- Slides: stacked, only the active (and leaving) one is visible ----- */

.doo-s-slide {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	visibility: hidden;
}

.doo-s-slide.is-active,
.doo-s-slide.is-leaving {
	visibility: visible;
}

.doo-s-slide.is-leaving {
	z-index: 1;
}

.doo-s-slide.is-active {
	z-index: 2;
}

.doo-s-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* Darkens the image so the text stays readable (--doo-ss-overlay). */
.doo-s-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--doo-ss-overlay, 0.25));
	pointer-events: none;
}

/* ----- Text + button ----- */

.doo-s-slide__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 10px 60px;
	justify-content: center;
	align-items: center;
	text-align: center;
	pointer-events: none;
}

.doo-s-slideshow--pos-top .doo-s-slide__content {
	justify-content: flex-start;
}

.doo-s-slideshow--pos-bottom .doo-s-slide__content {
	justify-content: flex-end;
	padding-bottom: 56px;
}

.doo-s-slideshow--align-left .doo-s-slide__content {
	align-items: flex-start;
	text-align: left;
}

.doo-s-slideshow--align-right .doo-s-slide__content {
	align-items: flex-end;
	text-align: right;
}

/* Text metrics are Smart Slider's, so the slides look the same as before:
   normal weight, line-height 1.5, a plain 4px black glow (text-shadow:
   0 0 4px #000) and no image darkening unless asked for. The font is the
   site's own Poppins (a web font, loaded from Google Fonts in index.php,
   with its italic), falling back to Arial then any sans-serif if it can't be
   loaded. Sizes
   are given in px for a slideshow as wide as the design width (--doo-ss-design-w,
   1920 by default) and scale with the slideshow's own width, which is how
   Smart Slider sized its layers (16px x width/1920 x layer %: 400% = 64px for
   the title, 300% = 48px for the text). A readable minimum keeps them legible
   on phones. */
.doo-s-slide__title,
.doo-s-slide__caption {
	margin: 0;
	font-family: Poppins, Arial, Helvetica, sans-serif;
	font-weight: 400;
	line-height: 1.5;
	text-align: inherit;
	hyphens: manual;
	color: var(--doo-ss-text, #ffffff);
	text-shadow: 0 0 4px #000000;
}

.doo-s-slide__title {
	font-size: max(22px, calc(var(--doo-ss-title, 64) * 100vw / var(--doo-ss-design-w, 1920)));
}

.doo-s-slide__caption {
	font-size: max(15px, calc(var(--doo-ss-text-size, 48) * 100vw / var(--doo-ss-design-w, 1920)));
}

.doo-s-slide__caption--italic {
	font-style: italic;
}

/* Where container query units exist, size against the slideshow itself
   rather than the window, so it also holds if the slideshow is ever
   narrower than the page. */
@supports (width: 1cqw) {
	.doo-s-slideshow {
		container-type: inline-size;
	}

	.doo-s-slide__title {
		font-size: max(22px, calc(var(--doo-ss-title, 64) * 100cqw / var(--doo-ss-design-w, 1920)));
	}

	.doo-s-slide__caption {
		font-size: max(15px, calc(var(--doo-ss-text-size, 48) * 100cqw / var(--doo-ss-design-w, 1920)));
	}
}

.doo-s-slide__button,
.doo-s-slide__button:visited {
	display: inline-block;
	margin-top: 0.9em;
	padding: 0.55em 1.5em;
	border-radius: 5px;
	background: var(--doo-ss-btn-bg, var(--doo-s-color-secondary, #d7a037));
	color: var(--doo-ss-btn-color, #ffffff);
	font-weight: 600;
	text-decoration: none;
	pointer-events: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.doo-s-slide__button:hover,
.doo-s-slide__button:focus {
	color: var(--doo-ss-btn-color, #ffffff);
	text-decoration: none;
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.doo-s-slide__button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

/* ----- Controls. These are <button>s, and template.css gives every button a
   grey background, a box-shadow and a gold hover - so each state is reset
   explicitly here. ----- */

.doo-s-slideshow .doo-s-slideshow__arrow,
.doo-s-slideshow .doo-s-slideshow__toggle {
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #ffffff;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.doo-s-slideshow .doo-s-slideshow__arrow {
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
}

.doo-s-slideshow .doo-s-slideshow__arrow--prev {
	inset-inline-start: 14px;
}

.doo-s-slideshow .doo-s-slideshow__arrow--next {
	inset-inline-end: 14px;
}

[dir="rtl"] .doo-s-slideshow .doo-s-slideshow__arrow svg {
	transform: scaleX(-1);
}

.doo-s-slideshow .doo-s-slideshow__toggle {
	bottom: 10px;
	inset-inline-end: 14px;
	width: 32px;
	height: 32px;
}

.doo-s-slideshow .doo-s-slideshow__arrow:hover,
.doo-s-slideshow .doo-s-slideshow__arrow:focus,
.doo-s-slideshow .doo-s-slideshow__arrow:active,
.doo-s-slideshow .doo-s-slideshow__toggle:hover,
.doo-s-slideshow .doo-s-slideshow__toggle:focus,
.doo-s-slideshow .doo-s-slideshow__toggle:active {
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	box-shadow: none;
}

.doo-s-slideshow .doo-s-slideshow__arrow:focus-visible,
.doo-s-slideshow .doo-s-slideshow__toggle:focus-visible,
.doo-s-slideshow .doo-s-slideshow__dot:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
}

.doo-s-slideshow__toggle .doo-s-slideshow__icon-play {
	display: none;
}

.doo-s-slideshow.is-paused .doo-s-slideshow__toggle .doo-s-slideshow__icon-pause {
	display: none;
}

.doo-s-slideshow.is-paused .doo-s-slideshow__toggle .doo-s-slideshow__icon-play {
	display: block;
}

.doo-s-slideshow__dots {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 10px;
	pointer-events: none;
}

.doo-s-slideshow .doo-s-slideshow__dot {
	width: 12px;
	height: 12px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.doo-s-slideshow .doo-s-slideshow__dot:hover,
.doo-s-slideshow .doo-s-slideshow__dot:focus {
	background: rgba(255, 255, 255, 0.55);
	box-shadow: none;
}

.doo-s-slideshow .doo-s-slideshow__dot.is-active {
	background: #ffffff;
	transform: scale(1.15);
}

/* ----- Transitions. js/slideshow.js puts data-anim (the incoming slide's
   transition) on the root, plus is-entering / is-leaving on the two slides
   and is-reverse when going backwards. ----- */

.doo-s-slideshow .is-entering,
.doo-s-slideshow .is-leaving {
	animation-duration: var(--doo-ss-speed, 800ms);
	animation-timing-function: ease-in-out;
	animation-fill-mode: both;
}

.doo-s-slideshow .is-entering {
	z-index: 3;
}

/* fade, zoom-in, zoom-out, kenburns: the NEW slide fades in over the old one,
   which stays fully opaque underneath until it has been covered. (Fading both
   at once leaves neither fully opaque halfway through, so the dark
   background shows through and the frame goes murky.) The old text fades out
   during the first part of the transition and the new text comes in during
   the last part, so the two titles never ghost on top of each other. */
.doo-s-slideshow[data-anim="fade"] .is-entering,
.doo-s-slideshow[data-anim="kenburns"] .is-entering {
	animation-name: doo-ss-fade-in;
}

.doo-s-slideshow[data-anim="zoom-in"] .is-entering {
	animation-name: doo-ss-zoom-in;
}

.doo-s-slideshow[data-anim="zoom-out"] .is-entering {
	animation-name: doo-ss-zoom-out;
}

.doo-s-slideshow[data-anim="fade"] .is-entering .doo-s-slide__content,
.doo-s-slideshow[data-anim="kenburns"] .is-entering .doo-s-slide__content,
.doo-s-slideshow[data-anim="zoom-in"] .is-entering .doo-s-slide__content,
.doo-s-slideshow[data-anim="zoom-out"] .is-entering .doo-s-slide__content {
	animation: doo-ss-text-in var(--doo-ss-speed, 800ms) ease both;
}

.doo-s-slideshow[data-anim="fade"] .is-leaving .doo-s-slide__content,
.doo-s-slideshow[data-anim="kenburns"] .is-leaving .doo-s-slide__content,
.doo-s-slideshow[data-anim="zoom-in"] .is-leaving .doo-s-slide__content,
.doo-s-slideshow[data-anim="zoom-out"] .is-leaving .doo-s-slide__content {
	animation: doo-ss-text-out var(--doo-ss-speed, 800ms) ease both;
}

/* slides: both move, in the direction of travel (reversed for "previous") */
.doo-s-slideshow[data-anim="slide-left"] .is-entering,
.doo-s-slideshow[data-anim="slide-right"].is-reverse .is-entering {
	animation-name: doo-ss-in-right;
}

.doo-s-slideshow[data-anim="slide-left"] .is-leaving,
.doo-s-slideshow[data-anim="slide-right"].is-reverse .is-leaving {
	animation-name: doo-ss-out-left;
}

.doo-s-slideshow[data-anim="slide-right"] .is-entering,
.doo-s-slideshow[data-anim="slide-left"].is-reverse .is-entering {
	animation-name: doo-ss-in-left;
}

.doo-s-slideshow[data-anim="slide-right"] .is-leaving,
.doo-s-slideshow[data-anim="slide-left"].is-reverse .is-leaving {
	animation-name: doo-ss-out-right;
}

.doo-s-slideshow[data-anim="slide-up"] .is-entering,
.doo-s-slideshow[data-anim="slide-down"].is-reverse .is-entering {
	animation-name: doo-ss-in-bottom;
}

.doo-s-slideshow[data-anim="slide-up"] .is-leaving,
.doo-s-slideshow[data-anim="slide-down"].is-reverse .is-leaving {
	animation-name: doo-ss-out-top;
}

.doo-s-slideshow[data-anim="slide-down"] .is-entering,
.doo-s-slideshow[data-anim="slide-up"].is-reverse .is-entering {
	animation-name: doo-ss-in-top;
}

.doo-s-slideshow[data-anim="slide-down"] .is-leaving,
.doo-s-slideshow[data-anim="slide-up"].is-reverse .is-leaving {
	animation-name: doo-ss-out-bottom;
}

/* Ken Burns: slow zoom on the picture for as long as the slide is shown.
   Applied to .is-leaving too so the picture doesn't snap back mid-fade.
   (js/slideshow.js fills in each slide's data-transition with the default
   when the slide doesn't set its own.) */
.doo-s-slide[data-transition="kenburns"].is-active .doo-s-slide__img,
.doo-s-slide[data-transition="kenburns"].is-leaving .doo-s-slide__img {
	animation: doo-ss-kenburns var(--doo-ss-kb, 9000ms) ease-out both;
}

@keyframes doo-ss-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes doo-ss-text-in {
	0%, 45% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes doo-ss-text-out {
	0% { opacity: 1; }
	45%, 100% { opacity: 0; }
}

@keyframes doo-ss-zoom-in {
	from { opacity: 0; transform: scale(1.18); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes doo-ss-zoom-out {
	from { opacity: 0; transform: scale(0.82); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes doo-ss-in-right {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes doo-ss-in-left {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

@keyframes doo-ss-out-left {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}

@keyframes doo-ss-out-right {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}

@keyframes doo-ss-in-bottom {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@keyframes doo-ss-in-top {
	from { transform: translateY(-100%); }
	to { transform: translateY(0); }
}

@keyframes doo-ss-out-top {
	from { transform: translateY(0); }
	to { transform: translateY(-100%); }
}

@keyframes doo-ss-out-bottom {
	from { transform: translateY(0); }
	to { transform: translateY(100%); }
}

@keyframes doo-ss-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.14); }
}

@media (prefers-reduced-motion: reduce) {
	.doo-s-slideshow .is-entering,
	.doo-s-slideshow .is-leaving,
	.doo-s-slideshow .is-entering .doo-s-slide__content,
	.doo-s-slideshow .is-leaving .doo-s-slide__content,
	.doo-s-slide__img {
		animation: none !important;
	}

	.doo-s-slide__button {
		transition: none;
	}
}

@media print {
	.doo-s-slideshow__arrow,
	.doo-s-slideshow__dots,
	.doo-s-slideshow__toggle {
		display: none;
	}
}