/* =============================================================================
   PanOxyl Homepage Slider
   ============================================================================= */

.hp-slider {
	position: relative;
	width: 100%;

	/* Brand tokens */
	--c-primary-blue: #243e8c;
	--c-dark-blue: #20285c;
	--c-darkest-blue: #111c3a;
	--c-yellow: #fac22b;

	--font-header: "TradeGothic LT CondEighteen", "Arial Narrow", sans-serif;
	--font-body: "Gotham", "Helvetica Neue", Arial, sans-serif;
}

.hp-slider .swiper {
	width: 100%;
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Slide shell
   -------------------------------------------------------------------------- */
.hp-slide {
	position: relative;
	width: 100%;
	height: clamp(440px, 41vw, 620px);
	box-sizing: border-box;
	overflow: hidden;
	background-color: var(--slide-bg, var(--c-primary-blue));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--slide-fg, #fff);
}

.hp-slide__inner {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.hp-slide__content {
	position: relative;
	z-index: 2;
	flex: 0 0 44%;
	max-width: 44%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 24px 40px clamp(24px, 4.5vw, 72px);
	box-sizing: border-box;
}

.hp-slide__header {
	margin: 0 0 0.35em;
	font-family: var(--font-family-secondary);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: 0.01em;
	font-size: clamp(2.125rem, 4.4vw, 4.25rem);
	color: inherit;
}

.hp-slide__subtext {
	margin: 0 0 1.6em;
	max-width: 22ch;
	font-family: var(--font-body);
	font-weight: 500;
	line-height: 1.3;
	font-size: clamp(1rem, 1.5vw, 1.6rem);
	color: inherit;
}

/* -----------------------------------------------------------------------------
   Media (image) area + horizontal positioning
   -------------------------------------------------------------------------- */
.hp-slide__media {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

.hp-slide__picture {
	display: flex;
	height: 100%;
}

.hp-slide__media img {
	display: block;
	height: 100%;   /* full slide height, top to bottom, no gaps */
	width: auto;    /* preserve aspect ratio */
	object-fit: contain;
}

/* Align Right  -> image right edge flush to slide right edge */
.hp-slide.pos-right .hp-slide__media { justify-content: flex-end; overflow:visible;}
/* Align Left   -> image left edge flush to the text edge */
.hp-slide.pos-left  .hp-slide__media { justify-content: flex-start; }
/* Align Center -> centered between text edge and slide edge */
.hp-slide.pos-center .hp-slide__media { justify-content: center; }

/* -----------------------------------------------------------------------------
   Buttons (4 styles)
   NOTE: two styles required an added text color for legibility — see README.
   -------------------------------------------------------------------------- */
.hp-btn {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem;
	line-height: 1;
	margin-right: auto !important;
    margin-left: 0 !important;
	padding: 1.05em 2.2em;
	border: 2px solid transparent;
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* 1. White */
.hp-btn--white { background: #fff; color: var(--c-dark-blue); border-color: #fff; }
.hp-btn--white:hover,
.hp-btn--white:focus-visible { background: var(--c-dark-blue); color: #fff; border-color: var(--c-dark-blue) !important; }

/* 2. White → Yellow  (hover text set to dark blue for legibility on yellow) */
.hp-btn--white-yellow { background: #fff; color: var(--c-dark-blue); border-color: #fff !important; }
.hp-btn--white-yellow:hover,
.hp-btn--white-yellow:focus-visible { background: var(--c-yellow); color: var(--c-dark-blue); border-color: var(--c-yellow) !important; }

/* 3. Blue */
.hp-btn--blue { background: var(--c-primary-blue); color: #fff; border-color: var(--c-primary-blue) !important; }
.hp-btn--blue:hover,
.hp-btn--blue:focus-visible { background: var(--c-darkest-blue); color: #fff; border-color: var(--c-darkest-blue) !important; }

/* 4. Blue Outline  (filled default w/ white text -> outline on hover) */
.hp-btn--blue-outline { background: var(--c-dark-blue); color: #fff; border-color: var(--c-dark-blue) !important; }
.hp-btn--blue-outline:hover,
.hp-btn--blue-outline:focus-visible { background: transparent; color: var(--c-dark-blue); border-color: var(--c-dark-blue) !important; }

/* -----------------------------------------------------------------------------
   Video slide
   - object-fit: cover makes BOTH the desktop 16:9 source and the mobile 4:5
     source fill the slide box completely, cropping whatever overflows, with no
     distortion. JS swaps the source at the mobile breakpoint; this rule is the
     same for both, so each ratio "fills out the full height" as required.
   - Black backing + explicit object-position guard against a flash of empty
     space before the source has loaded / decoded.
   -------------------------------------------------------------------------- */
.hp-slide--video .hp-slide__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background: #000;
}

.hp-slide--video .hp-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(17, 28, 58, 0.35);
}

/* Centered content for video + custom slides */
.hp-slide__content--center {
	flex: 1 1 100%;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	z-index: 2;
	padding: 40px;
}
.hp-slide__content--center .hp-slide__subtext { max-width: 40ch; }
.hp-slide__content--center .hp-btn { align-self: center; }

/* -----------------------------------------------------------------------------
   YouTube CTA modal
   - Injected once into <body> by homepage-slider.js, so it lives OUTSIDE
     .hp-slider and can't inherit the brand-token custom properties. Every token
     reference below therefore carries a hard-coded fallback.
   - Closing the modal removes the <iframe> entirely (the only reliable way to
     stop YouTube playback + audio); this is handled in JS.
   -------------------------------------------------------------------------- */
.hp-video-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	box-sizing: border-box;
}
.hp-video-modal[hidden] { display: none; }

.hp-video-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 28, 58, 0.85);
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.hp-video-modal.is-open .hp-video-modal__backdrop { opacity: 1; }

.hp-video-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: min(90vw, 1100px);
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.hp-video-modal.is-open .hp-video-modal__dialog { opacity: 1; transform: none; }

.hp-video-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.hp-video-modal__frame iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.hp-video-modal__close {
	position: absolute;
	top: -16px;
	right: -16px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--c-dark-blue, #20285c);
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.hp-video-modal__close:hover,
.hp-video-modal__close:focus-visible {
	background: var(--c-dark-blue, #20285c);
	color: #fff;
}
.hp-video-modal__close svg { width: 20px; height: 20px; display: block; }

/* Lock the page behind the modal */
body.hp-video-modal-open { overflow: hidden; }

@media (max-width: 768px) {
	/* The negative-offset corner button can fall off-screen on narrow
	   viewports, so park it just above the frame instead. */
	.hp-video-modal__close { top: -54px; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hp-video-modal__backdrop,
	.hp-video-modal__dialog { transition: none; }
}

/* -----------------------------------------------------------------------------
   Custom slide placeholder
   -------------------------------------------------------------------------- */
.hp-slide--custom { background-color: var(--c-primary-blue); }

/* -----------------------------------------------------------------------------
   Navigation arrows
   - default: translucent circle, dark chevron
   - .is-active / :active: solid dark-blue circle, white chevron (clicked/moving)
   -------------------------------------------------------------------------- */
.hp-slider__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--c-dark-blue);
	background: rgba(17, 28, 58, 0.18);
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.hp-slider__btn:hover { background: rgba(17, 28, 58, 0.30); }
.hp-slider__btn:active,
.hp-slider__btn.is-active { background: var(--c-dark-blue); color: #fff; }

.hp-slider__btn svg { width: 20px; height: 20px; display: block; }
.hp-slider__prev { left: clamp(8px, 1.5vw, 28px); }
/* Right arrow adds the slider's overhang past the visible viewport (the vertical
   scrollbar width when the section is full-bleed; 0 otherwise). Set by JS via
   --hp-arrow-right-extra so the next arrow sits the same distance from the
   visible edge as the prev arrow does on the left. */
.hp-slider__next { right: calc(clamp(8px, 1.5vw, 28px) + var(--hp-arrow-right-extra, 0px)); }

.hp-slider__btn.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* -----------------------------------------------------------------------------
   Pagination dots
   - Bottom-left, aligned with the slide content. Because .hp-slide__inner is
     centered with a capped max-width at each breakpoint, the dots ride inside a
     box that mirrors that same centered width (via --hp-inner-max) and then get
     the same left padding as .hp-slide__content. Result: the active dot lines up
     directly under the headline/button at every screen size.
   - Dark-blue to match the arrows/text/button; the active dot stretches into a
     pill so the current slide reads at a glance.
   - NOTE: --hp-inner-max below must mirror the .hp-slide__inner max-width values
     in the breakpoint section. If you change one, change the other.
   -------------------------------------------------------------------------- */
.hp-slider {
	--hp-inner-max: 100%;
	--swiper-pagination-color: var(--c-dark-blue);
	--swiper-pagination-bullet-inactive-color: var(--c-dark-blue);
	--swiper-pagination-bullet-inactive-opacity: 0.3;
	--swiper-pagination-bullet-size: 10px;
}

.hp-slider .hp-slider__pagination.swiper-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: clamp(20px, 3vw, 40px);
	width: auto;
	max-width: var(--hp-inner-max);
	margin-inline: auto;
	padding-left: clamp(24px, 4.5vw, 72px);   /* matches .hp-slide__content padding-left */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	z-index: 10;
}

.hp-slider .swiper-pagination-bullet {
	margin: 0 !important;             /* spacing handled by flex gap */
	transition: width 0.25s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.hp-slider .swiper-pagination-bullet-active {
	width: 26px;
	border-radius: 6px;
}

/* Dots track the centered .hp-slide__inner width at each breakpoint */
@media screen and (min-width:1000px) and (max-width:1199px) { .hp-slider { --hp-inner-max: 1000px; } }
@media screen and (min-width:1200px) and (max-width:1499px) { .hp-slider { --hp-inner-max: 1250px; } }
@media screen and (min-width:1500px) and (max-width:1919px) { .hp-slider { --hp-inner-max: 1450px; } }
@media screen and (min-width:1920px)                        { .hp-slider { --hp-inner-max: 1800px; } }

/* -----------------------------------------------------------------------------
   Mobile: text on top, image full-width on the bottom
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.hp-slide {
		height: clamp(615px, 130vw, 780px);
	}
	.hp-slide__inner {
		flex-direction: column;
	}
	.hp-slide__content {
		flex: 0 0 auto;
		max-width: 100%;
		padding: clamp(50px, 7vw, 44px) clamp(24px, 8vw, 40px) clamp(25px, 4vw, 24px);
		padding-top: 4rem;
	}
	.hp-slide__subtext { max-width: none; }

	/* Image positioning options are intentionally ignored on mobile. */
	.hp-slide__media {
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;        /* allow the flex item to shrink to a definite height */
		justify-content: center;
		align-items: flex-end; /* anchor image to the bottom */
		overflow: hidden;
	}
	/* Stretch the picture to the row so the image's max-height: 100% has a
	   definite reference to resolve against (otherwise it's ignored and the
	   image overflows and gets clipped). */
	.hp-slide__picture {
		width: 100%;
		height: 100%;
		align-items: flex-end;
		justify-content: center;
	}
	.hp-slide__media img {
		/* Fit fully inside the row on BOTH axes — never clip or crop. */
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
		object-fit: contain;
		object-position: bottom center;
	}

	.hp-slide__content--center { padding: clamp(32px, 8vw, 48px) 24px; }

	.hp-slider__btn { width: 40px; height: 40px; }
	.hp-slider__btn svg { width: 17px; height: 17px; }

	/* Pagination: full-width inner on mobile, match the mobile content padding */
	.hp-slider .hp-slider__pagination.swiper-pagination {
		max-width: 100%;
		padding-left: clamp(24px, 8vw, 40px);
		bottom: clamp(14px, 4vw, 22px);
	}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.hp-btn,
	.hp-slider__btn { transition: none; }
	.hp-slider .swiper-pagination-bullet { transition: none; }
}

/* -----------------------------------------------------------------------------
   Dynamic navbar offset
   homepage-slider.js measures ".navbar.navbar-expand-md" and writes its height
   to --hp-navbar-offset. We mirror that onto the slider's margin-top so the
   fixed desktop navbar never overlaps the section.

   - 10vh floor: the navbar's design-target height. Using it as a floor means
     the section is positioned correctly on the FIRST paint, before JS runs, so
     there's no ~2s downward jump while fonts load and the theme's height script
     settles. max() lets the measured value take over only when the real bar is
     taller (font scaling), which is the safe direction (never an undercut).
   - +24px: clears the wave graphic that intentionally overlaps the section top.
   -------------------------------------------------------------------------- */
/*section.hp-slider {
	margin-top: calc(max(var(--hp-navbar-offset, 0px), 10vh) + 24px);
}*/

@media screen and (min-width:1600px) {
    .hp-slide {
    	height: clamp(440px, 41vw, 780px);
	}
	.hp-slide__media img {
		padding-top:24px;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
	.hp-slide__inner {
    max-width: 1024px;
    margin:auto;
}
        .hp-slide__header {
        font-size: clamp(2.125rem, 4.4vw, 2.75rem);
    }
    .hp-btn {
        font-size: 16px !important;
        padding-inline:2rem !important;
    }
    .hp-slide__content {
        max-height:50vh;
        margin-block:auto;
    }
	.hp-slide__subtext {
	    font-size: clamp(1.25rem, 1.5vw, 1.6rem);
		padding-right:2rem;
	}
}
@media screen and (min-width:1281px) and (max-width:1499px) {
	.hp-slide__inner {
    max-width:1250px;
    margin:auto;
}
        .hp-slide__header {
        font-size: clamp(2.125rem, 4.4vw, 3.5rem);
    }
	.hp-slide__subtext {
	    font-size: clamp(1.25rem, 1.5vw, 1.6rem);
		padding-right:2rem;
	}
}
@media screen and (min-width:1500px) and (max-width:1919px) {
	.hp-slide__inner {
    max-width:1450px;
    margin:auto;
}
    .hp-slide__header {
        font-size: clamp(2.125rem, 4.4vw, 4.25rem);
    }
	.hp-slide__subtext {
	    font-size: clamp(1.25rem, 1.5vw, 1.6rem);
		padding-right:2.5rem;
	}
}

@media screen and (min-width:1920px){
	.hp-slide__inner {
    max-width:1800px;
    margin:auto;
}
	.hp-slide__header {
        font-size: clamp(2.125rem, 4.4vw, 4.5rem);
    }
	.hp-slide__subtext {
		padding-right:3.5rem;
	}
}
@media screen and (max-width:767.98px) {
	.hp-slide__header {
        font-size: clamp(2.5rem, 4.4vw, 2.75rem);
    }
	.hp-slide__subtext {
	    font-size: clamp(1.125rem, 1.5vw, 1.6rem);
		padding-right:5rem;
	}
	/*section.hp-slider {
		margin-top: 124px;
	}*/
	.hp-btn {
		padding-inline: 2rem !important;
		padding-block: .375rem !important;
	}
}
button.hp-slider__btn.hp-slider__next, button.hp-slider__btn.hp-slider__prev {
    top: 55%;
}
@media (min-width: 1281px) and (max-width: 1599px) {
    section.hp-slider {
    padding-top: 22px;
}
}
@media (min-width: 1025px) and (max-width: 1280px) {
    section.hp-slider {
    padding-top: 22px;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
    .hp-slider {
        padding-top: 25px;
    }
    .hp-slide__inner {
        margin-inline:clamp(16px, 2.25rem, 2.25vw);
    }
}

.hp-slide--video .hp-slide__content--center .hp-btn {
    margin-inline: auto !important;
	font-weight:700;
    max-width: unset;
}

@media screen and (max-width:768px){
    .hp-slide__inner {
        justify-content: center;
    }
}
@media screen and (min-width:768px) and (max-width:1023px){
    .hp-slide--video .hp-slide__content--center .hp-btn {
        margin-block:0rem;
    }
    .hp-slide__header {
        font-size: clamp(2.125rem, 4.125rem, 3.75rem);
        margin-bottom: clamp(2rem, 2.5rem, 2.75rem);
    }
}