/**
 * Human visual color pass — white / warm off-white first.
 * Goal: eliminate section-band fatigue while scrolling.
 * Keep heroes, photography, CTA buttons, semantic callouts, small labels.
 * Do not alter logo assets.
 */

:root {
	--kjp-surface-white: #ffffff;
	--kjp-surface-offwhite: #f7f7f5;
}

/* Make-first tint tokens → neutral (ordinary sections only). */
:is(.page-discover--make, .page-travel--make, .page-hire--make, .page-products--make) {
	--mf-pink: var(--kjp-surface-white);
	--mf-warm: var(--kjp-surface-white);
	--mf-warm-2: var(--kjp-surface-offwhite);
}

/* TOP tint tokens used by section fills → neutral. */
body.home {
	--portal-rose: var(--kjp-surface-white);
	--portal-rose-strong: var(--kjp-surface-offwhite);
	--portal-cream: var(--kjp-surface-white);
	--portal-cream-strong: var(--kjp-surface-offwhite);
}

/* Generic section wrappers. */
.site-main > .section,
.site-main > .content-section,
.page-know .section,
.page-know .content-section,
.page-foundation .section,
.page-foundation .content-section,
.page-support .section,
.page-privacy .section,
.page-student-orientation .student-orient-section,
.page-student-write .student-guided-section {
	background-color: var(--kjp-surface-white) !important;
}

/* Make-first ordinary sections: always white (no warm/pink alternation). */
:is(.page-discover--make, .page-travel--make, .page-hire--make, .page-products--make) .mf-section,
:is(.page-discover--make, .page-travel--make, .page-hire--make, .page-products--make) .mf-section--warm,
:is(.page-discover--make, .page-travel--make, .page-hire--make, .page-products--make) .mf-section--pink {
	background-color: var(--kjp-surface-white) !important;
	background-image: none !important;
}

/* TOP: neutralize section-scale tint bands / cream / rose / blue gradients. */
body.home :is(
	.section-pale,
	.portal-connections,
	.activity-areas,
	.education-section,
	.work-section,
	.news-section,
	.support-section,
	.entry-primary,
	.entry-travel,
	.entry-know,
	.entry-support,
	.top-section-soft,
	.top-section-warm,
	.top-section-pink,
	.top-section-yellow,
	.top-section-blue,
	.top-products,
	.top-connections,
	.top-travel,
	.top-voices,
	.top-entrances,
	.final-cta
) {
	background-color: var(--kjp-surface-white) !important;
	background-image: none !important;
	border-color: rgba(0, 0, 0, 0.06);
}

body.home .connection-feature,
body.home .connection-feature--hire,
body.home .connection-feature--study,
body.home .product-feature,
body.home .travel-feature {
	background-color: var(--kjp-surface-white) !important;
	background-image: none !important;
}

/* Entrance cards: quiet off-white plate (small interactive cards OK). */
body.home .entrance-card {
	background-color: var(--kjp-surface-offwhite) !important;
	background-image: none !important;
}

body.home .voice-card {
	border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.home .voice-photo {
	background-color: #f0f0ee !important;
}

/* Legacy Phase 2 tinted surfaces. */
:is(.page-hire, .page-products, .page-discover, .page-travel) :is(
	.phase2-soft-red,
	.phase2-soft-yellow,
	.section-soft-red,
	.section-soft-yellow,
	.section-soft-blue,
	.section-pink,
	.section-yellow,
	.section-blue
) {
	background-color: var(--kjp-surface-white) !important;
}

/* Travel dark support flood → white (CTA button color untouched). */
.page-travel--make .travel-dark-support,
.page-travel--hub .content-section--travel-support,
.travel-dark-support {
	background-color: var(--kjp-surface-white) !important;
	color: #222 !important;
}

.page-travel--make .travel-dark-support .mf-title,
.page-travel--make .travel-dark-support .mf-lead,
.page-travel--make .travel-dark-support .mf-eyebrow,
.travel-dark-support .mf-title,
.travel-dark-support .mf-lead,
.travel-dark-support .mf-eyebrow {
	color: inherit !important;
}

.page-travel--make .travel-support-list,
.travel-dark-support .travel-support-list {
	border-color: rgba(0, 0, 0, 0.08) !important;
	background: var(--kjp-surface-offwhite) !important;
}

.page-travel--make .travel-support-list li,
.travel-dark-support .travel-support-list li {
	color: #444 !important;
}

/* Other page floods. */
.page-travel--hub .travel-prepare-section,
.page-products .products-inquiry,
.travel-support-hero,
.travel-support-journey,
.travel-support-intake,
.travel-support-inquiry,
.page-products .products-categories,
.page-products .products-makers,
.page-products .products-producer,
.page-discover .discover-explore,
.page-discover .discover-everyday,
.page-discover .discover-latest {
	background-color: var(--kjp-surface-white) !important;
	background-image: none !important;
	color: inherit;
}

.page-products .products-inquiry {
	color: #222 !important;
}

/* Keep color on controls only (no override). */
:is(.btn-primary, .btn-secondary, .mf-button, .chip, .tag, .badge, .notice, .callout, .header-contact) {
	/* Intentionally no background override. */
}

/* Travel geographic schematic. */
.travel-geo-section {
	background-color: var(--kjp-surface-white);
}

.travel-geo-figure {
	margin: 1.25rem 0 0;
	max-width: 420px;
}

.travel-geo-svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 420px;
	background: var(--kjp-surface-offwhite);
}

.travel-geo-svg .travel-geo-label {
	font-size: 11px;
	font-weight: 700;
	fill: #222;
	pointer-events: none;
}

.travel-geo-svg .travel-geo-compass,
.travel-geo-svg .travel-geo-hint {
	font-size: 10px;
	fill: #888;
	pointer-events: none;
}

.travel-geo-node {
	cursor: pointer;
}

.travel-geo-node:focus-visible circle,
.travel-geo-node:focus-visible ellipse {
	outline: 2px solid var(--color-red, #c8102e);
	outline-offset: 3px;
}

.travel-geo-caption {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #555;
}

/* Mobile bottom nav removed — kill leftover fixed-bar spacing. */
@media (max-width: 900px) {
	.mobile-bottombar {
		display: none !important;
	}

	body,
	body.site-shell,
	body.home.site-shell,
	.site-shell,
	.site-main {
		padding-bottom: 0 !important;
	}
}

@media (max-width: 767px) {
	.travel-geo-figure {
		max-width: none;
	}

	.travel-geo-svg .travel-geo-label {
		font-size: 12px;
	}
}

/* Travel places: horizontal scroll on mobile. */
.travel-region-grid--scroll-mobile {
	display: grid;
	gap: 0.75rem;
}

@media (max-width: 767px) {
	.travel-region-grid--scroll-mobile {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 0.75rem;
		padding-bottom: 0.5rem;
	}

	.travel-region-grid--scroll-mobile > .travel-region-card {
		flex: 0 0 min(82vw, 300px);
		scroll-snap-align: start;
	}
}

/* Partner pages (PR #102): mockup energy must not revive full-width floods. */
.partner-section,
.partner-section--blue,
.partner-section--pink,
.partner-section--intro,
.partner-dual-section,
.partner-compare,
.partner-fee-grid,
.partner-mini-timeline,
.page-study .partner-section,
.page-hire .partner-section,
.page-hire-japan .partner-section,
.page-hire-kyrgyzstan .partner-section {
	background-color: var(--kjp-surface-white) !important;
	background-image: none !important;
}

/* partner-compare was a blue flood with white type — restore readable ink on white. */
.partner-compare,
.partner-compare h2,
.partner-compare h3,
.partner-compare p,
.partner-compare a {
	color: var(--partner-ink, #1f2937) !important;
}

.partner-compare-grid {
	background: rgba(0, 0, 0, 0.06) !important;
}

.partner-compare-grid article {
	background: var(--kjp-surface-offwhite) !important;
	color: var(--partner-ink, #1f2937) !important;
}

/* Small plates / cards may keep subtle off-white; not full section bands. */
.partner-section .partner-fee-card,
.partner-section .partner-support-grid > article,
.partner-course-grid > article {
	background-color: var(--kjp-surface-offwhite);
}

/* Fee cards: keep top-border accent energy; drop full pink/blue plate floods. */
.partner-fee-grid article {
	background: var(--kjp-surface-offwhite) !important;
}

.partner-program-grid article,
.partner-schedule-grid article,
.partner-mini-timeline li,
.partner-monthly-note {
	background: var(--kjp-surface-offwhite) !important;
}

/* Visible standalone image labels must remain zero. */
.mf-image-label,
.ai-image-disclosure {
	display: none !important;
}