/* Stage 3 shell: eLearning 2.1.6 builder markup; no content/LMS selectors.
 * Preserve theme display, visibility, positioning and navigation state handling.
 * Separate tokens keep the production-tested Stage 2 palette unchanged.
 */
body.grea-v2-shell :is(#tg-masthead, #colophon) {
	--grea-shell-navy: #0b1426;
	--grea-shell-gold: #e4bf73;
	--grea-shell-border: #d6dce5;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.6;
}

body.grea-v2-shell #tg-masthead .tg-header-main-row {
	background: #fff;
	color: var(--grea-shell-navy);
	border-bottom: 1px solid var(--grea-shell-border);
	padding-block: 12px;
}

body.grea-v2-shell #tg-masthead .tg-main-row {
	gap: 20px;
	min-height: 64px;
}

body.grea-v2-shell #tg-masthead .site-branding :is(.custom-logo, .tg-logo) {
	width: auto;
	height: auto;
	max-width: min(240px, 42vw);
	max-height: 72px;
	object-fit: contain;
}

body.grea-v2-shell #tg-masthead :is(.tg-primary-nav, .tg-mobile-nav) li > a {
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 14px;
	color: var(--grea-shell-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	border-radius: 8px;
	text-underline-offset: 6px;
}

body.grea-v2-shell #tg-masthead :is(.tg-primary-nav, .tg-mobile-nav) li > a:hover,
body.grea-v2-shell #tg-masthead :is(.tg-primary-nav, .tg-mobile-nav) li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a {
	background: #f5f1e8;
	color: var(--grea-shell-navy);
	text-decoration: underline;
	text-decoration-color: #806020;
	text-decoration-thickness: 2px;
}

body.grea-v2-shell #tg-masthead .tg-primary-nav .sub-menu {
	background: #fff;
	border: 1px solid var(--grea-shell-border);
	border-radius: 10px;
	box-shadow: 0 12px 28px #0b142614;
}

body.grea-v2-shell #tg-masthead .tg-header-button--1 .tg-button {
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 22px;
	background: var(--grea-shell-gold);
	color: var(--grea-shell-navy);
	border: 1px solid var(--grea-shell-gold);
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

body.grea-v2-shell #tg-masthead .tg-header-button--1 .tg-button:hover {
	background: #f1d49a;
	color: var(--grea-shell-navy);
	border-color: #f1d49a;
}

body.grea-v2-shell #tg-masthead :is(.tg-header-search__toggle, .tg-mobile-toggle) {
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 10px;
	background: #f4f6f9;
	color: var(--grea-shell-navy);
	border: 1px solid var(--grea-shell-border);
	border-radius: 10px;
	text-align: center;
}

body.grea-v2-shell #tg-masthead #mobile-navigation {
	background: #fff;
	color: var(--grea-shell-navy);
}

body.grea-v2-shell #tg-masthead .search-field {
	box-sizing: border-box;
	min-height: 48px;
	background: #fff;
	color: var(--grea-shell-navy);
	border: 1px solid #64748b;
	border-radius: 10px;
	font: inherit;
}

/* Neutral main footer keeps the supplied logo on a light surface. */
body.grea-v2-shell #colophon.tg-footer-builder .tg-footer-main-row {
	background: #f4f6f9;
	color: var(--grea-shell-navy);
	border-top: 1px solid var(--grea-shell-border);
	padding-block: clamp(16px, 2vw, 24px);
}

body.grea-v2-shell #colophon.tg-footer-builder .tg-footer-main-row .tg-main-row {
	gap: 16px;
	grid-template-columns: repeat(var(--main-grid-columns, 4), minmax(0, 1fr));
	align-items: start;
}

body.grea-v2-shell #colophon.tg-footer-builder .tg-footer-main-row .tg-html-1 img {
	width: auto;
	height: auto;
	max-width: min(200px, 100%);
	max-height: 68px;
	vertical-align: middle;
	object-fit: contain;
}

body.grea-v2-shell #colophon a {
	text-underline-offset: 5px;
	overflow-wrap: anywhere;
}

body.grea-v2-shell #colophon a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

body.grea-v2-shell #colophon .tg-footer-bottom-row {
	background: var(--grea-shell-navy);
	color: #f4f6fb;
	padding-block: clamp(20px, 3vw, 28px);
	border-top: 2px solid var(--grea-shell-gold);
}

body.grea-v2-shell #colophon.tg-footer-builder .tg-footer-bottom-row .tg-copyright {
	width: 100%;
	max-width: 76ch;
	min-width: 0;
	margin-inline: auto;
	font-size: clamp(14px, 1.2vw, 15px);
	font-style: normal;
	line-height: 1.65;
	overflow-wrap: anywhere;
	white-space: normal;
}

body.grea-v2-shell #colophon.tg-footer-builder .tg-copyright :is(p, h6) {
	color: #f4f6fb;
	font-family: inherit;
	font-size: clamp(14px, 1.2vw, 15px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.65;
	margin-block: 0;
}

body.grea-v2-shell #colophon .tg-copyright a {
	color: var(--grea-shell-gold);
}

body.grea-v2-shell :is(#tg-masthead, #colophon) :is(a, button, input, [tabindex]):focus-visible {
	outline: 3px solid #806020;
	outline-offset: 3px;
	box-shadow: 0 0 0 2px #fff;
}

body.grea-v2-shell #colophon .tg-footer-bottom-row :is(a, button, input, [tabindex]):focus-visible {
	outline-color: var(--grea-shell-gold);
	box-shadow: 0 0 0 2px var(--grea-shell-navy);
}

@media (max-width: 768px) {
	body.grea-v2-shell #tg-masthead .tg-main-row {
		gap: 12px;
		min-height: 52px;
	}

	body.grea-v2-shell #tg-masthead .site-branding :is(.custom-logo, .tg-logo) {
		max-height: 56px;
	}

	body.grea-v2-shell #colophon.tg-footer-builder .tg-footer-main-row .tg-main-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
}

/* Verified builder containers: let grid/flex children shrink without clipping. */
body.grea-v2-shell #colophon .tg-container {
	box-sizing: border-box;
	max-width: 100%;
	padding-inline: clamp(16px, 3vw, 32px);
}

body.grea-v2-shell #colophon :is(.tg-main-row, .tg-bottom-row) > *,
body.grea-v2-shell #colophon .tg-html-1 {
	box-sizing: border-box;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

body.grea-v2-shell #colophon .tg-bottom-row {
	grid-template-columns: repeat(var(--bottom-grid-columns, 1), minmax(0, 1fr));
	gap: 16px;
}

body.grea-v2-shell #colophon .tg-html-1 p {
	margin-block: 0;
}

body.grea-v2-shell #colophon.tg-footer-builder .tg-copyright h6 {
	margin-block-start: 12px;
}

/* The existing legal copy uses em elements; retain text and semantics. */
body.grea-v2-shell #colophon.tg-footer-builder .tg-copyright :is(span, em) {
	font-size: inherit;
	line-height: inherit;
	font-style: normal;
}

body.grea-v2-shell #colophon .tg-footer-main-row a {
	color: var(--grea-shell-navy);
}

body.grea-v2-shell #colophon .tg-footer-bottom-row a {
	color: var(--grea-shell-gold);
}

/* eLearning renders this control after #colophon; leave its state/JS intact. */
body.grea-v2-shell #tg-scroll-to-top.tg-scroll-to-top {
	background: #e4bf73;
	color: #0b1426;
	border: 1px solid #0b1426;
	border-radius: 10px;
}

body.grea-v2-shell #tg-scroll-to-top.tg-scroll-to-top:hover {
	background: #0b1426;
	color: #e4bf73;
	border-color: #e4bf73;
}

body.grea-v2-shell #tg-scroll-to-top.tg-scroll-to-top:focus-visible {
	outline: 3px solid #e4bf73;
	outline-offset: 3px;
	box-shadow: 0 0 0 2px #0b1426;
}

@media (max-width: 768px) {
	body.grea-v2-shell #colophon.tg-footer-builder .tg-footer-main-row .tg-html-1 img {
		max-width: min(160px, 100%);
		max-height: 56px;
	}

	body.grea-v2-shell #colophon .tg-bottom-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}
}

/* Builder height and widget spacing are independent of outer row padding. */
body.grea-v2-shell #colophon.tg-footer-builder .tg-footer-main-row .tg-main-row {
	height: auto;
	min-height: 0;
}

body.grea-v2-shell #colophon.tg-footer-builder .tg-footer-main-row :is(.widget, .tg-html-1) {
	padding-block: 0;
	margin-block: 0;
	min-height: 0;
}

body.grea-v2-shell #tg-scroll-to-top.tg-scroll-to-top .tg-icon {
	color: inherit;
}
