/*
 * Phone layout (≤767px), plus the collapsed header up to 999px.
 * Selectors are long on purpose: they must beat Elementor's per-element rules.
 */

.elementor-element.nhh-menu { display: none; }

/* Header collapses into the menu button below 1000px, where the full nav no longer fits on one line. */
@media (max-width: 999px) {

	/* ---------- Header: compact, sticky, menu in a dropdown ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-header {
		position: sticky;
		top: 0;
		z-index: 60;
		--padding-top: 4px;
		--padding-bottom: 4px;
		--flex-wrap: nowrap;
		background-color: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: saturate(180%) blur(14px);
		backdrop-filter: saturate(180%) blur(14px);
	}
	.elementor-element.nhh-menu { display: block; }
	.elementor.elementor .elementor-element.elementor-element.nhh-header.nhh-menu-open { background-color: #FFFFFF; }
	/* Anchored sections land below the sticky header. */
	.elementor [id] { scroll-margin-top: 64px; }
	.nhh-header .nhh-menu-btn {
		position: relative;
		display: block;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid #ECECEE;
		border-radius: 999px;
		background: #FFFFFF;
		cursor: pointer;
	}
	.nhh-header .nhh-menu-btn:hover,
	.nhh-header .nhh-menu-btn:focus { background: #FFFFFF; border-color: #ECECEE; }
	.nhh-menu-btn:focus-visible { outline: 2px solid #7B68EE; outline-offset: 2px; }
	.nhh-menu-btn span {
		position: absolute;
		left: 13px;
		width: 18px;
		height: 2px;
		border-radius: 2px;
		background: #0B0B0C;
		transition: transform 0.2s ease, top 0.2s ease;
	}
	.nhh-menu-btn span:first-child { top: 17px; }
	.nhh-menu-btn span:last-child { top: 25px; }
	.nhh-menu-open .nhh-menu-btn span:first-child { top: 21px; transform: rotate(45deg); }
	.nhh-menu-open .nhh-menu-btn span:last-child { top: 21px; transform: rotate(-45deg); }

	.elementor.elementor .elementor-element.elementor-element.nhh-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		--flex-direction: column;
		--align-items: stretch;
		--gap: 0;
		--row-gap: 0;
		--column-gap: 0;
		--padding-top: 6px;
		--padding-bottom: 20px;
		--padding-left: 24px;
		--padding-right: 24px;
		background: #FFFFFF;
		border-bottom: 1px solid #ECECEE;
		box-shadow: 0 24px 40px -24px rgba(11, 11, 12, 0.35);
	}
	.nhh-menu-open .elementor.elementor .elementor-element.elementor-element.nhh-nav,
	.elementor.elementor .nhh-menu-open .elementor-element.elementor-element.nhh-nav { display: flex; }
	.elementor.elementor .nhh-nav .elementor-widget .elementor-button {
		width: 100%;
		justify-content: flex-start;
		padding: 15px 0;
		border-bottom: 1px solid #F4F4F5;
		font-size: 17px;
		color: #0B0B0C;
	}
	.elementor.elementor .nhh-nav .elementor-widget:last-child .elementor-button {
		justify-content: center;
		margin-top: 18px;
		padding: 14px 24px;
		border-bottom: 0;
		color: #FFFFFF;
		font-weight: 500;
	}

	/* Language menu inside the dropdown opens in place instead of floating over the menu. */
	.elementor.elementor .nhh-nav .nhh-lang-wrap { padding: 14px 0 0; }
	.nhh-nav .nhh-lang-menu { position: static; min-width: 0; margin-top: 8px; box-shadow: none; }
}

@media (max-width: 767px) {

	.elementor .elementor-widget .nhh-logo-img { height: 48px; }

	/* ---------- Hero ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-hero-ctas { --flex-direction: column; --gap: 10px; --row-gap: 10px; }
	.elementor.elementor .nhh-hero-ctas .elementor-widget { width: 100%; }
	.elementor.elementor .nhh-hero-ctas .elementor-button { width: 100%; justify-content: center; }
	.elementor.elementor .elementor-element.elementor-element.nhh-hero-card { --padding-top: 24px; --padding-bottom: 24px; --padding-left: 16px; --padding-right: 16px; border-radius: 24px; }
	.elementor.elementor .elementor-element.elementor-element.nhh-check-card { --padding-top: 22px; --padding-bottom: 22px; --padding-left: 20px; --padding-right: 20px; }

	/* ---------- Stats: 2 × 2 ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-stats {
		--e-con-grid-template-columns: repeat(2, minmax(0, 1fr));
		--gap: 26px 16px;
		--row-gap: 26px;
		--column-gap: 16px;
	}
	.elementor.elementor .nhh-stats .elementor-widget-heading .elementor-heading-title { font-size: 32px; }
	.elementor.elementor .nhh-stats .nhh-t { font-size: 14px; }

	/* ---------- Swipe carousels (features, channels) ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-carousel {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		gap: 12px;
		--width: calc(100% + 48px);
		width: calc(100% + 48px);
		max-width: none;
		margin-left: -24px;
		margin-right: -24px;
		padding: 0 24px 6px;
		scroll-padding-inline: 24px;
		scrollbar-width: none;
	}
	.nhh-carousel::-webkit-scrollbar { display: none; }
	.elementor.elementor .nhh-carousel > .e-con { flex: 0 0 80%; --width: 80%; scroll-snap-align: start; }
	.elementor.elementor .elementor-element.elementor-element.nhh-card { --padding-top: 22px; --padding-bottom: 22px; --padding-left: 20px; --padding-right: 20px; }

	/* ---------- Updates timeline ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-update { --padding-top: 20px; --padding-bottom: 20px; --gap: 4px 32px; --row-gap: 4px; }

	/* ---------- Fix an issue: search → chips → list → still stuck ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-fix { --flex-direction: column; --flex-wrap: nowrap; --gap: 0; --row-gap: 0; }
	.elementor.elementor .elementor-element.elementor-element.nhh-fix-left,
	.elementor.elementor .elementor-element.elementor-element.nhh-fix-right { display: contents; }
	.elementor.elementor .nhh-fix-right > .elementor-widget { order: 5; margin-top: 28px; }
	.elementor.elementor .elementor-element.elementor-element.nhh-stuck { order: 6; --margin-top: 16px; }
	.nhh-fix-chips {
		flex-wrap: nowrap !important; /* overrides the widget's inline wrap */
		overflow-x: auto;
		margin: 18px -24px 0 !important;
		padding: 0 24px 2px;
		scrollbar-width: none;
	}
	.nhh-fix-chips::-webkit-scrollbar { display: none; }
	.nhh-fix-chips button { flex: none; }

	/* ---------- Community ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-helper { --padding-top: 24px; --padding-bottom: 24px; --padding-left: 20px; --padding-right: 20px; }
	.elementor.elementor .nhh-helper > .elementor-widget-button { width: 100%; }
	.elementor.elementor .nhh-helper .elementor-button { width: 100%; justify-content: center; }

	/* ---------- Competition ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-prize--main { --padding-top: 24px; --padding-bottom: 24px; --padding-left: 20px; --padding-right: 20px; }
	.elementor.elementor .elementor-element.elementor-element.nhh-prize { --padding-left: 20px; --padding-right: 20px; }
	/* Steps join into one card on phones: shorter and easier to scan. */
	.elementor.elementor .elementor-element.elementor-element.nhh-enter { --gap: 0px; --row-gap: 0px; gap: 0; }
	.elementor.elementor .elementor-element.elementor-element.nhh-enter-step {
		--padding-top: 14px;
		--padding-bottom: 14px;
		--border-radius: 0;
		--border-top-width: 0px;
		border-radius: 0;
		border-top-width: 0;
	}
	.elementor.elementor .elementor-element.elementor-element.nhh-enter-step:first-child { --border-top-width: 1px; border-top-width: 1px; --border-radius: 18px 18px 0 0; border-radius: 18px 18px 0 0; }
	.elementor.elementor .elementor-element.elementor-element.nhh-enter-step:last-child { --border-radius: 0 0 18px 18px; border-radius: 0 0 18px 18px; }
	.nhh-chips { gap: 6px; }
	.nhh-chip { font-size: 13px; padding: 5px 12px; }

	/* ---------- FAQ: questions first, "Didn't find your answer?" after them ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-faq-section { --gap: 0px; --row-gap: 0px; }
	.elementor.elementor .elementor-element.elementor-element.nhh-faq-intro { display: contents; }
	.elementor.elementor .nhh-faq-section > .e-con:not(.nhh-faq-intro) { order: 5; margin-top: 24px; }
	.nhh-faq-item summary { padding: 16px; font-size: 16px; }
	.nhh-faq-body { padding: 0 16px 18px; font-size: 15px; }

	/* ---------- Community socials stack ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-socials { --e-con-grid-template-columns: minmax(0, 1fr); }
	.elementor.elementor .elementor-element.elementor-element.nhh-social { --padding-top: 22px; --padding-bottom: 22px; --padding-left: 20px; --padding-right: 20px; --gap: 22px; --row-gap: 22px; }

	/* ---------- Footer: link columns two-up ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-foot-cols { --e-con-grid-template-columns: repeat(2, minmax(0, 1fr)); --gap: 28px 20px; --row-gap: 28px; --column-gap: 20px; }

	/* ---------- Official help ---------- */
	.elementor.elementor .elementor-element.elementor-element.nhh-support-card { --padding-top: 20px; --padding-bottom: 20px; --padding-left: 20px; --padding-right: 20px; }
}

@media (max-width: 400px) {
	.nhh-prize-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.nhh-menu-btn span { transition: none; }
}

@media (max-width: 767px) {
	/* The chat card fills the column on phones (no inner padding from the old checklist card). */
	.elementor.elementor .elementor-element.elementor-element.nhh-hero-card--chat { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
	.elementor.elementor .elementor-element.elementor-element.nhh-hero-chat-card { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; max-width: none; height: auto; border-radius: 22px; }
}