/*
Theme Name: Ipsum Wanzul
Template: ipsum
Author: Wan Zulkarnain
Description: Anak tema Ipsum untuk wanzul.net — hero satu post terbaharu, grid "More posts", switcher bahasa Melayu/English dalam header, dan gaya jadual/kad untuk telefon.
Version: 1.0.0
Requires at least: 7.2
Requires PHP: 7.4
Text Domain: ipsum-wanzul
*/

/* ---------- Header ---------- */

.wp-block-template-part .wp-block-site-title {
	flex: 0 0 auto;
	min-width: 0;
}

.wp-block-template-part .wp-block-site-title a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Polylang mendaratkan blok switcher dengan lebar 100%; dalam header ia mesti
   ikut kandungan, kalau tidak ia menolak navigasi keluar skrin. */
.wp-block-template-part .pll-switcher {
	flex: 0 0 auto;
	width: auto !important;
	max-width: none;
	align-self: center;
	white-space: nowrap;
	font-size: 0.875rem;
	font-family: var(--wp--preset--font-family--archivo);
	letter-spacing: 0.06em;
}

/* Baris header: kumpulan kiri boleh mengecil, kumpulan kanan tidak. */
.wp-block-template-part .wp-block-group.is-content-justification-space-between > .wp-block-group:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.wp-block-template-part .wp-block-group.is-content-justification-space-between > .wp-block-group:last-child {
	flex: 0 0 auto;
}

.wp-block-template-part .wp-block-site-tagline {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wp-block-template-part .pll-switcher-inner > a,
.wp-block-template-part .pll-switcher ul a {
	white-space: nowrap;
}

/* ---------- Hero (post terbaharu) ---------- */

.wz-hero {
	gap: var(--wp--preset--spacing--50);
	align-items: center !important;
	border-bottom: 1px solid var(--wp--preset--color--theme-4);
	padding-bottom: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--50);
}

.wz-hero-media {
	flex: 0 1 55%;
	min-width: 0;
}

.wz-hero-media img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}

.wz-hero-text {
	flex: 1 1 45%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.wz-hero-text .wp-block-post-title {
	margin: 0;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.wz-hero-text .wp-block-post-title a {
	text-decoration: none;
}

.wz-hero-text .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wz-kicker .wp-block-post-terms__separator {
	display: none;
}

.wz-kicker,
.wz-kicker a {
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--theme-3);
}

.wz-hero-text .wp-block-post-excerpt p {
	margin: 0;
	color: var(--wp--preset--color--theme-2);
	font-size: 1.0625rem;
	line-height: 1.55;
}

.wz-meta {
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--theme-2);
}

.wz-meta a {
	text-decoration: none;
}

/* ---------- Grid "More posts" ---------- */

.wz-more-heading {
	text-align: left;
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--theme-2);
	margin: 0 0 var(--wp--preset--spacing--40);
}

.wz-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
}

.wz-grid .wp-block-post-featured-image {
	margin: 0;
}

.wz-grid .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	border-radius: 2px;
}

.wz-grid .wp-block-post-title {
	flex: 1 1 auto;
	font-size: 1.125rem;
	line-height: 1.28;
	margin: 0;
	font-weight: 500;
}

.wz-grid .wp-block-post-title a {
	text-decoration: none;
}

.wz-grid .wp-block-post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wz-grid .wp-block-post-date {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--theme-2);
}

.wz-grid .wp-block-post-date a {
	text-decoration: none;
}

/* Ipsum letak post content penuh dalam index; kita guna kad sahaja. */
.wz-grid .wp-block-post-content {
	display: none;
}

/* ---------- Jadual & gambar dalam post ---------- */

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table figcaption {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--theme-2);
}

/* Kolum bacaan 640px terlalu sempit untuk jadual 4 lajur; pada desktop
   biarkan jadual keluar sedikit ke kiri dan kanan kolum. */
@media (min-width: 960px) {
	.single-post .wp-block-table {
		width: min(880px, calc(100vw - 96px)) !important;
		max-width: none !important;
		margin-left: calc(50% - min(440px, calc(50vw - 48px))) !important;
		margin-right: 0 !important;
	}

	.single-post .wp-block-table table {
		font-size: 0.9375rem;
	}
}

@media (max-width: 780px) {
	.wp-block-template-part .wp-block-site-tagline {
		display: none;
	}

	.wp-block-template-part .wp-block-navigation {
		padding-left: 0;
	}

	.wz-hero {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--30);
	}

	.wz-hero-media,
	.wz-hero-text {
		flex: 1 1 100%;
	}

	.wz-hero-text .wp-block-post-title {
		font-size: 1.6rem;
	}
}

@media (max-width: 700px) {
	table.wz-plans thead {
		display: none;
	}

	table.wz-plans tr {
		display: block;
		border: 1px solid var(--wp--preset--color--theme-4);
		padding: 0.7em 0.8em;
		margin: 0 0 0.8em;
	}

	table.wz-plans td {
		display: block;
		border: 0;
		padding: 0.18em 0;
	}

	table.wz-plans td::before {
		content: attr(data-label);
		display: block;
		font-family: var(--wp--preset--font-family--archivo-condensed);
		font-size: 0.7em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		opacity: 0.55;
	}

	table.wz-plans td:first-child::before {
		display: none;
	}

	.wp-block-table {
		font-size: 0.9375rem;
	}

	.wp-block-image figcaption {
		font-size: 0.8em;
	}
}

/* ---------- Pautan dalaman di hujung post ---------- */

.wz-related {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--theme-4);
}

.wz-related-label {
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: 0.8125rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--theme-2);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.wz-related ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.wz-related li {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.wz-related a {
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--theme-4);
	padding-bottom: 2px;
}

.wz-related a:hover {
	border-bottom-color: currentColor;
}

/* ---------- Senarai post: satu query, kad pertama jadi hero ---------- */

.wz-grid .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.wz-card-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	flex: 1 1 auto;
}

.wz-grid .wp-block-post-title {
	flex: 1 1 auto;
}

/* kad pertama */
.wz-grid > li.wp-block-post:first-child {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	margin-bottom: var(--wp--preset--spacing--60);
}

.wz-grid > li:first-child .wz-card-media {
	order: 1;
	margin: 0;
}

.wz-grid > li:first-child .wz-card-text {
	order: 2;
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--20);
}

.wz-grid > li:first-child .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
}

.wz-grid > li:first-child .wp-block-post-title {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	flex: 0 0 auto;
	margin: 0;
}

.wz-grid > li:first-child .wp-block-post-excerpt p {
	font-size: 1.0625rem;
	line-height: 1.55;
	margin: 0;
}

/* kad biasa: buang kicker, ringkasan dan nama penulis; tarikh kekal */
.wz-grid > li:not(:first-child) .wz-kicker,
.wz-grid > li:not(:first-child) .wp-block-post-excerpt,
.wz-grid > li:not(:first-child) .wp-block-post-author-name {
	display: none;
}

.wz-grid > li:not(:first-child) .wz-meta {
	display: flex;
}

/* ---------- Pagination ---------- */

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--archivo);
}

.wp-block-query-pagination a.page-numbers,
.wp-block-query-pagination .page-numbers {
	display: inline-block;
	padding: 0.35em 0.7em;
	border: 1px solid var(--wp--preset--color--theme-4);
	border-radius: 2px;
	text-decoration: none;
	font-size: 0.9375rem;
}

.wp-block-query-pagination .page-numbers.current {
	border-color: currentColor;
	font-weight: 600;
}

.wp-block-query-pagination a.page-numbers:hover {
	border-color: currentColor;
}

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

.wz-footer-row {
	border-top: 1px solid var(--wp--preset--color--theme-4);
	font-family: var(--wp--preset--font-family--archivo);
}

.wz-footer-copy p,
.wz-footer-nav p {
	margin: 0;
	color: var(--wp--preset--color--theme-2);
}

.wz-footer-nav {
	gap: var(--wp--preset--spacing--30);
}

.wz-footer-nav a {
	text-decoration: none;
}

.wz-footer-nav a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wz-footer-lang .pll-switcher {
	width: auto;
}

@media (max-width: 780px) {
	.wz-grid > li.wp-block-post:first-child {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.wz-grid > li:first-child .wz-card-media {
		order: 0;
	}

	.wz-grid > li:first-child .wz-card-text {
		order: 0;
	}

	.wz-footer-row {
		gap: var(--wp--preset--spacing--30);
	}
}

/* ---------- Halaman All posts ---------- */

.wz-archive .wz-kicker {
	display: block;
	margin-bottom: 0.35rem;
}

.wz-archive > li.wp-block-post {
	gap: var(--wp--preset--spacing--20);
}

.wz-archive .wp-block-post-title {
	font-size: 1.0625rem;
	line-height: 1.3;
}

/* ---------- Indeks All posts ---------- */

.wz-count {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.75em;
	color: var(--wp--preset--color--theme-2);
	font-weight: 400;
}

.wz-toc-date {
	display: block;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--wp--preset--color--theme-2);
	margin-top: 2px;
}

/* ---------- Pautan versi bahasa lain ---------- */

.wz-lang-link {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 0.9375rem;
	margin: 0 0 var(--wp--preset--spacing--30);
}

.wz-lang-link a {
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}