/* =========================================================
   Autauga County - Combined CSS (Global + Dropdown)
   Optimized merge WITHOUT changing function
   - Keeps all existing styling
   - Adds WCAG/ADA improvements (focus, skip link, reduced motion)
   - Removes hover-only dropdown opening (keyboard accessible)
   ========================================================= */


/* =========================================================
   WCAG/ADA ADDITIONS (Focus, Skip Link, Reduced Motion)
   ========================================================= */

/* Skip link (requires HTML: <a class="skip-link" href="#main">Skip...</a>) */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: .75rem 1rem;
	z-index: 9999;
	background: #fff;
	color: #000;
	border: 2px solid #000;
}
.skip-link:focus {
	left: 10px;
	top: 10px;
}

/* Strong visible focus for keyboard users */
:focus {
	outline: 3px solid #000;
	outline-offset: 2px;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.fade { transition: none !important; }
	.carousel { transition: none !important; }
}


/* =========================================================
   Base Page Styles
   ========================================================= */

body {
	background: #e7e7e7;
	height: 100%;
	/*padding-top: 5px;*/
}


/* =========================================================
   Header / Jumbotron
   ========================================================= */

.bg-faded {
	background-color: #63c5ed !important;
}

.jumbotron {
	height: 171px !important;
	padding: 0rem !important;
	margin-bottom: 0rem !important;
}

@media (min-width: 576px) {
	.jumbotron {
		padding: 0rem !important;
	}
	.col-sm-2 {
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 16.666667%;
		-ms-flex: 0 0 16.666667%;
		flex: 0 0 14% !important;
		max-width: 16.666667%;
	}
}

.jumbotron-hr { border-top-color: #d0d5d8; }

.jumbotron-fluid {
	max-width: 100% !important;
	height: auto !important;
	padding-right: 0;
	padding-left: 0;
	border-radius: 0;
}


/* =========================================================
   Misc
   ========================================================= */

#tourbookdiv { line-height: 1.15; }
#tourbookdiv > img { margin-top: -5px; }

.fade {
	opacity: 1;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover { opacity: 0.5; }

#contact {
	width: 300px;
	float: right;
	margin: 0 0 1em 1em;
	padding: 10px;
	background: #ccc;
	display: inline;
}


/* =========================================================
   Nav Styling
   ========================================================= */

.navbar-toggleable-md {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0.5rem 0rem 0rem 0rem !important;
	margin-bottom: -0.5rem !important;
}

/* Brand/toggler colors */
.navbar-light .navbar-brand,
.navbar-light .navbar-toggler {
	color: #032e6d !important;
	font-size: 17px !important;
}

.navbar-light .navbar-brand { visibility: hidden; }

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover,
.navbar-light .navbar-toggler:focus,
.navbar-light .navbar-toggler:hover {
	color: #032e6d !important;
}

.navbar-light .navbar-nav .nav-link {
	color: #032e6d !important;
	font-size: 1.2rem;
	font-weight: bold;
}

/* Hover/focus background assists visibility */
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
	color: #032e6d !important;
	background-color: #ffffff;
}

.navbar-light .navbar-nav .open > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.open,
.navbar-light .navbar-nav .nav-link.active {
	color: #5e9cd0 !important;
}

.rounded { border-radius: 0rem !important; }

.navbar-light .navbar-toggler { border-color: #0248af !important; }

.navbar-light .navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(2, 72, 175, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

/* This is needed to make sure hamburger menu is still visible when screen size shrinks */
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-toggler {
	color: #ccc !important;
	visibility: visible;
}

/* Spacing */
.navbar-nav { margin-left: 10px; }

@media (max-width: 1400px) {
	.navbar-light .navbar-nav .nav-link { font-size: 1rem; }
}

@media (min-width: 992px) {
	.navbar-toggleable-md .navbar-collapse { margin-left: 2rem; }
}


/* =========================================================
   Dropdown / Submenu (WCAG-safe behavior)
   - IMPORTANT: no hover-to-open
   - relies on Bootstrap .show or your JS to toggle
   ========================================================= */

/* Do NOT remove focus outlines */
.navbar > .show > a:focus {
	background: rgba(0,0,0,0.05);
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* Rotate submenu arrow when submenu is shown */
.dropdown-menu .show > .dropdown-toggle::after {
	transform: rotate(-90deg);
}

/* Default: keep menus hidden until toggled via .show */
.dropdown-menu { display: none; }
.dropdown.show > .dropdown-menu,
.dropdown-menu.show { display: block; }

/* Multi-level submenu support */
.dropdown-submenu { position: relative; }

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-left: .1rem;
	margin-right: .1rem;
	display: none;
}

.dropdown-submenu.show > .dropdown-menu,
.dropdown-submenu .dropdown-menu.show {
	display: block;
}

/* Submenu caret */
.dropdown-submenu a::after {
	transform: rotate(-90deg);
	position: absolute;
	right: 6px;
	top: .8em;
}

/* Keep spacing consistent */
.dropdown-toggle,
.dropdown-menu {
	margin-top: 0;
	padding-top: 0;
}

/* Optional: make focus inside menus obvious */
.dropdown-menu a:focus {
	outline: 3px solid #000;
	outline-offset: 2px;
}


/* =========================================================
   Search Styling
   ========================================================= */

.btn-outline-success {
	color: #5e9cd0 !important;
	background-image: none;
	background-color: transparent;
	border-color: #5e9cd0 !important;
}
.btn-outline-success:hover {
	color: #fff !important;
	background-color: #5e9cd0 !important;
	border-color: #5e9cd0 !important;
}

/* Input group tweaks */
.ms-n5 { /* margin-left: -60px; */ }

.input-group .form-control {
	position: unset;
	z-index: 0;
	border-bottom-right-radius: 0 !important;
	border-top-right-radius: 0 !important;
}


/* =========================================================
   Typography / General Styling
   ========================================================= */

h1,h2,h3,h4,h5,h6 {
	font-family: Belgrano, serif !important;
	font-weight: 400 !important;
}

.h1,h1 { font-size: 52px; }
.h2,h2 { color: #036; }

.title {
	color: #036;
	font-weight: 700;
	text-transform: uppercase;
}

.BreadCrumbs { margin-bottom: 15px; }

.BreadCrumbs H5 {
	display: inline;
	font-family: arial, sans-serif;
	font-size: 12px;
}

hr {
	border: 0;
	border-top: 1px solid #CCC !important;
	margin-bottom: 10px;
	margin-top: 10px;
}


/* =========================================================
   Pop Links / Content
   ========================================================= */

.poplinks {
	background: #0248af;
	margin: 0 0 15px 0;
	padding-top: 15px;
}

.poplinks a {
	text-decoration: none;
	color: #fff;
	font-family: "trajan-pro", sans-serif;
	font-size: 0.7em;
}

.content {
	background: #fff;
	padding: 20px;
}

.rightImage { margin: 0 0 4px 10px; }
.leftImage  { margin: 0 10px 4px 0; }

.NewsPubDate {
	font-size: 0.8em;
	font-weight: normal;
}


/* =========================================================
   Footer
   ========================================================= */

footer {
	background: #052240;
	margin-top: 20px;
	padding: 20px 10px 10px;
	font-size: 0.8rem;
	color: #F89939!important;
}

/* Footer links should not rely on color alone */
footer a {
	color: #fff!important;
	text-decoration: none;
}
footer a:hover,
footer a:focus {
	text-decoration-thickness: 3px;
	color: #F89939!important;
}

footer .tower { display: none; }

@media (min-width: 768px) {
	footer {
		min-height: 214px;
		padding: 20px 10px 0;
		font-size: 1.0rem;
	}

	footer .tower {
		display: block;
		position: absolute;
		right: 20px;
	}
}


/* =========================================================
   SideNav bullet fix
   ========================================================= */

.SideNav {
	list-style: none;
	margin-left: -24px;
}


/* =========================================================
   Carousel
   ========================================================= */

.carousel { margin-bottom: 1rem; }

.carousel-item {
	min-height: 100%;
	min-width: 100%;
	height: auto;
	margin: auto;
}

.carousel-item > img {
	position: relative;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 100%;
}

.carousel-item {
	position: relative;
	display: none;
	float: left;
	width: 33%;
	margin-right: auto;
	backface-visibility: hidden;
}


/* =========================================================
   Gallery
   ========================================================= */

#gallery {
	width: auto;
	height: auto;
	text-align: left;
}

#gallery img {
	border: 1px solid #eee;
	background-color: #fff;
	padding: 5px;
	margin: 5px 0 5px 7px;
	transition: all 0.2s linear;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.55);
}

#gallery img:hover {
	box-shadow: 3px 3px 20px 0px rgba(0,0,0,0.75);
}

#gallery .galleryimg {
	display: inline-block;
	width: 275px;
	margin: 0 10px;
}

#gallery .galleryimgdesc {
	position: relative;
	top: -30px;
	left: 8px;
	width: 270px;
	display: block;
	background-color: white;
	font-size: 0.85em;
	text-align: center;
	opacity: 0.75;
}


/* =========================================================
   Right nav inside content
   ========================================================= */

#rightnav {
	margin: 0 5px 10px 0;
	padding: 20px 0 0 0;
	line-height: 1.25rem;
}

#rightnav ul {
	margin: 0 5px 0 0;
	padding: 0;
	list-style: none;
}

#rightnav ul ul { margin: 0 0 0 15px; }
#rightnav li { padding-bottom: 5px; }

#rightlinks {
	width: 100%;
	display: none;
}

#rightlinks ul {
	margin: 0;
	padding: 0 5px;
}

.content ul, .content ol, .EditBody ul, .EditBody ol {
	padding: 0 15px 0 40px;
	list-style-type: square;
}

.content ul ul, .content ol ol, .EditBody ul ul, .EditBody ol ol {
	font-size: 100%;
}


/* =========================================================
   Cards
   ========================================================= */

.card-header {
	margin-bottom: 0;
	background-color: #d29f3b !important;
	border-bottom: 0px solid rgba(0, 0, 0, 0.125);
}

.card h4 {
	color: #ffffff !important;
	font-family: 'Raleway', sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 2px !important;
	font-size: 1.3em;
}

.card h5 {
	color: #155297 !important;
	font-family: 'Raleway', sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 2px !important;
	font-size: 1.25em;
}

.card-body { padding: 0.5em !important; }
.card-body p { padding: 1em !important; }
.card p { font-size: 1.1em; }
.card { width: 33% !important; }


/* =========================================================
   Video / Embed
   ========================================================= */

.rowpic {
	background: #fff url(../Images/Main/2022/fadedback.png) no-repeat top center;
	padding: 20px;
	background-size: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 25px;
	margin-right: -15px;
	margin-left: -15px;
	padding-top: 25px;
	font-size: 1.0rem;
}

.rowvideo {
	padding: 0px;
	margin-right: -15px;
	margin-left: -15px;
	overflow: hidden;
	max-height: 100%;
	display: block;
}

.rowvideo #homevideo BODY,
.rowvideo #homevideo HTML,
.rowvideo #homevideo HTML #player {
	width: 100% !important;
	height: 100% !important;
	max-height: 100%;
}

#homevideo { display: block !important; }
body.vp-center { display: block !important; }

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.embed-container {
	position: relative;
	padding-top: 57%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
}