/* ============================================
   TYPOGRAPHY & MINIMUM HEIGHTS
   ============================================ */

/* Minimum Height Utilities */
.mh-300 {
	min-height: 300px !important;
}
.mh-500 {
	min-height: 500px !important;
}
.mh-main-card {
	min-height: 650px !important;
}

/* Card Height Utilities */
.card-height-sm {
	min-height: 200px !important;
}
.card-height-md {
	min-height: 400px !important;
}
.card-height-lg {
	min-height: 700px !important;
}

/* Alternative Font Classes - DO NOT CHANGE STRUCTURE */
.alt-font1 {
	font-family: "Lato", sans-serif;
}

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

.alt-font3 {
	font-family: "Chivo Mono", monospace; /* for numbers */
}

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

.alt-font5 {
	font-family: "Exo", sans-serif;
}

.alt-font6 {
	font-family: "Chewy", system-ui, sans-serif; /* item titles: logo options, moments, recaps, proposals */
	font-weight: 400 !important; /* Chewy has one weight; faux bold smears it */
	letter-spacing: .02em;
}

/* ============================================
   CONTENT COMPONENTS
   ============================================ */

/* Content Lead Styling */
.content-lead {
	font-family: "Kanit", sans-serif;
	font-size: 22px;
	font-weight: 400;
	color: var(--ice);
	text-transform: capitalize;
	display: block;
	background-color: var(--navy);
	padding: 0.5rem 0.75rem;
	border-radius: 0;
}

/* FAQ Lead Styling */
.faq-lead {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: var(--black);
	text-transform: capitalize;
}

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

/* ============================================
   MEDIA CONTAINERS
   ============================================ */

/* Video Container - Responsive 16:9 */
.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 Grayscale Filter */
.map {
	filter: grayscale(100%) saturate(1) brightness(90%) contrast(100%);
}

/* ============================================
   SIDEBAR NAVIGATION
   ============================================ */

/* Base transitions */
.sidebar-left .nav-main li a,
.sidebar-left .nav-main li a i {
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Hover states */
.sidebar-left .nav-main li a:hover span,
.sidebar-left .nav-main li a:focus span,
.sidebar-left .nav-main li.nav-active > a span {
	color: var(--mint) !important;
}

.sidebar-left .nav-main li a:hover i:not(.text-mint) {
	color: var(--mint) !important;
}

/* Background hover effects */
.sidebar-left .nav-main > li > a:hover,
.sidebar-left .nav-main > li > a:focus {
	background-color: rgba(115, 217, 159, 0.1);
}

.sidebar-left .nav-main li .nav-children li a:hover,
.sidebar-left .nav-main li .nav-children li a:focus {
	background-color: rgba(115, 217, 159, 0.05);
}

/* Active states */
.sidebar-left .nav-main li.nav-active > a {
	background-color: rgba(115, 217, 159, 0.08);
}

.sidebar-left .nav-main li .nav-children li.nav-active > a {
	background-color: rgba(115, 217, 159, 0.1);
}

/* ============================================
   ICONS
   ============================================ */

.social-media-icons {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: 15px;
}

.social-icon-desktop,
.social-icon-mobile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: var(--black);
	border: 1px solid var(--black);
	transition: all 0.3s ease;
	text-decoration: none;
}

.social-icon-desktop:hover,
.social-icon-mobile:hover {
	background-color: var(--black-hover);
	border-color: var(--black-hover);
}

.social-icon-desktop .icon-theme,
.social-icon-mobile .icon-theme {
	color: var(--gold-light) !important;
}

.social-icon-desktop:hover .icon-theme,
.social-icon-mobile:hover .icon-theme {
	color: var(--gold-light-hover) !important;
}

.social-icon-desktop i,
.social-icon-mobile i {
	font-size: 16px;
}

/* TikTok specific */
.social-icons-tiktok:hover a {
	background: var(--black) !important;
}

/* Cloud/Weather Icons */
.icon-cloud-sun {
	--fa-secondary-opacity: 1;
	--fa-primary-color: #ffffff; /* White cloud */
	--fa-secondary-color: #ffcd3a; /* Yellow sun */
}

/* TV/Media Icons */
.icon-tv {
	--fa-secondary-opacity: 1;
	--fa-primary-color: #030303; /* Dark TV frame/body */
	--fa-secondary-color: #e1e1e1; /* Yellow */
}

/* Calendar/Schedule Icons */
.icon-calendar {
	--fa-secondary-opacity: 1;
	--fa-primary-color: #e53935; /* Red header */
	--fa-secondary-color: #ffffff; /* White page */
}

.icon-calendar-xmark {
	--fa-secondary-opacity: 1;
	--fa-primary-color: #9e9e9e; /* Gray calendar */
	--fa-secondary-color: #e53935; /* Red X */
}

/* Clock/Time Icons */
.icon-clock {
	--fa-secondary-opacity: 1;
	--fa-primary-color: #ffffff; /* White Clock Hands */
	--fa-secondary-color: #00381f; /* Peat Clock Face */
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

/* Error Message Styling */
.error-message {
	color: #cc0000;
	font-weight: bold;
	font-size: 13px;
}

/* Password Input */
.password-input-wrapper {
	position: relative;
}

.password-input-wrapper input {
	padding-right: 40px;
}

.password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	color: #6c757d;
	cursor: pointer;
	padding: 5px;
	z-index: 10;
}

.password-toggle:hover {
	color: #495057;
}

.password-toggle:focus {
	outline: 2px solid #0d6efd;
	outline-offset: 2px;
	border-radius: 3px;
}

.forgot-password-content-wrapper {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================
   TOOLTIPS
   ============================================ */

/* Custom tooltip styling */
.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 140px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -75px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

/* Bootstrap native tooltip enhancement - Porto Admin style */
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
	border-top-color: #171717;
}

.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
	border-bottom-color: #171717;
}

.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before,
.bs-tooltip-start .tooltip-arrow::before {
	border-left-color: #171717;
}

.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
	border-right-color: #171717;
}

.tooltip-inner {
	background-color: #171717;
	color: #ffffff;
	padding: 0.375rem 0.625rem;
	border-radius: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 400;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
	max-width: 200px;
	text-align: center;
}

/* Tooltip fade-in animation */
.tooltip {
	opacity: 0;
}

.tooltip.show {
	opacity: 1;
}

/* ============================================
   TABLE & AUDIT STYLES
   ============================================ */

.audit-row {
	transition: background-color 0.2s ease;
}

.audit-row:hover {
	background-color: rgba(0, 0, 0, 0.02) !important;
}

/* ============================================
   FAQ & NAVIGATION
   ============================================ */

.nav-pills .nav-link.active {
	background-color: var(--black) !important;
	border-color: var(--black) !important;
	color: var(--gold-light) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination {
	margin-bottom: 0;
}

.page-link {
	color: var(--bs-primary);
	position: relative;
	display: block;
	padding: 0.375rem 0.75rem;
	text-decoration: none;
	background-color: var(--bs-white);
	border: 1px solid var(--bs-border-color);
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out;
}

.page-link:hover {
	z-index: 2;
	color: var(--bs-primary);
	background-color: var(--bs-gray-200);
	border-color: var(--bs-gray-300);
}

.page-link:focus {
	z-index: 3;
	color: var(--bs-primary);
	background-color: var(--bs-gray-200);
	outline: 0;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.page-item.active .page-link {
	z-index: 3;
	color: var(--bs-white);
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

.page-item.disabled .page-link {
	color: var(--bs-gray-600);
	pointer-events: none;
	background-color: var(--bs-white);
	border-color: var(--bs-border-color);
}

.page-item:first-child .page-link {
	border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}

.page-item:last-child .page-link {
	border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

/* ============================================
   MOBILE RESPONSIVE (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
	/* Hide desktop elements */
	.card-header > .row,
	.audit-row {
		display: none !important;
	}

	/* Login page layout */
	.content-body {
		min-height: calc(100vh - 60px) !important;
		display: flex !important;
		flex-direction: column !important;
		padding-bottom: 60px !important;
	}

	.login-content-wrapper {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Header styling */
	.header {
		min-height: 60px;
	}

	.logo-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 10px 15px;
		height: 100%;
	}

	.logo-container .logo {
		display: flex;
		align-items: center;
		max-width: 200px;
	}

	.logo-container .logo img {
		max-width: 100%;
		height: 35px;
		width: auto;
		object-fit: contain;
	}

	.mobile-controls {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}

	.social-icon-mobile {
		width: 32px;
		height: 32px;
		flex-shrink: 0;
	}

	.social-icon-mobile i {
		font-size: 14px;
	}

	/* Hamburger menu */
	.toggle-sidebar-left {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		width: 32px;
		height: 32px;
		margin-left: 5px;
	}

	.toggle-sidebar-left i {
		margin: 0 !important;
		font-size: 18px;
	}
}

/* Small screen pagination */
@media (max-width: 576px) {
	.pagination .page-link {
		padding: 0.25rem 0.5rem;
		font-size: 0.875rem;
	}
}

/* ==========================================================================
   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; }