/* ============================================================================
   TYPOGRAPHY & FONTS
   ============================================================================ */

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

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

/* alt-font3 is RESERVED FOR NUMERALS -- stat values, counts, percentages and
   numeric dates (08/01/2027). A written date (Aug 1, 2027) is prose and stays
   in the body face. Aligned digits are the reason this class exists. */
.alt-font3 {
	font-family: "Chivo Mono", monospace;
}

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

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

/* Content Lead Styling */
.content-lead {
	font-family: "Kanit", sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: #ffc45a;
	text-transform: capitalize;
	display: block;
	background-color: var(--brand);
	padding: 0.3rem 0.4rem;
	border-radius: 0;
}

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

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

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

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

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

.card-height-md {
	min-height: 400px !important;
}

.card-height-sm {
	min-height: 200px !important;
}

/* Tight Card Spacing - For content sections with minimal gaps */
.card-tight {
	margin-bottom: -1rem !important;
}

.card-tight .card {
	margin-bottom: 0 !important;
}

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

/* Password Toggle - Eye Icon */
.password-input-wrapper {
	position: relative;
}

.password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	z-index: 10;
	color: var(--brand);
	transition: color 0.2s ease;
}

.password-toggle:hover {
	color: var(--mint);
}

.password-toggle:focus {
	outline: none;
}

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

/* 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 {
	-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%);
}

/* Tooltip Styles */
.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 140px;
	background-color: #555555;
	color: #ffffff;
	text-align: center;
	border-radius: 0;
	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: #555555 transparent transparent transparent;
}

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

/* Accordion Chevron Icon Toggle */
.accordion-toggle .chevron-icon::before {
	content: "\f078\f078";
}

.accordion-toggle:not(.collapsed) .chevron-icon::before {
	content: "\f077\f077";
}

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

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

/* ============================================================================
   TABLES & DATA DISPLAY
   ============================================================================ */

/* Every <th> wears this one class instead of repeating four utilities. Changing
   the look of table headers fleet-wide is then a single edit here.
   See /home/sagedash/.guides/dashboard-design-standard.md #6.4 */
.table-label {
	font-family: "Overpass Mono", monospace;
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--brand);
}

/* Form field labels are owned here, never by a color utility in the markup, so
   retheming is one edit and a label can never be mistaken for a status. */
label,
.form-label,
legend {
	color: var(--brand);
}

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

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

/* ============================================================================
   RESPONSIVE MOBILE STYLES
   ============================================================================ */

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

/* Mobile Header & Social Icons */
@media (max-width: 767px) {
	.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;
	}

	.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;
	}
}

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

/* Icons and labels are DESERT-LIGHT at rest -- 5.89:1 on the #1D2127 sidebar
   (base desert is 4.56:1, so this is the more legible of the two as well as the
   one Kenny picked). The markup carries no color class (see
   includes/sidebar-left.php), so the <i> and its <span> both inherit from the
   link and can never drift apart. Hover and active stay gold; those rules live
   in css/sidebar.css and out-specify this one.
   See /home/sagedash/.guides/dashboard-design-standard.md #6.8 */
html ul.nav-main li a,
html ul.nav-main li a span,
html ul.nav-main li a > i {
	color: var(--brand-title-light);
}

/* nav-active is set on the <li>; the link inside it is the current page. */
html ul.nav-main li.nav-active > a,
html ul.nav-main li.nav-active > a span,
html ul.nav-main li.nav-active > a > i,
html ul.nav-main li a:hover,
html ul.nav-main li a:hover span,
html ul.nav-main li a:hover > i,
html ul.nav-main li a:focus,
html ul.nav-main li a:focus span,
html ul.nav-main li a:focus > i {
	color: #f4c430;
}

/* ============================================================================
   USER DROPDOWN (top right)
   ============================================================================ */

/* theme.css hovers these to white-on-#CCC (1.6:1). Keep the mud text and use a
   light neutral behind it instead. The link/icon colors themselves come from
   text-brand in includes/header.php, which is !important and beats theme.css's
   .userbox .dropdown-menu a at (0,3,0). */
html .userbox .dropdown-menu a:hover,
html .userbox .dropdown-menu a:focus {
	background: #f2f2f2;
	color: var(--brand);
}

html .userbox .dropdown-menu a:hover i,
html .userbox .dropdown-menu a:focus i {
	color: var(--brand);
}

/* ============================================================================
   SECTION BARS
   ============================================================================ */

/* A section bar's height was being set by whichever heading level it happened to
   use: theme.css gives h4 line-height 27px and h5 only 18px, so with identical
   px-2 py-1 padding an <h5> bar rendered 9px shorter than an <h4> one. Heading
   level is a semantic choice and should not change how the bar looks.
   Pinning line-height here makes every bar the same height at any level.
   See /home/sagedash/.guides/dashboard-design-standard.md #6.3 */
.section-bar {
	line-height: 27px;
}

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