/* ==========================================================================
   Height Utilities
   ========================================================================== */
.mh-300 {
	min-height: 300px !important;
}

.mh-500 {
	min-height: 500px !important;
}

/* ==========================================================================
   Typography - Alternative Fonts
   ========================================================================== */
.alt-font1 {
	font-family: "Aleo", serif;
}

.alt-font2 {
	font-family: "Archivo", sans-serif;
}

.alt-font3 {
	font-family: "Chivo Mono", monospace;
}

.alt-font4 {
	font-family: "Bitter", serif;
}

/* ==========================================================================
   Content Lead Styling
   ========================================================================== */
.content-lead {
	font-family: "Bitter", serif;
	font-size: 24px;
	font-weight: bold;
	color: #7d1a1a;
	display: inline-block;
	position: relative;
	padding-left: 1.5em;
}

.content-lead::before {
	color: var(--fa-primary-color, #c92927);
	opacity: 1;
	opacity: var(--fa-primary-opacity, 1);
}

.content-lead::after {
	color: var(--fa-secondary-color, #030303);
	opacity: var(--fa-secondary-opacity, 1);
}

.content-lead::before {
	content: "\f552";
}

.content-lead::after {
	content: "\f552\f552";
}

.content-lead::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.content-lead::before,
.content-lead::after {
	font: var(--fa-font-duotone);
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25em;
	text-align: center;
}

/* ==========================================================================
   FAQ Lead Styling
   ========================================================================== */
.faq-lead {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 600;
	color: #030303;
	text-transform: capitalize;
}

.faq-lead:before {
	font-family: "Font Awesome 7 Pro";
	content: "\f059" !important;
	font-weight: 900 !important;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	padding-right: 5px;
	color: #030303;
}

/* ==========================================================================
   Video Container (16:9 Responsive)
   ========================================================================== */
.video-container {
	overflow: hidden;
	position: relative;
	width: 100%;
}

.video-container::after {
	padding-top: 56.25%;
	display: block;
	content: "";
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Map Styling
   ========================================================================== */
.map {
	-webkit-filter: grayscale(100%) saturate(1) brightness(90%) contrast(100%);
	-moz-filter: grayscale(100%) saturate(1) brightness(90%) contrast(100%);
	-ms-filter: grayscale(100%) saturate(1) brightness(90%) contrast(100%);
	-o-filter: grayscale(100%) saturate(1) brightness(90%) contrast(100%);
	filter: grayscale(100%) saturate(1) brightness(90%) contrast(100%);
}

/* ==========================================================================
   Social Icons
   ========================================================================== */
.social-icons li:hover.social-icons-tiktok a {
	background: #030303 !important;
}

/* ==========================================================================
   Icon Theme (Duotone Colors)
   ========================================================================== */
.icon-theme {
	--fa-secondary-opacity: 1;
	--fa-primary-color: #030303;
	--fa-secondary-color: #c92927;
}

.icon-theme-reverse {
	--fa-secondary-opacity: 1;
	--fa-primary-color: #c92927;
	--fa-secondary-color: #030303;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer-text,
.footer-text a {
	font-family: "Poppins", sans-serif;
	color: #cbcbcb !important;
	text-decoration: none;
}

.footer-text a:hover {
	color: #e1e1e1;
	text-decoration: none;
}

/* ==========================================================================
   CMS Forms (includes/forms/_form-engine.php)
   ========================================================================== */

/* Breathing room wherever a form is embedded (contact page, form pages).
   The bottom gap matters most on mobile, where the form stacks directly on
   top of the next block of content. */
.cms-form-wrap {
	padding-top: 0.5rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 992px) {
	.cms-form-wrap {
		padding-bottom: 1rem;
	}
}

/* Honeypot - kept out of sight of people, still visible to bots */
.cms-form-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cms-form .form-label {
	color: #030303;
	/* Set here, not left to the engine's font-weight-semi-bold class: dashboards' admin theme does not define it,
	   so labels rendered at normal weight there (2026-10-01). 600 = the website theme's semi-bold. */
	font-weight: 600;
}

/* A single checkbox FIELD ("I agree to the refund policy") is a field label too, but the engine renders
   it as a .form-check-label at normal weight and without the required asterisk. It is the first thing in
   its column, while radio / checkbox OPTIONS always follow the field's .form-label - so :first-child
   picks out the field and leaves options alone (cms-form-checkbox-field, 2026-10-01). */
.cms-form [class*="col"] > .form-check:first-child .form-check-label {
	font-weight: 600;
}
.cms-form [class*="col"] > .form-check:first-child .form-check-input[required] + .form-check-label::after {
	content: " *";
	color: #dc3545;
}

.cms-form .form-text {
	color: #6c757d;
}

/* Porto resets some Bootstrap form sizing - keep controls consistent */
.cms-form .form-control,
.cms-form .form-select {
	padding: 0.5rem 0.75rem;
}

/* Agreement / consent text above a form's submit button (_formAgreement) */
.cms-form-agreement {
	padding: 1rem 1.15rem;
	border-left: 3px solid #c92927;
	background: #f7f7f7;
	font-size: 0.9rem;
	line-height: 1.6;
	max-height: 260px;
	overflow-y: auto;
}

/* Section heading inside a long form (_formHeadings). Deliberately theme-neutral:
   it inherits the site's heading font and color rather than naming a brand color,
   because this block is copied verbatim onto every site. */
.cms-form-heading {
	margin: 1.75rem 0 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid #dee2e6;
	font-size: 1.25rem;   /* larger than body text - house rule 2026-09-23; the engine also adds .fs-5 + .text-primary */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* No gap above the first heading - it already sits at the top of the form */
.cms-form .row > .col-12:first-child .cms-form-heading {
	margin-top: 0;
}

/* Privacy / do-not-send warning above a form's fields (_formIntro). Deliberately
   louder than .cms-form-agreement: that one is consent text people are expected to
   skim, this one has to be read BEFORE they start typing. Same red as the agreement
   rule so the two read as one family.
   Added 2026-08-28 after real submissions arrived carrying dates of birth and medical
   detail on a clinic's contact form. */
.cms-form-notice {
	/* A top margin as well as a bottom one: this block is used BOTH above a form
	   (_formIntro) and below an input as a field description, where without it the
	   card butts straight against the radio buttons it explains. Reported on
	   lsbbqcatering's Catering Package field, 2026-09-01. */
	margin-top: 0.85rem;
	margin-bottom: 1.25rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid #c92927;
	border-left-width: 4px;
	border-radius: 3px;
	background: #fdf3f3;
	color: #8c1d1c;
	font-size: 0.9rem;
	line-height: 1.6;
}
.cms-form-notice p:last-child { margin-bottom: 0; }
.cms-form-notice strong { color: #a51f1e; }

/* Important Notice messages are WYSIWYG and arrive wrapped in <p>; keep the theme's p color from overriding the alert text color */
.alert p,
.alert li {
	color: inherit;
}

/* Center counter icons over the stat number and label (FontAwesome 7 gives icons a fixed width, so display:block alone leaves them at the left) */
.counters .counter [class*="fa-"],
.counters .counter .icons,
.counters .counter svg.svg-inline--fa {
	margin-left: auto;
	margin-right: auto;
}

/* WYSIWYG paragraphs inside a light-text wrapper take the wrapper's color, not the theme's p color */
.footer-text p,
.text-white p,
.text-light p {
	color: inherit;
}