/*
Theme Name: TIU Online
Description: Standalone, builder-free theme for the Trinity Online subsite. Page content is plain HTML written in the classic editor's code view, using the classes documented in README.md.
Author: Trinity International University
Version: 1.0.0
Requires PHP: 7.4
*/

:root {
	--blue: #13326b;
	--blue-hover: #00539b;
	--navy: #253d5f;
	--orange: #fe6c2d;
	--gray: #efeeed;
	--ink: #323232;
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' stroke='%23fff' fill='%23fff' fill-rule='evenodd'%3E%3Cpath d='M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm-4.828 11.5l4.608 3.763-.679.737-6.101-5 6.112-5 .666.753-4.604 3.747h11.826v1h-11.828z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */

*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	overflow-x: hidden;
	background: #fff;
	color: #333;
	font: 400 16px/1.5 "Open Sans", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 { margin: 0 0 1rem; font-weight: 800; line-height: 1.2; }
h1 { font-size: 50px; letter-spacing: -2px; }
h2 { font-size: 35px; letter-spacing: -1px; }
h3 { margin: 0; font-size: 25px; letter-spacing: -.5px; }
h4 { margin: 0; font-size: 18px; }
p { margin: 0 0 .9rem; font-weight: 500; }
a { color: var(--blue-hover); font-weight: 500; text-decoration: none; }
img { max-width: 100%; height: auto; border: 0; }
ul { margin: 0; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 10px; top: 10px; z-index: 999; padding: 10px 15px; background: #fff; }

/* Form controls (Marketo injects its own markup; these are the defaults it builds on). */
label { display: inline-block; line-height: 1; vertical-align: middle; }
button, input, select, textarea { margin: 0; font-family: inherit; font-size: 1rem; line-height: 1.5; }
input[type=date], input[type=email], input[type=number], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea {
	width: 100%;
	padding: .5rem 1rem;
	border: 1px solid #666;
	border-radius: 3px;
	transition: all .3s;
}
select { display: block; }
[type=submit], button {
	display: inline-block;
	padding: .5rem 1rem;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: all .3s;
}

/* ---------- Site header ---------- */

.site-header { background: var(--blue); }
.site-header > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 1140px;
	margin: auto;
	padding: 10px 20px;
}
.logo { display: block; width: 100%; max-width: 190px; }
.logo img { width: 100%; }
.menu { position: relative; display: flex; gap: 10px; padding: 0; list-style: none; text-transform: uppercase; }
.menu a { display: block; padding: 8px; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .025em; }
.sub-menu {
	position: absolute;
	z-index: 100;
	width: 175px;
	padding: 0;
	list-style: none;
	background: var(--gray);
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	transition: all .3s ease;
}
.menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; }
.sub-menu a { color: var(--ink); font-size: 15px; font-weight: 400; transition: all .3s ease; }
.sub-menu a:hover { background: #0002; }

/* ---------- Layout ---------- */

/* .sec — a full-width band whose content is centred at 1100px.
   Modifiers: .narrow (860px) .mid (910px) .tight (less vertical space) .gray .center */
.sec { --w: 1100px; padding: 95px max(20px, calc(50% - var(--w) / 2)); }
.sec > h2:not(:first-child) { margin-top: 65px; }
.narrow { --w: 860px; }
.mid { --w: 910px; }
.tight { padding-block: 55px; }
.gray { background: var(--gray); }
.center { text-align: center; }
#programs { padding-top: 55px; }

/* .label — small heading. Add .thin for the lighter version. */
.label { margin: 0 0 20px; font-size: 20px; line-height: 1; letter-spacing: .025em; }
.label.thin { margin: 35px 0 0; font-weight: 400; }

/* .flush — heading with no spacing around it */
.flush { margin: 0; line-height: 1; }

/* .btn — button link */
.btn {
	display: block;
	width: fit-content;
	margin-top: 34.4px;
	padding: 16px 25px;
	background: var(--blue);
	color: #fff;
	font-size: 15px;
	line-height: 1;
	transition: all .3s;
}
.btn:hover { background: var(--blue-hover); }

/* .fine — small print under a form */
.fine { margin: 15px 0 0; font-size: 8px; text-align: center; }

/* .cols — three equal columns that stack on phones */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); }
.cols > * { margin: 0; padding: 20px 20px 34.4px; }

/* ---------- Hero (featured image + title, printed by the template) ---------- */

.hero { position: relative; z-index: 0; display: flex; align-items: flex-end; min-height: 60vh; background: var(--blue); color: #fff; }
.hero > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.hero > div { flex: 1; padding-inline: max(0px, calc(50% - 570px)); background: linear-gradient(90deg, var(--blue) 40%, transparent 40%); }
.hero > div > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 650px;
	min-height: 175px;
	padding: 20px;
	border-radius: 0 75px 0 0;
	background: var(--blue);
}
.hero span, .hero h1 { width: 100%; margin: 0; }
.hero span { align-self: end; }
.hero h1 { margin-left: -3px; }

/* ---------- Home hero: text on the left, form card on the right ---------- */

.home-hero {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: 80vh;
	padding: 95px max(20px, calc(50% - 550px));
	background: center / cover;
	color: #fff;
}
.home-hero > * { width: 50%; }
.form-card { display: flex; flex-direction: column; align-items: center; padding: 20px; color: var(--ink); text-align: center; }
.form-card > * { width: 100%; max-width: 320px; }
.form-card > div { padding: 35px; border-radius: 20px 20px 0 0; background: #fff; }
.form-card .fine { margin-bottom: -15px; }
.apply { position: relative; display: block; padding: 20px; border-radius: 0 0 20px 20px; background: var(--blue-hover); color: #fff; text-align: left; }
.apply::after {
	content: "";
	position: absolute;
	right: 20px;
	width: 30px;
	height: 30px;
	background: var(--arrow) center / 20px no-repeat;
	transform: rotate(180deg) translateX(10px);
	transition: all .5s ease;
}
.apply:hover::after { transform: rotate(180deg); }

/* ---------- Programs list (home) ---------- */

.programs { padding: 0; list-style: none; }
.programs li { padding: 20px 0; border-bottom: 1px solid var(--gray); }
.programs span { display: block; color: #a8a8a8; font-size: 14px; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; }
.programs h2 { margin: 0; font-size: 26px; letter-spacing: .01em; }
.programs a { color: var(--blue); }
.programs a:hover { color: var(--blue-hover); }

/* ---------- People grid (staff, faculty) ---------- */

.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; text-align: center; }
.people > div { padding-bottom: 20px; background: var(--navy); color: #fff; }
.people > div > * { margin-inline: 20px; }
.people img { display: block; width: 100%; margin: 0 0 26px; aspect-ratio: 1; object-fit: cover; }
.people h4 { margin-bottom: 10px; font-size: 20px; }
.people a { color: var(--orange); font-size: 12px; font-weight: 800; }

/* ---------- Request Information band (printed by the template) ---------- */

.rfi {
	display: flex;
	gap: 5px;
	padding: 95px max(20px, calc(50% - 550px));
	background: url(https://res.cloudinary.com/doetd2kiw/image/upload/v1678162174/New-Online-Hero_jfhidy.webp) center / cover;
}
.rfi > div { flex: 1; padding: 35px; border-radius: 0 55px 0 0; background: #fff; }
.rfi > div:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 0 0 0 55px;
	background: #13326bc0;
	color: #fff;
}
.rfi h4 { margin-bottom: 20px; text-align: center; }
.rfi .fine { margin-bottom: -8px; }

/* ---------- Full-height photo with a white panel (request info page) ---------- */

.cover { display: flex; align-items: center; min-height: 90vh; padding: 20px max(20px, calc(50% - 430px)); background: center / cover; }
.panel { flex: 1; padding: 35px; border-radius: 35px 0; background: #fff; }
.panel > .fine { margin: 35px 0 .9rem; font-size: 10px; text-align: left; }

/* ---------- Marketo forms ---------- */

form[id^=mktoForm]:empty { min-height: 363px; }
.mktoOffset, .mktoGutter, .mktoFormRow label { display: none; }
form.mktoForm, .mktoFieldDescriptor.mktoFormCol, .mktoFieldWrap, .mktoForm input, .mktoForm select { width: 100% !important; }
.mktoForm input, .mktoForm select {
	margin-bottom: 15px !important;
	padding: 5px 0 !important;
	border: none;
	border-bottom: solid 2px;
	border-radius: 0;
	outline: none;
	font-size: 15px !important;
}
.mktoForm input:focus, .mktoForm select:focus { border-color: var(--orange); }
.mktoButtonRow { display: flex !important; justify-content: center; width: 100%; }
span.mktoButtonWrap.mktoNative { margin: 0 !important; }
button.mktoButton { padding: 15px 40px; border: none; border-radius: 0 20px; background: var(--blue); color: #fff; }
button.mktoButton:hover { background: var(--blue-hover); }

/* Inside a .panel the form shows its labels and lays fields out two per row. */
.panel .mktoFormRow { display: flex; justify-content: space-between; gap: 20px; clear: both; }
.panel .mktoFormRow label { display: block !important; width: 100% !important; font-weight: 700; }
.panel .mktoForm textarea, .panel .mktoForm .mktoFormCol { width: 100% !important; }
.panel .mktoHtmlText.mktoHasWidth { display: none; }
.panel ::placeholder { color: #fff; }

/* ---------- Site footer ---------- */

.site-footer { padding: 35px 0; border-top: 1px solid #0002; background: var(--gray); font-size: 13px; }
.site-footer > div { display: flex; gap: 35px; max-width: 1140px; margin: auto; padding: 20px; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--blue); }
.contact { display: grid; align-content: center; gap: 5px; width: 25%; text-align: center; }
.contact img { justify-self: center; margin-bottom: 10px; }
.social { display: flex; justify-self: center; gap: 8px; margin-top: 10px; }
.social a { display: flex; }
.social svg { height: 20px; fill: var(--ink); transition: all .3s ease; }
.social a:hover svg { fill: #000; transform: translateY(-3px); }
.links { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; gap: 20px; width: 75%; padding-left: 35px; border-left: 1px solid #0002; }
.links h3 { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #0002; font-size: 15px; font-weight: 700; }
.links ul { padding: 0; list-style: none; }
.links li { padding-bottom: 3px; }

/* ---------- Smaller screens ---------- */

@media (max-width: 1030px) {
	.site-footer > div { flex-wrap: wrap; }
	.contact, .links { width: 100%; padding-left: 0; border-left: 0; }
	.people { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.hero { min-height: 52vh; }
	.home-hero, .rfi { flex-direction: column; }
	.home-hero > *, .rfi > div { flex: none; width: 100%; }
	.rfi > div { padding: 20px; border-radius: 0 0 0 35px; }
	.rfi > div:first-child { border-radius: 0 55px 0 0; }
	.cols { grid-template-columns: 1fr; }
	.panel .mktoFormRow { flex-wrap: wrap; }
}
@media (max-width: 676px) {
	.site-header > div { flex-direction: column; }
	.menu { flex-wrap: wrap; justify-content: center; }
	.links { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
	.people { grid-template-columns: 1fr; }
}