/* ============================================================================
   Monash homepage (front-page.php)
   Loaded only on the site front page (see functions.php → wp_enqueue_scripts).
   Plain CSS, no build step. Variables scoped to `.monash-home`.
   ============================================================================ */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Albert Sans'; src: url('../fonts/AlbertSans-Light.woff2')    format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/AlbertSans-Regular.woff2')  format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/AlbertSans-Italic.woff2')   format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/AlbertSans-Medium.woff2')   format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/AlbertSans-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/AlbertSans-Bold.woff2')     format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Albert Sans'; src: url('../fonts/AlbertSans-Black.woff2')    format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* ── Design tokens (scoped to the Monash home only) ──────────────────────── */
.monash-home {
	--white: #fff;
	--dark: #000;
	--charcoal: #2c2c2c;
	--cream: #FFFFEF;
	--cream-100: #E9E9CF;
	--monash-blue: #006DAE;
	--light-blue: #5198C1;
	--secondary-green: #83A00A;
	--secondary-orange: #F86700;
	--secondary-yellow: #FFBA00;
	--secondary-ruby: #CD2FB0;
	--grey-1: #969696;
	--grey-3: #E6E6E6;
	--duration: 0.1s;
	--ease: ease-out;
	font-family: 'Albert Sans', sans-serif;
}

/* ── Make the homepage fill the viewport + scroll-snap ───────────────────── */
body.home,
body:has(.monash-home-main) {
	margin: 0;
	overflow: hidden;
	height: 100vh;
}

.monash-home-main {
	height: 100vh;
	margin: 0 !important;
	padding: 0 !important;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	scroll-snap-type: y mandatory;
}
.monash-home-main::-webkit-scrollbar { display: none; }

.monash-home [data-section] {
	height: 100vh;
	scroll-snap-align: start;
}

.monash-home *,
.monash-home *::before,
.monash-home *::after {
	box-sizing: border-box;
}
.monash-home img { display: block; max-width: 100%; height: auto; object-fit: cover; }
.monash-home button { background: transparent; cursor: pointer; border: 0; color: inherit; font-family: inherit; }
.monash-home h1, .monash-home h2, .monash-home h3, .monash-home h4 { margin: 0; }
.monash-home p { margin: 0; }
.monash-home span { color: inherit; }
.monash-home a { text-decoration: none; color: inherit; }

/* ============================================================================
   1. BANNER
   ============================================================================ */
.monash-home .banner-section {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	row-gap: 1.3125rem;
	padding: 1.25rem 1.25rem 3.75rem;
	color: var(--cream);
	text-transform: uppercase;
}
.monash-home .banner-section__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.monash-home .banner-section__container { position: relative; z-index: 1; }
.monash-home .banner-section__title {
	font-size: 6rem;
	line-height: 0.78;
	font-weight: 900;
	max-width: 24.375rem;
}
.monash-home .banner-section__desc {
	max-width: 8.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.31;
	margin-bottom: 0.875rem;
}
.monash-home .banner-section .button-wrapper { position: relative; z-index: 2; }

@media (max-width: 575px) { .monash-home .banner-section__title { font-size: 5.25rem; } }
@media (max-width: 419px) { .monash-home .banner-section__title { font-size: 4.125rem; } }

/* ============================================================================
   2. THINKING — horizontal pair of scroll-snap panes
   ============================================================================ */
.monash-home .thinking-section {
	display: flex;
	width: 100%;
	height: 100vh;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	touch-action: pan-x;
	scrollbar-width: none;
}
.monash-home .thinking-section::-webkit-scrollbar { display: none; }

.monash-home .thinking-section-banner,
.monash-home .thinking-section__swiper {
	width: 100%;
	min-width: 100%;
	height: 100%;
	flex: 0 0 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.monash-home .thinking-section__swiper { position: relative; }

.monash-home .thinking-section-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7rem 1.25rem 4.375rem;
	background-color: var(--cream);
	position: relative;
}
.monash-home .thinking-section-banner__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	row-gap: 3.125rem;
	color: var(--monash-blue);
	max-width: 19.0625rem;
	height: 100%;
}
.monash-home .thinking-section-banner__title { font-size: 1.75rem; font-weight: 700; line-height: 1.21; }
.monash-home .thinking-section-banner__desc {
	font-size: 1.5rem;
	line-height: 1.33;
	text-transform: lowercase;
	color: var(--light-blue);
}
.monash-home .thinking-section-banner__span {
	color: var(--light-blue);
	font-size: 1.3125rem;
	font-weight: 300;
	line-height: 1.21;
	text-transform: lowercase;
}
.monash-home .thinking-section-banner__scroll {
	position: absolute !important;
	left: auto !important;
	right: 1.6875rem !important;
	bottom: 1.6875rem !important;
}

.monash-home .thinking-swiper {
	padding: 6.75rem 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	transition: background-color var(--duration) var(--ease);
	color: var(--cream);
	touch-action: pan-x;
}
.monash-home .thinking-swiper .swiper-slide { padding-inline: 2.3125rem; }
@media (max-width: 575px) {
	.monash-home .thinking-swiper { padding: 3.75rem 0; }
	.monash-home .thinking-swiper .swiper-slide { padding-inline: 1.5rem; }
}

/* Per-slide background colour switches via JS `data-active-index` */
.monash-home .thinking-swiper[data-active-index="0"] { background-color: var(--monash-blue); }
.monash-home .thinking-swiper[data-active-index="1"] { background-color: var(--secondary-green); }
.monash-home .thinking-swiper[data-active-index="2"] { background-color: var(--secondary-ruby); }

.monash-home .thinking-swiper .custom-pagination {
	padding: 0.625rem;
	width: fit-content;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.monash-home .thinking-swiper .custom-bullet { background-color: var(--cream); }

.monash-home .thinking-swiper__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-inline: 1.6875rem;
	position: relative;
}
.monash-home .thinking-section__scroll {
	position: static !important;
	transform: none !important;
	margin-left: auto;
}

/* ============================================================================
   3. PROGRAM STRUCTURE
   ============================================================================ */
.monash-home .program-structure {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 7.5rem 0 4.0625rem;
	background-color: var(--light-blue);
}
@media (max-width: 575px) { .monash-home .program-structure { padding: 5.3125rem 0 3.4375rem; } }
@media (max-width: 419px) { .monash-home .program-structure { padding: 2.8125rem 0 2.1875rem; } }

.monash-home .structure-swiper { padding: 1.25rem 0.5rem; height: 100%; }
.monash-home .structure-swiper .swiper-slide { padding-inline: 1.25rem; height: auto; }

.monash-home .program-structure__scroll {
	position: static;
	transform: none;
	margin-left: auto;
}
.monash-home .structure-swiper__actions {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 1.875rem;
	position: relative;
}
.monash-home .structure-swiper__actions .custom-pagination {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* ============================================================================
   4. STARTED
   ============================================================================ */
.monash-home .started-section {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7.625rem 1.25rem;
	background-color: var(--light-blue);
}
@media (max-width: 575px) { .monash-home .started-section { padding-block: 3.875rem; } }

/* ============================================================================
   CARDS
   ============================================================================ */
.monash-home .card-think {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 1.5625rem;
	text-align: center;
	height: 100%;
}
.monash-home .card-think__title { font-size: 1.75rem; font-weight: 600; line-height: 1.21; text-transform: lowercase; }
.monash-home .card-think__img { margin-bottom: 2.8125rem; }
.monash-home .card-think__desc { font-size: 1.375rem; }
@media (max-width: 575px) {
	.monash-home .card-think { row-gap: 2rem; }
	.monash-home .card-think__img { width: 8.75rem; }
}
@media (max-width: 419px) {
	.monash-home .card-think { row-gap: 1.5rem; }
	.monash-home .card-think__img { width: 5rem; margin-bottom: 1.5625rem; }
}

.monash-home .decore-line {
	display: block;
	width: 2.5rem;
	height: 2px;
	background-color: currentColor;
	opacity: 0.6;
}

.monash-home .card-structure {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	border-radius: 1.5625rem;
	box-shadow: 0 0.25rem 1.125rem 0 rgba(44,44,44,0.33);
	padding: 4.125rem 1.8125rem 3.4375rem;
	font-size: 1.5rem;
	line-height: normal;
	text-align: center;
	max-width: 24.375rem;
	margin: 0 auto;
	background-color: var(--cream);
	color: var(--monash-blue);
	row-gap: 1.25rem;
}
@media (max-width: 575px) { .monash-home .card-structure { padding: 2.75rem 1.25rem 2.1875rem; font-size: 1.375rem; } }
@media (max-width: 419px) { .monash-home .card-structure { font-size: 1.25rem; row-gap: 0.9375rem; padding: 1.5rem 1rem 1.5625rem; } }

.monash-home .card-structure__title { margin: 0; font-weight: 600; }
.monash-home .card-structure:not(:has(.card-structure__img)) .card-structure__title { margin-top: auto; }
.monash-home .card-structure__content { color: var(--light-blue); font-size: 1.125rem; }
@media (max-width: 419px) { .monash-home .card-structure__content { font-size: 1rem; } }
.monash-home .card-structure span { color: var(--light-blue); font-size: 0.9375rem; font-weight: 300; line-height: 1.06; margin-top: auto; }

/* ============================================================================
   START QUIZ CARD
   ============================================================================ */
.monash-home .start-quiz {
	padding: 5.125rem 1.875rem;
	margin-inline: 1.875rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	row-gap: 1lh;
	height: 100%;
	max-width: 24.375rem;
	border-radius: 2rem;
	position: relative;
	color: var(--cream);
	z-index: 2;
}
@media (max-width: 575px) { .monash-home .start-quiz { padding: 2rem 0.9375rem; row-gap: 0.5lh; } }
.monash-home .start-quiz::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: 2px solid var(--light-blue);
	border-radius: inherit;
	pointer-events: none;
	transform: translate(-0.1875rem, -0.3125rem);
}
.monash-home .start-quiz__title { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin-top: auto; }
.monash-home .start-quiz__content { font-size: 1.375rem; font-weight: 300; line-height: normal; max-width: 18.75rem; }
.monash-home .start-quiz__desc { font-size: 1rem; font-weight: 300; line-height: 1.3; max-width: 13.125rem; }
.monash-home .start-quiz .button-wrapper { margin-top: auto; }
@media (max-width: 575px) {
	.monash-home .start-quiz__title { font-size: 1.125rem; }
	.monash-home .start-quiz__content { font-size: 1rem; }
	.monash-home .start-quiz__desc { font-size: 0.875rem; }
}

/* ============================================================================
   BUTTON (twin-border accordion style)
   ============================================================================ */
.monash-home .button-wrapper {
	margin: 0 auto 0.75rem;
	position: relative;
	display: flex;
	align-items: center;
	justify-self: center;
}
.monash-home .button-wrapper::before,
.monash-home .button-wrapper::after {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	border: 2px solid currentColor;
	border-radius: inherit;
	transition: transform var(--duration) var(--ease);
	box-sizing: border-box;
	pointer-events: none;
}
.monash-home .button-wrapper::before { z-index: 2; height: 100%; transform: translateY(-2px); }
.monash-home .button-wrapper::after {
	z-index: 1;
	height: calc(100% - 18px);
	transform: translateY(12px);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top-color: transparent;
	bottom: 0;
}
.monash-home .button-wrapper:has(.button--big) { border-radius: 1.25rem; }
@media (max-width: 575px) { .monash-home .button-wrapper:has(.button--big) { border-radius: 0.9375rem; } }

.monash-home .button-wrapper:has(.button--orange)::before { border-color: var(--secondary-orange); }
.monash-home .button-wrapper:has(.button--orange)::after  { border-color: var(--secondary-orange); background-color: var(--secondary-orange); z-index: -1; }

@media (hover: hover) {
	.monash-home .button-wrapper:hover::before { transform: translateY(0); }
	.monash-home .button-wrapper:hover::after  { transform: translateY(2px); }
}

.monash-home .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: normal;
	text-transform: uppercase;
	border: 2px solid;
	min-width: 8.75rem;
	z-index: 1;
	font-family: inherit;
	text-decoration: none;
}
@media (max-width: 575px) { .monash-home .button { font-size: 1.125rem; min-width: 6.875rem; } }
.monash-home .button--big {
	padding: 0.90625rem 1.15625rem;
	border-radius: 1.25rem;
}
@media (max-width: 575px) { .monash-home .button--big { padding: 0.65625rem 0.90625rem; border-radius: 0.9375rem; } }
.monash-home .button--cream  { color: var(--cream); border-color: var(--cream-100); }
.monash-home .button--orange { background-color: var(--secondary-yellow); border-color: var(--secondary-yellow); color: var(--cream); }

/* ============================================================================
   SCROLL-DOWN ARROW
   ============================================================================ */
.monash-home .scroll-down {
	position: absolute;
	bottom: 3.625rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 0;
}

.monash-home .icon-round-arrow {
	width: 3.625rem;
	height: 3.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid currentColor;
	border-radius: 50%;
	position: relative;
	z-index: 2;
	transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
@media (max-width: 575px) { .monash-home .icon-round-arrow { width: 2.375rem; height: 2.375rem; } }
.monash-home .icon-round-arrow::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	border-width: inherit;
	border-radius: inherit;
	border-style: inherit;
	border-color: currentColor;
	z-index: 1;
	transition: inherit;
	transform: translate(1.5px, 3px);
}
.monash-home .icon-round-arrow--blue   { color: var(--light-blue); }
.monash-home .icon-round-arrow--crema  { color: var(--cream); }
.monash-home .icon-round-arrow__svg {
	width: 1.25rem;
	height: 2.5rem;
	stroke: currentColor;
}
@media (max-width: 575px) {
	.monash-home .icon-round-arrow__svg { width: 0.625rem; height: 1.25rem; }
}

/* ============================================================================
   SWIPER PAGINATION
   ============================================================================ */
.monash-home .custom-pagination {
	text-align: center;
	padding: 0.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.monash-home .custom-bullet {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	opacity: 0.3;
	transition: opacity var(--duration) var(--ease);
	border-radius: 50%;
	margin-inline: 0.25rem;
	cursor: pointer;
}
.monash-home .program-structure .custom-bullet { background-color: var(--cream); }
.monash-home .custom-bullet-active { opacity: 1; }