/*
Theme Name: Matchamart
Theme URI: https://matchamart.id
Author: Matchamart
Description: Tema blok untuk website Matchamart (Supplier Matcha Indonesia). Semua teks, harga, foto, warna, dan menu bisa diedit langsung di editor WordPress. Saat diaktifkan, tema otomatis membuat halaman Beranda, Pure Matcha, White Label & Maklon, Kemitraan, Peralatan, serta Resep & HPP.
Version: 1.0.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: matchamart
*/

/* =========================================================
   Warna & ukuran utama. Warna juga bisa diganti lewat
   Tampilan > Editor > Gaya > Warna (palet "Hijau tua", dst).
   ========================================================= */
:root {
	--mm-green-dark: var(--wp--preset--color--hijau-tua, #26402B);
	--mm-green: var(--wp--preset--color--hijau, #3F6B3A);
	--mm-sage: var(--wp--preset--color--sage, #8FB074);
	--mm-sage-light: var(--wp--preset--color--sage-muda, #DDE8C2);
	--mm-cream: var(--wp--preset--color--krem, #F6F8F1);
	--mm-amber: var(--wp--preset--color--amber, #E8B04A);
	--mm-ink: var(--wp--preset--color--teks, #17231A);
	--mm-white: var(--wp--preset--color--putih, #FFFFFF);
	--mm-container: 1120px;
	--mm-radius: 12px;
	--mm-border: 2px solid var(--mm-ink);
	--mm-section-gap: 56px;
}

body {
	margin: 0;
	background: var(--mm-cream);
	color: var(--mm-ink);
	-webkit-font-smoothing: antialiased;
}

.wp-site-blocks {
	padding: 0;
}

/* Blok template (header, konten, footer) menempel tanpa jarak. */
.wp-site-blocks > * ,
.wp-site-blocks > * + * {
	margin-block: 0;
}

/* Bagian halaman menempel satu sama lain. */
.mm-main > *,
.mm-main > * + * {
	margin-block: 0 !important;
}

/* Reset jarak bawaan di dalam desain, jarak diatur per komponen di bawah. */
body .mm-header :where(h1, h2, h3, h4, p, ul, figure),
body .mm-section :where(h1, h2, h3, h4, p, ul, figure),
body .mm-footer :where(h1, h2, h3, h4, p, ul, figure),
body .mm-section :where(.wp-block-group, .wp-block-buttons),
body .mm-header :where(.wp-block-group, .wp-block-buttons),
body .mm-footer :where(.wp-block-group) {
	margin: 0;
}

.mm-container {
	box-sizing: border-box;
	width: calc(100% - 32px);
	max-width: var(--mm-container);
	margin-inline: auto !important;
}

.mm-section a,
.mm-footer a {
	color: inherit;
	text-decoration: none;
}

/* =========================================================
   Tombol
   ========================================================= */
.mm-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mm-btns--center {
	justify-content: center;
}

.mm-btn .wp-block-button__link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 0 24px;
	border: var(--mm-border);
	border-radius: 999px;
	background: var(--mm-amber);
	color: var(--mm-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform .15s ease, filter .15s ease;
}

.mm-btn .wp-block-button__link:hover {
	filter: brightness(1.04);
	transform: translateY(-1px);
}

.mm-btn--outline .wp-block-button__link {
	background: transparent;
}

.mm-btn--on-dark .wp-block-button__link {
	color: var(--mm-white);
	min-height: 52px;
}

.mm-btn--sm .wp-block-button__link {
	min-height: 44px;
	padding: 0 20px;
	font-size: 14px;
}

/* =========================================================
   Header
   ========================================================= */
.mm-header {
	background: var(--mm-cream);
	border-bottom: 1px solid var(--mm-sage-light);
}

.mm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	gap: 24px;
}

.mm-logo {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--mm-green-dark);
}

.mm-logo a {
	color: inherit;
	text-decoration: none;
}

.mm-header__right {
	display: flex;
	align-items: center;
	gap: 29px;
}

.mm-header__right > * {
	margin: 0 !important;
}

.mm-nav {
	font-size: 15px;
}

.mm-nav .wp-block-navigation__container {
	gap: 24px;
}

.mm-nav .wp-block-navigation-item__content {
	position: relative;
	color: var(--mm-ink);
	text-decoration: none;
}

.mm-nav .wp-block-navigation-item__content:hover {
	color: var(--mm-green);
}

.mm-nav .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 700;
}

.mm-nav .current-menu-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	height: 3px;
	border-radius: 2px;
	background: var(--mm-amber);
}

/* =========================================================
   Komponen umum
   ========================================================= */
.mm-stack {
	display: flex;
	flex-direction: column;
	gap: var(--mm-section-gap);
}

.mm-block {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.mm-h2 {
	font-size: 38px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--mm-ink);
}

.mm-grid {
	display: grid;
	gap: 24px;
}

.mm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mm-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.mm-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: var(--mm-radius);
}

.mm-card--sage { background: var(--mm-sage-light); }
.mm-card--sage-mid { background: var(--mm-sage); }
.mm-card--dark { background: var(--mm-green-dark); color: var(--mm-white); }
.mm-card--dark .mm-card__title { color: var(--mm-white); }

.mm-card--outline {
	padding: 24px;
	background: var(--mm-white);
	border: var(--mm-border);
}

.mm-card__title {
	font-size: 21px;
	line-height: 1.45;
	color: inherit;
}

.mm-card .mm-card__title + * {
	margin-top: 8px;
}

.mm-card__desc {
	font-size: 14.5px;
	line-height: 23px;
}

.mm-more {
	font-size: 14px;
	font-weight: 700;
	line-height: 23px;
}

.mm-more a:hover {
	text-decoration: underline;
}

.mm-more--green {
	color: var(--mm-green);
}

.mm-chip {
	width: fit-content;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--mm-sage-light);
	color: var(--mm-ink);
	font-size: 13px;
	font-weight: 700;
	line-height: 24px;
}

.mm-chip--sm {
	font-size: 12px;
}

.mm-photo {
	overflow: hidden;
	border-radius: var(--mm-radius);
	background: var(--mm-sage-light);
}

.mm-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Daftar dengan tanda centang */
.mm-check {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.mm-check li {
	position: relative;
	margin: 0;
	padding-left: 26px;
	font-size: 16px;
	line-height: 24px;
}

.mm-check li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--mm-green);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
}

/* =========================================================
   Bagian gelap (hero halaman, ajakan WhatsApp, lokasi)
   ========================================================= */
.mm-dark {
	background: var(--mm-green-dark);
	color: var(--mm-cream);
}

.mm-dark .mm-h2,
.mm-dark h1,
.mm-dark h2,
.mm-dark h3 {
	color: var(--mm-cream);
}

.mm-page-hero {
	padding: 44px 0 53px;
}

.mm-page-title {
	font-size: 52px;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.mm-page-sub {
	max-width: 690px;
	margin-top: 8px !important;
	font-size: 16px;
	line-height: 26px;
	color: #D6E7AC;
}

.mm-body {
	padding: 60px 0;
}

.mm-cta {
	padding: 56px 0 50px;
	text-align: center;
}

.mm-cta__title {
	margin-bottom: 20px !important;
}

/* =========================================================
   Beranda
   ========================================================= */
.mm-home {
	padding: 64px 0 60px;
}

.mm-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 548px;
	gap: 64px;
	align-items: start;
}

.mm-hero__text {
	padding-top: 8px;
}

.mm-display {
	margin-top: 8px !important;
	font-size: 66px;
	line-height: 68px;
	letter-spacing: -0.012em;
	color: var(--mm-green-dark);
}

.mm-lead {
	margin-top: 24px !important;
	font-size: 18px;
	line-height: 29.5px;
}

.mm-hero__text .mm-btns {
	margin-top: 28px !important;
}

.mm-photo--hero {
	height: 380px;
}

.mm-home .mm-grid--3 > .mm-card {
	min-height: 140px;
}

.mm-card--sage p,
.mm-card--sage-mid p,
.mm-card--dark p {
	font-size: 16px;
	line-height: 26px;
}

.mm-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	text-align: center;
}

.mm-stat__num {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--mm-green-dark);
}

.mm-stat__label {
	font-size: 16px;
	line-height: 22px;
}

.mm-card--explore .mm-card__desc {
	margin-top: 10px !important;
}

.mm-quote .mm-quote__text {
	letter-spacing: -0.012em;
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
}

.mm-quote .mm-quote__by {
	margin-top: 8px !important;
	font-size: 14px;
	line-height: 20px;
}

.mm-visit {
	padding: 60px 0;
}

.mm-visit__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 548px;
	gap: 64px;
	align-items: start;
}

.mm-visit__text .mm-h2 {
	margin-top: -5px !important;
}

.mm-visit__place {
	margin-top: 24px !important;
	font-size: 21px;
	line-height: 1.5;
}

.mm-visit__text p {
	margin-top: 10px !important;
	font-size: 16px;
	line-height: 26px;
}

.mm-visit__text .mm-btns {
	margin-top: 28px !important;
}

.mm-photo--map {
	height: 300px;
}

/* =========================================================
   Pure Matcha / produk
   ========================================================= */
.mm-photo--product {
	height: 120px;
	border-radius: 10px;
}

.mm-product .mm-photo--product + * {
	margin-top: 12px !important;
}

.mm-product__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.mm-card .mm-product__head .mm-card__title + * {
	margin-top: 0;
}

.mm-badge {
	padding: 0 12px;
	border-radius: 999px;
	background: var(--mm-amber);
	color: var(--mm-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
}

.mm-prices {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 16px !important;
}

.mm-price__value {
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
}

.mm-price__size {
	margin-top: 3px !important;
	font-size: 12px;
	line-height: 16px;
	color: #444;
}

.mm-product .mm-more {
	margin-top: 14px !important;
}

.mm-product .mm-card__desc + .mm-more {
	margin-top: 12px !important;
}

.mm-note {
	margin-top: 14px !important;
	font-size: 13.5px;
	color: #444;
}

/* =========================================================
   White label & maklon
   ========================================================= */
.mm-offer .mm-chip + .mm-card__title {
	margin-top: 10px !important;
}

.mm-offer .mm-card__desc {
	margin-top: 10px !important;
}

.mm-offer .mm-check {
	margin-top: 8px !important;
}

.mm-photo--offer {
	height: 150px;
	margin-top: 20px !important;
}

.mm-format .mm-check {
	margin-top: 16px !important;
	padding-bottom: 8px;
}

/* =========================================================
   Kemitraan
   ========================================================= */
.mm-scheme__title {
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.mm-scheme .mm-card__desc {
	margin-top: 12px !important;
	line-height: 23.5px;
}

.mm-scheme .mm-check {
	margin-top: 32px !important;
}

.mm-for {
	margin-top: 20px !important;
	padding: 22px 48px 24px 24px;
	border-radius: var(--mm-radius);
	background: var(--mm-sage-light);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 20px;
}

.mm-reason {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 76px;
	padding: 12px 16px;
	border: var(--mm-border);
	border-radius: var(--mm-radius);
	background: var(--mm-white);
	font-size: 16px;
	font-weight: 700;
	text-align: center;
}

.mm-reasons {
	row-gap: 25px;
}

/* =========================================================
   Footer
   ========================================================= */
.mm-footer {
	padding: 54px 0 48px;
	background: var(--mm-green-dark);
	color: var(--mm-cream);
}

.mm-footer__grid {
	display: grid;
	grid-template-columns: 447fr 351fr 322fr;
	gap: 0;
}

.mm-footer__col {
	padding-right: 24px;
}

.mm-footer__col:last-child {
	padding-right: 0;
}

.mm-footer__title {
	color: var(--mm-white);
	font-size: 16px;
	line-height: 22px;
}

.mm-footer p {
	margin-top: 10px !important;
	font-size: 14.5px;
	line-height: 23px;
}

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

/* Halaman blog / bawaan */
.mm-blog {
	padding: 60px 0;
	min-height: 40vh;
}

/* =========================================================
   Tablet & HP
   ========================================================= */
@media (max-width: 1100px) {
	.mm-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mm-hero,
	.mm-visit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 40px; }
	.mm-display { font-size: 54px; line-height: 58px; }
}

@media (max-width: 900px) {
	.mm-header__inner { min-height: 64px; }
	.mm-header__right { gap: 12px; }
	.mm-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--mm-cream); }
	.mm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 18px; font-size: 20px; }
	.mm-nav .current-menu-item > .wp-block-navigation-item__content::after { bottom: -4px; }

	.mm-hero,
	.mm-visit__grid { grid-template-columns: 1fr; gap: 32px; }
	.mm-grid--3,
	.mm-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.mm-photo--hero { height: 300px; }
}

@media (max-width: 600px) {
	:root { --mm-section-gap: 44px; }
	.mm-logo { font-size: 24px; }
	.mm-header__cta .wp-block-button__link { padding: 0 16px; }
	.mm-display { font-size: 42px; line-height: 46px; }
	.mm-lead { font-size: 17px; line-height: 27px; }
	.mm-h2 { font-size: 30px; }
	.mm-page-title { font-size: 38px; }
	.mm-home { padding-top: 40px; }
	.mm-page-hero { padding: 36px 0 40px; }
	.mm-body { padding: 44px 0; }
	.mm-grid--2,
	.mm-grid--3,
	.mm-grid--5 { grid-template-columns: 1fr; }
	.mm-stat__num { font-size: 32px; }
	.mm-photo--hero { height: 240px; }
	.mm-photo--map { height: 240px; }
	.mm-footer__grid { grid-template-columns: 1fr; row-gap: 28px; }
	.mm-btn .wp-block-button__link { min-height: 50px; }
}