/*
 * Seminary public website branding (ADR 061, Phase A).
 *
 * The `--brand-*` custom properties are emitted per-request into <head> by
 * seminary.overrides.update_website_context from the `Website Branding`
 * singleton, which loads BEFORE this file. So this file must NOT redeclare
 * those variables in :root (it would override the seminary's saved scheme);
 * instead each var() use carries an inline fallback for when branding is
 * unavailable. Light-only by design.
 *
 * Loaded as a static asset via the `web_include_css` hook. The curated font set is
 * self-hosted in brand_fonts.css (no runtime CDN call), shared with the portal.
 */

@import url("/assets/seminary/css/brand_fonts.css");

:root {
	/*
	 * The --brand-* colour/font variables are injected per-request into <head>
	 * by update_website_context, which loads BEFORE this file. We must NOT
	 * redeclare them in :root here or this file would override the seminary's
	 * saved scheme (same specificity, later wins). Instead, every var() use
	 * below carries an inline fallback for the rare case branding is missing.
	 */
	--brand-heading-stack: var(--brand-heading-font, "Poppins"), "Inter",
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--brand-body-stack: var(--brand-body-font, "Inter"), -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* ---- Base typography / surface ------------------------------------------ */
body {
	font-family: var(--brand-body-stack);
	color: var(--brand-text, #1a2330);
	background-color: var(--brand-bg, #ffffff);
}
h1, h2, h3, h4, h5, h6,
.sem-navbar__brand {
	font-family: var(--brand-heading-stack);
}
/* Headings follow the brand instead of the framework default (#171717). Low
   specificity so the white hero/footer and primary card-title overrides win. */
h1, h2, h3, h4, h5, h6 {
	color: var(--brand-primary, #0d3049);
}
a {
	color: var(--brand-primary, #0d3049);
}
a:hover {
	color: var(--brand-accent, #b3801f);
}

/* ---- Buttons / CTAs ----------------------------------------------------- */
.btn-primary,
.navbar-cta {
	background-color: var(--brand-primary, #0d3049);
	border-color: var(--brand-primary, #0d3049);
	color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.navbar-cta:hover {
	background-color: color-mix(in srgb, var(--brand-primary, #0d3049) 85%, #000);
	border-color: color-mix(in srgb, var(--brand-primary, #0d3049) 85%, #000);
	color: #fff;
}
.btn-outline-primary {
	color: var(--brand-primary, #0d3049);
	border-color: var(--brand-primary, #0d3049);
}
.btn-outline-primary:hover {
	background-color: var(--brand-primary, #0d3049);
	color: #fff;
}

/* ---- Custom navbar (Web Template: Seminary Navbar) ---------------------- */
/* The bar's own background falls back to Primary; its ink (white or dark) is
   derived server-side for contrast (061a), so no text here is a fixed white. */
.sem-navbar {
	--sem-bar-ink: var(--brand-navbar-ink, #fff);
	background-color: var(--brand-navbar-bg, var(--brand-primary, #0d3049));
	color: var(--sem-bar-ink);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.sem-navbar .container {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: 76px;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}
.sem-navbar__brand {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
	color: var(--sem-bar-ink);
	font-weight: 600;
	font-size: 1.15rem;
	text-decoration: none;
	white-space: nowrap;
}
.sem-navbar__brand:hover {
	color: var(--sem-bar-ink);
	opacity: 0.92;
}
.sem-navbar__logo {
	height: 46px;
	width: auto;
	max-width: none;
	flex: none;
	display: block;
}
.sem-navbar__links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: auto;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;
	flex-wrap: wrap;
}
.sem-navbar__links .nav-link {
	color: color-mix(in srgb, var(--sem-bar-ink) 85%, transparent);
	padding: 0.45rem 0.85rem;
	border-radius: 6px;
	font-weight: 500;
}
.sem-navbar__links .nav-link:hover,
.sem-navbar__links .nav-link:focus {
	color: var(--sem-bar-ink);
	background-color: color-mix(in srgb, var(--sem-bar-ink) 12%, transparent);
}
/* Login / account control (Frappe navbar_login.html partial) */
.sem-navbar__links .btn-login-area {
	border: 1px solid color-mix(in srgb, var(--sem-bar-ink) 45%, transparent);
}
.sem-navbar__links .btn-login-area:hover {
	background-color: color-mix(in srgb, var(--sem-bar-ink) 18%, transparent);
}
@media (min-width: 992px) {
	.sem-navbar__links .nav-item.logged-in,
	.sem-navbar__links .btn-login-area {
		margin-left: 0.5rem;
	}
}
/* Language picker (061b): drawn in the bar's ink like the links; the open list
   keeps the browser's own light menu, so its options get dark text. */
.sem-navbar__lang select {
	appearance: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E") right 0.6rem center / 0.6rem no-repeat;
	color: color-mix(in srgb, var(--sem-bar-ink) 85%, transparent);
	border: 0;
	border-radius: 6px;
	padding: 0.45rem 1.6rem 0.45rem 0.85rem;
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}
.sem-navbar__lang select:hover,
.sem-navbar__lang select:focus {
	color: var(--sem-bar-ink);
	background-color: color-mix(in srgb, var(--sem-bar-ink) 12%, transparent);
}
.sem-navbar__lang option {
	color: #1a2330;
	background: #fff;
}
.sem-navbar__cta {
	background-color: var(--brand-tertiary, #c8a24b);
	color: #1a2330;
	font-weight: 600;
	padding: 0.45rem 1.05rem;
	border-radius: 6px;
	text-decoration: none;
}
.sem-navbar__cta:hover {
	background-color: var(--brand-accent, #b3801f);
	color: #fff;
}
.sem-navbar__toggle {
	display: none;
	margin-left: auto;
	background: transparent;
	border: 0;
	color: var(--sem-bar-ink);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
@media (max-width: 991px) {
	.sem-navbar__toggle { display: inline-block; }
	.sem-navbar .container { flex-wrap: wrap; }
	.sem-navbar__links {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		margin-left: 0;
		gap: 0;
	}
	.sem-navbar__links.is-open { display: flex; }
}

/* ---- Custom footer (Web Template: Seminary Footer) --------------------- */
/* Its own background, else the primary brand colour (palette-true) rather
   than a computed off-palette shade; the ink is derived like the navbar's. */
.sem-footer {
	--sem-bar-ink: var(--brand-footer-ink, #fff);
	background-color: var(--brand-footer-bg, var(--brand-primary, #0d3049));
	color: color-mix(in srgb, var(--sem-bar-ink) 82%, transparent);
	padding: 2.5rem 0 1.5rem;
	margin-top: 3rem;
}
.sem-footer a {
	color: color-mix(in srgb, var(--sem-bar-ink) 82%, transparent);
}
.sem-footer a:hover {
	color: var(--sem-bar-ink);
}
.sem-footer__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.sem-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.sem-footer__logo { height: 34px; width: auto; }
.sem-footer__social {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.sem-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--sem-bar-ink) 12%, transparent);
	color: var(--sem-bar-ink);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.sem-footer__social a:hover {
	background-color: var(--brand-tertiary, #c8a24b);
	color: #1a2330;
}
.sem-footer__social svg { display: block; }
.sem-footer__groups {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-bottom: 1.5rem;
}
.sem-footer__group h5 {
	color: var(--sem-bar-ink);
	font-size: 0.95rem;
	margin-bottom: 0.6rem;
}
.sem-footer__group ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.sem-footer__group li { margin-bottom: 0.35rem; }
.sem-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	padding-left: 0;
	margin: 0 0 1rem;
}
.sem-footer__copyright {
	font-size: 0.86rem;
	opacity: 0.85;
	border-top: 1px solid color-mix(in srgb, var(--sem-bar-ink) 14%, transparent);
	padding-top: 1rem;
	margin-top: 1rem;
}
.sem-footer__address {
	margin-bottom: 0.4rem;
	font-style: normal;
	white-space: pre-line;
}

/* Apply CTA button on the program detail page (Timed windows + Continuous) */
.apply-btn-wrap .btn-primary {
	margin-top: 0.5rem;
	padding: 0.65rem 1.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	background-color: var(--brand-secondary, #1b4a6b);
	border-color: var(--brand-secondary, #1b4a6b);
	color: #fff;
}
.apply-btn-wrap .btn-primary:hover,
.apply-btn-wrap .btn-primary:focus {
	background-color: var(--brand-tertiary, #c8a24b);
	border-color: var(--brand-tertiary, #c8a24b);
	color: #1a2330;
}

/* ---- Public content pages (ADR 061 Phase B) ---------------------------- */
.sem-page { max-width: 1000px; margin: 0 auto; padding: 2rem 0 3rem; }
.sem-page h1 { margin-bottom: 0.5rem; }
.sem-lead { font-size: 1.15rem; color: #4b5563; margin-bottom: 2rem; }
.sem-prose :is(h2, h3) { font-family: var(--brand-heading-stack); margin-top: 1.75rem; }

/* Home hero */
.sem-hero {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	min-height: 380px;
	background-color: var(--brand-primary, #0d3049);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	margin: 1.5rem 0 2.5rem;
}
.sem-hero__overlay {
	width: 100%;
	padding: 2.5rem;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.62) 100%);
}
.sem-hero__headline {
	color: #fff;
	font-size: 2.6rem;
	line-height: 1.1;
	margin: 0 0 0.75rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.sem-hero__subtext {
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.2rem;
	max-width: 620px;
	margin: 0 0 1.25rem;
}
.sem-hero__cta {
	display: inline-block;
	background: var(--brand-tertiary, #c8a24b);
	color: #1a2330;
	font-weight: 600;
	padding: 0.7rem 1.5rem;
	border-radius: 6px;
	text-decoration: none;
}
.sem-hero__cta:hover { background: var(--brand-accent, #b3801f); color: #fff; }

/* Card grids (programs, unit cards) */
.sem-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
	margin: 1.25rem 0 1rem;
}
.sem-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sem-card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); transform: translateY(-2px); color: inherit; }
.sem-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #f3f4f6; }
.sem-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.sem-card__title {
	font-family: var(--brand-heading-stack);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--brand-primary, #0d3049);
}
.sem-card__meta { font-size: 0.82rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.03em; }
.sem-card__blurb { font-size: 0.95rem; color: #4b5563; }
.sem-card__cta { margin-top: auto; padding-top: 0.6rem; color: var(--brand-primary, #0d3049); font-weight: 600; font-size: 0.9rem; }

/* Larger, bolder cards — used for the Programs catalogue. */
.sem-cards--lg {
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 2rem;
}
.sem-cards--lg .sem-card { border-radius: 12px; }
.sem-cards--lg .sem-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.13); transform: translateY(-3px); }
.sem-cards--lg .sem-card__img { aspect-ratio: 3 / 2; }
.sem-cards--lg .sem-card__body { padding: 1.5rem 1.6rem 1.7rem; gap: 0.6rem; }
.sem-cards--lg .sem-card__title { font-size: 1.55rem; font-weight: 700; line-height: 1.18; }
.sem-cards--lg .sem-card__meta { font-size: 0.85rem; }
.sem-cards--lg .sem-card__blurb { font-size: 1.05rem; line-height: 1.5; }
.sem-cards--lg .sem-card__cta { font-size: 1rem; padding-top: 0.8rem; }

/* Program-level grouping */
.sem-level { margin-bottom: 2.5rem; }
.sem-level__heading {
	font-family: var(--brand-heading-stack);
	border-bottom: 2px solid var(--brand-tertiary, #c8a24b);
	padding-bottom: 0.4rem;
	margin-bottom: 1rem;
}

/* Faculty / team */
.sem-unit { margin-bottom: 2.75rem; }
.sem-unit__heading { font-family: var(--brand-heading-stack); margin-bottom: 0.25rem; }
.sem-unit__desc { color: #4b5563; margin-bottom: 1rem; }
.sem-team {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 1.5rem;
	margin: 1rem 0 0;
}
.sem-team__card { text-align: center; }
.sem-team__photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 0.75rem;
	display: block;
	background: #e5e7eb;
}
.sem-team__photo--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	font-weight: 600;
	color: #fff;
	background: var(--brand-secondary, #1b4a6b);
	font-family: var(--brand-heading-stack);
}
.sem-team__name { font-weight: 600; }
.sem-team__role { font-size: 0.85rem; color: var(--brand-accent, #b3801f); margin-bottom: 0.4rem; }
.sem-team__bio { font-size: 0.88rem; color: #4b5563; }

/* Reusable button / panel / success block (applicant-payment, etc.) */
.sem-btn {
	display: inline-block;
	background-color: var(--brand-secondary, #1b4a6b);
	color: #fff;
	font-weight: 600;
	font-size: 1.05rem;
	padding: 0.7rem 1.6rem;
	border: none;
	border-radius: 6px;
	text-decoration: none;
}
.sem-btn:hover, .sem-btn:focus { background-color: var(--brand-tertiary, #c8a24b); color: #1a2330; }
.sem-panel {
	margin: 1.75rem 0;
	padding: 1.5rem 1.75rem;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
}
.sem-panel > :first-child { margin-top: 0; }
.sem-panel--accent {
	border-color: var(--brand-tertiary, #c8a24b);
	background: color-mix(in srgb, var(--brand-tertiary, #c8a24b) 8%, #fff);
}
.sem-success { text-align: center; margin-bottom: 1.5rem; }
.sem-success__check {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background-color: var(--brand-primary, #0d3049);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	line-height: 1;
}