/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
 to use a different color start by replacing all instances of
 #5c87b2 with your new color.
----------------------------------------------------------*/
body {
    background: #f4f6f9; /* lighter neutral */
    font-size: 14px;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #2b2b2b;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #1f2d3d;
}

a:link {
	color: #1167b1;
	text-decoration: underline;
}
a:visited {
	color: #0d4f8b;
}
a:hover {
	color: #0a4a73;
	text-decoration: none;
}
a:active {
	color: #12eb87;
}

p, ul {
	margin-bottom: 20px;
	line-height: 1.6em;
}

/* Layout Wrappers */
.site-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.site-header {
	background: linear-gradient(135deg,#0d4f8b,#1167b1);
	color:#fff;
	padding: 10px 30px 0 30px;
	box-shadow:0 2px 4px rgba(0,0,0,.15);
}

.branding {
	display:flex;
	align-items:center;
}

.branding img {
	height:70px;
	width:auto;
	border:0;
	border-radius:4px;
}

.brand-text {
	margin-left:20px;
}

.brand-text h1 {
	font-size:32px;
	letter-spacing:.5px;
	margin:0;
	color:#fff;
}

.brand-text .tagline {
	margin:4px 0 0;
	font-size:13px;
	font-weight:300;
	color:#e1ecf5;
}

.user-bar {
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:12px;
	padding:6px 0 10px;
	border-top:1px solid rgba(255,255,255,.25);
	margin-top:10px;
}

.user-bar .welcome {
	color:#fff;
	margin-left:auto;
	text-align:right;
    font-size: 1.2em;
}

.user-bar .actions a {
	color:#fff;
	font-weight:500;
}

.user-bar .actions a:hover {
	text-decoration:underline;
}

.nav-primary {
	margin-top:5px;
	background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.25);
	border-radius:4px;
}

.nav-primary ul {
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
}

.nav-primary li {
	margin:0;
}

.nav-primary a {
	display:block;
	padding:10px 18px;
	color:#fff;
	text-decoration:none;
	font-weight:500;
	font-size:14px;
}

.nav-primary a:hover, .nav-primary li.highlight a {
	background:rgba(255,255,255,.2);
}

.site-main {
	flex:1 0 auto;
	padding:30px;
}

.content-area {
	background:#ffffff;
	padding:25px 30px;
	border-radius:8px;
	box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.site-footer {
	background:#0d4f8b;
	color:#cdd9e5;
	padding:25px 30px;
	text-align:center;
	font-size:12px;
	margin-top:auto;
}

.site-footer a {
	color:#fff;
	text-decoration:none;
}

.site-footer a:hover {
	text-decoration:underline;
}

.footer-inner {
	max-width:1000px;
	margin:0 auto;
}

.footer-links {
	margin:8px 0 0;
	font-size:12px;
}

/* Legacy selectors retained (can be deprecated later) */
.page {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

#header, #main, #footer {
	/* kept for old references - no longer primary */
}

/* Forms and validation */
.field-validation-error {
	color:#d93025;
}

.input-validation-error {
	border:1px solid #d93025;
	background-color:#fbe9e7;
}

.validation-summary-errors {
	font-weight:600;
	color:#d93025;
}

/* Utilities */
.clear {
	clear:both;
}

.error {
	color:#d93025;
}

/* Responsive */
@media (max-width: 768px) {
	.branding {
		flex-direction:column;
		align-items:flex-start;
	}

	.branding img {
		height:60px;
	}

	.brand-text {
		margin-left:0;
		margin-top:10px;
	}

	.nav-primary a {
		padding:8px 12px;
		font-size:13px;
	}

	.content-area {
		padding:18px 20px;
	}

	.site-main {
		padding:20px;
	}
}

@media (max-width: 480px) {
	.user-bar {
		flex-direction:column;
		align-items:flex-start;
		gap:6px;
	}

	.nav-primary ul {
		flex-direction:column;
	}

	.nav-primary a {
		border-bottom:1px solid rgba(255,255,255,.15);
	}

	.nav-primary li:last-child a {
		border-bottom:none;
	}
}