/*
 * SMU Corporate — gutenberg-brand.css
 * Phase 7: Brand-match untuk SEMUA block default Gutenberg.
 * Editor preview = Frontend (WYSIWYG).
 *
 * Aturan main:
 * - Selector frontend: body :where(.wp-block-*)  → specificity 0-0-1, TIDAK mengalahkan utility Tailwind.
 * - Selector editor: .editor-styles-wrapper :where(...) — CSS yang sama di-load via add_editor_style().
 * - JANGAN override .has-text-color / .has-background (membawa pilihan warna user, harus selamat
 *   di editor DAN frontend). Font-size utility override diperbolehkan (layout, bukan makna).
 * - EXCEPTION button: WP punya style default agresif → pakai specificity lebih tinggi, tanpa :where().
 * - TANPA hard-coded color di strong/b/em (mengikuti warna blok induk); mark sengaja brand color.
 * - Pattern list: .wp-block-list ADALAH elemen ul-nya (bukan nesting .wp-block-list ul).
 */

/* ==========================================================
   0. NEUTRALIZATION (dari fase sebelumnya — masih berlaku)
   ========================================================== */

/* Reset WP font-size utilities — DIHAPUS: theme.json kini mendefinisikan skala
   (small 0.875 → xx-large 2.25rem) dan utilitasnya harus jalan di frontend.
   JANGAN override .has-text-color / .has-background (pilihan warna user). */

/* Group block — strip margin default WP.
   12 Okt 2026: JANGAN kosongkan margin untuk grup yang memakai utility spacing
   Tailwind (prefix mb-, mt-, my-) — sebelumnya blanket rule di sini mematikan
   mb-16/mb-12/mt-16 pada wrapper header pattern → teks nempel ke konten bawah.
   CATATAN: jangan pernah tulis urutan bintang-garis-miring di dalam komentar CSS
   (itu menutup komentar prematur → rule setelahnya ikut terbuang oleh parser). */
.wp-block-group:not([class*="mb-"]):not([class*="mt-"]):not([class*="my-"]) { margin-top: 0; margin-bottom: 0; }

/* Block gap default: brand yang mengatur spacing antar-elemen.
   12 Okt 2026: kecualikan child dengan utility spacing sendiri (prefix mt-, my-) —
   rule sebelumnya ikut mematikan mt-16 pada wrapper CTA "Butuh Penawaran Khusus". */
:root :where(.wp-block-group.is-layout-flow) > * + *:not([class*="mt-"]):not([class*="my-"]) { margin-block-start: 0; }

/* Image block — center + tidak meluber */
.wp-block-image { margin: 0 auto 1.5rem; }
.wp-block-image img { height: auto; max-width: 100%; }

/* ==========================================================
   1. EDITOR BASE — font & warna konteks editor
   ========================================================== */
.editor-styles-wrapper {
	font-family: 'DM Sans', sans-serif;
	color: #23262B;
}

/* ==========================================================
   2. HEADINGS (h1–h6) — Poppins, skala .article-content
   ========================================================== */
/* WP modern: class wp-block-heading ada DI ELEMEN h (bukan wrapper).
   Dua bentuk selector untuk kompatibilitas. */
body :where(h1.wp-block-heading),
body :where(.wp-block-heading h1),
.editor-styles-wrapper :where(h1.wp-block-heading),
.editor-styles-wrapper :where(.wp-block-heading h1) {
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1.2;
	color: #23262B;
	margin: 0 0 1rem;
}
body :where(h2.wp-block-heading),
body :where(.wp-block-heading h2),
.editor-styles-wrapper :where(h2.wp-block-heading),
.editor-styles-wrapper :where(.wp-block-heading h2) {
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1.3;
	color: #153848;
	margin: 2.5rem 0 1rem;
}
body :where(h3.wp-block-heading),
body :where(.wp-block-heading h3),
.editor-styles-wrapper :where(h3.wp-block-heading),
.editor-styles-wrapper :where(.wp-block-heading h3) {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1.35;
	color: #1F5060;
	margin: 2rem 0 0.75rem;
}
body :where(h4.wp-block-heading),
body :where(.wp-block-heading h4),
.editor-styles-wrapper :where(h4.wp-block-heading),
.editor-styles-wrapper :where(.wp-block-heading h4) {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: #23262B;
	margin: 1.75rem 0 0.75rem;
}
body :where(h5.wp-block-heading),
body :where(h6.wp-block-heading),
body :where(.wp-block-heading h5),
body :where(.wp-block-heading h6),
.editor-styles-wrapper :where(h5.wp-block-heading),
.editor-styles-wrapper :where(h6.wp-block-heading),
.editor-styles-wrapper :where(.wp-block-heading h5),
.editor-styles-wrapper :where(.wp-block-heading h6) {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: rgba(35, 38, 43, 0.85);
	margin: 1.5rem 0 0.5rem;
}

/* ==========================================================
   3. PARAGRAPH + INLINE FORMATTING
   ========================================================== */
body :where(.wp-block-paragraph),
.editor-styles-wrapper :where(.wp-block-paragraph) {
	font-family: 'DM Sans', sans-serif;
	font-size: 1rem;
	line-height: 1.8;
	color: rgba(35, 38, 43, 0.85);
	margin: 0 0 1.5rem;
}
/* strong/b/em: TANPA color — mengikuti warna blok induk */
body :where(.entry-content strong),
body :where(.entry-content b),
.editor-styles-wrapper :where(strong),
.editor-styles-wrapper :where(b) { font-weight: 700; }
body :where(.entry-content em),
.editor-styles-wrapper :where(em) { font-style: italic; }
/* mark: highlight brand (sengaja berwarna).
   Scope via .wp-block-paragraph / global — BUKAN .entry-content (tidak selalu ada di markup). */
body :where(mark),
.editor-styles-wrapper :where(mark) {
	background: #FFF4D6;
	color: inherit;
	padding: 0 2px;
	border-radius: 3px;
}

/* ==========================================================
   4. LINKS — biru, underline aksen emas
   ========================================================== */
body :where(.entry-content a),
.editor-styles-wrapper :where(.wp-block-paragraph a),
.editor-styles-wrapper :where(.wp-block-list a) {
	color: #1F5060;
	text-decoration: underline;
	text-decoration-color: rgba(240, 176, 16, 0.5);
	text-underline-offset: 3px;
	transition: color 0.2s;
}
body :where(.entry-content a:hover),
.editor-styles-wrapper :where(.wp-block-paragraph a:hover),
.editor-styles-wrapper :where(.wp-block-list a:hover) { color: #E0A008; }

/* ==========================================================
   5. LISTS — bullet hexagon emas (ul) + counter chip (ol)
   .wp-block-list ADALAH ul-nya (bukan parent!)
   ========================================================== */
body :where(.wp-block-list),
.editor-styles-wrapper :where(.wp-block-list) {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1.5rem;
}
body :where(.wp-block-list > li),
.editor-styles-wrapper :where(.wp-block-list > li) {
	position: relative;
	padding-left: 28px;
	margin-bottom: 0.75rem;
	line-height: 1.7;
	color: rgba(35, 38, 43, 0.85);
}
body :where(.wp-block-list) > li::before,
.editor-styles-wrapper :where(.wp-block-list) > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 14px;
	background: #F0B010;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* fallback ::marker gold untuk konteks yang mempertahankan list-style */
body :where(.wp-block-list) > li::marker,
.editor-styles-wrapper :where(.wp-block-list) > li::marker { color: #F0B010; }

/* Ordered list — counter chip emas */
body :where(.wp-block-list.is-style-default[style*="list-style-type: decimal"] ol),
body :where(.entry-content ol):not(.wp-block-list) { counter-reset: ol-counter; }
body :where(.entry-content ol):not(.wp-block-list) > li,
.editor-styles-wrapper :where(ol.wp-block-list) > li {
	counter-increment: ol-counter;
}
body :where(.entry-content ol):not(.wp-block-list) > li::before,
.editor-styles-wrapper :where(ol.wp-block-list) > li::before {
	content: counter(ol-counter);
	background: #FFF4D6;
	color: #E0A008;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 12px;
	border-radius: 6px;
	clip-path: none;
	width: 22px;
	height: 22px;
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================
   6. QUOTE — border emas + bg krem
   ========================================================== */
body :where(.wp-block-quote),
.editor-styles-wrapper :where(.wp-block-quote) {
	border-left: 4px solid #F0B010;
	background: #FFF4D6;
	padding: 1.25rem 1.5rem;
	border-radius: 0 12px 12px 0;
	margin: 2rem 0;
}
body :where(.wp-block-quote p),
.editor-styles-wrapper :where(.wp-block-quote p) {
	font-style: italic;
	color: #23262B;
	line-height: 1.7;
	margin: 0 0 0.75rem;
}
body :where(.wp-block-quote p:last-child),
.editor-styles-wrapper :where(.wp-block-quote p:last-child) { margin-bottom: 0; }
body :where(.wp-block-quote cite),
.editor-styles-wrapper :where(.wp-block-quote cite) {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	font-style: normal;
	color: #806040;
}
/* varian plain: tanpa bg/border */
body :where(.wp-block-quote.is-style-plain),
.editor-styles-wrapper :where(.wp-block-quote.is-style-plain) {
	background: transparent;
	border-left: none;
	border-radius: 0;
	padding: 0 0 0 1.25rem;
	border-left: 3px solid rgba(240, 176, 16, 0.4);
}

/* ==========================================================
   7. PULLQUOTE
   ========================================================== */
body :where(.wp-block-pullquote),
.editor-styles-wrapper :where(.wp-block-pullquote) {
	border-top: 2px solid #F0B010;
	border-bottom: 2px solid #F0B010;
	padding: 1.5rem 0;
	margin: 2.5rem 0;
}
body :where(.wp-block-pullquote blockquote),
.editor-styles-wrapper :where(.wp-block-pullquote blockquote) { margin: 0; }
body :where(.wp-block-pullquote p),
.editor-styles-wrapper :where(.wp-block-pullquote p) {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.4;
	color: #153848;
}
body :where(.wp-block-pullquote cite),
.editor-styles-wrapper :where(.wp-block-pullquote cite) {
	font-size: 0.85rem;
	color: #806040;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ==========================================================
   8. IMAGE + FIGCAPTION
   ========================================================== */
body :where(.wp-block-image img),
.editor-styles-wrapper :where(.wp-block-image img) {
	border-radius: 16px;
}
body :where(.wp-block-image figcaption),
.editor-styles-wrapper :where(.wp-block-image figcaption) {
	font-size: 0.8rem;
	color: rgba(35, 38, 43, 0.6);
	text-align: center;
	margin-top: 0.5rem;
}

/* ==========================================================
   9. TABLE — header biru, teks putih
   ========================================================== */
body :where(.wp-block-table table),
.editor-styles-wrapper :where(.wp-block-table table) {
	width: 100%;
	border-collapse: collapse;
}
body :where(.wp-block-table thead th),
.editor-styles-wrapper :where(.wp-block-table thead th) {
	background: #1F5060;
	color: #FFFFFF;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-align: left;
	padding: 0.75rem 1rem;
}
body :where(.wp-block-table td),
.editor-styles-wrapper :where(.wp-block-table td) {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid #E5E7EB;
	color: rgba(35, 38, 43, 0.85);
}
body :where(.wp-block-table figcaption),
.editor-styles-wrapper :where(.wp-block-table figcaption) {
	font-size: 0.8rem;
	color: rgba(35, 38, 43, 0.6);
}

/* ==========================================================
   10. SEPARATOR — emas tipis
   ========================================================== */
body :where(.wp-block-separator),
.editor-styles-wrapper :where(.wp-block-separator) {
	border: none;
	height: 2px;
	background: #F0B010;
	opacity: 0.5;
	margin: 2.5rem auto;
}
body :where(.wp-block-separator.is-style-wide),
.editor-styles-wrapper :where(.wp-block-separator.is-style-wide) { max-width: 100%; opacity: 0.3; }

/* ==========================================================
   11. CODE / PRE
   ========================================================== */
body :where(.wp-block-code),
body :where(.wp-block-preformatted),
.editor-styles-wrapper :where(.wp-block-code),
.editor-styles-wrapper :where(.wp-block-preformatted) {
	background: #F3F4F6;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875rem;
	color: #23262B;
	overflow-x: auto;
}
body :where(.entry-content code),
.editor-styles-wrapper :where(p code) {
	background: #F3F4F6;
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-size: 0.9em;
}

/* ==========================================================
   12. BUTTON — EXCEPTION specificity (WP default agresif)
   Gold + teks biru-dark (konsisten design final b.html)
   ========================================================== */
body .wp-block-button .wp-block-button__link,
.editor-styles-wrapper .wp-block-button .wp-block-button__link {
	background: #F0B010;
	color: #153848;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 0.9rem 2rem;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s;
}
body .wp-block-button .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button .wp-block-button__link:hover { background: #E0A008; color: #153848; }
/* varian outline */
body .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: #1F5060;
	border: 2px solid #1F5060;
}
body .wp-block-button.is-style-outline .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #1F5060;
	color: #FFFFFF;
}

/* ==========================================================
   13. COVER — teks putih default di atas media gelap
   ========================================================== */
body :where(.wp-block-cover__inner-container),
.editor-styles-wrapper :where(.wp-block-cover__inner-container) { color: #FFFFFF; }

/* ==========================================================
   14. EMBED / VIDEO — radius
   ========================================================== */
body :where(.wp-block-embed),
body :where(.wp-block-video),
.editor-styles-wrapper :where(.wp-block-embed),
.editor-styles-wrapper :where(.wp-block-video) {
	border-radius: 16px;
	overflow: hidden;
}

/* ==========================================================
   15. SEARCH BLOCK — match halaman pencarian
   ========================================================== */
body :where(.wp-block-search__input),
.editor-styles-wrapper :where(.wp-block-search__input) {
	border: 2px solid #E5E7EB;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	font-family: 'DM Sans', sans-serif;
}
body :where(.wp-block-search__input:focus),
.editor-styles-wrapper :where(.wp-block-search__input:focus) {
	border-color: #F0B010;
	outline: none;
}
body :where(.wp-block-search__button),
.editor-styles-wrapper :where(.wp-block-search__button) {
	background: #F0B010;
	color: #153848;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	border: none;
	border-radius: 8px;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
}
body :where(.wp-block-search__button:hover),
.editor-styles-wrapper :where(.wp-block-search__button:hover) { background: #E0A008; }

/* ==========================================================
   17. EDITOR SPECIFICITY BOOST
   Core editor CSS me-reset headings (color:inherit) & typography
   dengan specificity lebih tinggi dari varian :where() — boost
   agar editor preview 100% = frontend.
   ========================================================== */
.editor-styles-wrapper h1.wp-block-heading { font-weight: 800; font-size: 2.25rem; line-height: 1.2; color: #23262B; }
.editor-styles-wrapper h2.wp-block-heading { font-weight: 800; font-size: 1.5rem; line-height: 1.3; color: #153848; }
.editor-styles-wrapper h3.wp-block-heading { font-weight: 700; font-size: 1.2rem; line-height: 1.35; color: #1F5060; }
.editor-styles-wrapper h4.wp-block-heading { font-weight: 700; font-size: 1.05rem; color: #23262B; }
.editor-styles-wrapper h5.wp-block-heading,
.editor-styles-wrapper h6.wp-block-heading { font-weight: 600; font-size: 0.95rem; color: rgba(35, 38, 43, 0.85); }

/* Pattern headings membawa class Tailwind (text-3xl/4xl/5xl) — ikuti ukurannya
   agar editor preview = frontend (frontend menang via specificity Tailwind). */
.editor-styles-wrapper h2.wp-block-heading.text-3xl { font-size: 1.875rem; }
.editor-styles-wrapper h2.wp-block-heading.text-4xl,
.editor-styles-wrapper h3.wp-block-heading.text-4xl { font-size: 2.25rem; }
.editor-styles-wrapper h3.wp-block-heading.text-5xl { font-size: 3rem; }
@media (min-width: 768px) {
	.editor-styles-wrapper h2.wp-block-heading.md\:text-4xl,
	.editor-styles-wrapper h3.wp-block-heading.md\:text-4xl { font-size: 2.25rem; }
	.editor-styles-wrapper h3.wp-block-heading.md\:text-5xl { font-size: 3rem; }
}

.editor-styles-wrapper .wp-block-paragraph { line-height: 1.8; }

.editor-styles-wrapper .wp-block-list { list-style: none; padding-left: 0; margin-bottom: 1.5rem; }
.editor-styles-wrapper .wp-block-list > li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 0.75rem;
	line-height: 1.7;
	color: rgba(35, 38, 43, 0.85);
	list-style: none;
}
.editor-styles-wrapper .wp-block-list > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 14px;
	height: 14px;
	background: #F0B010;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.editor-styles-wrapper ol.wp-block-list { counter-reset: ol-counter; }
.editor-styles-wrapper ol.wp-block-list > li { counter-increment: ol-counter; padding-left: 32px; }
.editor-styles-wrapper ol.wp-block-list > li::before {
	content: counter(ol-counter);
	background: #FFF4D6;
	color: #E0A008;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 12px;
	border-radius: 6px;
	clip-path: none;
	width: 22px;
	height: 22px;
	top: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================
   19. GRID PASS-THROUGH (Phase 8 — block patterns)
   Gutenberg inner-container wrapper bisa merusak layout
   Tailwind grid/flex pada wp:group ber-marker .smu-layout.
   Pakai className "smu-layout" pada group yang children-nya
   langsung diatur grid/flex (JANGAN nama is-grid-layout —
   bentrok dengan class internal Gutenberg).
   ========================================================== */
.wp-block-group.smu-layout > .wp-block-group__inner-container {
	display: contents;
}

/* ==========================================================
   Editor: elemen animasi-scroll (.fade-up) harus SELALU terlihat di canvas.
   Tidak ada IntersectionObserver di editor → tanpa ini semua section
   tampak kosong (opacity:0) dan client bingung. (temuan 12 Okt 2026)
   ========================================================== */
.editor-styles-wrapper .fade-up {
	opacity: 1;
	transform: none;
}

/* ==========================================================
   Tailwind space-y-* vs netralisasi margin-block-start.
   Rule netralisasi (0-3-0) sebelumnya MENANG tipis atas
   .space-y-5 > :not([hidden]) ~ :not([hidden]) (0-3-0) karena
   file ini dimuat terakhir → jarak antar-kartu kontak hilang.
   Boost ke 0-4-0 agar utilitas space-y selalu bekerja.
   ========================================================== */
.wp-block-group.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-block-start: 1rem; }
.wp-block-group.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-block-start: 1.25rem; }
.wp-block-group.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-block-start: 1.5rem; }