/*
 * Studywell-specific styles, loaded after Zenith's main.css (see
 * functions.php) so rules here override the parent theme without
 * needing !important. Colors/fonts/container-width/spacing that Zenith's
 * own Theme Options already expose are set there instead (Appearance ->
 * Theme Options), and per-page content spacing/color lives in each Nova
 * Builder element's own settings (edited from the builder panel) rather
 * than here. This file only covers what neither of those reach: Nova
 * Builder's own independent --nova-* design tokens, and the *look* of
 * each element type Studywell adds (i.e. "what does a Course Card element
 * render as", the same category of thing as the plugin's own
 * frontend.css styling .nova-icon-box) -- never a specific instance's
 * spacing or color, which belongs in that instance's settings instead.
 */

/* ---------- Design tokens ---------- */
/* Bridged to Theme Options -> Colors (--zenith-color-*, see
   zenith_output_theme_options_css()) with the site's original hardcoded
   values kept as the var() fallback -- previously these were hardcoded
   directly with NO connection to Theme Options at all, so changing a
   color there had no visible effect anywhere on the site despite this
   file's own header comment claiming otherwise. --sw-shadow is
   deliberately left as a plain value: it's a translucent drop-shadow
   tint, not a top-level color a Theme Options color picker would
   reasonably expose on its own. */
:root {
	--sw-teal: var(--zenith-color-primary, #087f7d);
	--sw-teal-dark: var(--zenith-color-primary-hover, #075e63);
	--sw-teal-soft: var(--zenith-color-soft-bg, #eaf7f6);
	--sw-navy: var(--zenith-color-heading, #0c2340);
	--sw-ink: var(--zenith-color-text, #182b3b);
	--sw-muted: var(--zenith-color-text-muted, #667583);
	--sw-cream: var(--zenith-color-surface-alt, #f7faf9);
	--sw-white: var(--zenith-color-surface, #fff);
	--sw-line: var(--zenith-color-border, #dfe9e8);
	--sw-shadow: 0 22px 60px rgba(13, 53, 67, .10);

	/* Nova Builder ships its own independent --nova-* token set (see
	   nova-builder/assets/css/frontend.css) that Zenith's Theme Options
	   never bridges except for container-width/animation timing (see
	   zenith_output_theme_options_css()) -- every generic Nova element
	   (buttons, headings, icon boxes, testimonials, counters...) needs
	   these overridden here directly, or it stays stuck on Nova's own
	   blue/gray defaults regardless of anything set in Theme Options.
	   --nova-container-width itself is NOT set here -- Zenith already
	   bridges it live from the Container Width Theme Option (Appearance ->
	   Theme Options -> General), so every element below reads
	   var(--nova-container-width) directly rather than a second, easily
	   stale, hardcoded copy of that same value. */
	--nova-color-primary: var(--sw-teal);
	--nova-color-primary-contrast: #fff;
	--nova-color-text: var(--sw-ink);
	--nova-color-text-muted: var(--sw-muted);
	--nova-color-surface: var(--sw-white);
	--nova-color-surface-alt: var(--sw-cream);
	--nova-color-border: var(--sw-line);
	--nova-radius: 14px;
}

body {
	background: var(--sw-white);
}

/* Base look of every Heading/Subheading element on the site (a design-
   system default, same category as Zenith's own h1-h4 rules) -- an editor
   can still override color/size/margin per instance via that element's
   own Settings Panel controls, which always win over this default. */
.nova-heading, .nova-heading a {
	color: var(--sw-navy);
	line-height: 1.12;
}

.nova-subheading {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 2px;
	color: var(--sw-teal);
	text-transform: uppercase;
}

.nova-button {
	border-radius: 999px;
	font-size: 17px;
	padding: 14px 24px;
	transition: .25s;
}

.nova-button--solid:hover {
	background: var(--sw-teal-dark);
	transform: translateY(-2px);
}

.nova-button--outline {
	border-width: 1px;
}

/* ---------- In-page anchor offsets ---------- */
/* Sections that set a Custom ID (Nova Builder's Advanced panel -- see
   Renderer::render_section()) get a real HTML id, so #about/#courses/etc
   in-page nav links land directly on them. scroll-margin-top leaves room
   for the sticky header instead of the heading landing right underneath
   it -- native CSS, so it only ever affects an actual jump-to-anchor,
   never normal in-flow layout. */
.nova-section[id] {
	scroll-margin-top: 100px;
}

/* ---------- Shared: buttons for Studywell's own elements ---------- */
.sw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
	padding: 14px 24px;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	transition: .25s;
	border: none;
	cursor: pointer;
}

.sw-btn--sm {
	padding: 10px 20px;
	font-size: 17px;
}

.sw-btn--lg {
	padding: 16px 28px;
}

.sw-btn--primary {
	background: var(--sw-teal);
	color: var(--zenith-color-primary-contrast, #fff);
	box-shadow: 0 10px 25px rgba(8, 127, 125, .18);
}

.sw-btn--primary:hover {
	background: var(--sw-teal-dark);
	transform: translateY(-2px);
	color: #fff;
}

.sw-btn--outline {
	border: 1px solid var(--sw-teal);
	color: var(--sw-teal);
	background: var(--sw-white);
}

.sw-btn--secondary {
	background: var(--sw-navy);
	color: #fff;
}

.sw-btn--white {
	background: var(--sw-white);
	color: var(--sw-teal-dark);
}

.sw-btn--outline-light {
	border: 1px solid rgba(255, 255, 255, .65);
	color: #fff;
	background: transparent;
}

/* ---------- Top bar ---------- */
/* Refines zenith-topbar's generic default (see main.css) with Studywell's
   own navy/teal palette instead of Zenith's generic primary-contrast color. */
.zenith-topbar {
	background: var(--sw-navy);
	color: var(--zenith-topbar-text-color, var(--sw-white));
}

.zenith-topbar__phone,
.zenith-topbar__email {
	font-weight: 600;
}

.zenith-topbar__phone:hover,
.zenith-topbar__email:hover {
	color: var(--sw-teal);
}

/* Hidden below the same breakpoint the header's own actions area hides at
   (see .sw-site-header__actions below) -- a bar of contact details isn't
   worth the vertical space once the header itself is already squeezed
   into its narrow/hamburger layout. */
@media (max-width: 65.625em) {
	.zenith-topbar {
		display: none;
	}
}

/* ---------- Header ---------- */
.sw-site-header__inner {
	gap: 24px;
	min-height: 82px;
}

.sw-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

.sw-brand__mark {
	width: 42px;
	height: 42px;
	border: 2px solid var(--sw-teal);
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--sw-teal);
	font-weight: 800;
	flex-shrink: 0;
}

.sw-brand__wordmark strong {
	display: block;
	font-size: 21px;
	letter-spacing: 1px;
	color: var(--sw-navy);
	font-family: var(--zenith-font-heading, serif);
}

.sw-brand__wordmark small {
	display: block;
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--sw-teal);
	font-weight: 800;
	text-transform: uppercase;
}

.sw-site-header__actions {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-left: auto;
}

/* Matches the design's own header breakpoint: at 1050px and below, a
   9-item nav plus button no longer fits one row -- tighten the nav gap
   first, then drop the button, before Zenith's own hamburger takes over
   completely at 768px. Without this, narrower viewports above 768px get
   real horizontal overflow (verified: the header pushed the page wider
   than the viewport). The phone number now lives in the top bar (see
   above), not here, so it hides on its own at the same breakpoint instead
   of needing to be accounted for in this row's width budget. */
@media (max-width: 65.625em) {
	.zenith-site-nav__menu {
		gap: 13px;
	}

	.sw-site-header__inner {
		gap: 12px;
	}

	.sw-site-header__actions {
		display: none;
	}
}

/* ---------- Hero (Studywell\Elements\HeroElement) ---------- */
/* Every Nova column carries a small default padding-block (see
   frontend.css's .nova-column rule), which adds unwanted space above the
   hero -- the hero already provides its own internal spacing
   (.sw-hero__content's own padding), so its specific column (a stable,
   hand-chosen id, not an editor-generated one) opts out of that generic
   default entirely rather than fighting it with extra negative margin. */
.nova-el-c-hero {
	padding-block: 0;
}

/* Full-bleed background photo (set via inline style from the `photo`
   setting -- see HeroElement::render()) with a left-to-right scrim so the
   overlaid text stays readable regardless of what photo is uploaded. The
   scrim uses the same cream/white tokens as the rest of the site (so it
   reads as "this site's background", not an arbitrary dark tint) and is a
   separate absolutely-positioned layer rather than a CSS gradient directly
   on .sw-hero, since .sw-hero itself already owns the background-image. */
.sw-hero {
	position: relative;
	background: center/cover no-repeat var(--sw-cream);
	min-height: 720px;
	display: flex;
	align-items: center;
}

.sw-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--sw-white) 0%,
		var(--sw-white) 32%,
		color-mix(in srgb, var(--sw-white) 75%, transparent) 48%,
		color-mix(in srgb, var(--sw-white) 15%, transparent) 68%,
		transparent 85%
	);
}

.sw-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--nova-container-width);
	margin-inline: auto;
	padding-inline: var(--nova-space-md, 20px);
}

.sw-hero__content {
	max-width: 640px;
	padding-block: 90px;
}

.sw-hero__heading {
	font: 600 clamp(38px, 4.8vw, 68px) / 1.08 var(--zenith-font-heading, serif);
	color: var(--sw-navy);
	margin: 14px 0 20px;
	letter-spacing: -1.5px;
}

.sw-hero__heading em {
	font-style: normal;
	color: var(--sw-teal);
}

.sw-hero__lead {
	font-size: 19px;
	line-height: 1.6;
	max-width: 520px;
	color: var(--sw-muted);
	margin: 0 0 34px;
}

.sw-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-bottom: 34px;
}

.sw-hero__stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	flex: 1 1 0;
	min-width: 110px;
	padding-right: 18px;
	margin-right: 18px;
	border-right: 1px solid var(--sw-line);
}

.sw-hero__stat:last-child {
	border-right: none;
	padding-right: 0;
	margin-right: 0;
}

.sw-hero__stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--sw-teal-soft);
	color: var(--sw-teal);
}

.sw-hero__stat-icon svg {
	width: 20px;
	height: 20px;
}

.sw-hero__stat-text {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sw-navy);
}

.sw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 68.75em) {
	.sw-hero__scrim {
		background: linear-gradient(
			90deg,
			var(--sw-white) 0%,
			var(--sw-white) 55%,
			color-mix(in srgb, var(--sw-white) 60%, transparent) 75%,
			color-mix(in srgb, var(--sw-white) 15%, transparent) 100%
		);
	}
}

@media (max-width: 56.25em) {
	.sw-hero {
		min-height: 0;
	}

	.sw-hero__scrim {
		background: color-mix(in srgb, var(--sw-white) 88%, transparent);
	}

	.sw-hero__content {
		max-width: none;
		padding-block: 60px 40px;
	}

	.sw-hero__lead {
		max-width: none;
	}
}

@media (max-width: 32.5em) {
	.sw-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.sw-hero__stats {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 12px;
	}

	.sw-hero__stat {
		border-right: none;
		padding-right: 0;
		margin-right: 0;
	}
}

/* ---------- Trust strip (Studywell\Elements\TrustStripElement) ---------- */
/* The overlap onto whatever's above it is this element's whole visual
   identity, not a one-off instance override -- see the element class's
   own docblock for why this isn't Zenith's Feature Grid restyled instead. */
.sw-trust-strip {
	position: relative;
	z-index: 5;
	margin-top: -42px;
}

.sw-trust-strip__inner {
	background: var(--sw-white);
	border-radius: 20px;
	box-shadow: var(--sw-shadow);
	padding: 28px;
	max-width: var(--nova-container-width);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.sw-trust-strip__item {
	border-right: 1px solid var(--sw-line);
	padding: 5px 28px;
	display: grid;
	grid-template-columns: 32px 1fr;
	column-gap: 10px;
	align-items: start;
}

.sw-trust-strip__item:last-child {
	border-right: 0;
}

.sw-trust-strip__icon {
	grid-row: span 2;
	color: var(--sw-teal);
	font-size: 25px;
	width: 23px;
	height: 23px;
}

.sw-trust-strip__item strong {
	display: block;
	font-size: 17px;
	color: var(--sw-navy);
}

.sw-trust-strip__item span {
	display: block;
	font-size: 17px;
	color: var(--sw-muted);
	margin-top: 2px;
}

@media (max-width: 65.6em) {
	.sw-trust-strip__inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 50em) {
	.sw-trust-strip {
		margin-top: 0;
	}

	.sw-trust-strip__inner {
		grid-template-columns: 1fr 1fr;
		padding: 10px;
	}

	.sw-trust-strip__item {
		border-right: 0;
		border-bottom: 1px solid var(--sw-line);
		padding: 16px;
	}
}

@media (max-width: 32.5em) {
	.sw-trust-strip__inner {
		grid-template-columns: 1fr;
	}
}

/* ---------- Course grid (Studywell\Elements\CourseGridElement) ---------- */
.sw-course-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}

.sw-course-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sw-course-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sw-course-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.sw-course-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }

.sw-course-grid__cta {
	text-align: center;
	margin: 0;
}

.sw-course-card {
	background: var(--sw-white);
	border: 1px solid var(--sw-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(12, 35, 64, .05);
	transition: .25s;
	display: block;
	text-decoration: none;
}

.sw-course-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--sw-shadow);
}

.sw-course-card__img {
	height: 180px;
	overflow: hidden;
	background: var(--sw-cream);
}

.sw-course-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.sw-course-card__body {
	padding: 20px;
	position: relative;
}

.sw-course-card__icon {
	position: absolute;
	top: -19px;
	left: 18px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--sw-teal);
	color: #fff;
	display: grid;
	place-items: center;
	border: 4px solid #fff;
	font-size: 18px;
}

.sw-course-card__body h3 {
	font-size: 17px;
	margin: 8px 0 4px;
	color: var(--sw-navy);
	font-family: var(--zenith-font-heading, serif);
}

.sw-course-card__body p {
	font-size: 17px;
	color: var(--sw-muted);
	margin: 0 0 15px;
}

.sw-course-card__link {
	font-size: 17px;
	color: var(--sw-teal);
	font-weight: 800;
}

@media (max-width: 65.6em) {
	.sw-course-grid--cols-5,
	.sw-course-grid--cols-6 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 50em) {
	.sw-course-grid--cols-4,
	.sw-course-grid--cols-5,
	.sw-course-grid--cols-6 {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 32.5em) {
	.sw-course-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Stats band (Studywell\Elements\StatsBandElement) ---------- */
.sw-stats-band {
	background: linear-gradient(110deg, var(--sw-teal-dark), var(--sw-teal));
	color: #fff;
}

.sw-stats-band__inner {
	max-width: var(--nova-container-width);
	margin-inline: auto;
	padding-block: 30px;
	padding-inline: var(--nova-space-md, 20px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.sw-stats-band__item {
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, .25);
}

.sw-stats-band__item:last-child {
	border-right: 0;
}

.sw-stats-band__item strong {
	display: block;
	font: 600 36px var(--zenith-font-heading, serif);
}

.sw-stats-band__item span {
	font-size: 17px;
	opacity: .85;
}

@media (max-width: 50em) {
	.sw-stats-band__inner {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.sw-stats-band__item {
		border: 0;
	}
}

/* ---------- Image + badge (Studywell\Elements\ImageBadgeElement) ---------- */
.sw-image-badge {
	position: relative;
	height: 520px;
	border-radius: 26px;
	overflow: hidden;
	box-shadow: var(--sw-shadow);
}

.sw-image-badge__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sw-image-badge__badge {
	position: absolute;
	background: var(--sw-white);
	padding: 18px 24px;
	border-radius: 18px;
	box-shadow: var(--sw-shadow);
	display: flex;
	gap: 10px;
	align-items: center;
}

.sw-image-badge__badge--bottom-left { bottom: 30px; left: 30px; }
.sw-image-badge__badge--bottom-right { bottom: 30px; right: 30px; }
.sw-image-badge__badge--top-left { top: 30px; left: 30px; }
.sw-image-badge__badge--top-right { top: 30px; right: 30px; }

.sw-image-badge__badge strong {
	font: 600 36px var(--zenith-font-heading, serif);
	color: var(--sw-teal);
}

.sw-image-badge__badge span {
	font-size: 17px;
	font-weight: 700;
	color: var(--sw-navy);
}

@media (max-width: 50em) {
	.sw-image-badge {
		height: 380px;
	}
}

/* Checklist look shared by About's checklist and Bulgaria's benefit list
   (both plain Icon List elements) -- item font/color is the "what does a
   checklist item look like" default; spacing/columns are each instance's
   own settings (margin/gap/columns controls), not set here. */
.nova-icon-list__item {
	align-items: flex-start;
	font-size: 17px;
	font-weight: 600;
	color: var(--sw-ink);
}

.nova-icon-list__item .dashicons {
	color: var(--sw-teal);
}

/* ---------- Admission process steps (Studywell\Elements\ProcessStepsElement) ---------- */
.sw-steps {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	position: relative;
	gap: 14px;
}

.sw-steps:before {
	content: "";
	position: absolute;
	top: 31px;
	left: 7%;
	right: 7%;
	height: 1px;
	background: #c9dddd;
}

.sw-step {
	text-align: center;
	position: relative;
	z-index: 1;
}

.sw-step__number {
	position: absolute;
	right: 15px;
	top: -8px;
	color: #b6cecd;
	font-size: 17px;
}

.sw-step__icon {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: auto;
	border-radius: 50%;
	background: var(--sw-white);
	border: 1px solid #a8ccca;
	color: var(--sw-teal);
	box-shadow: 0 5px 18px rgba(8, 127, 125, .08);
	font-size: 24px;
}

.sw-step h3 {
	font-size: 17px;
	color: var(--sw-navy);
	margin: 15px 0 5px;
	font-family: var(--zenith-font-heading, serif);
}

.sw-step p {
	font-size: 17px;
	color: var(--sw-muted);
	margin: 0;
}

@media (max-width: 65.6em) {
	.sw-steps {
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
	}

	.sw-steps:before {
		display: none;
	}
}

@media (max-width: 50em) {
	.sw-steps {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 32.5em) {
	.sw-steps {
		grid-template-columns: 1fr;
	}
}

/* ---------- Bulgaria bento gallery (Studywell\Elements\BentoGalleryElement) ---------- */
.sw-bento-gallery {
	height: 480px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
}

.sw-bento-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 18px;
}

.sw-bento-gallery__main {
	grid-row: span 2;
}

.sw-bento-gallery__main img {
	border-radius: 22px;
}

@media (max-width: 50em) {
	.sw-bento-gallery {
		height: 400px;
	}
}

@media (max-width: 32.5em) {
	.sw-bento-gallery {
		height: 330px;
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

/* ---------- CTA band (Studywell\Elements\CtaBandElement) ---------- */
.sw-cta-band__inner {
	max-width: var(--nova-container-width);
	margin-inline: auto;
	padding-inline: var(--nova-space-md, 20px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.sw-cta-band--gradient {
	background: linear-gradient(110deg, var(--sw-teal-dark), var(--sw-teal));
	color: #fff;
	padding-block: 90px;
}

.sw-cta-band--dark {
	background: var(--sw-teal-dark);
	color: #fff;
	padding-block: 70px;
}

.sw-cta-band__copy h2 {
	font: 600 48px / 1.1 var(--zenith-font-heading, serif);
	margin: 0 0 10px;
	color: #fff;
}

.sw-cta-band--dark .sw-cta-band__copy h2 {
	font-size: 38px;
}

.sw-cta-band__copy p {
	max-width: 560px;
	color: #d8eeee;
	margin: 0;
}

.sw-cta-band__actions {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

@media (max-width: 50em) {
	.sw-cta-band__inner {
		display: block;
	}

	.sw-cta-band__actions {
		margin-top: 25px;
	}
}

@media (max-width: 32.5em) {
	.sw-cta-band__actions {
		flex-direction: column;
	}
}

/* ---------- Testimonials (core nova-builder TestimonialElement) ---------- */
.nova-el-testimonials-slider .nova-testimonial {
	border: 1px solid var(--sw-line);
	border-radius: 20px;
	padding: 30px;
	min-height: 300px;
	box-shadow: 0 12px 35px rgba(12, 35, 64, .04);
	text-align: left;
	position: relative;
}

/* The decorative oversized opening quote mark is its own glyph, separate
   from the real quote text below it (a fixed part of the Testimonial
   grid's own look, not a per-instance override). */
.nova-el-testimonials-slider .nova-testimonial:before {
	content: "\201C";
	display: block;
	font: 600 50px / 1 var(--zenith-font-heading, serif);
	color: var(--sw-teal);
	margin-bottom: 8px;
}

.nova-el-testimonials-slider .nova-testimonial__quote {
	font-size: 17px;
	font-style: normal;
	color: #5e6d76;
	margin: 0;
}

.nova-el-testimonials-slider .nova-testimonial__author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 25px;
}

.nova-el-testimonials-slider .nova-testimonial__avatar,
.nova-el-testimonials-slider .nova-testimonial__avatar--initials {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	flex-shrink: 0;
	margin: 0;
}

.nova-el-testimonials-slider .nova-testimonial__avatar--initials {
	background: #d9eceb;
	color: var(--sw-teal-dark);
	display: grid;
	place-items: center;
	font-weight: 800;
	font-size: 17px;
}

.nova-el-testimonials-slider .nova-testimonial__name {
	display: block;
	font-size: 17px;
	font-weight: 700;
}

.nova-el-testimonials-slider .nova-testimonial__role {
	display: block;
	font-size: 17px;
	color: var(--sw-muted);
}

.nova-el-testimonials-slider .nova-testimonial--featured {
	background: var(--sw-teal);
	color: #fff;
	border-color: var(--sw-teal);
	/* No lift transform here (grid layout's version has one) -- inside the
	   slider's flex row it throws the featured card out of alignment with
	   its siblings and can clip against the track's own bounds. */
}

.nova-el-testimonials-slider .nova-testimonial--featured:before {
	color: #b8e5e2;
}

.nova-el-testimonials-slider .nova-testimonial--featured .nova-testimonial__quote {
	color: #e6f7f6;
}

.nova-el-testimonials-slider .nova-testimonial--featured .nova-testimonial__avatar--initials {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.nova-el-testimonials-slider .nova-testimonial--featured .nova-testimonial__role {
	color: #cce7e5;
}

/* Arrow/dot colors already inherit correctly from the --nova-color-*
   bridge in :root (surface-alt/border/primary), this just adds a teal
   border so the arrows read as a deliberate brand-colored control rather
   than a plain gray circle. */
.nova-el-testimonials-slider .nova-testimonials-slider__arrow {
	border: 1px solid var(--sw-line);
}


/* ---------- Partner grid (Studywell\Elements\PartnerGridElement) ---------- */
.sw-partner-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
}

.sw-partner-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sw-partner-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.sw-partner-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.sw-partner-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }

.sw-partner-grid__item {
	background: var(--sw-white);
	border: 1px solid var(--sw-line);
	min-height: 105px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 17px;
	letter-spacing: .5px;
	color: #6c7880;
	padding: 12px;
}

.sw-partner-grid__item strong {
	color: var(--sw-navy);
	font-size: 17px;
	font-family: var(--zenith-font-heading, serif);
}

.sw-partner-grid__logo {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
}

@media (max-width: 65.6em) {
	.sw-partner-grid--cols-5,
	.sw-partner-grid--cols-6 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 32.5em) {
	.sw-partner-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Blog grid (core nova-builder PostsGridElement, pulling real
   published posts -- see includes/elements/PostsGridElement.php's
   show_category/read_more_text additions) ---------- */
.nova-el-blog-grid .nova-posts-grid {
	gap: 20px;
}

.nova-el-blog-grid .nova-posts-grid__item {
	border: 1px solid var(--sw-line);
	border-radius: 20px;
	overflow: hidden;
	background: var(--sw-white);
}

.nova-el-blog-grid .nova-posts-grid__thumbnail {
	height: 220px;
	overflow: hidden;
	background: var(--sw-cream);
	margin: 0;
}

.nova-el-blog-grid .nova-posts-grid__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.nova-el-blog-grid .nova-posts-grid__body {
	padding: 25px;
}

.nova-el-blog-grid .nova-posts-grid__tag {
	display: block;
	font-size: 17px;
	color: var(--sw-teal);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.nova-el-blog-grid .nova-posts-grid__title {
	font: 600 24px / 1.2 var(--zenith-font-heading, serif);
	color: var(--sw-navy);
	margin: 10px 0;
}

.nova-el-blog-grid .nova-posts-grid__title a {
	color: inherit;
	text-decoration: none;
}

.nova-el-blog-grid .nova-posts-grid__excerpt {
	font-size: 17px;
	color: var(--sw-muted);
	margin: 0 0 12px;
}

.nova-el-blog-grid .nova-posts-grid__read-more {
	display: inline-block;
	font-size: 17px;
	font-weight: 800;
	color: var(--sw-teal);
	text-decoration: none;
}

@media (max-width: 50em) {
	.nova-el-blog-grid .nova-posts-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ---------- Section heading split (Insights row) ---------- */
.nova-el-insights-heading-row {
	align-items: flex-end;
}

/* ---------- Footer ---------- */
/* Background/text color for both the footer bar AND the widgets row above
   it come from the Footer Background/Text Color Theme Options (Appearance
   -> Theme Options -> Footer) -- Zenith's .zenith-site-footer and
   .zenith-site-footer__widgets both already read the same
   --zenith-footer-bg/--zenith-footer-text variables those options drive,
   so setting them there (not hardcoding a color here) is what keeps the
   widgets row and the bar underneath it visually one piece instead of two
   different backgrounds. */
.zenith-site-footer {
	/* Zenith's own base rule adds margin-top:4rem before the footer (a
	   generic default for a theme with plain page content above it) --
	   the design has the footer sitting directly against the final CTA
	   band with no gap. */
	margin-top: 0;
}

/* Zenith's footer.php wraps the widgets row in a plain .zenith-container
   div (max-width: var(--zenith-container-width), boxed) before the
   .zenith-site-footer__widgets background is ever applied -- so that
   background only ever painted the boxed content area, not the full
   viewport, while the footer bar right below it (not wrapped that way)
   genuinely does span edge to edge. Can't edit Zenith's own footer.php to
   restructure that wrapper, so :has() re-targets it here instead: the
   *outer* .zenith-container becomes the full-bleed background layer, and
   .zenith-site-footer__widgets itself takes over being the boxed content
   layer that .zenith-container used to be. */
.zenith-container:has(> .zenith-site-footer__widgets) {
	max-width: none;
	padding-inline: 0;
	background: var(--zenith-footer-bg, transparent);
	color: var(--zenith-footer-text, inherit);
}

.zenith-site-footer__widgets {
	max-width: var(--zenith-container-width, var(--nova-container-width));
	margin-inline: auto;
	padding-inline: var(--zenith-space-md, 20px);
	/* Zenith's own base rule puts a border-top in --zenith-color-border
	   (a light gray-teal, correct for a light page background) above the
	   widgets row -- wrong here since the footer itself is dark navy. */
	border-top: 0;
	padding-top: 70px;
}

/* The design's footer has no scroll-reveal animation -- it's always
   visible. Zenith's default fade-up (.zenith-animate starts at opacity:0
   until scrolled into view) is a reasonable sitewide default elsewhere,
   but footer content shouldn't ever depend on JS/IntersectionObserver
   timing to become visible at all. */
.zenith-site-footer__widget-area.zenith-animate {
	opacity: 1;
	transform: none;
}

.zenith-site-footer__widgets--cols-4 {
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 50px;
}

.zenith-footer-widget {
	font-size: 17px;
	line-height: 1.8;
}

.zenith-footer-widget__title {
	color: #fff;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 18px;
}

.zenith-footer-widget a {
	display: block;
	font-size: 17px;
	margin: 8px 0;
	color: #c9dfde;
	text-decoration: none;
}

.zenith-footer-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sw-footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.sw-footer-brand__mark {
	width: 36px;
	height: 36px;
	border: 2px solid #fff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	font-weight: 800;
	flex-shrink: 0;
}

.sw-footer-brand strong {
	display: block;
	color: #fff;
	font-size: 19px;
}

.sw-footer-brand small {
	display: block;
	color: #8fd2ce;
	font-size: 10px;
	letter-spacing: 2px;
}

.sw-footer-socials {
	display: flex;
	gap: 8px;
	margin-top: 18px;
}

.sw-footer-socials a {
	width: 32px;
	height: 32px;
	border: 1px solid #47757a;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 17px;
	color: #c9dfde;
	text-decoration: none;
	margin: 0;
}

.zenith-site-footer__inner {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: 18px 0;
	font-size: 17px;
	color: #8eb5b5;
}

.zenith-site-footer__copy {
	margin: 0;
}

.zenith-site-footer__branding {
	display: none;
}

@media (max-width: 50em) {
	.zenith-site-footer__widgets--cols-4 {
		grid-template-columns: 1fr 1fr;
		gap: 35px;
	}
}

@media (max-width: 32.5em) {
	.zenith-site-footer__widgets--cols-4 {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   Inner pages (About, Courses, Admission, Why Bulgaria, university
   profiles, FAQ, Gallery, Blog listing, Contact) -- everything below
   only ever targets elements/classes used on those pages, so none of it
   can affect the homepage.
   ===================================================================== */

/* Every inner page's hero sits in a column deliberately given the same
   id ("c-page-hero") across every page it appears on -- ids only need to
   be unique within one page's own content tree, so reusing one lets a
   single rule strip Nova's default column padding everywhere at once,
   the same reasoning as .nova-el-c-hero on the homepage. */
.nova-el-c-page-hero {
	padding-block: 0;
}

/* ---------- Page Hero (Studywell\Elements\PageHeroElement) ---------- */
.sw-page-hero {
	background: linear-gradient(110deg, var(--sw-cream), var(--sw-teal-soft));
}

.sw-page-hero__inner {
	max-width: var(--nova-container-width);
	margin-inline: auto;
	padding-inline: var(--nova-space-md, 20px);
	padding-block: 95px;
}

.sw-page-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 70px;
	align-items: center;
}

.sw-page-hero__heading {
	font: 600 64px / 1.1 var(--zenith-font-heading, serif);
	color: var(--sw-navy);
	margin: 12px 0 20px;
}

.sw-page-hero__lead {
	font-size: 19px;
	color: var(--sw-muted);
	margin: 0;
	max-width: 520px;
}

.sw-page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.sw-page-hero__photo {
	height: 480px;
	border-radius: 26px;
	background-size: cover;
	background-position: center;
	box-shadow: var(--sw-shadow);
}

@media (max-width: 56.25em) {
	.sw-page-hero__grid {
		grid-template-columns: 1fr;
	}

	.sw-page-hero__photo {
		height: 340px;
	}

	.sw-page-hero__inner {
		padding-block: 70px;
	}

	.sw-page-hero__heading {
		font-size: 44px;
	}
}

/* ---------- Tag chip -- shared by TextCardGridElement's own tag and
   HeadingElement's "Chip / Badge" subheading style (core plugin, see
   HeadingElement.php's subheading_style control) ---------- */
.sw-tag,
.nova-subheading--chip {
	display: inline-block;
	background: var(--sw-teal-soft);
	color: var(--sw-teal-dark);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 800;
	margin-bottom: 10px;
}

/* ---------- Single blog post (studywell-child/single.php) ---------- */
.sw-blog-post {
	max-width: 46rem;
	margin-inline: auto;
	padding-block: 70px 90px;
}

.sw-blog-post__header {
	margin-bottom: 30px;
}

.sw-blog-post__category {
	text-decoration: none;
}

.sw-blog-post__title {
	margin: 0 0 14px;
	font-size: 46px;
	line-height: 1.15;
	color: var(--sw-navy);
}

.sw-blog-post__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--sw-muted);
	font-size: 17px;
}

.sw-blog-post__thumbnail {
	margin-bottom: 40px;
}

.sw-blog-post__thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: var(--sw-shadow);
}

.sw-blog-post__content {
	color: var(--sw-ink);
	font-size: 19px;
	line-height: 1.75;
}

.sw-blog-post__content p {
	margin: 0 0 22px;
}

.sw-blog-post__content h2 {
	margin: 44px 0 18px;
	font-size: 30px;
	color: var(--sw-navy);
}

.sw-blog-post__content h3 {
	margin: 34px 0 14px;
	font-size: 24px;
	color: var(--sw-navy);
}

.sw-blog-post__content ul,
.sw-blog-post__content ol {
	margin: 0 0 22px;
	padding-left: 1.4em;
}

.sw-blog-post__content li {
	margin-bottom: 8px;
}

.sw-blog-post__footer {
	margin-top: 50px;
	padding-top: 30px;
	border-top: 1px solid var(--sw-line);
}

@media (max-width: 40rem) {
	.sw-blog-post {
		padding-block: 45px 60px;
	}
	.sw-blog-post__title {
		font-size: 32px;
	}
	.sw-blog-post__content {
		font-size: 18px;
	}
	.sw-blog-post__content h2 {
		font-size: 25px;
	}
}

.nova-subheading--chip {
	text-transform: none;
	letter-spacing: normal;
}

/* ---------- Text card grid (Studywell\Elements\TextCardGridElement) --
   Courses listing (with images) and Universities listing (without) ---------- */
.sw-text-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 45px;
}

.sw-text-card-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.sw-text-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

.sw-text-card {
	border: 1px solid var(--sw-line);
	border-radius: 20px;
	background: var(--sw-white);
	padding: 28px;
	box-shadow: 0 10px 35px rgba(12, 35, 64, .04);
	display: block;
}

.sw-text-card__img {
	height: 220px;
	border-radius: 14px;
	overflow: hidden;
	margin: -10px -10px 20px;
}

.sw-text-card__img-tag {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sw-text-card h3 {
	font: 600 27px / 1.1 var(--zenith-font-heading, serif);
	color: var(--sw-navy);
	margin: 0 0 8px;
}

.sw-text-card p {
	color: var(--sw-muted);
	margin: 0 0 16px;
}

@media (max-width: 56.25em) {
	.sw-text-card-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 35em) {
	.sw-text-card-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Content-split photo (core ImageElement, tagged with Custom
   Class "sw-page-photo" -- see the Advanced panel's Custom ID/Class
   fields, Renderer::custom_attrs()) -- the plain "text one side, photo
   the other" section every inner page reuses, built from existing
   generic elements (Row, Heading, Text Block, Icon List, Button, Image)
   rather than a new element type. ---------- */
.sw-page-photo .nova-image__img {
	height: 480px;
	width: 100%;
	object-fit: cover;
	border-radius: 26px;
	box-shadow: var(--sw-shadow);
}

@media (max-width: 56.25em) {
	.sw-page-photo .nova-image__img {
		height: 340px;
	}
}

/* ---------- Masonry gallery (core GalleryElement + per-image Size
   field, Custom Class "sw-masonry-gallery" -- Gallery page) ---------- */
.sw-masonry-gallery .nova-gallery {
	grid-auto-rows: 240px;
	gap: 12px;
}

.sw-masonry-gallery .nova-gallery__img--tall {
	grid-row: span 2;
}

@media (max-width: 35em) {
	.sw-masonry-gallery .nova-gallery {
		grid-template-columns: 1fr 1fr !important;
		grid-auto-rows: 160px;
	}
}

/* ---------- FAQ accordion (core AccordionElement, Custom Class
   "sw-faq" -- FAQ page) ---------- */
.sw-faq {
	max-width: 850px;
	margin-inline: auto;
}

.sw-faq .nova-accordion__item {
	border: none;
	border-bottom: 1px solid var(--sw-line);
	border-radius: 0;
	padding: 22px 0;
	margin-bottom: 0;
}

.sw-faq .nova-accordion__title {
	font-weight: 700;
	color: var(--sw-navy);
	font-size: 17px;
}

.sw-faq .nova-accordion__content {
	color: var(--sw-muted);
}

/* ---------- Contact form (core ContactFormElement, Custom Class
   "sw-contact-form" -- Contact page) ---------- */
.sw-contact-form {
	padding: 32px;
	border: 1px solid var(--sw-line);
	border-radius: 22px;
	background: var(--sw-white);
}

.sw-contact-form .nova-contact-form__input {
	padding: 14px;
	border-radius: 10px;
	font-size: 17px;
}

.sw-contact-form .nova-contact-form__label {
	font-size: 17px;
}

.sw-contact-form .nova-contact-form__submit {
	border-radius: 999px;
	padding: 14px 28px;
	font-size: 17px;
}

/* ---------- Blog listing page (core PostsGridElement, id "blog-listing-
   grid" -- distinct from the homepage's own "blog-grid" instance, so this
   card+chip look only ever applies here, never touching the homepage's
   plain-text-tag teaser strip). Same card shape as
   TextCardGridElement's .sw-text-card, since both come from this design's
   shared .card component. ---------- */
.nova-el-blog-listing-grid .nova-posts-grid {
	gap: 20px;
	margin-top: 45px;
}

.nova-el-blog-listing-grid .nova-posts-grid__item {
	border: 1px solid var(--sw-line);
	border-radius: 20px;
	background: var(--sw-white);
	padding: 28px;
	box-shadow: 0 10px 35px rgba(12, 35, 64, .04);
}

.nova-el-blog-listing-grid .nova-posts-grid__thumbnail {
	height: 220px;
	border-radius: 14px;
	overflow: hidden;
	margin: -10px -10px 20px;
}

.nova-el-blog-listing-grid .nova-posts-grid__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.nova-el-blog-listing-grid .nova-posts-grid__tag {
	display: inline-block;
	background: var(--sw-teal-soft);
	color: var(--sw-teal-dark);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 800;
	margin-bottom: 10px;
}

.nova-el-blog-listing-grid .nova-posts-grid__title {
	font: 600 27px / 1.1 var(--zenith-font-heading, serif);
	color: var(--sw-navy);
	margin: 0 0 8px;
}

.nova-el-blog-listing-grid .nova-posts-grid__title a {
	color: inherit;
	text-decoration: none;
}

.nova-el-blog-listing-grid .nova-posts-grid__excerpt {
	color: var(--sw-muted);
	margin: 0;
}

@media (max-width: 56.25em) {
	.nova-el-blog-listing-grid .nova-posts-grid {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 35em) {
	.nova-el-blog-listing-grid .nova-posts-grid {
		grid-template-columns: 1fr !important;
	}
}