/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Bootstrap 4 -> 5 Compatibility Shim (T3.1, 2026-07-25)
	----------------------------------------------------------------
	Temporary aliases for v5.9 CSS classes that block classes still
	emit. Canvas v8 ships Bootstrap 5.3 which renamed/removed these.
	This shim keeps un-migrated blocks visually functional while T3.2
	and T3.3 upgrade each block class to v8-native markup.

	REMOVE this section once all 143 block classes are upgraded (T3.3
	complete). Each pattern here is documented in:
	Workbench/theme/tasks/specs/t3.1-audit-v59-markup.md
-----------------------------------------------------------------*/

/* .card-block -> .card-body (198 matches, 66 files) */
.card-block {
	padding: 1rem;
}

/* .sr-only -> .visually-hidden (30+ matches, 8 files) */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* .img-responsive -> .img-fluid (1 match) */
.img-responsive {
	max-width: 100%;
	height: auto;
}

/* .pull-left / .pull-right -> .float-start / .float-end */
.pull-left {
	float: left !important;
}

.pull-right {
	float: right !important;
}

/* .col-xs-* -> .col-* (xs is default breakpoint in BS5) */
.col-xs-1 {
	flex: 0 0 auto;
	width: 8.33333333%;
}

.col-xs-2 {
	flex: 0 0 auto;
	width: 16.66666667%;
}

.col-xs-3 {
	flex: 0 0 auto;
	width: 25%;
}

.col-xs-4 {
	flex: 0 0 auto;
	width: 33.33333333%;
}

.col-xs-5 {
	flex: 0 0 auto;
	width: 41.66666667%;
}

.col-xs-6 {
	flex: 0 0 auto;
	width: 50%;
}

.col-xs-7 {
	flex: 0 0 auto;
	width: 58.33333333%;
}

.col-xs-8 {
	flex: 0 0 auto;
	width: 66.66666667%;
}

.col-xs-9 {
	flex: 0 0 auto;
	width: 75%;
}

.col-xs-10 {
	flex: 0 0 auto;
	width: 83.33333333%;
}

.col-xs-11 {
	flex: 0 0 auto;
	width: 91.66666667%;
}

.col-xs-12 {
	flex: 0 0 auto;
	width: 100%;
}

/* .col-{md,lg}-offset-* -> .offset-{md,lg}-* (3 matches, 1 file) */
.col-md-offset-1 {
	margin-left: 8.333333%;
}

.col-md-offset-2 {
	margin-left: 16.666667%;
}

.col-md-offset-3 {
	margin-left: 25%;
}

.col-md-offset-4 {
	margin-left: 33.333333%;
}

.col-md-offset-5 {
	margin-left: 41.666667%;
}

.col-md-offset-6 {
	margin-left: 50%;
}

.col-lg-offset-1 {
	margin-left: 8.333333%;
}

.col-lg-offset-2 {
	margin-left: 16.666667%;
}

.col-lg-offset-3 {
	margin-left: 25%;
}

.col-lg-offset-4 {
	margin-left: 33.333333%;
}

.col-lg-offset-5 {
	margin-left: 41.666667%;
}

.col-lg-offset-6 {
	margin-left: 50%;
}

/* .bg-inverse -> .bg-dark (~10 matches, 8 files) */
.bg-inverse {
	background-color: #343a40 !important;
}

/* .card-inverse -> .text-bg-dark / .card.text-bg-dark (10+ matches, 7 files) */
.card-inverse {
	color: #fff !important;
	background-color: #343a40 !important;
}

/* .label -> .badge (128 matches, 39 files) */
.label {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.375rem;
}

.label-pill {
	border-radius: 50rem !important;
}

.label-info {
	background-color: #0dcaf0;
	color: #000;
}

.label-danger {
	background-color: #dc3545;
}

.label-success {
	background-color: #198754;
}

.label-warning {
	background-color: #ffc107;
	color: #000;
}

.label-primary {
	background-color: #0d6efd;
}

.label-default {
	background-color: #6c757d;
}

/* .btn-{color}-outline -> .btn-outline-{color} (~60 matches, 25 files) */
.btn-primary-outline {
	color: #0d6efd;
	border-color: #0d6efd;
}

.btn-primary-outline:hover {
	color: #fff;
	background-color: #0d6efd;
}

.btn-danger-outline {
	color: #dc3545;
	border-color: #dc3545;
}

.btn-danger-outline:hover {
	color: #fff;
	background-color: #dc3545;
}

.btn-success-outline {
	color: #198754;
	border-color: #198754;
}

.btn-success-outline:hover {
	color: #fff;
	background-color: #198754;
}

.btn-warning-outline {
	color: #ffc107;
	border-color: #ffc107;
}

.btn-warning-outline:hover {
	color: #000;
	background-color: #ffc107;
}

.btn-info-outline {
	color: #0dcaf0;
	border-color: #0dcaf0;
}

.btn-info-outline:hover {
	color: #000;
	background-color: #0dcaf0;
}

/* Hyphenated spacing: .p-y-1 -> .py-1 etc (41 matches, 26 files) */
.p-y-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.p-y-1 {
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
}

.p-y-2 {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.p-y-3 {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important;
}

.p-x-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.p-x-1 {
	padding-left: 0.25rem !important;
	padding-right: 0.25rem !important;
}

.p-x-2 {
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
}

.p-x-3 {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

.p-t-0 {
	padding-top: 0 !important;
}

.p-t-1 {
	padding-top: 0.25rem !important;
}

.p-t-2 {
	padding-top: 0.5rem !important;
}

.p-t-3 {
	padding-top: 1rem !important;
}

.p-b-0 {
	padding-bottom: 0 !important;
}

.p-b-1 {
	padding-bottom: 0.25rem !important;
}

.p-b-2 {
	padding-bottom: 0.5rem !important;
}

.p-b-3 {
	padding-bottom: 1rem !important;
}

.m-t-0 {
	margin-top: 0 !important;
}

.m-t-1 {
	margin-top: 0.25rem !important;
}

.m-t-2 {
	margin-top: 0.5rem !important;
}

.m-t-3 {
	margin-top: 1rem !important;
}

.m-b-0 {
	margin-bottom: 0 !important;
}

.m-b-1 {
	margin-bottom: 0.25rem !important;
}

.m-b-2 {
	margin-bottom: 0.5rem !important;
}

.m-b-3 {
	margin-bottom: 1rem !important;
}

.m-x-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.m-x-1 {
	margin-left: 0.25rem !important;
	margin-right: 0.25rem !important;
}

.m-x-2 {
	margin-left: 0.5rem !important;
	margin-right: 0.5rem !important;
}

.m-x-3 {
	margin-left: 1rem !important;
	margin-right: 1rem !important;
}

.m-y-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.m-y-1 {
	margin-top: 0.25rem !important;
	margin-bottom: 0.25rem !important;
}

.m-y-2 {
	margin-top: 0.5rem !important;
	margin-bottom: 0.5rem !important;
}

.m-y-3 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important;
}

/* .hidden-{bp}-{up,down} -> .d-{bp}-{none,block} (92 matches, 22 files) */
/* These are display-based and need media queries. */
.hidden-xs-down {
	display: none !important;
}

@media (min-width: 576px) {
	.hidden-xs-down {
		display: block !important;
	}
}

.hidden-sm-down {
	display: none !important;
}

@media (min-width: 768px) {
	.hidden-sm-down {
		display: block !important;
	}
}

.hidden-md-down {
	display: none !important;
}

@media (min-width: 992px) {
	.hidden-md-down {
		display: block !important;
	}
}

.hidden-lg-down {
	display: none !important;
}

@media (min-width: 1200px) {
	.hidden-lg-down {
		display: block !important;
	}
}

@media (min-width: 576px) {
	.hidden-sm-up {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.hidden-md-up {
		display: none !important;
	}
}

@media (min-width: 992px) {
	.hidden-lg-up {
		display: none !important;
	}
}

@media (min-width: 1200px) {
	.hidden-xl-up {
		display: none !important;
	}
}

/* NOTE: data-toggle -> data-bs-toggle CANNOT be shimmed in CSS.
   It is a JS attribute change. This MUST be fixed in the block PHP
   files (Batch 1 of T3.2). Bootstrap 5 JS will not respond to
   data-toggle at all. */

/* ----------------------------------------------------------------
	T5.3: SapientHeroBackground — full-bleed hero section
	----------------------------------------------------------------
	The hero section sits inside .container-fluid (Dashboard2 header
	zone). Bootstrap 5's .container-fluid has horizontal padding
	(--bs-gutter-x). The hero must break out edge-to-edge.

	Approach: zero the padding on the header container wrapper so the
	hero section spans the full browser width. The inner .container
	re-centers the text content.
-----------------------------------------------------------------*/

.su-dashboard2-header-container {
	padding: 0 !important;
}

.canvas-hero-bg {
	margin: 0 !important;
	padding: 0 !important;
}

/* Mobile: reduce hero min-height */
@media (max-width: 767.98px) {
	.canvas-hero-bg {
		min-height: 50vh !important;
	}
}

/* Text-only hero (no background) — also flush */
.canvas-hero-plain {
	margin: 0 !important;
}

/* ----------------------------------------------------------------
	T5.5: Footer identity pack — corporate identity background
	----------------------------------------------------------------
	HeaderTemplate emits --hepo-footer-bg as a CSS custom property
	when website_design.footer_bg_path is set (resolved to /m/{slug}).
	This rule applies it as the footer background with a dark overlay
	so footer content stays readable. When the variable is not set
	(no footer bg assigned), the footer uses its default Canvas style.
-----------------------------------------------------------------*/

#footer {
	/* When --hepo-footer-bg is set, apply dark overlay + image.
	   When not set, var() falls back to 'none' and the footer
	   uses its default Canvas .dark background. */
	background-image:
		linear-gradient(rgba(26, 26, 46, 0.85), rgba(26, 26, 46, 0.85)),
		var(--hepo-footer-bg, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}