html {
	height: 100%;
}

/* ===========================================
   Sticky Footer using Flexbox
   Footer sticks to bottom when content is short,
   pushes down naturally when content is long
   =========================================== */

body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* Main content wrapper grows to fill available space */
.content-wrap {
	flex: 1 0 auto;
	width: 100%;
	overflow: visible;
}

/* success alert - overide bootstrap  with DGL colors */
.alert-success {
	color: #0d8252;
	background-color: #eafbeb;
	border-color: #badbcc;
}
/* danger alert - overide bootstrap with DGL colors */
.alert-danger {
	color: #b30518;
	background-color: #ffe8e3;
	border-color: #f5c2c7;
}
/* Footer stays at bottom */
footer {
	flex-shrink: 0;
	width: 100%;
}

/* ===========================================
   Navbar Accessibility Fixes
   Hide hamburger menu from tab order when not visible
   =========================================== */

/* On larger screens (sm and up), the navbar-toggler is visually hidden
   but may still be in the tab order. Remove it from focus. */
@media (min-width: 576px) {
	.navbar-toggler {
		display: none !important;
	}
}

/* When the navbar-toggler is collapsed (aria-expanded="false"),
   ensure it doesn't receive focus on desktop */
.navbar-toggler[aria-expanded="false"]:not(:focus):not(:focus-within) {
	pointer-events: auto;
}

h4, .h4 {
	font-size: 1rem;
	font-weight: bold;
}

/* Added accessible required asterisk style */
.required-asterisk {
	color: #8B0000; /* darker red for better contrast against white */
	font-weight: 600;
	margin-left: 0.15rem;
	/* keep it visually small but with sufficient contrast */
}

.text-danger1 {
	color: #8B0000 !important
}

/* If using Bootstrap 4/5 the .sr-only/.visually-hidden classes provide hidden text for screen readers.
   No changes required here if your Bootstrap already includes them. */

/* ===========================================
   WCAG-Compliant Button Focus Indicators
   Dark teal outer border for all buttons
   =========================================== */

/* Primary buttons - som-button and .btn-primary */
.btn:focus,
.btn:focus-visible,
.btn-primary:focus,
.btn-primary:focus-visible,
som-button .btn:focus,
som-button .btn:focus-visible,
som-button:focus-within .btn {
	outline: 3px solid #147B91 !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Secondary and other button variants */
.btn-secondary:focus,
.btn-secondary:focus-visible,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible {
	outline: 3px solid #147B91 !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* Link buttons */
.btn-link:focus,
.btn-link:focus-visible {
	outline: 3px solid #147B91 !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
	text-decoration: none;
}

/* ===========================================
   Footer Link Focus Indicators
   Match the som-footer component's default black focus style
   for consistency across all footer links
   =========================================== */

/* Footer links - use outline auto to match som-footer component's native focus style */
.footer a:focus,
.footer a:focus-visible,
.footer-nav a:focus,
.footer-nav a:focus-visible,
.footer-brand a:focus,
.footer-brand a:focus-visible,
.footer .footer-brand a:focus,
.footer .footer-brand a:focus-visible,
som-footer a:focus,
som-footer a:focus-visible,
som-footer-item a:focus,
som-footer-item a:focus-visible,
.footer-wrapper a:focus,
.footer-wrapper a:focus-visible,
footer a:focus,
footer a:focus-visible {
	outline: auto 1px rgb(16, 16, 16) !important;
	outline-offset: 1px !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* ===========================================
   Navbar Menu Focus Indicators
   White outline for dark navbar background (bg-dark #323e43)
   =========================================== */

/* Navbar links - use white outline for contrast against dark background */
.navbar-dark .nav-link:focus,
.navbar-dark .nav-link:focus-visible,
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:focus-visible {
	outline: 2px solid #ffffff !important;
	outline-offset: 2px !important;
	border-radius: 2px !important;
	box-shadow: none !important;
}

/* ===========================================
   Global Link Focus Indicators
   Ensures all links across the site have consistent focus
   =========================================== */

/* Default link focus - catches any links not covered by more specific rules */
a:focus,
a:focus-visible {
	outline: 3px solid #147B91 !important;
	outline-offset: 2px !important;
}

/* Alert icon styling for accessibility - centralized for reuse across all pages */
.alert {
	display: flex;
	align-items: center;
}

	.alert .alert-icon {
		width: 1.25rem;
		height: 1.25rem;
		min-width: 1.25rem;
		min-height: 1.25rem;
		margin-right: 0.75rem;
		flex-shrink: 0;
		display: inline-block;
	}

#topContainer {
	background-color: var(--gray-100);
}

#middleContainer {
	background-color: var(--white);
}

#formContainer {
	background-color: var(--gray-100);
}

/* Sticky container for header + alerts */
#stickyTop {
	position: sticky;
	top: 0;
	z-index: 1030;
	width: 100%;
}

#header {
	width: 100%;
	box-shadow: 0px 4px 10px var(--gray-400);
}

/* No padding needed - header is in normal document flow with sticky positioning */
#mainContent {
	/* padding-top handled naturally by sticky header */
}

/* ===========================================
   Alert Positioning
   Alerts flush against header, stacked without gaps
   Full width with no side padding
   =========================================== */

/* Alert container inside stickyTop */
#alertContainer {
	width: 100%;
}

	/* When alertContainer has content, ensure it displays properly */
	#alertContainer:not(:empty) {
		display: block;
	}

/* Alert rows stack without gaps, full width */
.alert-row {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

	.alert-row .col-12 {
		padding: 0;
	}

	.alert-row .alert {
		border-radius: 0;
		margin-bottom: 0;
		padding: 0.5rem 1rem;
	}

		/* Alert close button styling for accessibility */
		.alert-row .alert .btn-close {
			padding: 0.75rem 1rem;
			opacity: 0.8;
		}

			.alert-row .alert .btn-close:hover {
				opacity: 1;
			}

			.alert-row .alert .btn-close:focus {
				outline: 2px solid currentColor;
				outline-offset: -4px;
				box-shadow: none;
				opacity: 1;
			}

/* Override mt-5 on middleContainer - spacing is handled by alerts or mainContent padding */
#middleContainer.mt-5 {
	margin-top: 1rem !important;
}

#wrap {
	/*min-height: 100%;*/
	/*height: auto !important;*/
	/*height: 100%;*/
	/* Negative indent footer by it's height */
	margin: 0 auto 102px;
}

#push,
#footer {
	/*height: 161px;*/
	padding-left: 15px;
	padding-right: 15px;
}

#footerDiv {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 122px;
}

hr {
	border: none;
	height: 2px;
	color: var(--gray-400);
	background-color: var(--gray-400);
}

#agencyList som-card:hover {
	cursor: pointer;
}

.form-control.searchbox {
	background-image: url('/assets/map_icon.png');
	background-size: 70px;
	background-color: white;
	background-position: -12px -13px;
	background-repeat: no-repeat;
	padding-left: 50px;
}

	.form-control.searchbox::placeholder {
		opacity: 0.4;
		font-weight: bold;
	}

	.form-control.searchbox:-ms-input-placeholder { /* Internet Explorer 10-11 */
		opacity: 0.4;
		font-weight: bold;
	}

som-card-body .card-title {
	margin-top: 0rem;
	font-size: 1.1rem;
	font-weight: bold;
}

.card-body p {
	margin-bottom: 0;
}

.form-group-small {
	margin-bottom: 6px;
}


som-cards .som-card-deck.som-cards-md som-card {
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 15px;
	height: 128px;
}

span.k-picker-wrap.k-state-default {
	border: 0;
}

.auto-trim {
	/* don't remove */
}


.result-left {
	float: right !important;
}

.result-label {
	text-align: left;
	text-align-last: left;
}

.name-link1 {
	color: #004bb4;
}

.return-to-home {
	padding-top: 1rem !important;
	padding-bottom: 3rem !important;
}

.app-info-row {
	padding-top: 1rem !important;
	padding-bottom: 3rem !important;
}

@media (min-width: 992px) {
	.result-left {
		float: left !important;
	}

	.result-label {
		text-align: right;
		text-align-last: right;
	}
}

/* Visible focus styles for keyboard users
   Ensure triggers like #btnAgencies and #btnAdd show a clear focus ring.
*/
#btnAgencies,
#btnAdd {
	/* keep them inline but allow box-shadow to render around the element */
	display: inline-block;
}

	#btnAgencies:focus,
	#btnAgencies:focus-visible,
	#btnAdd:focus,
	#btnAdd:focus-visible {
		outline: 3px solid #147B91 !important;
		outline-offset: 2px !important;
		box-shadow: none !important;
	}

@media print {
	@page {
		size: auto;
		margin: 1.25cm;
	}

	#header {
		visibility: hidden !important;
	}

	#footerDiv {
		visibility: hidden !important;
	}

	button, som-button {
		visibility: hidden !important;
		height: 0 !important;
		color: transparent !important;
	}

		button div {
			color: transparent !important;
			height: 0 !important;
		}

		som-button div {
			color: transparent !important;
			height: 0 !important;
		}

	.return-to-home {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.app-info-row {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	ul li {
		page-break-inside: avoid;
	}

	.form-group.row {
		page-break-inside: avoid;
	}
}

/* ===========================================
   Kendo Grid Focus Indicators for Accessibility
   Ensures keyboard users see visible focus states
   on all focusable grid elements (WCAG 2.4.7)
   =========================================== */

/* Grid row focus - primary keyboard navigation target */
.k-grid tr:focus {
	outline: 2px solid #0078d4;
	outline-offset: -2px;
}

/* Grid cell focus - only when cell itself is focused, not children */
.k-grid td:focus {
	outline: 2px solid #0078d4;
	outline-offset: -2px;
}

/* ===========================================
   Kendo Grid Resize Handle Accessibility
   Hide resize handles from assistive technologies
   These are mouse-only controls not accessible via keyboard
   =========================================== */

.k-resize-handle {
	/* Pointer events remain enabled for mouse users */
}

/* ===========================================
   Disabled Row Styling for Grids
   Light gray background with dark text for WCAG AAA compliance
   =========================================== */

.k-grid .k-grid-content tr.disabled-row td {
	background-color: #f0f0f0 !important;
	color: #32364c !important;
}

/* ===========================================
   Checkbox Styling for ADA Compliance
   WCAG 2.1 AA - 3:1 contrast ratio
   Consistent square styling across the entire app
   =========================================== */

/* Bootstrap form-check-input checkboxes - match Kendo square style */
.form-check-input {
	border: 1px solid #495057 !important;
	border-radius: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	background-color: #fff !important;
}

	.form-check-input:checked {
		background-color: #147B91 !important;
		border-color: #147B91 !important;
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
		background-size: contain !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
	}

	.form-check-input:focus {
		border-width: 2px !important;
		border-style: solid !important;
		border-color: #147B91 !important;
		box-shadow: 0 0 0 2px rgba(20, 123, 145, 0.2) !important;
		outline: none !important;
	}

	/* Checkbox focus when checked - use white border for contrast against teal background */
	.form-check-input:checked:focus {
		border-width: 2px !important;
		border-style: solid !important;
		border-color: #ffffff !important;
		box-shadow: 0 0 0 2px rgba(20, 123, 145, 0.4) !important;
		outline: none !important;
	}

/* Kendo checkboxes in grids */
.k-grid .k-checkbox:checked,
.k-grid .k-checkbox.k-checked,
.k-checkbox:checked,
.k-checkbox.k-checked {
	background-color: #147B91 !important;
	border-color: #147B91 !important;
}

.k-grid .k-checkbox,
.k-checkbox {
	border-color: #495057 !important;
	border-width: 1px !important;
}

	.k-grid .k-checkbox:focus,
	.k-checkbox:focus,
	.chkbx:focus {
		border-width: 2px !important;
		border-style: solid !important;
		border-color: #147B91 !important;
		box-shadow: 0 0 0 2px rgba(20, 123, 145, 0.2) !important;
		outline: none !important;
	}

	/* Kendo checkbox focus when checked - use white border for contrast */
	.k-grid .k-checkbox:checked:focus,
	.k-checkbox:checked:focus,
	.chkbx:checked:focus {
		border-width: 2px !important;
		border-style: solid !important;
		border-color: #ffffff !important;
		box-shadow: 0 0 0 2px rgba(20, 123, 145, 0.4) !important;
		outline: none !important;
	}

	/* Kendo checkbox checkmark color */
	.k-checkbox:checked::before,
	.k-checkbox.k-checked::before {
		color: #ffffff !important;
	}

/* ===========================================
   Link/Button Focus Indicators
   For links that act as buttons (role="button")
   =========================================== */

/* Focus indicator for links with role="button" */
a[role="button"]:focus,
a[role="button"]:focus-visible {
	outline: 3px solid #147B91 !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
}

/* ============================================
   Responsive Header / Hamburger Menu (CSS-only)
   Uses the checkbox hack - no JavaScript required
   ============================================ */

/* Mobile navigation container - hidden on desktop */
.header-nav-mobile {
	display: none;
}

/* Desktop navigation - visible by default */
.header-nav-desktop {
	display: flex;
}

/* Hidden checkbox that controls menu state */
.header-menu-checkbox {
	display: none;
}

/* Hamburger button (label) */
.header-menu-toggle {
	display: none;
	background: transparent;
	border: none;
	padding: 0.5rem;
	cursor: pointer;
}

.hamburger-icon {
	display: block;
	width: 24px;
	height: 3px;
	background-color: #333;
	position: relative;
	transition: background-color 0.3s ease;
}

	.hamburger-icon::before,
	.hamburger-icon::after {
		content: '';
		position: absolute;
		width: 24px;
		height: 3px;
		background-color: #333;
		left: 0;
		transition: transform 0.3s ease;
	}

	.hamburger-icon::before {
		top: -8px;
	}

	.hamburger-icon::after {
		top: 8px;
	}

/* Animate hamburger to X when checkbox is checked */
.header-menu-checkbox:checked + .header-menu-toggle .hamburger-icon {
	background-color: transparent;
}

	.header-menu-checkbox:checked + .header-menu-toggle .hamburger-icon::before {
		transform: rotate(45deg) translate(5px, 6px);
	}

	.header-menu-checkbox:checked + .header-menu-toggle .hamburger-icon::after {
		transform: rotate(-45deg) translate(5px, -6px);
	}

/* Mobile nav menu - hidden by default */
.header-nav-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background-color: #fff;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	padding: 0;
	z-index: 1030;
	min-width: 150px;
}

/* Show nav menu when checkbox is checked (CSS-only toggle) */
.header-menu-checkbox:checked ~ .header-nav-menu {
	display: block;
}

/* Mobile nav menu links */
.header-nav-menu a {
	display: block;
	padding: 0.75rem 1rem;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid var(--gray-200, #e9ecef);
}

	.header-nav-menu a:last-child {
		border-bottom: none;
	}

	.header-nav-menu a:hover,
	.header-nav-menu a:focus {
		background-color: var(--gray-100, #f8f9fa);
		text-decoration: underline;
	}

.dropdown-menu {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

	.dropdown-menu.show {
		display: block;
	}

/* Mobile styles */
@media (max-width: 767.98px) {
	/* Hide desktop nav, show mobile nav */
	.header-nav-desktop {
		display: none !important;
	}

	.header-nav-mobile {
		display: flex;
		align-items: center;
		position: relative;
		height: 100%;
	}

	/* Show hamburger button and center it vertically */
	.header-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.75rem;
	}

	/* Ensure body has min-width */
	body {
		min-width: 320px;
	}
}

/* Responsive header adjustments for smaller screens */
@media (max-width: 991.98px) {
	#mainContent {
		padding-top: 3.5rem;
	}
}

@media (max-width: 767.98px) {
	#mainContent {
		padding-top: 3.25rem;
	}
}