/*
	theme.css

	Kildeer PTO brand palette applied over Bootstrap 5. Load immediately AFTER
	bootstrap.min.css on every page that uses it.

	Why the per-component blocks: Bootstrap 5.3 compiles literal hex into each
	component rather than reading --bs-primary at runtime, so overriding that
	variable alone recolors the utilities (.text-primary, .bg-primary, .border-primary)
	but leaves buttons, form controls and progress bars on Bootstrap blue. The
	component-level custom properties below are the supported override point.

	Shades follow Bootstrap's own derivation: hover = 15% darker, active = 20%
	darker, focus tint = 50% toward white.

	NOTE: this must never be loaded into the page-builder's preview iframe. That
	frame renders Bootstrap 3.3.5 on purpose, to match what Membership Toolkit
	itself serves.
*/

:root {
	--bs-primary: #082897;
	--bs-primary-rgb: 8, 40, 151;
	--bs-link-color: #082897;
	--bs-link-color-rgb: 8, 40, 151;
	--bs-link-hover-color: #062079;
	--bs-link-hover-color-rgb: 6, 32, 121;
}

.btn-primary {
	--bs-btn-bg: #082897;
	--bs-btn-border-color: #082897;
	--bs-btn-hover-bg: #072280;
	--bs-btn-hover-border-color: #062079;
	--bs-btn-active-bg: #062079;
	--bs-btn-active-border-color: #062079;
	--bs-btn-disabled-bg: #082897;
	--bs-btn-disabled-border-color: #082897;
	--bs-btn-focus-shadow-rgb: 8, 40, 151;
}

.btn-outline-primary {
	--bs-btn-color: #082897;
	--bs-btn-border-color: #082897;
	--bs-btn-hover-bg: #082897;
	--bs-btn-hover-border-color: #082897;
	--bs-btn-active-bg: #082897;
	--bs-btn-active-border-color: #082897;
	--bs-btn-disabled-color: #082897;
	--bs-btn-disabled-border-color: #082897;
	--bs-btn-focus-shadow-rgb: 8, 40, 151;
}

.btn-link {
	--bs-btn-color: #082897;
	--bs-btn-hover-color: #062079;
	--bs-btn-active-color: #062079;
}

/* Focus rings: inputs, selects, checkboxes and buttons all carry literal blue. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
	border-color: #8494cb;
	box-shadow: 0 0 0 0.25rem rgba(8, 40, 151, 0.25);
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
	box-shadow: 0 0 0 0.25rem rgba(8, 40, 151, 0.25);
}

.form-check-input:checked {
	background-color: #082897;
	border-color: #082897;
}

.form-check-input:indeterminate {
	background-color: #082897;
	border-color: #082897;
}

.progress {
	--bs-progress-bar-bg: #082897;
}

.nav-pills {
	--bs-nav-pills-link-active-bg: #082897;
}

.pagination {
	--bs-pagination-color: #082897;
	--bs-pagination-hover-color: #062079;
	--bs-pagination-active-bg: #082897;
	--bs-pagination-active-border-color: #082897;
	--bs-pagination-focus-color: #062079;
	--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(8, 40, 151, 0.25);
}

.list-group {
	--bs-list-group-active-bg: #082897;
	--bs-list-group-active-border-color: #082897;
	--bs-list-group-action-active-bg: #082897;
}

.dropdown-menu {
	--bs-dropdown-link-active-bg: #082897;
}

.accordion {
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(8, 40, 151, 0.25);
	--bs-accordion-active-color: #082897;
}