/* ==========================================================================
   DANX featured staff slider
   Scoped under .danx-ss. Overrides the child theme's !important typography
   where it collides (blockquote, blockquote p, p).
   ========================================================================== */

.danx-ss {
	--danx-blue: #082255;           /* site .dark navy */
	--danx-blue-rgb: 8, 34, 85;
	--danx-ltblue: #4A8EFC;         /* site .ltblue / eyebrow / theme-button */
	--danx-white: #fff;
	--danx-container: 1200px;       /* match Total's container width setting */
	--danx-gutter: clamp(20px, 4vw, 48px);
	--danx-hero-min: 600px;
	--danx-hero-top: 0px;           /* set to ~150px if the page uses Total's overlay header */

	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--danx-blue);
	color: var(--danx-white);
	font-family: 'Poppins', sans-serif;
	line-height: normal;            /* body line-height is a fixed rem in Total; reset inside */
	box-sizing: border-box;
}
.danx-ss *, .danx-ss *::before, .danx-ss *::after { box-sizing: inherit; }

/* Full-bleed breakout: Total keeps container gutters even on "Full Width", and
   WPBakery adds column padding. See Acutro notes. */
.danx-ss {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
#main:has(.danx-ss) { overflow-x: clip; }
.wpb_raw_html:has(.danx-ss),
.wpb_text_column:has(.danx-ss) { margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   Slide
   -------------------------------------------------------------------------- */
.danx-ss__slide {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: var(--danx-hero-min);
	background: var(--danx-blue);
}
.danx-ss__pic { display: contents; }
.danx-ss__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--focus, right center);
	margin: 0;
}
.danx-ss__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		var(--danx-blue) 0%,
		var(--danx-blue) 34%,
		rgba(var(--danx-blue-rgb), .85) 46%,
		rgba(var(--danx-blue-rgb), .3) 58%,
		rgba(var(--danx-blue-rgb), 0) 68%);
}
.danx-ss__inner {
	position: relative;
	min-width: 0;
	width: 100%;
	max-width: var(--danx-container);
	margin: 0 auto;
	padding: calc(72px + var(--danx-hero-top)) var(--danx-gutter) 112px;
	display: flex;
	align-items: center;
}
.danx-ss__content { max-width: 620px; min-width: 0; width: 100%; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.danx-ss__eyebrow {
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--danx-ltblue);
	margin: 0 0 18px;
}

/* Child theme sets blockquote background/padding (its own quote mark) with !important,
   and Total adds pseudo-elements. The #content variants cover the parent theme's
   higher-specificity selectors. The mark itself is a real element (.danx-ss__mark) so
   no theme pseudo-rule can reach it. */
#content .danx-ss blockquote.danx-ss__quote,
.danx-ss blockquote.danx-ss__quote {
	position: relative;
	margin: 0 0 28px !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	quotes: none;
	text-wrap: balance;
}
#content .danx-ss blockquote.danx-ss__quote::before,
#content .danx-ss blockquote.danx-ss__quote::after,
.danx-ss blockquote.danx-ss__quote::before,
.danx-ss blockquote.danx-ss__quote::after {
	content: none !important;
	display: none !important;
	background: none !important;
}
.danx-ss__mark {
	display: block;
	width: 60px;
	height: 40px;
	margin: 0 0 18px;
	background: url("quotemark.svg") left top / contain no-repeat; /* relative to this CSS file */
}
#content .danx-ss blockquote.danx-ss__quote p,
.danx-ss blockquote.danx-ss__quote p {
	margin: 0 !important;
	color: var(--danx-white) !important;
	font-size: 30px !important;
	line-height: 35px !important;
	font-weight: 600 !important;
}
.danx-ss blockquote.danx-ss__quote p::after { content: "\201D" !important; display: inline !important; }

.danx-ss__meta {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 26px;
	font-weight: 600;
	color: var(--danx-white);
}
.danx-ss__meta span { font-weight: 600; }

/* Button: .theme-button from the child theme does the styling. Two overrides:
   1. The theme's ::before arrow carries padding-top:20px / top:9px (same fix as .ctaBut).
   2. The theme's hover blue (#285FF1) is 2.9:1 on navy, so hover goes white. */
.danx-ss a.theme-button.danx-ss__btn {
	display: inline-flex !important;
	align-items: center !important;
	margin-top: 20px !important;
	line-height: 1 !important;
}
.danx-ss a.theme-button.danx-ss__btn::before {
	padding-top: 0 !important;
	top: 0 !important;
	margin-right: 15px !important;
	line-height: 0 !important;
	flex-shrink: 0;
}
.danx-ss a.theme-button.danx-ss__btn .theme-button-inner { display: inline !important; }
.danx-ss a.theme-button.danx-ss__btn:hover,
.danx-ss a.theme-button.danx-ss__btn:focus-visible { color: var(--danx-white) !important; outline: none; }
.danx-ss a.theme-button.danx-ss__btn:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

.danx-ss__sr {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; margin: 0 !important;
}

/* --------------------------------------------------------------------------
   Nav: arrows + dots + counter on the button baseline, bottom-left
   -------------------------------------------------------------------------- */
.danx-ss__nav { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 3; }
.danx-ss__nav-inner {
	max-width: var(--danx-container);
	margin: 0 auto;
	padding: 0 var(--danx-gutter) 36px;
	display: flex;
	align-items: center;
	gap: 18px;
}
.danx-ss__arrow {
	pointer-events: auto;
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, .6) !important;
	background: transparent !important;
	color: var(--danx-white) !important;
	display: grid; place-items: center;
	cursor: pointer;
	padding: 0 !important; margin: 0 !important; float: none !important;
	transition: background .2s, border-color .2s;
}
.danx-ss__arrow::before { display: none !important; content: none !important; } /* theme adds an arrow to every button */
.danx-ss__arrow:hover, .danx-ss__arrow:focus-visible {
	background: rgba(255, 255, 255, .14) !important;
	border-color: #fff !important;
	outline: none;
}
.danx-ss__arrow:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
.danx-ss__arrow svg { width: 18px; height: 18px; }

.danx-ss .danx-ss__dots {
	pointer-events: auto;
	display: flex; gap: 8px;
	position: static !important;
	width: auto !important;
	transform: none !important;
}
.danx-ss .swiper-pagination-bullet {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #fff;
	opacity: .55;
	margin: 0 !important;
	transition: opacity .2s, width .2s;
}
.danx-ss .swiper-pagination-bullet-active { opacity: 1; width: 24px; border-radius: 4px; }

.danx-ss__count {
	pointer-events: auto;
	margin-left: 6px;
	font-size: 13px;
	letter-spacing: .08em;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Mobile: image stacked above a solid navy panel
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.danx-ss { --danx-hero-min: 0px; }
	.danx-ss__slide { grid-template-rows: auto 1fr; }
	.danx-ss__img {
		position: relative;
		inset: auto;
		aspect-ratio: 4 / 3;
		max-width: 100%;
		height: auto;
		object-position: var(--focus-mobile, center top);
	}
	.danx-ss__overlay {
		inset: 0 0 auto;
		aspect-ratio: 4 / 3;
		background: linear-gradient(180deg,
			rgba(var(--danx-blue-rgb), 0) 40%,
			rgba(var(--danx-blue-rgb), .55) 75%,
			var(--danx-blue) 100%);
	}
	.danx-ss__inner { padding: 8px var(--danx-gutter) 104px; }
	.danx-ss__eyebrow { font-size: 16px; margin-bottom: 14px; }
	.danx-ss blockquote.danx-ss__quote { margin-bottom: 20px !important; }
	.danx-ss__mark { width: 44px; height: 30px; margin-bottom: 12px; }
	#content .danx-ss blockquote.danx-ss__quote p,
.danx-ss blockquote.danx-ss__quote p { font-size: 22px !important; line-height: 28px !important; }
	.danx-ss__meta { font-size: 15px; }
	.danx-ss a.theme-button.danx-ss__btn { margin-top: 14px !important; }
	.danx-ss__nav-inner { padding-bottom: 28px; }
	.danx-ss__arrow { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
	.danx-ss *, .danx-ss *::before { transition: none !important; }
}