/*
 * LBO Site Setup — Standard Template stylesheet.
 * Only loaded on pages generated by this plugin (meta flag _lbo_ss_page),
 * and only when "Aktifkan Template Visual" is checked in plugin settings.
 * Colors are controlled via --lbo-ink / --lbo-accent, set inline by PHP
 * from the admin color pickers. Everything else (paper, steel, green) is
 * fixed so the template keeps its identity regardless of brand color.
 */

.lbo-page {
	--lbo-ink: #1A2B3C;
	--lbo-accent: #E8871E;
	--lbo-paper: #F7F5EF;
	--lbo-paper-2: #EFEBE1;
	--lbo-steel: #64748B;
	--lbo-green: #2F6F4E;
	--lbo-line: rgba(26, 43, 60, 0.12);
	--lbo-line-dark: rgba(247, 245, 239, 0.16);
}

.lbo-page,
.lbo-page p,
.lbo-page li {
	font-family: 'Inter', sans-serif;
}

.lbo-page h1,
.lbo-page h2,
.lbo-page h3 {
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 0.01em;
	line-height: 1.04;
}

.lbo-page .lbo-mono {
	font-family: 'IBM Plex Mono', monospace;
}

/* ---------- Lebar halaman: NORMAL (mengikuti tema) ----------
 * Sebelumnya bagian ini memaksa SEMUA konten di halaman LBO menjadi
 * full-width (selebar layar). Sekarang dinonaktifkan supaya lebar
 * konten kembali normal/standar mengikuti pengaturan tema aktif
 * (content-size / wide-size bawaan tema tetap dipakai apa adanya).
 *
 * Blok-blok yang MEMANG didesain full-bleed (hero, trust strip,
 * service area band, CTA, footer) tetap tampil selebar layar karena
 * masing-masing sudah memakai class "alignfull" langsung dari PHP
 * (lihat lbo_ss_hero_block(), lbo_ss_final_cta_block(), dsb) — ini
 * perilaku standar Gutenberg/FSE dan tidak butuh CSS tambahan di sini.
 *
 * Kalau nanti kamu pakai plugin full-width terpisah untuk membuat
 * halaman tertentu selebar layar penuh, plugin itu bisa bekerja tanpa
 * bentrok karena override lebar di bagian ini sudah tidak aktif.
 */

/* ---------- Hero (wp:cover) ---------- */
.lbo-hero.wp-block-cover {
	min-height: 0 !important;
	padding: 76px 40px !important;
	border-radius: 0;
}
.lbo-hero .wp-block-cover__inner-container {
	max-width: 640px;
	margin: 0;
	text-align: left;
}
.lbo-hero h1 {
	color: var(--lbo-paper);
	font-size: clamp(32px, 5vw, 54px);
	margin-bottom: 18px;
}
.lbo-hero h1 strong {
	color: var(--lbo-accent);
	font-weight: 800;
}
.lbo-hero p {
	color: rgba(247, 245, 239, 0.82);
	font-size: 16.5px;
	line-height: 1.6;
	max-width: 480px;
}
.lbo-hero .wp-block-buttons {
	margin-top: 22px;
}
.lbo-hero .wp-block-button__link {
	background: var(--lbo-accent) !important;
	color: var(--lbo-ink) !important;
	font-weight: 700;
	border-radius: 3px;
	padding: 14px 26px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 14px;
	box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Trust strip ---------- */
.lbo-trust {
	background: var(--lbo-paper-2);
	padding: 18px 32px !important;
	border-top: 1px solid var(--lbo-line);
	border-bottom: 1px solid var(--lbo-line);
}
.lbo-trust ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	justify-content: center;
}
.lbo-trust ul li {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--lbo-ink);
	display: flex;
	align-items: center;
	gap: 8px;
}
.lbo-trust ul li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--lbo-green);
	display: inline-block;
	flex-shrink: 0;
}

/* ---------- Service / grid cards (wp:columns) ---------- */
.lbo-svc-grid.wp-block-columns {
	border: 2px solid var(--lbo-ink);
	gap: 0 !important;
	margin: 0 0 32px 0 !important;
}
.lbo-svc-grid > .wp-block-column {
	background: var(--lbo-paper);
	border-left: 1px solid var(--lbo-line);
	padding: 26px 22px !important;
	margin: 0 !important;
}
.lbo-svc-grid > .wp-block-column:first-child {
	border-left: none;
}
.lbo-svc-grid h3 {
	font-size: 22px;
	margin-bottom: 8px;
}
.lbo-svc-grid h3 a {
	color: var(--lbo-ink);
	text-decoration: none;
}
.lbo-svc-grid p {
	color: var(--lbo-steel);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- Service Area (wp:group, dark) ---------- */
.lbo-area {
	background: var(--lbo-ink) !important;
	color: var(--lbo-paper);
	padding: 54px 36px !important;
	margin: 0 0 32px 0 !important;
}
.lbo-area h1,
.lbo-area h2 {
	color: var(--lbo-paper);
}
.lbo-area p {
	color: rgba(247, 245, 239, 0.75);
}
.lbo-area a {
	color: var(--lbo-paper);
}
.lbo-area .wp-block-column p a {
	font-weight: 600;
	border-bottom: 1px solid var(--lbo-line-dark);
}

/* ---------- Why Choose Us ---------- */
.lbo-why > .wp-block-column {
	border-top: 2px solid var(--lbo-ink);
	padding-top: 14px !important;
	margin: 0 !important;
}
.lbo-why h3 {
	font-size: 19px;
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 6px;
}
.lbo-why p {
	color: var(--lbo-steel);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- How It Works / steps ---------- */
.lbo-steps > .wp-block-column {
	border-left: 3px solid var(--lbo-accent);
	padding-left: 16px !important;
	margin: 0 0 20px 0 !important;
}
.lbo-steps h3 {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 13.5px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: var(--lbo-ink);
	margin-bottom: 6px;
}
.lbo-steps p {
	color: var(--lbo-steel);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- Final CTA (wp:group, accent) ---------- */
.lbo-cta {
	background: var(--lbo-accent) !important;
	color: var(--lbo-ink) !important;
	padding: 54px 36px !important;
	text-align: center;
	margin: 8px 0 !important;
}
.lbo-cta h2 {
	color: var(--lbo-ink);
	margin-bottom: 12px;
}
.lbo-cta p {
	color: rgba(26, 43, 60, 0.8);
}
.lbo-cta .wp-block-button__link {
	background: var(--lbo-ink) !important;
	color: var(--lbo-paper) !important;
	border-radius: 3px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 14px;
}

/* ---------- Footer ---------- */
.lbo-footer {
	background: var(--lbo-ink) !important;
	color: var(--lbo-paper);
	padding: 40px 36px 20px !important;
	margin: 32px 0 0 !important;
}
.lbo-footer h3 {
	color: var(--lbo-paper);
	font-size: 18px;
	margin-bottom: 10px;
}
.lbo-footer p,
.lbo-footer li {
	color: rgba(247, 245, 239, 0.75);
	font-size: 14px;
	line-height: 1.7;
}
.lbo-footer a {
	color: var(--lbo-paper);
	text-decoration: none;
}
.lbo-footer a:hover {
	color: var(--lbo-accent);
}
.lbo-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lbo-footer-copy {
	margin-top: 24px !important;
	padding-top: 18px;
	border-top: 1px solid var(--lbo-line-dark);
	font-size: 12.5px !important;
	color: rgba(247, 245, 239, 0.55) !important;
}

/* ---------- Promo Banner Layanan AC (eye-catching) ---------- */
.lbo-ac-promo {
	display: flex;
	align-items: center;
	gap: 24px;
	background: linear-gradient(120deg, var(--lbo-ink) 0%, var(--lbo-ink) 45%, var(--lbo-accent) 160%);
	color: #F7F5EF;
	padding: 30px 40px;
	margin: 0 0 8px 0;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}
.lbo-ac-promo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0 14px, transparent 14px 28px);
	pointer-events: none;
}
.lbo-ac-promo__icon {
	font-size: 54px;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
}
.lbo-ac-promo__body {
	flex: 1 1 auto;
	min-width: 220px;
}
.lbo-ac-promo__badge {
	display: inline-block;
	background: var(--lbo-accent);
	color: var(--lbo-ink);
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.lbo-ac-promo__heading {
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.08;
	margin: 0 0 6px;
	color: #fff;
}
.lbo-ac-promo__desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(247, 245, 239, 0.9);
	max-width: 480px;
}
.lbo-ac-promo__cta {
	flex-shrink: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.lbo-ac-promo__price {
	font-family: 'IBM Plex Mono', monospace;
	font-weight: 700;
	font-size: 18px;
	color: var(--lbo-accent);
}
.lbo-ac-promo__button {
	background: var(--lbo-accent);
	color: var(--lbo-ink);
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 13.5px;
	padding: 13px 22px;
	border-radius: 4px;
	white-space: nowrap;
	box-shadow: 3px 3px 0 rgba(0,0,0,0.25);
	transition: transform 0.15s ease;
}
.lbo-ac-promo__button:hover {
	transform: translateY(-2px);
	color: var(--lbo-ink);
}

/* ---------- Floating Contact Bar (Telepon + WhatsApp) ---------- */
.lbo-floating-contact {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	gap: 10px;
	width: min(92vw, 420px);
}
.lbo-floating-contact__btn {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 14px;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.lbo-floating-contact__btn--call {
	background: #D64545;
	color: #fff;
}
.lbo-floating-contact__btn--wa {
	background: #25D366;
	color: #fff;
}
.lbo-floating-contact__icon {
	display: inline-flex;
}
body.lbo-floating-active .lbo-footer-copy {
	margin-bottom: 70px;
}

@media (max-width: 782px) {
	.lbo-ac-promo {
		flex-direction: column;
		text-align: center;
		padding: 26px 22px;
	}
	.lbo-ac-promo__body {
		min-width: 0;
	}
	.lbo-ac-promo__desc {
		max-width: none;
	}
}

@media (max-width: 782px) {
	.lbo-hero.wp-block-cover {
		padding: 48px 24px !important;
	}
	.lbo-svc-grid.wp-block-columns {
		flex-direction: column;
	}
	.lbo-svc-grid > .wp-block-column {
		border-left: none;
		border-top: 1px solid var(--lbo-line);
	}
	.lbo-svc-grid > .wp-block-column:first-child {
		border-top: none;
	}
}