/*
 * Karangtalun theme: styles theme.json cannot express.
 * Mobile first: base rules target 375 px, wider screens are added with min-width.
 * Colors and sizes always come from theme.json tokens (var(--wp--preset--...)).
 */

/* ---------- Base ---------- */

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--50));
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	height: auto;
	max-width: 100%;
}

/* Minimum 44 px touch targets. */
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-query-pagination a {
	min-height: var(--wp--custom--touch-target);
}

.wp-block-button__link,
.wp-element-button {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.screen-reader-text:focus {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	z-index: 1000;
}

/* Header/footer template part wrappers must not add their own spacing. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block: 0;
}

.wp-site-blocks > main {
	margin-block-start: 0;
}

/* ---------- Floating rounded header ---------- */

/*
 * Sticky goes on the <header> template part wrapper (a direct child of .wp-site-blocks);
 * sticky on the inner Group would only stick within the template part's own height.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

/* The WordPress admin bar is not sticky at ≤600 px. */
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

.kt-header__bar {
	min-height: var(--wp--custom--header-height);
	padding: 6px 6px 6px var(--wp--preset--spacing--40);
}

.kt-brand {
	color: var(--wp--preset--color--primary);
}

.kt-brand__icon {
	display: block;
	flex: 0 0 auto;
}

.kt-header .wp-block-site-title {
	white-space: nowrap;
}

/* Menu button: solid green circle. */
.kt-header .wp-block-navigation__responsive-container-open {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--surface);
	justify-content: center;
	min-width: var(--wp--custom--touch-target);
}

.kt-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--primary-hover);
}

.kt-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-width: var(--wp--custom--touch-target);
}

/* Menu links: touch-target height, text vertically centred. */
.kt-header .wp-block-navigation-item__content {
	align-items: center;
	display: flex;
}

/* Overlay menu (phone): large left-aligned links. */
.kt-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.kt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--70);
}

.kt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.kt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.kt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
}

.kt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

.kt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0;
	padding-left: var(--wp--preset--spacing--40) !important;
	padding-top: 0 !important;
}

.kt-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* Current page (works for links pointing to a page ID). */
.kt-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.kt-header .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

/* The "Saran & Keluhan" pill only shows on wide screens; on phones it lives in the overlay menu. */
.kt-header .kt-header__cta {
	display: none;
}

/*
 * Core switches the menu to its wide mode at 600 px, but six items plus the pill only fit
 * from about 1200 px. Between 600 and 1199 px keep the phone-style menu button.
 */
@media (min-width: 600px) and (max-width: 1199.98px) {
	.kt-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.kt-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (min-width: 1200px) {
	.kt-header .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--50) !important;
	}

	.kt-header {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--20) !important;
	}

	.kt-header__bar {
		border-radius: 36px !important;
		padding: 10px 12px 10px 28px;
	}

	.kt-brand__icon {
		height: 28px;
		width: 28px;
	}

	.kt-header .kt-header__cta {
		display: flex;
	}

	/* On wide screens the pill already stands for Saran & Keluhan. */
	.kt-header .kt-nav-feedback {
		display: none;
	}

	.kt-header .wp-block-navigation__submenu-container {
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--line) !important;
		border-radius: var(--wp--custom--radius--card);
		box-shadow: var(--wp--preset--shadow--soft);
		min-width: 220px !important;
		padding: var(--wp--preset--spacing--20);
	}

	.kt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		border-radius: var(--wp--custom--radius--small);
		font-weight: 400;
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	}

	.kt-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		background: var(--wp--preset--color--base-2);
		text-decoration: none;
	}
}

/* ---------- Footer ---------- */

.kt-footer a {
	text-decoration: none;
}

.kt-footer a:hover {
	text-decoration: underline;
}

.kt-footer p {
	margin: 0;
}

.kt-footer .wp-block-navigation-item__content {
	align-items: center;
	display: flex;
	padding-block: 0;
}

/* Phone: brand spans the full row, link columns sit two per row below it. */
.kt-footer__brand {
	grid-column: 1 / -1;
}

.kt-footer .wp-block-site-title {
	font-size: var(--wp--preset--font-size--large);
}

@media (min-width: 782px) {
	.kt-footer__grid {
		grid-template-columns: 2fr repeat(3, 1fr) !important;
	}

	.kt-footer__brand {
		grid-column: auto;
	}

	.kt-footer .wp-block-navigation-item__content {
		min-height: 0;
		padding-block: 5px;
	}
}

/* ---------- Block style: Card ---------- */

.is-style-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--40);
}

/* Post card in news lists. */
.kt-post-card {
	height: 100%;
	overflow: hidden;
}

.kt-post-card .wp-block-post-featured-image {
	margin: 0;
}

.kt-post-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 10;
	border-radius: 0;
	object-fit: cover;
}

.kt-post-card .wp-block-post-title {
	line-height: 1.3;
}

.kt-post-card .wp-block-post-excerpt__excerpt {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
}

/* ---------- Block style: Timeline (Group/List) ---------- */

.is-style-timeline {
	--kt-timeline-dot: 12px;
	border-left: 1.5px solid var(--wp--preset--color--line);
	list-style: none;
	margin-left: calc(var(--kt-timeline-dot) / 2);
	padding-left: var(--wp--preset--spacing--50) !important;
}

.is-style-timeline > * {
	position: relative;
}

.is-style-timeline > *::before {
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	content: "";
	height: var(--kt-timeline-dot);
	left: calc(-1 * var(--wp--preset--spacing--50) - var(--kt-timeline-dot) / 2 - 0.75px);
	position: absolute;
	top: 0.4em;
	width: var(--kt-timeline-dot);
}

.is-style-timeline > * + * {
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------- Back link (organization pages, detail pages) ---------- */

.kt-back-link a {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	gap: var(--wp--preset--spacing--10);
	min-height: var(--wp--custom--touch-target);
	text-decoration: none;
}

/* ======================================================================
 * Patterns (stage 4)
 * ====================================================================== */

/* ---------- Line icons (CSS mask, icon files in assets/icons) ---------- */

.kt-icon {
	--kt-icon: url(../icons/users.svg);
	--kt-icon-size: 44px;
	align-items: center;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	box-sizing: border-box;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	flex: 0 0 var(--kt-icon-size);
	height: var(--kt-icon-size);
	justify-content: center;
	width: var(--kt-icon-size);
}

.kt-icon::before {
	background-color: currentColor;
	content: "";
	height: 50%;
	-webkit-mask: var(--kt-icon) center / contain no-repeat;
	mask: var(--kt-icon) center / contain no-repeat;
	width: 50%;
}

.kt-icon--sm { --kt-icon-size: 40px; }
.kt-icon--lg { --kt-icon-size: 56px; }

.kt-icon--water { --kt-icon: url(../icons/water.svg); }
.kt-icon--chat { --kt-icon: url(../icons/chat.svg); }
.kt-icon--calendar { --kt-icon: url(../icons/calendar.svg); }
.kt-icon--document { --kt-icon: url(../icons/document.svg); }
.kt-icon--alert { --kt-icon: url(../icons/alert.svg); }
.kt-icon--phone { --kt-icon: url(../icons/phone.svg); }
.kt-icon--map-pin { --kt-icon: url(../icons/map-pin.svg); }
.kt-icon--tools { --kt-icon: url(../icons/tools.svg); }

/* Organization icon picked from the page slug (kt-slug-* on body or query loop item). */
.kt-slug-pkk .kt-icon--org { --kt-icon: url(../icons/heart.svg); }
.kt-slug-posyandu .kt-icon--org { --kt-icon: url(../icons/health.svg); }
.kt-slug-karang-taruna .kt-icon--org { --kt-icon: url(../icons/star.svg); }
.kt-slug-kelompok-tani .kt-icon--org { --kt-icon: url(../icons/sprout.svg); }
.kt-slug-takmir-masjid .kt-icon--org { --kt-icon: url(../icons/mosque.svg); }
.kt-slug-kp-spams .kt-icon--org { --kt-icon: url(../icons/water.svg); }

.kt-chevron {
	background-color: var(--wp--preset--color--contrast-3);
	flex: 0 0 18px;
	height: 18px;
	-webkit-mask: url(../icons/chevron-right.svg) center / contain no-repeat;
	mask: url(../icons/chevron-right.svg) center / contain no-repeat;
	width: 18px;
}

/* ---------- Small shared pieces ---------- */

.kt-chip {
	align-self: flex-start;
	background: var(--wp--preset--color--primary-soft);
	border-radius: 6px;
	color: var(--wp--preset--color--primary-hover);
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	text-transform: uppercase;
}

.kt-lead {
	font-size: var(--wp--preset--font-size--medium);
}

.kt-section-head {
	margin-bottom: var(--wp--preset--spacing--40);
}

.kt-section-head__link a,
.kt-more-link a {
	align-items: center;
	display: inline-flex;
	font-weight: 600;
	min-height: var(--wp--custom--touch-target);
	text-decoration: none;
}

/* Buttons that fill the width on phones. */
.kt-buttons-stretch .wp-block-button,
.kt-hero__cta .wp-block-button {
	flex: 1 1 100%;
}

.kt-buttons-stretch .wp-block-button__link,
.kt-hero__cta .wp-block-button__link {
	width: 100%;
}

@media (min-width: 600px) {
	.kt-buttons-stretch .wp-block-button,
	.kt-hero__cta .wp-block-button {
		flex: 0 0 auto;
	}
}

/* WhatsApp button with a line icon. */
.kt-button-wa .wp-block-button__link {
	gap: var(--wp--preset--spacing--20);
}

.kt-button-wa .wp-block-button__link::before {
	background-color: currentColor;
	content: "";
	flex: 0 0 20px;
	height: 20px;
	-webkit-mask: url(../icons/whatsapp.svg) center / contain no-repeat;
	mask: url(../icons/whatsapp.svg) center / contain no-repeat;
	width: 20px;
}

/* Whole card clickable through its first link (stretched link). */
.kt-link-card,
.kt-org-row,
.kt-org-card {
	position: relative;
}

.kt-link-card a,
.kt-org-row .wp-block-post-title a,
.kt-org-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.kt-link-card a::after,
.kt-org-row .wp-block-post-title a::after,
.kt-org-card .wp-block-post-title a::after {
	border-radius: inherit;
	content: "";
	inset: 0;
	position: absolute;
}

.kt-link-card:hover,
.kt-org-card:hover {
	border-color: var(--wp--preset--color--primary);
}

.kt-link-card a:focus-visible,
.kt-org-row .wp-block-post-title a:focus-visible,
.kt-org-card .wp-block-post-title a:focus-visible {
	outline: none;
}

.kt-link-card:focus-within,
.kt-org-row:focus-within,
.kt-org-card:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.kt-link-card p {
	margin: 0;
}

/* ---------- Hero ---------- */

.kt-hero__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.kt-hero__text > * {
	margin-block: 0;
}

.kt-hero__text > * + * {
	margin-top: var(--wp--preset--spacing--40);
}

.kt-hero__art {
	margin: 0;
}

.kt-hero__art img {
	aspect-ratio: 520 / 250;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

@media (min-width: 782px) {
	.kt-hero__grid {
		align-items: center;
		column-gap: var(--wp--preset--spacing--70);
		grid-template-areas: "text art" "cta art";
		grid-template-columns: 1.15fr 1fr;
		row-gap: var(--wp--preset--spacing--50);
	}

	.kt-hero__text { grid-area: text; align-self: end; }
	.kt-hero__art { grid-area: art; }
	.kt-hero__cta { grid-area: cta; align-self: start; }

	.kt-hero__art img {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Stats ---------- */

.kt-stat p {
	margin: 0;
}

/* ---------- Organization list (home) ---------- */

.kt-org-row {
	align-items: center;
}

.kt-org-row__text {
	flex: 1 1 auto;
	min-width: 0;
}

.kt-org-row__text > * {
	margin: 0;
}

.kt-org-row .wp-block-post-title {
	line-height: 1.3;
}

/* Phone: one bordered list with dividers. */
@media (max-width: 781.98px) {
	.kt-org-list .wp-block-post-template {
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--card);
		display: block !important;
		overflow: hidden;
	}

	.kt-org-list .wp-block-post-template > li + li {
		border-top: 1px solid var(--wp--preset--color--line);
	}

	.kt-org-row {
		min-height: 52px;
		padding: 12px var(--wp--preset--spacing--40);
	}
}

/* Wide: separate cards. */
@media (min-width: 782px) {
	.kt-org-list .wp-block-post-template > li {
		background: var(--wp--preset--color--surface);
		border: 1px solid var(--wp--preset--color--line);
		border-radius: var(--wp--custom--radius--card);
	}

	.kt-org-list .wp-block-post-template > li:hover {
		border-color: var(--wp--preset--color--primary);
	}

	.kt-org-row {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}
}

.kt-org-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.kt-org-card > * {
	margin-block: 0;
}

/* ---------- Horizontal scroller (phone) → grid (wide) ---------- */

@media (max-width: 781.98px) {
	.kt-scroller {
		display: flex !important;
		gap: var(--wp--preset--spacing--30);
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px)) calc(-1 * var(--wp--style--root--padding-right, 16px));
		overflow-x: auto;
		padding-inline: var(--wp--style--root--padding-left, 16px);
		scroll-padding-inline: var(--wp--style--root--padding-left, 16px);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.kt-scroller::-webkit-scrollbar {
		display: none;
	}

	.kt-scroller > li {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
}

.kt-post-card__label {
	margin-bottom: var(--wp--preset--spacing--10);
}

/* ---------- Numbered steps ---------- */

.kt-steps {
	counter-reset: kt-step;
	display: grid;
	gap: 0;
	list-style: none;
	padding: 0;
}

.kt-steps > li {
	color: var(--wp--preset--color--contrast-3);
	counter-increment: kt-step;
	font-size: var(--wp--preset--font-size--small);
	min-height: 36px;
	padding: 6px 0 var(--wp--preset--spacing--50) 50px;
	position: relative;
}

.kt-steps > li strong {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.kt-steps > li::before {
	align-items: center;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--wp--preset--color--primary);
	content: counter(kt-step);
	display: flex;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	height: 36px;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 36px;
}

.kt-steps > li:first-child::before {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

/* Connector line between steps. */
.kt-steps > li:not(:last-child)::after {
	background: var(--wp--preset--color--line);
	bottom: 4px;
	content: "";
	left: 17px;
	position: absolute;
	top: 40px;
	width: 1.5px;
}

@media (min-width: 782px) {
	.kt-steps:not(.kt-steps--vertical) {
		gap: var(--wp--preset--spacing--50);
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	}

	.kt-steps:not(.kt-steps--vertical) > li {
		padding: 48px 0 0;
	}

	.kt-steps:not(.kt-steps--vertical) > li:not(:last-child)::after {
		bottom: auto;
		height: 1.5px;
		left: 44px;
		right: 8px;
		top: 17px;
		width: auto;
	}
}

/* ---------- Call to action box ---------- */

/* Flex column with its own gap: the zeroed child margins (which also drop WordPress' blockGap)
   would otherwise leave heading, stats, text and button touching. */
.kt-cta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.kt-cta > * {
	margin-block: 0;
}

/* The link already has a 44px touch target; pull it up so it reads as part of the button row. */
.kt-cta > .kt-cta__link {
	margin-top: calc(-1 * var(--wp--preset--spacing--30));
}

.kt-cta .kt-cta__buttons .wp-block-button {
	flex: 1 1 100%;
}

.kt-cta .kt-cta__buttons .wp-block-button__link {
	width: 100%;
}

.kt-cta .kt-cta__link {
	text-align: center;
}

.kt-cta .kt-cta__link a {
	align-items: center;
	display: inline-flex;
	min-height: var(--wp--custom--touch-target);
}

.kt-cta a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--surface);
	font-weight: 600;
}

@media (min-width: 782px) {
	/* Button and "Lihat tindak lanjut" side by side; everything else stays full width. */
	.kt-cta {
		align-items: center;
		column-gap: var(--wp--preset--spacing--50);
		flex-flow: row wrap;
	}

	.kt-cta > * {
		flex: 1 1 100%;
	}

	.kt-cta > .kt-cta__buttons,
	.kt-cta > .kt-cta__link {
		flex: 0 0 auto;
		margin-top: 0;
	}

	.kt-cta .kt-cta__buttons .wp-block-button {
		flex: 0 0 auto;
	}

	.kt-cta .kt-cta__link {
		text-align: left;
	}
}

/* ---------- Schedule, chips, contacts, table, map ---------- */

.kt-schedule {
	align-items: center;
}

.kt-schedule p {
	margin: 0;
}

.kt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
}

.kt-chips > li {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--small);
	padding: 6px 12px;
}

.kt-contact-list__row {
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30);
}

.kt-contact-list__row + .kt-contact-list__row {
	border-top: 1px solid var(--wp--preset--color--line);
}

.kt-contact-list__row p {
	margin: 0;
}

.kt-contact-list__row p:last-child {
	text-align: right;
}

.kt-table table {
	background: var(--wp--preset--color--surface);
	border-collapse: collapse;
	border-radius: var(--wp--custom--radius--card);
	font-size: var(--wp--preset--font-size--small);
	overflow: hidden;
	width: 100%;
}

.kt-table th,
.kt-table td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	text-align: left;
}

.kt-table thead {
	border-bottom: 0;
}

.kt-table th {
	background: var(--wp--preset--color--base-2);
	font-weight: 600;
}

.kt-map iframe,
.wp-block-html iframe[src*="openstreetmap"] {
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	height: 320px;
	width: 100%;
}

/* Two plain (no background) sections in a row share one gap instead of two. */
.wp-block-post-content > section.alignfull:not(.has-background) + section.alignfull:not(.has-background) {
	padding-top: 0 !important;
}

/* Jump links at the top of Saran & Keluhan. */
.kt-jump-links .wp-block-button__link {
	min-height: 40px;
	padding: 8px 14px;
}

.kt-jump-links .is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--line);
	padding: 7px 13px;
}

/* ---------- Organization page (additional sections) ---------- */

.kt-slug-tpq-al-hidayah .kt-icon--org { --kt-icon: url(../icons/book.svg); }
.kt-slug-klub-sepak-bola .kt-icon--org { --kt-icon: url(../icons/ball.svg); }
.kt-slug-grup-hadroh .kt-icon--org { --kt-icon: url(../icons/drum.svg); }

.kt-org-facts {
	margin-top: var(--wp--preset--spacing--20);
}

.kt-org-facts .kt-stat p {
	margin: 0;
}

.kt-checklist {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
}

.kt-checklist > li {
	padding-left: 32px;
	position: relative;
}

.kt-checklist > li::before {
	background: var(--wp--preset--color--primary-soft);
	border-radius: 50%;
	content: "";
	height: 22px;
	left: 0;
	position: absolute;
	top: 1px;
	width: 22px;
}

.kt-checklist > li::after {
	background: var(--wp--preset--color--primary);
	content: "";
	height: 14px;
	left: 4px;
	-webkit-mask: url(../icons/check.svg) center / contain no-repeat;
	mask: url(../icons/check.svg) center / contain no-repeat;
	position: absolute;
	top: 5px;
	width: 14px;
}

.kt-join > * {
	margin-block: 0;
}

/*
 * Sections that only make sense with data hide themselves while empty:
 * gallery without photos, agenda without upcoming events, no projects for this organization.
 */
.kt-org-gallery:not(:has(.kt-slide)),
.kt-org-agenda:has(.kt-events__empty),
.kt-org-projects:has(.kt-projects__empty) {
	display: none;
}

/* Keep them visible in the editor so they can be filled in. */
.editor-styles-wrapper .kt-org-gallery,
.editor-styles-wrapper .kt-org-agenda,
.editor-styles-wrapper .kt-org-projects {
	display: block !important;
}

/* ---------- Pagination (Kabar, arsip, pencarian) ---------- */

.wp-block-query-pagination {
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	justify-content: center;
	min-height: var(--wp--custom--touch-target);
	min-width: var(--wp--custom--touch-target);
	padding: 0 14px;
	text-decoration: none;
}

.wp-block-query-pagination .page-numbers:not(.dots) {
	padding: 0;
	width: var(--wp--custom--touch-target);
}

/* Phones: page numbers on their own row, then Sebelumnya / Berikutnya side by side. */
@media (max-width: 599px) {
	.wp-block-query-pagination-numbers {
		flex: 1 1 100%;
		justify-content: center;
		order: -1;
	}
}

.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: auto;
}

/* Category label above a post title: at least 24 px tall to tap (WCAG 2.5.8). */
.wp-block-post-terms a {
	display: inline-block;
	padding-block: 4px;
}