/* =========================================================
   STANFORD ASSESSMENTS — COVER PAGE
   ========================================================= */

/* Default body — applies to ALL pages that load this CSS (popups, etc.) */
body {
	margin: 0;
	padding: 0;
	background: #052049;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Index page only — uses the curved background image */
body.index-page {
	background: #ffffff url('img/background.png') no-repeat center center fixed;
	background-size: cover;
}

#coverpage {
	background: transparent;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 0;
	color: #2e2d29;
}

/* ---------- Top red banner (Stanford logo) ---------- */
#stanford-banner-nav {
	background: #8C1515;            /* Stanford cardinal red */
	width: 100%;
	padding: 28px 50px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 110px;
}

#stanford-banner-nav .top-header-container {
	width: 100%;
	margin: 0;
	display: flex;
	align-items: center;
}

#stanford-banner-nav .stanford-logo {
	height: 70px;
	width: auto;
	display: block;
}

/* Hide the old text-based menu (replaced by the logo image) */
#stanford-banner-nav .menu {
	display: none;
}

/* ---------- Layout below the banner ---------- */
#tophalf {
	background: transparent;
	width: 100%;
	height: auto;
	padding-top: 60px;
}

#header {
	background: transparent;
	position: relative;       /* was absolute — let it flow naturally */
	left: auto;
	top: auto;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 0;
	color: #2e2d29;
	height: auto;
}

/* ---------- Card row ---------- */
.card-row,
#headerLinks {
	background: none;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 40px;
	flex-wrap: wrap;
	padding: 20px 0;
	height: auto;
}

/* ---------- Individual card ---------- */
.option-card {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
	border-bottom: 4px solid #8C1515;
	padding: 45px 30px 40px;
	width: 260px;
	min-height: 340px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
}

.option-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	text-decoration: none;
}

/* ---------- Icon (shows only the red circle, hides label baked into PNG) ---------- */
.icon-circle {
	width: 130px;
	height: 130px;
	margin: 0 auto 24px;
	overflow: hidden;        /* crops the "Training/Difficult/Evaluation" text under each circle */
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.icon-circle img {
	width: 130px;
	height: auto;            /* width-locked → only top square (the circle) is visible */
	display: block;
	margin: 0;
	padding: 0;
}

/* Reset the old width animations from coverpagejs.js — they no longer apply */
.icon-circle img#resizeTraining,
.icon-circle img#resizeDifficult,
.icon-circle img#resizeEval {
	width: 130px !important;
}

/* ---------- Card title + divider + description ---------- */
.option-card h2 {
	font-family: "HelveticaNeue-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 26px;
	color: #8C1515;
	margin: 0 0 12px;
	letter-spacing: 0.3px;
}

.small-line {
	width: 36px;
	height: 2px;
	background: #8C1515;
	margin: 0 auto 18px;
}

.option-card p {
	font-size: 15px;
	line-height: 1.5;
	color: #4a4a4a;
	margin: 0;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Link colors for the card anchors ---------- */
a.tebutton:link,
a.tebutton:visited,
a.tebutton:hover,
a.tebutton:active {
	text-decoration: none;
	color: #2e2d29;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.card-row,
	#headerLinks {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}
	.option-card {
		width: 85%;
		max-width: 360px;
	}
	#stanford-banner-nav {
		padding: 20px 24px;
		min-height: 80px;
	}
	#stanford-banner-nav .stanford-logo {
		height: 52px;
	}
}

/* =========================================================
   FAQ + LEGACY STYLES (kept so other pages aren't broken)
   ========================================================= */
#something          { display: none; }
#training, #evaluation { display: none; }

#faqBanner {
	position: relative;
	width: 100%;
	background: transparent;
	height: auto;
	margin-top: 30px;
}
#faqQuick {
	position: relative;
	width: 60%;
	margin: 20px auto 0;
	text-align: left;
	font-size: 22px;
	color: #2e2d29;
}
#fillThis1 {
	position: relative;
	background: none;
	font-size: 16px;
	width: 90%;
	max-width: 800px;
	margin: 20px auto;
	color: #2e2d29;
	text-align: justify;
}
.questions {
	font-size: 16px;
	color: #2e2d29;
	text-align: justify;
}

.invisible       { display: none; }
.changecolor     { color: #8C1515; }

.progress.active .progress-bar {
	-webkit-transition: none !important;
	transition: none !important;
}

h1 {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 30px;
}

.index-page a:link,
.index-page a:visited        { text-decoration: none; color: #8C1515; }
.index-page a:hover          { text-decoration: none; color: #b1040e; }

.index-page a.faqh:link,
.index-page a.faqh:visited   { text-decoration: none; color: #8C1515; }
.index-page a.faqh:hover     { text-decoration: none; color: #b1040e; }