/* MIMO Movement: styles that theme.json cannot express. Tokens come from theme.json (--wp--preset--*). */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { text-wrap: balance; }

/* Sticky header */
.mimo-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.admin-bar .mimo-header { top: var(--wp-admin--admin-bar--height, 0px); }
.mimo-header .wp-block-navigation { font-weight: 500; font-size: var(--wp--preset--font-size--s); }
.mimo-header .wp-block-navigation a { color: var(--wp--preset--color--ink-2); }
.mimo-header .wp-block-navigation a:hover { color: var(--wp--preset--color--ink); text-decoration: none; }
.mimo-header .wp-block-button__link { padding: 0.55rem 1.1rem; font-size: 0.875rem; }
.mimo-logo img { height: 22px; width: auto; }

/* Eyebrow label */
.mimo-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-text);
}

/* Lead paragraph */
.mimo-lead {
	font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
	color: var(--wp--preset--color--ink-2);
	max-width: 46ch;
}

/* Sections: generous, consistent vertical rhythm */
.mimo-section { padding-block: var(--wp--preset--spacing--70); }
.mimo-hero { padding-block: var(--wp--preset--spacing--60); }
.mimo-hero h1 mark { background: none; color: var(--wp--preset--color--accent); }
.mimo-hero-img img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.mimo-photo img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.mimo-caption { font-size: 0.8125rem; color: var(--wp--preset--color--muted); }

/* Full-bleed grey bands: the group itself is alignfull, content stays constrained */
.mimo-band { background: var(--wp--preset--color--surface); }

/* Credo cards */
.mimo-credo { gap: 1rem; }
.mimo-credo > .wp-block-column { background: var(--wp--preset--color--base); border-radius: 16px; padding: 1.75rem 1.6rem; }
.mimo-credo-word { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--wp--preset--color--accent); margin: 0; }
.mimo-flow { font-weight: 700; font-size: 1.125rem; color: var(--wp--preset--color--ink-2); }

/* Ecosystem cards */
.mimo-cards { gap: 1rem; }
.mimo-card { background: var(--wp--preset--color--surface); border-radius: 20px; padding: 1.9rem 1.75rem; height: 100%; }
.mimo-card.is-main { background: var(--wp--preset--color--accent-soft); }
.mimo-card .mimo-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0; }
.mimo-card.is-main .mimo-tag { color: var(--wp--preset--color--accent-text); }
.mimo-card-link a { font-weight: 700; }

/* Journey pair */
.mimo-pair img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.mimo-pair .is-sketch img { object-fit: contain; background: #efefed; }
.mimo-year { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--wp--preset--color--accent-text); margin: 0.6rem 0 0; }

/* Join strip */
.mimo-join { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); border-radius: 28px; text-align: center; }
.mimo-join h2, .mimo-join p { color: inherit; }
.mimo-join .wp-block-button__link { background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }

/* Footer */
.mimo-footer { border-top: 1px solid var(--wp--preset--color--line); font-size: 0.875rem; color: var(--wp--preset--color--muted); }
.mimo-footer a { color: inherit; }
.mimo-sign { font-weight: 800; font-size: 1.125rem; color: var(--wp--preset--color--ink); }

@media (max-width: 781px) {
	.mimo-hero-img img { aspect-ratio: 4 / 3; }
}

/* Layout helpers */
.mimo-pad { padding-left: var(--wp--style--root--padding-left, 1.25rem); padding-right: var(--wp--style--root--padding-right, 1.25rem); }
.mimo-narrow { margin-left: 0 !important; margin-right: auto !important; max-width: 18ch; }
.mimo-lead { margin-left: 0 !important; margin-right: auto !important; }
.mimo-join h2.mimo-narrow, .mimo-join .mimo-lead { margin-left: auto !important; }
.mimo-join .mimo-narrow { max-width: 16ch; }

/* Mobile header: logo on the left; Gabung button, then hamburger, on the right. Nothing else. */
@media (max-width: 781px) {
	.mimo-header > .wp-block-group { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
	.mimo-header > .wp-block-group > .wp-block-group { gap: 0.5rem !important; flex-wrap: nowrap; }
	.mimo-header .wp-block-buttons { order: 1; }
	.mimo-header .wp-block-navigation { order: 2; }
	.mimo-header .wp-block-button__link { padding: 0.5rem 1rem; font-size: 0.8125rem; white-space: nowrap; }
	.mimo-logo img { height: 20px; }
	.mimo-header .wp-block-navigation__responsive-container-open { padding: 0.25rem; }
	/* Full-screen menu: big, easy tap targets */
	.mimo-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); padding: 1.5rem 1.25rem; }
	.mimo-header .is-menu-open .wp-block-navigation-item a { font-size: 1.75rem; font-weight: 800; color: var(--wp--preset--color--ink); }
}

/* ===== Gerakan page ===== */
.mimo-manifesto-wrap { display: flex; flex-direction: column; gap: 1.25rem; }
.mimo-manifesto { font-size: clamp(1.6rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; max-width: 24ch; margin: 0 !important; }
.mimo-wide img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.mimo-wide { margin-block: 1.5rem !important; }
.mimo-cards-4 { flex-wrap: wrap !important; }
.mimo-cards-4 > .wp-block-column { flex-basis: calc(25% - 1rem) !important; min-width: 220px; }
.mimo-credo-row { border-top: 1px solid var(--wp--preset--color--line); padding-block: 1.75rem; margin: 0 !important; gap: 1rem !important; }
.mimo-credo-row:last-of-type { border-bottom: 1px solid var(--wp--preset--color--line); }
.mimo-credo-row .mimo-credo-word { font-size: clamp(2rem, 5vw, 3.25rem); }

/* Care card */
.mimo-care { background: var(--wp--preset--color--base); border-radius: 20px; padding: 1.9rem 1.75rem; margin-top: var(--wp--preset--spacing--50); }
.mimo-care h3 { margin-bottom: 0.75rem; }

/* Timeline: vertical line on phones, horizontal scroller on desktop */
.mimo-timeline { margin-top: var(--wp--preset--spacing--50); display: flex; flex-direction: column; gap: 1.25rem; position: relative; padding-left: 1.5rem; border-left: 2px solid var(--wp--preset--color--line); }
.mimo-node { background: var(--wp--preset--color--base); border-radius: 20px; padding: 1.5rem; position: relative; }
.mimo-node::before { content: ""; position: absolute; left: calc(-1.5rem - 7px); top: 1.9rem; width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--accent); box-shadow: 0 0 0 4px var(--wp--preset--color--surface); }
.mimo-node.is-open::before { background: var(--wp--preset--color--surface); border: 2px solid var(--wp--preset--color--accent); }
.mimo-node.is-open { background: var(--wp--preset--color--accent-soft); }
.mimo-node img { border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; margin-bottom: 0.75rem; }
.mimo-node p { margin: 0; }
.mimo-node > * + * { margin-top: 0.6rem; }
.mimo-lane { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--accent-text); background: var(--wp--preset--color--accent-soft); padding: 0.2rem 0.6rem; border-radius: 99px; }
.mimo-node.is-open .mimo-lane { background: var(--wp--preset--color--base); }
.mimo-node-year { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
@media (min-width: 900px) {
	.mimo-timeline { flex-direction: row; align-items: stretch; border-left: 0; padding: 2rem 0 1rem; overflow-x: auto; scroll-snap-type: x proximity; gap: 1rem; }
	.mimo-node { flex: 0 0 260px; scroll-snap-align: start; }
	.mimo-node::before { left: 1.5rem; top: -1.5rem; z-index: 1; }
	.mimo-node::after { content: ""; position: absolute; left: -0.5rem; width: calc(100% + 1rem); top: calc(-1.5rem + 5px); height: 2px; background: var(--wp--preset--color--line); }
	.mimo-node:last-child::after { width: calc(50% + 0.5rem); }
}

/* ===== Ekosistem page ===== */
.mimo-steps { gap: 1rem !important; margin-top: var(--wp--preset--spacing--50) !important; flex-wrap: wrap !important; }
.mimo-steps > .wp-block-column { flex-basis: calc(25% - 1rem) !important; min-width: 220px; }
.mimo-step { padding-top: 0.5rem; }
.mimo-step h3 { font-size: 1.25rem; margin-block: 0.75rem 0.5rem; }
.mimo-step-no { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font-weight: 800; margin: 0; }
.mimo-hoomi-cols { gap: var(--wp--preset--spacing--60) !important; align-items: flex-start; }
.mimo-pillar { background: var(--wp--preset--color--base); border-radius: 20px; padding: 1.5rem 1.6rem; margin-bottom: 1rem; }
.mimo-pillar h3 { font-size: 1.25rem; margin-block: 0.6rem 0.4rem; }
.mimo-pillar p { margin: 0; }
.mimo-status { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 99px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--muted); }
.mimo-status.is-live { background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--accent-text); }
.mimo-hubnote { margin-top: var(--wp--preset--spacing--50); background: var(--wp--preset--color--accent-soft); border-radius: 20px; padding: 1.75rem; }
.mimo-hubnote-title { font-weight: 800; font-size: 1.25rem; }
.mimo-cards > .wp-block-column { display: flex; flex-direction: column; }
.mimo-cards .mimo-card { height: auto; flex: 1; }

/* ===== Gabung page / join form ===== */
.mimo-form-card { background: var(--wp--preset--color--surface); border-radius: 28px; padding: clamp(1.25rem, 4vw, 2.5rem); margin-top: var(--wp--preset--spacing--50); max-width: 760px; margin-left: 0 !important; }
.mimo-form fieldset { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
.mimo-form legend { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; padding: 0; }
.mimo-form legend .mimo-step-no { width: 1.9rem; height: 1.9rem; font-size: 0.9rem; flex: none; }
.mimo-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mimo-chip { cursor: pointer; position: relative; }
.mimo-chip input { position: absolute; opacity: 0; pointer-events: none; }
.mimo-chip-body { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.1rem; border-radius: 99px; background: var(--wp--preset--color--base); box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--line); font-weight: 600; font-size: 0.9375rem; color: var(--wp--preset--color--ink-2); transition: box-shadow 0.15s, background 0.15s; }
.mimo-chip:hover .mimo-chip-body { box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--accent); }
.mimo-chip input:checked + .mimo-chip-body { background: var(--wp--preset--color--accent-soft); box-shadow: inset 0 0 0 2px var(--wp--preset--color--accent); color: var(--wp--preset--color--accent-text); }
.mimo-chip input:focus-visible + .mimo-chip-body { outline: 3px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.mimo-field { display: block; margin-bottom: 1rem; }
.mimo-field > span { display: block; font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.35rem; }
.mimo-field em { font-style: normal; font-weight: 400; color: var(--wp--preset--color--muted); }
.mimo-field input { width: 100%; box-sizing: border-box; font: inherit; padding: 0.8rem 1rem; border-radius: 14px; border: 1.5px solid var(--wp--preset--color--line); background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }
.mimo-field input:focus { outline: 3px solid var(--wp--preset--color--accent-soft); border-color: var(--wp--preset--color--accent); }
.mimo-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mimo-form-error { color: #b42318; font-weight: 600; margin: 0 0 1rem; }
.mimo-form .wp-block-button__link { cursor: pointer; border: 0; font-family: inherit; }
.mimo-form .wp-block-button__link:disabled { opacity: 0.6; cursor: wait; }
.mimo-thanks { padding: 0.5rem 0; }
.mimo-thanks:focus { outline: none; }
.mimo-thanks-title { margin-bottom: 0.75rem; }
.mimo-thanks .mimo-nudge { margin-top: 1.5rem; font-weight: 700; color: var(--wp--preset--color--accent-text); }
.mimo-thanks .wp-block-buttons { margin-block: 1.25rem 0.5rem; }