/* =========================================================
 * NationVoice — Mission Hero
 * Heading with hand-drawn underline + scroll arrow + image
 * ========================================================= */

.nv-mh-wrapper {
	--nv-primary: #3c4d8c;
	--nv-orange: #f2a541;
	--nv-text-soft: #5e5e5e;
	--nv-bg: #ffffff;

	--nv-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--nv-trans: 0.35s var(--nv-ease);
	--nv-font-body: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	font-family: var(--nv-font-body);
}

.nv-mh-wrapper *, .nv-mh-wrapper *::before, .nv-mh-wrapper *::after { box-sizing: border-box; }

.elementor-page .nv-mh-wrapper,
.e-con .nv-mh-wrapper,
.elementor-widget-container .nv-mh-wrapper {
	font-family: var(--nv-font-body) !important;
}

/* Frame */
.nv-mh-wrapper .nv-mh {
	position: relative;
	width: 100%;
	background-color: var(--nv-bg);
	overflow: hidden;
}

.nv-mh-wrapper .nv-mh__container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px 0 0;
	position: relative;
}

/* Breadcrumb */
.nv-mh-wrapper .nv-mh__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 32px 24px;
	font-family: var(--nv-font-body) !important;
	font-size: 13px;
	color: var(--nv-primary) !important;
}

.nv-mh-wrapper .nv-mh__breadcrumb a {
	color: var(--nv-primary) !important;
	text-decoration: none !important;
	transition: opacity var(--nv-trans);
}

.nv-mh-wrapper .nv-mh__breadcrumb a:hover { opacity: 0.7; }

.nv-mh-wrapper .nv-mh__bc-current {
	color: var(--nv-orange) !important;
	font-weight: 500;
}

/* Grid: text + image */
.nv-mh-wrapper .nv-mh__grid {
	display: grid;
	grid-template-columns: 38fr 62fr;
	min-height: 85vh;
	align-items: center;
}

.nv-mh-wrapper .nv-mh--img-left .nv-mh__content { order: 2; }
.nv-mh-wrapper .nv-mh--img-left .nv-mh__media   { order: 1; }

/* Text column */
.nv-mh-wrapper .nv-mh__content {
	padding: 32px 32px 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}

.nv-mh-wrapper .nv-mh__heading-wrap {
	position: relative;
	display: inline-block;
	width: fit-content;
}

.nv-mh-wrapper .nv-mh__heading {
	margin: 0;
	font-family: var(--nv-font-body) !important;
	font-weight: 800;
	font-size: 112px;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--nv-orange) !important;
	max-width: 9ch;
}

/* Hand-drawn underline */
.nv-mh-wrapper .nv-mh__underline {
	display: block;
	width: 60%;
	max-width: 320px;
	height: 24px;
	margin-top: 4px;
	color: var(--nv-primary);
	overflow: visible;
	pointer-events: none;
}

.nv-mh-wrapper .nv-mh__underline path {
	stroke-dasharray: 700;
	stroke-dashoffset: 700;
	animation: nv-mh-draw 1.6s var(--nv-ease) 0.5s forwards;
}

@keyframes nv-mh-draw {
	to { stroke-dashoffset: 0; }
}

/* Scroll arrow */
.nv-mh-wrapper .nv-mh__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--nv-primary) !important;
	width: 32px;
	height: 40px;
	margin-top: 8px;
	transition: transform var(--nv-trans);
	animation: nv-mh-bob 1.8s ease-in-out infinite;
}

.nv-mh-wrapper .nv-mh__arrow:hover {
	transform: translateY(4px);
}

@keyframes nv-mh-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}

/* Image column */
.nv-mh-wrapper .nv-mh__media {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 540px;
	overflow: hidden;
	background-color: #f0f0f0;
}

.nv-mh-wrapper .nv-mh__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Responsive */
@media (max-width: 1024px) {
	.nv-mh-wrapper .nv-mh__heading { font-size: 72px; max-width: 12ch; }
	.nv-mh-wrapper .nv-mh__content { padding: 24px 24px 48px; }
	.nv-mh-wrapper .nv-mh__media { min-height: 480px; }
}

@media (max-width: 768px) {
	.nv-mh-wrapper .nv-mh__grid,
	.nv-mh-wrapper .nv-mh--img-left .nv-mh__grid {
		grid-template-columns: 1fr !important;
		min-height: auto;
	}

	.nv-mh-wrapper .nv-mh__content,
	.nv-mh-wrapper .nv-mh--img-left .nv-mh__content { order: 1; padding: 24px 16px 40px; align-items: center; text-align: center; }

	.nv-mh-wrapper .nv-mh__media,
	.nv-mh-wrapper .nv-mh--img-left .nv-mh__media { order: 2; min-height: 360px; }

	.nv-mh-wrapper .nv-mh__heading {
		font-size: 48px;
		max-width: 100%;
		text-align: center;
	}

	.nv-mh-wrapper .nv-mh__heading-wrap { margin: 0 auto; }
	.nv-mh-wrapper .nv-mh__underline { margin: 4px auto 0; }
	.nv-mh-wrapper .nv-mh__arrow { margin: 0 auto; }

	.nv-mh-wrapper .nv-mh__breadcrumb { padding: 8px 16px 16px; font-size: 12px; }
}