/*
Theme Name:  BMC Theme — Big Market Culinary
Description: Theme khusus website Big Market Culinary. Bekerja bersama plugin "BMC Core" untuk menampilkan Home (pemesanan online), Event (3 status otomatis), Tenant, dan About Us. Konten sepenuhnya diatur klien dari dashboard.
Version:     1.0.2
Author:      Etera Studio
Text Domain: bmc-theme
*/

/* ============================================================
   TOKEN — identitas visual "festival kuliner"
   Merah–emas hangat khas pasar/festival, bukan warna template.
   ============================================================ */
:root {
	--paper:      #FFFDF7; /* putih hangat */
	--cream:      #F6EEDD; /* panel */
	--cream-deep: #EFE2C6;
	--ink:        #241C15; /* espresso, ganti hitam murni */
	--ink-soft:   #5A4E42;
	--red:        #C1272D; /* merah pasar */
	--red-deep:   #8E1B20;
	--gold:       #E8A73C; /* kunyit */
	--gold-deep:  #B9801F;
	--green:      #2F7D52; /* status "sedang berlangsung" */
	--line:       rgba(36, 28, 21, .14);
	--shadow:     0 10px 30px rgba(36, 28, 21, .12);

	--font-display: 'Anton', 'Arial Narrow', sans-serif;
	--font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
	--font-mono:    'Space Mono', ui-monospace, monospace;

	--wrap: 1120px;
}

/* ============================================================
   DASAR
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--paper);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); }

.bmc-wrap {
	width: min(100% - 40px, var(--wrap));
	margin-inline: auto;
}

/* Aksesibilitas: fokus keyboard terlihat */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 2px;
}

/* ============================================================
   HEADER — spanduk merek pasar
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
	border-bottom: 3px solid var(--ink);
}
.site-header__bar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0 12px;
}

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand__logo img { max-height: 56px; width: auto; }
.brand__text {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	letter-spacing: .01em;
	color: var(--red);
	line-height: .95;
	text-transform: uppercase;
}
/* garis emas tipis di bawah merek, kesan papan nama */
.brand__text span { display: block; }

.brand__provider {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .04em;
	color: var(--ink-soft);
	text-align: right;
	align-self: flex-end;
	max-width: 220px;
}

/* Navigasi */
.site-nav ul {
	list-style: none;
	display: flex;
	gap: 6px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.site-nav a {
	display: inline-block;
	padding: 8px 14px;
	font-weight: 700;
	font-size: .92rem;
	text-decoration: none;
	color: var(--ink);
	border-radius: 999px;
	transition: background .15s, color .15s;
}
.site-nav a:hover,
.site-nav .current-menu-item > a {
	background: var(--red);
	color: #fff;
}

.header-nav-row {
	border-top: 1px solid var(--line);
	padding: 6px 0;
}

/* ============================================================
   TOMBOL
   ============================================================ */
.btn {
	display: inline-block;
	font-weight: 700;
	font-size: .95rem;
	padding: 13px 26px;
	border-radius: 999px;
	text-decoration: none;
	border: 2px solid var(--ink);
	background: var(--gold);
	color: var(--ink);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.btn--red { background: var(--red); color: #fff; border-color: var(--red-deep); }
.btn--red:hover { box-shadow: 0 6px 0 var(--red-deep); }

/* ============================================================
   HERO / HOME
   ============================================================ */
.home-hero {
	background:
		radial-gradient(120% 120% at 100% 0%, rgba(232,167,60,.25), transparent 55%),
		var(--cream);
	border-bottom: 3px solid var(--ink);
	padding: 64px 0;
}
.home-hero__eyebrow {
	font-family: var(--font-mono);
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--red-deep);
	margin-bottom: 12px;
}
.home-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 7vw, 4.6rem);
	line-height: .95;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 16px;
}
.home-hero__sub {
	font-size: 1.1rem;
	max-width: 520px;
	color: var(--ink-soft);
	margin: 0 0 28px;
}

/* Kotak embed pemesanan */
.order-embed {
	padding: 48px 0 72px;
}
.order-embed__frame {
	background: #fff;
	border: 3px solid var(--ink);
	border-radius: 16px;
	box-shadow: var(--shadow);
	overflow: hidden;
	min-height: 320px;
}
.order-embed__frame iframe { width: 100%; min-height: 620px; border: 0; display: block; }

.embed-placeholder {
	padding: 48px 28px;
	text-align: center;
	color: var(--ink-soft);
	font-family: var(--font-mono);
	font-size: .9rem;
}

/* ============================================================
   JUDUL BAGIAN (banner)
   ============================================================ */
.section {
	padding: 56px 0;
}
.section:nth-child(even) { background: var(--paper); }

.section-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}
.section-head__eyebrow {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--red-deep);
}
.section-head__title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 5vw, 3rem);
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
	color: var(--ink);
}
.section-head__count {
	font-family: var(--font-mono);
	font-size: .85rem;
	color: var(--ink-soft);
	background: var(--cream-deep);
	padding: 3px 12px;
	border-radius: 999px;
}

/* garis pemisah tebal antar bagian status */
.status-block + .status-block { border-top: 2px dashed var(--line); }

/* ============================================================
   KARTU EVENT — gaya "tiket / tag stall"
   ============================================================ */
.event-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 26px;
}

.event-card {
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* flyer portrait 9:16 (1080x1920) — bisa diklik */
.event-card__flyer {
	display: block;
	aspect-ratio: 9 / 16;
	background: var(--cream);
	position: relative;
	overflow: hidden;
}
.event-card__flyer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.event-card:hover .event-card__flyer img { transform: scale(1.04); }

.event-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 8px; }

.event-card__date {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .02em;
	color: var(--red-deep);
}
.event-card__title {
	font-weight: 800;
	font-size: 1.12rem;
	line-height: 1.25;
	margin: 0;
}
.event-card__title a { color: var(--ink); text-decoration: none; }
.event-card__title a:hover { color: var(--red); }
.event-card__excerpt { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* Chip status */
.chip {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: 999px;
	font-weight: 700;
}
.chip--upcoming { background: #FBEFD3; color: var(--gold-deep); }
.chip--ongoing  { background: #E1F0E7; color: var(--green); }
.chip--past     { background: #F3DEDE; color: var(--red-deep); }

.chip--ongoing .dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 0 rgba(47,125,82,.6);
	animation: bmc-pulse 1.6s infinite;
}
@keyframes bmc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(47,125,82,.55); }
	70%  { box-shadow: 0 0 0 8px rgba(47,125,82,0); }
	100% { box-shadow: 0 0 0 0 rgba(47,125,82,0); }
}

/* Kartu "akan datang" = teks saja (tanpa flyer), tampil beda & lebih ringkas */
.event-card--textonly {
	background: var(--cream);
	border-style: dashed;
}
.event-card--textonly .event-card__body { padding: 20px; gap: 10px; }

/* ============================================================
   TENANT — kartu berlogo yang bisa diklik
   ============================================================ */
.tenant-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 18px;
}
.tenant-card {
	background: #fff;
	border: 2px solid var(--ink);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .15s ease;
}
.tenant-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

.tenant-card__logo {
	aspect-ratio: 1 / 1;
	background: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-bottom: 2px solid var(--ink);
}
.tenant-card__logo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }

.tenant-card__initial {
	font-family: var(--font-display);
	font-size: 3rem;
	color: var(--red);
	line-height: 1;
}
.tenant-card__name {
	padding: 14px 16px;
	font-weight: 700;
	text-align: center;
}

/* Halaman detail tenant */
.single-tenant {
	display: grid;
	grid-template-columns: minmax(0, 300px) 1fr;
	gap: 40px;
	padding: 48px 0 72px;
	align-items: start;
}
.single-tenant__logo {
	aspect-ratio: 1 / 1;
	border: 3px solid var(--ink);
	border-radius: 14px;
	overflow: hidden;
	background: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
}
.single-tenant__logo img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }

@media (max-width: 720px) {
	.single-tenant { grid-template-columns: 1fr; }
	.single-tenant__logo { max-width: 240px; }
}

/* ============================================================
   HALAMAN BIASA (About Us) & konten
   ============================================================ */
.page-hero {
	background: var(--cream);
	border-bottom: 3px solid var(--ink);
	padding: 48px 0;
}
.page-hero__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 6vw, 3.4rem);
	text-transform: uppercase;
	margin: 0;
	color: var(--ink);
}
.page-content {
	padding: 48px 0 72px;
	font-size: 1.05rem;
}
.page-content h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.page-content img { border-radius: 10px; margin: 12px 0; }

.empty-note {
	background: var(--cream);
	border: 2px dashed var(--line);
	border-radius: 12px;
	padding: 28px;
	text-align: center;
	color: var(--ink-soft);
	font-family: var(--font-mono);
	font-size: .9rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
	background: var(--ink);
	color: #F3ECE0;
	padding: 40px 0 30px;
	margin-top: 40px;
}
.site-footer__brand {
	font-family: var(--font-display);
	font-size: 1.6rem;
	text-transform: uppercase;
	color: var(--gold);
}
.site-footer__provider {
	font-family: var(--font-mono);
	font-size: .78rem;
	color: #C9BEAE;
	margin-top: 6px;
}
.site-footer__note { margin-top: 14px; color: #C9BEAE; font-size: .9rem; max-width: 520px; }

/* Notifikasi admin bila plugin belum aktif */
.bmc-plugin-warning {
	background: var(--red);
	color: #fff;
	text-align: center;
	padding: 12px;
	font-weight: 700;
}

/* ============================================================
   SINGLE EVENT
   ============================================================ */
.single-event {
	display: grid;
	grid-template-columns: minmax(0, 340px) 1fr;
	gap: 40px;
	padding: 48px 0 72px;
	align-items: start;
}
.single-event__flyer {
	aspect-ratio: 9 / 16;
	border: 3px solid var(--ink);
	border-radius: 14px;
	overflow: hidden;
	background: var(--cream);
	position: sticky;
	top: 100px;
}
.single-event__flyer img { width: 100%; height: 100%; object-fit: cover; }
.single-event__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	text-transform: uppercase;
	line-height: 1;
	margin: 10px 0 14px;
}

/* ============================================================
   RESPONSIF
   ============================================================ */
@media (max-width: 860px) {
	.single-event { grid-template-columns: 1fr; }
	.single-event__flyer { position: static; max-width: 300px; }
	.site-header__bar { flex-wrap: wrap; }
}

@media (max-width: 560px) {
	.brand__provider { display: none; } /* di footer tetap tampil */
	.site-nav a { padding: 7px 11px; font-size: .85rem; }
}

/* Hormati preferensi gerak minim */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}