/* Element foundations. */
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	background-color: var(--gamls-body);
	color: var(--gamls-on-body);
}

html {
	scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	color: var(--gamls-blue);
}


/* Link refinements. Site-specific underline opt-outs not covered by BS5 defaults. */

/* Table cell links - BS5 doesn't strip underlines from <a> in tables. */
.table a {
	text-decoration: none;
}

/* Strip underlines from every descendant <a>. Apply class="no-link-underline"
   to any parent element when all links inside should render without an underline
   (icon tile grids, chrome regions, link lists, etc.). For a single link opt-out,
   use BS5's .text-decoration-none utility on the <a> itself. */
.no-link-underline a {
	text-decoration: none;
}


/* Animation keyframes.
   Used by ::before pseudo-elements that render a thin circular spinner over
   loading images (editHero thumbnails, formTheme previews, etc.). */
@keyframes gamls-spin {
	to { transform: rotate(360deg); }
}


/* Forms. */

/* jQuery Validate - error state on inputs and the inline error label */
input.error,
textarea.error,
select.error,
label.error {
	border-color: #f00;
	color: #f00;
}

/* Form-check pill treatment.
   BS5 form-check variant where the entire row is a clickable pill, with
   subtle hover background and the input rendered inline inside the label.
   Visual chrome (radius, padding, pointer) comes from BS5 utilities applied
   in markup. This rule only handles the parts BS5 can't:
   the row-hover background, the transition, and small inter-pill spacing.
       <div class="form-check form-check-gamls rounded p-2 cursor-pointer">
           <label class="form-check-label form-check-label-gamls" for="x">
               <input class="form-check-input form-check-input-gamls" id="x" ...>
               Label text
           </label>
       </div>
*/
.form-check-gamls {
	transition: background-color 0.15s ease;
	margin: 2px;
}

.form-check-gamls:hover {
	background-color: color-mix(in srgb, var(--gamls-blue) 6%, transparent);
	color: var(--gamls-on-body);
}

.form-check-gamls .form-check-input-gamls {
	float: none;
	margin-left: 0;
	margin-right: 0.4rem;
	vertical-align: middle;
	width: 1.25rem;
	height: 1.25rem;
}

.form-check-label-gamls {
	display: block;
	width: 100%;
	line-height: 1.25rem;
	cursor: pointer;
}

.form-check-label-gamls input[type=checkbox] {
	margin-top: -2px;
}

/* Required field indicator — appends a Font Awesome asterisk after the element */
.gamls-required::after {
	content: "\F069";
	font-family: "Font Awesome 7 Pro";
	font-weight: 900;
	color: var(--gamls-gold);
	opacity: 1;
	margin-left: 0.3rem;
}


/* Tooltips. */
.tooltip-inner {
	max-width: 400px;
}


/* Third-party patches.
   - Google Places: lift the autocomplete dropdown above modal backdrops. */
.pac-container {
	z-index: 1100 !important;
}


/* Site chrome - header, navigation, footer. */

/* Header login container */
#container-login {
	background-color: var(--gamls-body);
}

/* Nav begins */

/* Dropdown nav - bullet removal */
.nav-item .dropdown-menu ul li {
	list-style-type: none;
}

/* Multi-column dropdown - nested dropdown unstyling */
.dropdown-menu.multi-column-2 .dropdown-menu,
.dropdown-menu.multi-column-3 .dropdown-menu {
	display: block !important;
	position: static !important;
	margin: 0 !important;
	border: none !important;
	box-shadow: none !important;
}

/* NavBar dropdown menu - same font size as body */
.navbar .dropdown-menu {
	font-size: .9rem;
	background-color: var(--gamls-body);
	overflow: auto;
}

/* Multi-column dropdown column heading.
   .nav-header is set on multi-column dropdown column headings (rendered from
   a DB-driven nav table - invisible to source grep). The :hover rule locks
   the background so the column heading does not react like a dropdown-item. */
.nav-header {
	font-weight: bold;
	font-size: 0.83rem;
	color: var(--gamls-on-gray-light);
	background-color: var(--gamls-gray-light);
}

.nav-header:hover {
	background-color: var(--gamls-gray-light) !important;
	color: var(--gamls-on-gray-light) !important;
	cursor: default;
}

/* Nav dropdown item hover - brand-blue bg with white text. Distinct from
   the gray .nav-header sub-headings so hovered items don't visually merge
   with the static column labels. */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus-visible,
.nav-row:hover,
.nav-row:focus-within {
	background-color: var(--gamls-blue-light) !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus-visible,
.nav-row:hover a,
.nav-row:focus-within a {
	color: var(--gamls-on-blue-light) !important;
}

/* Multi-column dropdown widths */
@media screen and (max-width: 991px) {
	.dropdown-menu.multi-column-2,
	.dropdown-menu.multi-column-3 {
		width: 330px;
	}
}

@media screen and (min-width: 992px) {
	.dropdown-menu.multi-column-2 {
		width: 580px;
	}

	.dropdown-menu.multi-column-3 {
		width: 800px;
	}
}

/* Nav ends */

/* BXSlider prev/next buttons ship at z-index 9999. Push below BS5's dropdown
   layer (1000) so nav dropdowns hanging over a slider on search/full.cfm
   and search/propertydetail.cfm render in front of the slider controls. */
.bx-wrapper .bx-controls-direction a {
	z-index: 999;
}

/* Page heading region.
   Generic heading band any page can opt into. .page-heading is the band
   itself (where the h1 sits, alongside any subheading or right-side
   action/link/info); .page-heading-photo and .page-heading-logo are
   optional rounded frames for a person photo or company/site/member logo
   inside the band - use either, both, or neither. Soft brand-blue wash
   (--gamls-blue-dark at low alpha) fades downward, gray-light border at
   the bottom, brand-blue-dark glow shadow on the photo/logo frames. */
.page-heading {
	background: linear-gradient(180deg,
		color-mix(in srgb, var(--gamls-blue-dark) 7%, transparent),
		color-mix(in srgb, var(--gamls-blue-dark) 2%, transparent));
	border-bottom: 1px solid var(--gamls-gray-light);
}

.page-heading-photo {
	background: var(--gamls-body);
	padding: 0;
	border-radius: 0.75rem;
	border: 1px solid var(--gamls-gray-light);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--gamls-blue-dark) 10%, transparent);
	max-height: 128px !important;
}

.page-heading-logo {
	background: var(--gamls-body);
	padding: 1rem;
	border-radius: 0.75rem;
	border: 1px solid var(--gamls-gray-light);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--gamls-blue-dark) 10%, transparent);
	max-height: 128px;
}


/* Member/Office detail page.
   BS5 base class overrides, page-scoped via rc.bodyclass="detail-page" set in
   views/member/detail.cfm and views/office/detail.cfm. Keeps the BS5 defaults
   intact everywhere else on the site. */
.detail-page .card {
	border-radius: 0.75rem;
}

.detail-page .card-title {
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	color: var(--gamls-blue-dark);
}


/* Listing detail tables - uniform label/data column widths used throughout
   views/search/includes/propertydetailtables.cfm (consumed by propertydetail.cfm,
   propertydetailprint.cfm, and AJAX-loaded into full.cfm). Class names are
   specific enough to .td- prefix that no further scoping is needed. */
.td-label {
	width: 40%;
}

.td-data {
	width: 60%;
}


/* Project-custom buttons. */

/* Binary-status toggle.
   For a button whose visual state mirrors a data-status="on"|"off" attribute.
   Green-on / grey-off coloring driven by BS5 subtle-bg vars. Lift on hover.
   Usage:
       <button class="btn btn-sm btn-gamls-status" data-status="on|off">...
*/
.btn-gamls-status {
	transition:
		background-color 0.3s ease,
		border-color 0.3s ease,
		color 0.3s ease,
		box-shadow 0.3s ease,
		transform 0.15s ease;
}

.btn-gamls-status:hover {
	transform: translateY(-1px);
}

.btn-gamls-status:active {
	transform: translateY(0);
	box-shadow: none;
}

.btn-gamls-status[data-status="on"] {
	background-color: var(--bs-success-bg-subtle);
	border-color: var(--bs-success);
	color: var(--bs-success-text-emphasis);
}

.btn-gamls-status[data-status="off"] {
	background-color: transparent;
	border-color: var(--bs-secondary-border-subtle);
	color: var(--bs-secondary-color);
}

.btn-gamls-status[data-status="off"]:hover {
	background-color: var(--bs-secondary-bg);
	border-color: var(--bs-secondary);
	color: var(--bs-body-color);
	box-shadow: 0 4px 12px rgba(108, 117, 125, 0.15);
}

/* Search / events result-toolbar "current view" indicator.
   The toolbar lives in views/search|events/includes/formkeepbuttons.cfm; a view button
   mutates the action + target of #searchForm before submit. The button for the page
   you're already on carries .active + aria-current="page". Blocking the click at the DOM
   level (pointer-events: none) keeps any handler — resultcontrols.js or its parallel
   eventsresultcontrols.js — from mutating the form and re-submitting. Visual cue is the
   .active color. Search now hooks via data-gamls-action="search-display"
   (.claude/standards/js-data-gamls-hooks.md); events still uses the legacy
   .btn-searchdisplay class pending its own migration — both selectors below. */
.btn-searchdisplay.active,
[data-gamls-action="search-display"].active {
	pointer-events: none;
}


/* Zoom begins */

/* Thumbnail utilities - composable sizing and behavior.
   .thumb-64 locks an <img> to a 64x64 square and center-crops the source
   regardless of original aspect. Apply on its own for silhouette placeholders
   or any other 64x64 thumbnail that should not zoom.
   .thumb-zoom adds a 3x hover/focus enlargement, anchored top-left so the
   grown image overflows down-and-right. Size-agnostic - applies the transform
   to whatever dimensions the element already has, so it composes with .thumb-64
   (member photos) or with whatever per-page sizing the consumer brings
   (gallery thumbnails with their img-fluid + max-height, etc.).
   Wrappers that clip their overflow will clip the 3x-scaled image. Common
   case: BS5's .table-responsive sets overflow-x:auto which the CSS spec
   promotes to overflow-y:auto too — the last/only row of the table sits
   flush against the wrapper's bottom edge and gets clipped. Fix the
   wrapper with overflow:visible plus padding-bottom matching the growth
   (a 64px thumb grows 128px / 8rem below its original bottom edge), so
   the zoom has a landing zone instead of painting over content below.
   transform-origin lives on the base rule (not on :hover) because transform-
   origin is not in the transition list. If it were only in :hover, the origin
   would snap back to center (default) when hover ends, causing the image's
   bounds to jump up-and-left mid-shrink. That jump could put the image back
   under the cursor and re-trigger hover, causing a flicker loop. Keeping the
   origin pinned in the base rule keeps the bounds consistent through both
   states and avoids the flicker. */
.thumb-64 {
	width: 64px;
	height: 64px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.thumb-zoom {
	cursor: pointer;
	transform-origin: top left;
	transition: transform 0.25s ease;
}

.thumb-zoom:hover,
.thumb-zoom:focus-visible,
a:focus-visible .thumb-zoom {
	transform: scale(3);
}

/* Sitewide fix for .thumb-zoom inside a BS5 .table-responsive wrapper.
   The :has() selector keeps this scoped — only fires when the wrapper
   actually contains a zooming thumbnail, so unrelated tables are untouched. */
.table-responsive:has(.thumb-zoom) {
	overflow: visible;
	padding-bottom: 8rem;
}

/* Zoom ends */


/* Hover effects. */

/* Generic image/card hover - scale + slight lift + shadow. Works on
   thumbnails, avatars, preview cards, any interactive image. */
.hover-zoom {
	transition:
		transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	transform-origin: center center;
	will-change: transform;
}

.hover-zoom:hover {
	transform: scale(1.1) translateY(-4px);
	box-shadow:
		0 10px 25px rgba(0, 0, 0, 0.15),
		0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Chart-trigger card affordance - applied to clickable wrappers (role=button) that
   open a chart modal in views/reports/includes/results/*.cfm. Subtle hover ring +
   glow in brand blue. !important needed to override BS5's .shadow-sm which co-exists
   on the same elements. */
.chart-trigger {
	border: 1px solid transparent;
	box-shadow: 0 8px 22px transparent !important;
	transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
	cursor: pointer;
}

.chart-trigger:hover {
	border-color: var(--gamls-blue) !important;
	box-shadow: 0 8px 22px color-mix(in srgb, var(--gamls-blue) 30%, transparent) !important;
}


/* Collapsible report filter — animated width collapse.
   #searchForm transitions its width so the panel slides left while the
   results column expands to fill the freed space via flex-grow.
   JS toggles .filter-col-collapsed on #searchForm via collapse events. */
@media (min-width: 1200px) {
	#searchForm {
		transition: width 0.35s ease, flex-basis 0.35s ease;
		overflow: hidden;
	}
}

.filter-col-collapsed {
	flex: 0 0 auto !important;
	width: 52px !important;
	min-width: 0 !important;
	align-self: flex-start !important;
}

.filter-col-collapsed #btn-form-toggle {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	justify-content: center !important;
	align-items: center;
	height: auto;
	width: 100%;
	padding: 1.5rem 0.25rem;
	gap: 0.6rem;
	border-radius: 0.375rem;
	border-left: 3px solid var(--gamls-gold) !important;
}

.filter-col-collapsed #btn-form-toggle .filter-toggle-icon {
	font-size: 1rem;
	transform: rotate(180deg);
}

.filter-col-collapsed #btn-form-toggle .filter-toggle-label {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.filter-col-collapsed #btn-form-toggle .filter-toggle-chevron {
	display: inline-block !important;
	transform: rotate(180deg);
	font-size: 1rem;
	visibility: visible !important;
	color: #fff !important;
}


/* Print media. */
@media print {
	body {
		font-size: 0.7em;
	}

	.pagebreak {
		page-break-after: always;
		break-after: page;
	}

	.bx-controls-direction {
		display: none;
	}

	/* BS5 tooltips render as positioned divs in the DOM. If the user hovers
	   a button and clicks it fast enough to fire window.print() before the
	   tooltip dismisses, the tooltip ends up in the printout. Hide them in
	   print media so the printed page never carries hover chrome. */
	.tooltip {
		display: none !important;
	}

	/* Reports layout (views/reports/includes/form/body.cfm) sizes the results
	   column with a col-xl-7 breakpoint class. Browsers evaluate print media
	   queries against the screen's viewport width, not the printed page size,
	   so on wide monitors the xl breakpoint still matches at print time and
	   the report is squeezed into ~58% of the page. Force full width instead. */
	#results-col {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* The results card (views/reports/includes/form/body.cfm) uses Bootstrap's
	   .card border and .shadow utility for on-screen depth. Neither serves a
	   purpose on paper, so drop both when printing. */
	#reportPanel .card {
		border: 0 !important;
		box-shadow: none !important;
	}
}