/* PPS portal shell — scoped chrome only; #content ASP pages left alone */

:root {
	--pps-navy: #003c5c;
	--pps-navy-hover: #005a8a;
	--pps-green: #007236;
	--pps-green-muted: #749baa;
	--pps-orange: #e85d04;
	--pps-red: #ed1f24;
	--pps-sidebar: #e8f6fb;
	--pps-sidebar-border: #c5dde8;
	--pps-header-end: #f4f8fb;
	--pps-line: #d0d7de;
	--pps-text: #1a2b36;
	--pps-muted: #5a6f7d;
	--pps-surface: #ffffff;
	--pps-badge: #fff3b0;
	--pps-focus: #2b8abd;
	--pps-nav-width: 272px;
	--pps-header-h: 72px;
	--pps-font: "Trebuchet MS", "Segoe UI", Candara, sans-serif;
	--pps-radius: 6px;
	--pps-shadow: 0 8px 24px rgba(0, 40, 70, 0.12);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--pps-font);
	color: var(--pps-text);
	background: var(--pps-surface);
	line-height: 1.45;
}

a {
	color: var(--pps-green);
	text-decoration: none;
}

a:hover {
	color: var(--pps-green-muted);
	text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--pps-focus);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 0.5rem 1rem;
	background: var(--pps-navy);
	color: #fff;
}

.skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

/* —— Header —— */
#header {
	position: sticky;
	top: 0;
	z-index: 40;
	min-height: var(--pps-header-h);
	border-bottom: 1px solid var(--pps-line);
	background:
		linear-gradient(90deg, #dff0f8 0%, var(--pps-header-end) 45%, #fff 100%);
	background-color: #eaf5fa;
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.65rem 1rem;
	max-width: 100%;
}

.header-logo-link {
	flex-shrink: 0;
}

#headerLogo {
	display: block;
	height: auto;
	width: auto;
	max-width: 200px;
	max-height: 52px;
}

.header-brand {
	flex: 1;
	min-width: 0;
}

.header-product {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--pps-red);
	letter-spacing: 0.01em;
	line-height: 1.2;
}

.header-tagline {
	margin: 0.15rem 0 0;
	font-size: 0.75rem;
	color: var(--pps-muted);
}

.header-account {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	margin-left: auto;
	text-align: right;
	font-size: 0.875rem;
}

.header-welcome {
	color: var(--pps-text);
}

.header-welcome b {
	font-weight: 700;
}

.header-account a {
	font-weight: 600;
	color: var(--pps-navy);
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 1px solid var(--pps-sidebar-border);
	border-radius: var(--pps-radius);
	background: #fff;
	cursor: pointer;
	color: var(--pps-navy);
}

.menu-toggle svg {
	width: 1.35rem;
	height: 1.35rem;
	fill: currentColor;
}

.menu-toggle[aria-expanded="true"] {
	background: var(--pps-sidebar);
}

/* —— Layout —— */
#containment {
	display: flex;
	align-items: stretch;
	min-height: calc(100vh - var(--pps-header-h));
}

#nav-side {
	flex: 0 0 var(--pps-nav-width);
	width: var(--pps-nav-width);
	padding: 1rem 0.85rem 2rem;
	background: var(--pps-sidebar);
	border-right: 1px solid var(--pps-sidebar-border);
	overflow-y: auto;
}

#content {
	flex: 1;
	min-width: 0;
	padding: 1.25rem 1.5rem 2.5rem;
	background: var(--pps-surface);
}

#content img {
	max-width: 100%;
	height: auto;
}

/* —— Nav —— */
.pps-nav {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.pps-nav a.m {
	color: var(--pps-navy);
	font-weight: 700;
	font-size: 0.8125rem;
	text-decoration: none;
	line-height: 1.35;
}

.pps-nav a.m:hover,
.pps-nav a.m:focus-visible {
	color: var(--pps-navy-hover);
	text-decoration: underline;
}

.nav-home {
	padding: 0 0.35rem 0.25rem;
}

.nav-section-title {
	margin: 0 0 0.35rem;
	padding: 0 0.35rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pps-orange);
}

.nav-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.5rem;
	margin-bottom: 0.35rem;
	padding: 0 0.35rem;
}

.nav-section-head .nav-section-title {
	margin: 0;
	padding: 0;
}

.nav-badge {
	display: inline-block;
	padding: 0.1rem 0.4rem;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pps-navy);
	background: var(--pps-badge);
	border-radius: 3px;
}

.nav-more-info {
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	color: var(--pps-navy-hover) !important;
}

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-list > li {
	margin: 0;
}

.nav-list > li > a.m,
.nav-list > li > span {
	display: block;
	padding: 0.28rem 0.45rem;
	border-radius: 4px;
}

.nav-list > li > a.m:hover {
	background: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.nav-sub {
	list-style: none;
	margin: 0.15rem 0 0.35rem;
	padding: 0 0 0 0.85rem;
	border-left: 2px solid var(--pps-sidebar-border);
}

.nav-sub a.m {
	display: block;
	padding: 0.2rem 0.45rem;
	font-weight: 600;
	font-size: 0.78rem;
	color: var(--pps-navy);
}

.nav-free {
	margin-top: 0.65rem;
	padding-top: 0.65rem;
	border-top: 1px dashed var(--pps-sidebar-border);
}

.nav-free a.m {
	color: var(--pps-green);
}

/* Compatibility hosts for legacy dual-nav IDs (single nav shell) */
#navmenu_marketing,
#navmenu_profiles {
	display: none !important;
}

.nav-drawer-close {
	display: none;
}

.nav-backdrop {
	display: none;
}

/* —— Content preview (local Semtag sim only) —— */
.content-preview {
	max-width: 42rem;
}

.content-preview h1 {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
	color: var(--pps-navy);
}

.content-preview p {
	margin: 0 0 0.75rem;
	color: var(--pps-muted);
}

.content-preview .preview-note {
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	font-size: 0.875rem;
	background: #f6fafc;
	border: 1px solid var(--pps-line);
	border-radius: var(--pps-radius);
}

/* —— Mobile —— */
@media (max-width: 1000px) {
	.header-product {
		font-size: 0.95rem;
	}

	.header-tagline {
		display: none;
	}

	#headerLogo {
		max-width: 150px;
		max-height: 44px;
	}

	.menu-toggle {
		display: inline-flex;
	}

	#containment {
		display: block;
		min-height: auto;
	}

	.nav-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 45;
		background: rgba(10, 30, 45, 0.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
	}

	body.nav-open .nav-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	#nav-side {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 50;
		width: min(var(--pps-nav-width), 88vw);
		flex: none;
		transform: translateX(-105%);
		transition: transform 0.22s ease;
		box-shadow: var(--pps-shadow);
		border-right: none;
	}

	body.nav-open #nav-side {
		transform: translateX(0);
	}

	.nav-drawer-close {
		display: flex;
		justify-content: flex-end;
		margin: -0.25rem 0 0.75rem;
	}

	.nav-drawer-close button {
		border: 0;
		background: transparent;
		color: var(--pps-navy);
		font: inherit;
		font-weight: 700;
		font-size: 0.875rem;
		cursor: pointer;
		padding: 0.35rem 0.5rem;
	}

	#content {
		padding: 1rem;
	}

	#content img {
		max-width: 100%;
	}
}

@media (max-width: 520px) {
	.header-brand {
		display: none;
	}

	.header-welcome {
		display: none;
	}
}