/*   

	Description: Custom Demo Theme for City of Willow Creek, ST
	Author: Susan Belanger
	Author URI: https://creativelyewe.com
	Version: 1.0.0

*/

/* CSS Document for mainContent on Home page */


 .demo-modal-overlay { 
	position: fixed; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	background: rgba(0, 0, 0, 0.6); 
	backdrop-filter: blur(3px); 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	z-index: 99999; 
	opacity: 0; 
	pointer-events: none; t
	ransition: opacity 0.3s ease; 
	}
	
	
   .demo-modal-overlay.is-active { 
		opacity: 1; 
		pointer-events: auto; 
		}
		
		
 .demo-modal-card { 
	background: #ffffff; 
	width: 100%; 
	max-width: 450px; 
	border-radius: 8px; 
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); 
	overflow: hidden; 
	transform: translateY(-20px); 
	transition: transform 0.3s ease; 
	font-family: sans-serif; 
	
	}
	
	
 .demo-modal-overlay.is-active .demo-modal-card { 
	transform: translateY(0); 
	}
	
 .demo-modal-header { 
	background: #f4f6f8; 
	padding: 15px 20px; 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	border-bottom: 1px solid #e1e4e6; 
	
	}
	
.demo-modal-close { 
	background: none; 
	border: none; 
	font-size: 1.5rem; 
	cursor: pointer; 
	color: #666; 
	
	}
	
	
.demo-modal-body { 
	padding: 20px; 
	font-size: 1rem; 
	line-height: 1.5; 
	color: #444; 
	font-family:McLaren, cursive; 
	
	}
		
 
 .demo-modal-footer { 
	padding: 15px 20px; 
	text-align: right; 
	background: #f4f6f8; 
	border-top: 1px solid #e1e4e6; 
	
	}
        

.demo-modal-btn { 
	background: #0056b3; 
	color: #fff; 
	border: none; 
	padding: 8px 16px; 
	border-radius: 4px; 
	cursor: pointer; 
	font-weight: 600; 
	
	}
	
/* High-visibility focus indicator outline required for keyboard users */
 .demo-modal-btn:focus, .demo-modal-close:focus { 
	outline: 3px solid #ffbf47; 
	
	}