/* Cross-page responsive safeguards. Page-specific styles remain authoritative. */
:root {
	--site-gutter: clamp(16px, 4vw, 48px);
}

html {
	max-width: 100%;
	overflow-x: clip;
}

body,
main,
section {
	max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
	max-width: 100%;
}

img,
video {
	height: auto;
}

table {
	max-width: 100%;
}

input,
select,
textarea,
button {
	max-width: 100%;
	font: inherit;
}

:where(h1, h2, h3, h4, p, li, a, span, strong) {
	overflow-wrap: anywhere;
}

:where(.container, .isi, .content-container, .page-container, .section-container) {
	width: min(100%, 1280px);
	margin-inline: auto;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 3px solid #ffc928;
	outline-offset: 3px;
}

@media (max-width: 900px) {
	body > nav {
		--mobile-menu-top: 88px;
		min-height: 88px;
		padding-inline: 16px;
	}

	body > nav.has-top-info-panel {
		--mobile-menu-top: 148px;
	}

	.nav-container {
		min-width: 0;
	}

	.logo {
		min-width: 0;
		max-width: calc(100% - 64px);
	}

	.logo-text {
		min-width: 0;
		font-size: clamp(13px, 3.6vw, 19px);
		line-height: 1.15;
	}

	.hamburger {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: fixed;
		top: max(12px, env(safe-area-inset-top));
		right: max(14px, env(safe-area-inset-right));
		z-index: 8000;
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		margin: 0;
	}

	.nav-links {
		display: none;
	}

	/* Satu bahasa visual menu mobile untuk seluruh halaman, mengikuti Home. */
	body > nav .nav-links-mobile {
		top: var(--mobile-menu-top);
		max-height: calc(100vh - var(--mobile-menu-top));
		max-height: calc(100dvh - var(--mobile-menu-top));
		padding: 20px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: rgba(124, 8, 4, 0.98);
		border-bottom: 1px solid rgba(255, 201, 40, 0.28);
		box-shadow: 0 24px 48px rgba(55, 4, 3, 0.3);
		backdrop-filter: blur(18px);
	}

	.nav-links-mobile a {
		min-height: 52px;
		color: #fff8ee;
		touch-action: manipulation;
	}

	.nav-links-mobile a:hover,
	.nav-links-mobile a:focus-visible {
		border-left-color: #ffc928;
		background: rgba(255, 201, 40, 0.09);
		color: #ffe48b;
	}

	.nav-links-mobile a.active {
		border-left-color: #ffc928;
		background: rgba(255, 201, 40, 0.13);
		color: #ffdf66;
	}

	.nav-links-mobile a:focus-visible {
		outline: 3px solid #ffc928;
		outline-offset: -3px;
	}

	.top-info-panel {
		max-width: min(76vw, 390px);
	}

	:where(.grid, [class$="__grid"], [class*="-grid"]) {
		min-width: 0;
	}

	:where(.card, [class$="__card"], [class*="-card"]) {
		min-width: 0;
	}

	.whatsapp-float {
		right: max(14px, env(safe-area-inset-right));
		bottom: max(14px, env(safe-area-inset-bottom));
	}
}

@media (max-width: 560px) {
	body > nav {
		padding: 10px 14px;
	}

	body > nav.has-top-info-panel {
		--mobile-menu-top: 158px;
	}

	.logo-icon {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
	}

	.top-info-panel {
		width: min(100% - 32px, 360px);
		max-width: none;
	}

	:where(.container, .isi, .content-container, .page-container, .section-container) {
		padding-inline: 16px;
	}

	:where(.btn, button, [class$="__button"], [class*="-button"]) {
		min-height: 44px;
	}

	:where(table):not(.no-responsive-table) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.whatsapp-label {
		display: none;
	}

	.whatsapp-float {
		width: 56px;
		height: 56px;
		padding: 10px;
		border-radius: 50%;
	}
}

@media (min-width: 901px) {
	.nav-links-mobile,
	.nav-links-mobile.active {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}