/* =========================
VCE x VTOne Rebrand Tokens
========================= */
:root {
	/* ---- Brand Colors ---- */
	--vce-maroon: #8a1743;
	--vce-maroon-s1: #7c153c;
	--vce-maroon-s2: #6e1236;
	--vce-maroon-s3: #61102f;
	--vce-maroon-s4: #530e28;
	--vce-maroon-s5: #450c22;
	--vce-maroon-s6: #37091b;
	--vce-maroon-s7: #290714;
	--vce-maroon-s8: #1c050d;
	--vce-maroon-s9: #0e0207;
	--vce-maroon-t1: #962e56;
	--vce-maroon-t2: #a14569;
	--vce-maroon-t3: #ad5d7b;
	--vce-maroon-t4: #b9748e;
	--vce-maroon-t5: #c58ba1;
	--vce-maroon-t6: #d0a2b4;
	--vce-maroon-t7: #dcb9c7;
	--vce-maroon-t8: #e8d1d9;
	--vce-maroon-t9: #f3e8ec;
	/* core maroon */
	--vce-maroon-bg: var(--vce-maroon);
	/* alias for bg uses */
	--vce-blue: #4b748a;
	--vce-blue-s1: #44687c;
	--vce-blue-s2: #3c5d6e;
	--vce-blue-s3: #355161;
	--vce-blue-s4: #2d4653;
	--vce-blue-s5: #263a45;
	--vce-blue-s6: #1e2e37;
	--vce-blue-s7: #172329;
	--vce-blue-s8: #0f171c;
	--vce-blue-s9: #080c0e;
	--vce-blue-t1: #5d8296;
	--vce-blue-t2: #6f90a1;
	--vce-blue-t3: #819ead;
	--vce-blue-t4: #93acb9;
	--vce-blue-t5: #a5bac5;
	--vce-blue-t6: #b7c7d0;
	--vce-blue-t7: #c9d5dc;
	--vce-blue-t8: #dbe3e8;
	--vce-blue-t9: #edf1f3;
	/* core blue */
	--vce-link: #aa5312;
	/* accessible link/orange */
	--vce-accent: var(--vce-link);
	/* generic accent alias */

	--vce-h1: #005065;
	--vce-h2: #4c748b;
	--vce-h3: #5e8297;
	--vce-h4: #3c5b6f;

	/* ---- Neutrals ---- */
	--vce-white: #ffffff;
	--vce-black: #111213;
	--vce-gray-900: #1c2024;
	--vce-gray-700: #3e4650;
	--vce-gray-500: #6b7280;
	--vce-gray-300: #d1d5db;
	--vce-gray-100: #f3f4f6;

	/* ---- Typography ---- */
	--vce-font-heading: "Epilogue", system-ui, -apple-system, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--vce-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--vce-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
		"Liberation Mono", "Courier New", monospace;

	/* ---- Type Scale & Rhythm ---- */
	--vce-font-size-root: 16px;
	/* set to 18px for a larger baseline */
	--vce-lh-tight: 1.15;
	--vce-lh-snug: 1.25;
	--vce-lh-normal: 1.5;
	--vce-lh-relaxed: 1.65;

	--vce-h1-size: clamp(2rem, 3.5vw, 3rem);
	/* ~32-48px */
	--vce-h2-size: clamp(1.5rem, 2.5vw, 2.25rem);
	/* ~24–36px */
	--vce-h3-size: clamp(1.25rem, 1.75vw, 1.75rem);
	/* ~20–28px */
	--vce-h4-size: clamp(1.125rem, 1.25vw, 1.375rem);
	/* ~18–22px */
	--vce-h5-size: clamp(1rem, 1vw, 1.125rem);
	/* ~16–18px */
	--vce-h6-size: 0.9375rem;
	/* 15px */

	--vce-body-size: 1rem;
	/* 16px */
	--vce-body-sm: 0.9375rem;
	/* 15px */
	--vce-body-xs: 0.875rem;
	/* 14px */
	--vce-lead-size: clamp(1.0625rem, 0.6vw + 0.9rem, 1.25rem);

	--vce-tracking-tight: -0.015em;
	--vce-tracking-normal: 0;
	--vce-tracking-wide: 0.04em;
	--vce-tracking-wider: 0.08em;

	/* ---- Spacing ---- */
	--vce-space-1: 0.25rem;
	/* 4px  */
	--vce-space-2: 0.5rem;
	/* 8px  */
	--vce-space-3: 0.75rem;
	/* 12px */
	--vce-space-4: 1rem;
	/* 16px */
	--vce-space-5: 1.5rem;
	/* 24px */
	--vce-space-6: 2rem;
	/* 32px */
	--vce-space-8: 3rem;
	/* 48px */

	/* ---- Radii & Shadow ---- */
	--vce-radius-sm: 6px;
	--vce-radius-md: 10px;
	--vce-radius-lg: 16px;

	--vce-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--vce-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.12);
	--vce-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.16);

	--vce-border-muted: 1px solid rgba(0, 0, 0, 0.06);

	/* ---- Focus ---- */
	--vce-focus: 0 0 0 3px color-mix(in srgb, var(--vce-link) 35%, transparent);

	/* ---- Component Tokens (Featured Pubs, CTAs, etc.) ---- */
	--card-radius: var(--vce-radius-lg);
	--card-pad: var(--vce-space-4);
	--card-shadow: var(--vce-shadow-sm);
	--card-topbar-h: 0.5rem;
	/* 8px */

	--cta-bg: var(--vce-accent);
	--cta-color: var(--vce-white);
	--cta-radius: var(--vce-radius-md);
	--cta-pad-y: 0.6rem;
	--cta-pad-x: 0.9rem;

	--brand-gradient: linear-gradient(135deg, var(--vce-blue) 0%, var(--vce-h3) 100%);
}

/* Apply root font-size so rem math matches tokens */
html {
	font-size: var(--vce-font-size-root);
}

/* ---- Base Text ---- */
body {
	font-family: var(--vce-font-body);
	font-size: var(--vce-body-size);
	line-height: var(--vce-lh-normal);
	color: var(--vce-gray-900);
}

/* ---- Headings ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--vce-font-heading);
	line-height: var(--vce-lh-tight);
	letter-spacing: var(--vce-tracking-tight);
	margin: 0 0 var(--vce-space-3);
}

h1 {
	font-size: var(--vce-h1-size);
	color: var(--vce-h1);
	font-weight: 800;
}

h2 {
	/* font-size: var(--vce-h2-size); */
	color: var(--vce-h2);
	font-weight: 600 !important;
}

h3 {
	font-size: var(--vce-h3-size);
	color: var(--vce-h3);
	font-weight: 700;
}

h4 {
	font-size: var(--vce-h4-size);
	color: var(--vce-h4);
	font-weight: 700;
}

h5 {
	font-size: var(--vce-h5-size);
	color: var(--vce-blue);
	font-weight: 700;
	letter-spacing: var(--vce-tracking-normal);
}

h6 {
	font-size: var(--vce-h6-size);
	color: var(--vce-gray-700);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vce-tracking-wide);
}

/* ---- Links ---- */
a {
	color: var(--vce-link);
	text-underline-offset: 0.15em;
	text-decoration-thickness: 0.08em;
}

a:hover {
	text-decoration: underline;
}

a:focus-visible {
	outline: var(--vce-focus);
	border-radius: 4px;
}

/* ---- Top nav strip ---- */
.vce-top-strip {
	background: var(--vce-maroon-bg);
	color: var(--vce-white);
}

/* ---- Utilities ---- */
.vce-lead {
	font-size: var(--vce-lead-size);
	line-height: var(--vce-lh-relaxed);
	color: var(--vce-gray-900);
}

.vce-eyebrow {
	display: block;
	font-size: var(--vce-body-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--vce-tracking-wider);
	color: var(--vce-maroon);
	margin-bottom: var(--vce-space-1);
}

.vce-small {
	font-size: var(--vce-body-xs);
	line-height: var(--vce-lh-snug);
	color: var(--vce-gray-700);
}

/* ---- Logo wordmark replacement ---- */
.vt-logo-text {
	/* sizing — set to your logo’s natural pixels */
	--logo-w: 43rem;
	/* 688px / 16 */
	--logo-h: 5.9375rem;
	/* 95px / 16 */
	width: var(--logo-w);
	height: var(--logo-h);
	display: inline-block;

	/* visually hide text but keep for AT */
	font-size: 0;
	line-height: 0;
	letter-spacing: 0;
	color: transparent;
	-webkit-text-fill-color: transparent;

	overflow: hidden;
	padding: 0;
	border: 0;
}

.vt-wordMark,
.vt-actions-header {
	display: none;
}

/* ---- Font aliasing for Epilogue ---- */
@font-face {
	font-family: "gineso-condensed";
	src: local("Epilogue");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "gineso-condensed";
	src: local("Epilogue");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ---- CTA tweaks ---- */
.vt-ctaLink {
	border-radius: 2em !important;
	padding-left: 2em !important;
	padding-right: 2em !important;
}

.vt-callToAction-message {
	border-radius: 2em;
	background-color: color-mix(in srgb, var(--vce-white) 85%, transparent) !important;
}

/* ---- Header bar color ---- */
.vt-one-preHeader {
	background: var(--vce-blue) !important;
}

/* =========================
	Featured Pubs – Card layout
	========================= */
.vt-list.ext-featured-pubs {
	--card-radius: var(--card-radius);
	--card-pad: var(--card-pad);
}

/* Make each item a card */
.vt-list.ext-featured-pubs .vt-list-item-wrapper {
	position: relative;
	background: var(--vce-white);
	border: var(--vce-border-muted);
	border-radius: var(--card-radius);
	box-shadow: var(--card-shadow);
	overflow: hidden;
}

/* Orange top accent bar */
.vt-list.ext-featured-pubs .vt-list-item-wrapper::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--card-topbar-h);
	background: var(--vce-accent);
	z-index: 2;
}

/* Compress default row spacing */
.vt-list.ext-featured-pubs .vt-list-item-row {
	margin: 0;
}

/* Media: consistent 16:9 crop */
.vt-list.ext-featured-pubs .vt-list-item-imgWrapper {
	aspect-ratio: 16/9;
	overflow: hidden;
}

.vt-list.ext-featured-pubs .vt-list-item-picture,
.vt-list.ext-featured-pubs .vt-list-item-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* Placeholder when there’s no image */
.vt-list.ext-featured-pubs .ext-featured-media--placeholder {
	aspect-ratio: 16/9;
	background: var(--brand-gradient);
}

/* Hide the “Resource Item” icon/label row */
.vt-list.ext-featured-pubs .vt-list-item-heading {
	display: none !important;
}

/* Card body padding */
.vt-list.ext-featured-pubs .vt-list-item-col:last-of-type {
	/* padding: var(--card-pad) var(--card-pad) calc(var(--card-pad) * 1.25); */
}

/* Title (Epilogue + H2 color) */
.vt-list.ext-featured-pubs .vt-list-item-title-link {
	font-family: var(--vce-font-heading);
	font-weight: 800;
	color: var(--vce-h2);
	font-size: clamp(1.125rem, 1.3vw, 1.5rem);
	line-height: 1.2;
	text-decoration: none;
	display: inline-block;
	margin: 0 0 var(--vce-space-2);
}

.vt-list.ext-featured-pubs .vt-list-item-title-link:hover {
	text-decoration: underline;
}

/* Description: ~3 lines */
.vt-list.ext-featured-pubs .vt-list-item-description {
	color: var(--vce-gray-900);
	line-height: var(--vce-lh-normal);
	margin: 0 0 var(--vce-space-4);
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA button */
.vt-list.ext-featured-pubs .ext-featured-cta {
	display: inline-block;
	background: var(--cta-bg);
	color: var(--cta-color);
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--cta-radius);
	padding: var(--cta-pad-y) var(--cta-pad-x);
	box-shadow: var(--vce-shadow-sm);
}

.vt-list.ext-featured-pubs .ext-featured-cta:hover {
	filter: brightness(1.05);
}

.vt-list.ext-featured-pubs .ext-featured-cta:focus-visible {
	outline: var(--vce-focus);
	outline-offset: 2px;
}

/* Grid gaps */
.vt-list.ext-featured-pubs .vt-list-items {
	row-gap: 1.25rem;
}

/* ---- Global Epilogue override in navs/toggles ---- */
.vt-nav-toggleLabel,
.vt_offcanvas_nav>* {
	font-family: var(--vce-font-heading) !important;
}


/* Accordion CSS (Option B) */
.topic-list,
.topic-list ul {
	display: grid;
	list-style: none;
	margin: 0;
	padding: 0;
}

.acc {
	position: relative;
}

.acc-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* clickable row */
.acc-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.6rem;
	cursor: pointer;
	border-radius: 0.4rem;
}

.acc-label:hover {
	background: rgba(0, 0, 0, 0.03);
}

/* chevron */
.acc-chevron {
	margin-left: auto;
	transition: transform 0.2s ease;
}

/* panel hidden by default */
.acc-panel {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin-left: 1.4rem;
	padding-left: 0.6rem;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
	transition: max-height 0.28s ease, opacity 0.22s ease;
}

/* OPEN STATE (pure CSS) */
.acc-toggle:checked~.acc-panel {
	max-height: 2000px;
	opacity: 1;
	margin-top: 0.25rem;
}

/* rotate chevron when open */
.acc-toggle:checked+.acc-label .acc-chevron {
	transform: rotate(90deg);
}

/* small adjustments for nested lists */
.acc-panel .acc-label {
	padding: 0.3rem 0.4rem;
}

/* --- Two-column responsive layout for top-level accordions --- */
/* Wrap the top-level <ul> in a container with class "accordion-root" (if not already present).
This CSS will make top-level accordion items flow into two even columns when there's enough space.
It also keeps nested accordions full-width inside each column. */

.accordion-root {
	display: grid !important;
	grid-template-columns: 1fr;
	/* single column by default */
	gap: 1rem;
	/* space between columns/rows */
	align-items: start;
}

/* On wider viewports, use two equal columns */
@media (min-width: 760px) {
	.accordion-root {
		grid-template-columns: repeat(2, 1fr);
		/* two equal columns when space allows */
	}
}

/* Ensure each top-level <li> becomes a grid item and expands to fill its column */
.accordion-root>li {
	width: 100%;
	box-sizing: border-box;
	break-inside: avoid;
	/* avoid breaking across columns (useful if printing) */
}

/* Make the clickable label and the checkbox span the full width */
.accordion-root>li .acc-toggle,
.accordion-root>li>label {
	width: 100%;
	display: block;
}

/* If your markup uses a nested <ul> inside each top-level <li>, keep it full-width inside the column */
.accordion-root li ul {
	width: 100%;
	box-sizing: border-box;
}

/* Optional — adjust visual balance: make chevrons and label content align nicely */
.accordion-root>li label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 0.5rem;
}

/* If there is an existing max-width on the accordion container, remove or increase it so two columns can appear */
.accordion-container,
.accordion-root {
	max-width: none;
}

/* Accessibility: keep focus outline visible when keyboard-navigating */
.accordion-root label:focus {
	outline: 2px solid Highlight;
	outline-offset: 2px;
}

.ext-pubs-search {
	position: relative;
	top: 50%;
	/* Move to middle vertically */
	left: 50%;
	/* Move to middle horizontally */
	transform: translate(-50%, 0);
	/* Adjust for element size */
	width: 50vw;
	min-width: 10em;
	border: solid 1px;
	border-radius: 1em;
	padding: 0.5em 1em;
}

/* Make the link a logo container */
#vt_logo .vt-logo-link {
	display: block;
	background-image: url("/content/dam/ext_vt_edu/images/logos/vce-horizontal-rgb.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	min-height: 2.25em;
}

/* Visually hide the text but keep it available to screen readers */
#vt_logo .vt-logo-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (max-width: 991.98px) {
	#vt_logo .vt-logo-link {
		background-image: url("/content/dam/ext_vt_edu/images/logos/vce-main-rgb.png");
		min-width: 250px;
	}

	.ext-top-nav-links {
		display: none !important;
	}

	.ext-top-nav-topics {
		display: none !important;
	}
}


/* TOP NAV LINKS */
.ext-top-nav-links {
	background: var(--vce-blue);

	a {
		color: white;
		text-decoration: none;
		margin-right: 1em;
	}
}

.parbase>div:has(.ext-top-nav-links) {
	margin-bottom: 0;
}

.parbase .ext-top-nav {
	margin-bottom: 0;
}

/* TOP NAV TOPICS */

.ext-top-nav-topics-links {
	text-align: right;

	a {
		color: var(--vce-black);
		margin-right: 1em;
	}
}

.row.vt-one-preHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.parbase>div:has(.ext-top-nav-topics) {
	margin-bottom: 0;
}

.parbase .ext-top-nav {
	margin-bottom: 0;
}

.vt-page-title {
	padding-top: 2rem;
}

.ext-col-2 ul {
	column-count: 2;
	column-gap: 2rem;
}

h2:has(span) {
	width: 100%;
	display: flex !important;
	align-items: center;
	line-height: 1;
	white-space: nowrap;
	font-weight: bold;

	>span {
		margin-right: 0.25em;
	}

}

h2:has(span)::after {
	content: "";
	display: block;
	background: linear-gradient(to right, rgba(236, 141, 70, 1) 0%, rgba(227, 235, 251, 1) 66%, rgba(227, 235, 251, 0) 100%);
	height: 4px;
	width: 100%;
}

.vt-tagcloud li a {
	background: var(--vce-white);
	color: var(--vce-black);
	border-radius: 0.5em;
	border: solid 2px var(--vce-blue);
	text-decoration: none;
}

.break-word-off {
	word-break: normal !important;
	overflow-wrap: break-word !important;
}

/* Full-bleed background on the container */
.vt-vtcontainer.full-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;

	background: linear-gradient(to right bottom, rgba(227, 235, 251, 1) 0%, rgba(227, 235, 251, 1) 15%, rgba(236, 141, 70, 1) 100%);
}

/* Keep the *content* inside at normal container width */
.vt-vtcontainer.full-bleed>.vt-vtcontainer-content {
	max-width: 1200px;
	/* match vt container width */
	margin: 0 auto;
	padding-left: 16px;
	/* match your site gutters */
	padding-right: 16px;
}

/* Optional: keep vertical rhythm consistent */
.vt-vtcontainer.full-bleed>.vt-vtcontainer-content {
	padding-top: 24px;
	padding-bottom: 24px;
}

/* PUBS SPECIFIC STYLES */

.ext-featured-pubs>.vt-list-item-wrapper {
	border-radius: 0.5em;
}

.pubs-categories {
	padding: 4.5vw;
	padding-top: 4vw;
	padding-bottom: calc(5vw + 40px);
	background: linear-gradient(to right bottom, rgba(227, 235, 251, 1) 0%, rgba(227, 235, 251, 1) 15%, rgba(236, 141, 70, 1) 100%);

}

table,
th,
tr,
td,
.table td {
	border: 1px solid black !important;
}

h2.vt-tag-title {
	padding-top: 1em;
}

.vt-list .vt-list-feed {
	color: var(--vce-link);
}

body.resource-page {
	resource-body {
		padding-left: 1em !important;
		padding-right: 0.5em !important;
	}

	#vt_resource_identifier,
	#vt_resource_authors,
	#vt_resource_date {
		>h3 {
			display: none;
		}
	}

	div#vt_one_content_area {
		padding: 0 0.75em;
	}

	.vt-tags {
		display: none;
	}

	#vt_resource_authors {
		font-style: italic;
	}

	#vt_resource_date {
		::before {
			content: "Last published/updated ";
		}

		font-style: italic;
	}
}

.vce-social-share-icons li {
	display: list-item !important
}

/* Scope everything to Text components you mark with .ext-table
.ext-table {
  /* keep inherited typography/colors
}

/* Each immediate child <div> of your Text component becomes the scroller */
.ext-table>div {
	position: relative;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* smooth iOS momentum */
	border-radius: 6px;
	margin: 0 0 1rem 0;
	/* space between multiple tables */
}

/* Optional subtle scroll hint */
/* .ext-table>div::after {
  content: "Scroll →";
  position: sticky;
  right: 0;
  bottom: 0;
  font-size: 12px;
  padding: 4px 8px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05));
} */

/* Table basics */
.ext-table table.table {
	width: 100%;
	border-collapse: collapse;
	/* background: #fff; */
}

.ext-table table.table caption {
	text-align: left;
	margin: 0 0 .5rem 0;
	font-weight: 600;
}

.ext-table table.table th,
.ext-table table.table td {
	padding: .5rem .75rem;
	border: 1px solid #e5e5e5;
	vertical-align: top;
	text-align: left;
}

.ext-table table.table thead th {
	/* background: #f6f7f8; */
}

/* Right-align numeric-ish columns (Jobs, Labor Income, Value Added, Output, Taxes, Totals)
     Adjust if your column order changes. */
.ext-table table.table thead th:nth-child(n+3),
.ext-table table.table tbody td:nth-child(n+3) {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Sticky first column for readability on wider screens */
@media (min-width: 600px) {

	.ext-table table.table th:first-child,
	.ext-table table.table td:first-child {
		position: sticky;
		left: 0;
		color: white !important;
		background: var(--dark-gray) !important;
		z-index: 1;
	}

	.ext-table table.table td:first-child p {
		color: white;
	}

	.ext-table table.table thead th:first-child {
		z-index: 2;
	}
}

/* If AEM injects stacked header labels (vt-table-headerTitle),
     they can remain as-is; this just keeps them subtle. */
/* .ext-table .vt-table-headerTitle[aria-hidden="true"] {
  font-size: .85em;
  color: #6b7280;
} */

.footer-content ul {
	padding-left: 1em;
}

.pubs-search-container.ext-replace-vt-search {
	display: flex;
	justify-content: center; /* Centers horizontally */
	align-items: center;     /* Centers vertically */
	height: 100%;
	max-height: 1000px;
	margin: 0 10%;
}

#vt_subnav {
	display: none;
}

.ext-wide-container {
	width: 100vw;
	padding: 0 10%;
}