/**
 * core.css — Shared utility components (sitewide)
 *
 * Extracted dari home.css supaya class utility seperti .fo-section,
 * .fo-container, .fo-h1/h2/h3, .fo-badge, .fo-btn, .fo-section__header
 * tersedia di SEMUA halaman (home, article, archive, tentang, dll),
 * bukan cuma di home.
 *
 * Load order: tokens.css → core.css → page-specific (home/article/tentang)
 *
 * Catatan: home.css masih punya selector yang sama untuk backward-compat
 * (duplikat tidak break karena values identik).
 */

/* ============================================================ */
/*  CONTAINER & SECTION BASE                                    */
/* ============================================================ */

.fo-container {
	max-width: var(--fo-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--fo-container-padding);
	padding-right: var(--fo-container-padding);
}

@media (min-width: 1024px) {
	.fo-container {
		padding-left: var(--fo-container-padding-lg);
		padding-right: var(--fo-container-padding-lg);
	}
}

.fo-container--narrow {
	max-width: var(--fo-container-narrow);
}

.fo-section {
	padding-top: var(--fo-section-py);
	padding-bottom: var(--fo-section-py);
	background: var(--fo-color-bg);
}

@media (min-width: 1024px) {
	.fo-section {
		padding-top: var(--fo-section-py-desktop);
		padding-bottom: var(--fo-section-py-desktop);
	}
}

.fo-section--alt   { background: var(--fo-color-bg-section); }
.fo-section--dark  { background: var(--fo-color-bg-dark); color: var(--fo-color-text-inverse); }

/* ============================================================ */
/*  HEADING UTILITIES (responsive)                              */
/* ============================================================ */

.fo-h1 {
	font-size: var(--fo-text-4xl);
	font-weight: var(--fo-fw-extrabold);
	color: var(--fo-color-primary);
	letter-spacing: -0.02em;
}
.fo-h2 {
	font-size: var(--fo-text-3xl);
	font-weight: var(--fo-fw-bold);
	color: var(--fo-color-primary);
	letter-spacing: -0.01em;
}
.fo-h3 {
	font-size: var(--fo-text-xl);
	font-weight: var(--fo-fw-semibold);
	color: var(--fo-color-text-strong);
}

@media (min-width: 1024px) {
	.fo-h1 { font-size: var(--fo-text-5xl); }
	.fo-h2 { font-size: var(--fo-text-4xl); }
	.fo-h3 { font-size: var(--fo-text-2xl); }
}

.fo-section-subhead {
	font-size: var(--fo-text-lg);
	color: var(--fo-color-text-muted);
	line-height: var(--fo-lh-normal);
	max-width: 720px;
}

.fo-section__header {
	margin-bottom: var(--fo-space-12);
}
.fo-section__header--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.fo-section__header--center .fo-section-subhead {
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================ */
/*  BUTTON COMPONENTS                                           */
/* ============================================================ */

.fo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fo-space-2);
	padding: var(--fo-space-3) var(--fo-space-6);
	font-family: var(--fo-font-body);
	font-size: var(--fo-text-base);
	font-weight: var(--fo-fw-semibold);
	border-radius: var(--fo-radius-full);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	transition: all var(--fo-duration-base) var(--fo-ease-out);
	white-space: nowrap;
}

.fo-btn--primary {
	background: var(--fo-color-accent);
	color: var(--fo-color-text-inverse);
	box-shadow: var(--fo-shadow-cta);
}
.fo-btn--primary:hover {
	background: var(--fo-color-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(255, 107, 26, 0.35);
	color: var(--fo-color-text-inverse);
}

.fo-btn--secondary {
	background: var(--fo-color-primary);
	color: var(--fo-color-text-inverse);
}
.fo-btn--secondary:hover {
	background: var(--fo-color-primary-hover);
	transform: translateY(-2px);
	color: var(--fo-color-text-inverse);
}

.fo-btn--outline {
	background: transparent;
	color: var(--fo-color-primary);
	border-color: var(--fo-color-primary);
}
.fo-btn--outline:hover {
	background: var(--fo-color-primary);
	color: var(--fo-color-text-inverse);
}

.fo-btn--wa {
	background: var(--fo-color-wa);
	color: var(--fo-color-text-inverse);
}
.fo-btn--wa:hover {
	background: #1ebd57;
	transform: translateY(-2px);
	color: var(--fo-color-text-inverse);
}

.fo-btn--lg {
	padding: var(--fo-space-4) var(--fo-space-8);
	font-size: var(--fo-text-lg);
}
.fo-btn--sm {
	padding: var(--fo-space-2) var(--fo-space-4);
	font-size: var(--fo-text-sm);
}

/* ============================================================ */
/*  BADGE                                                       */
/* ============================================================ */

.fo-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--fo-space-1);
	padding: var(--fo-space-1) var(--fo-space-3);
	font-size: var(--fo-text-xs);
	font-weight: var(--fo-fw-semibold);
	border-radius: var(--fo-radius-full);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.fo-badge--accent  { background: var(--fo-color-accent);       color: white; }
.fo-badge--primary { background: var(--fo-color-primary);      color: white; }
.fo-badge--success { background: var(--fo-color-success);      color: white; }
.fo-badge--warning { background: var(--fo-color-warning);      color: white; }
.fo-badge--soft    { background: var(--fo-color-accent-light); color: var(--fo-color-accent); }

/* ============================================================ */
/*  CARD                                                        */
/* ============================================================ */

.fo-card {
	background: var(--fo-color-bg);
	border: 1px solid var(--fo-color-border);
	border-radius: var(--fo-radius-md);
	overflow: hidden;
	transition: transform var(--fo-duration-base) var(--fo-ease-out),
	            box-shadow var(--fo-duration-base) var(--fo-ease-out);
}
.fo-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fo-shadow-lg);
}

/* ============================================================ */
/*  ANIMATION ON SCROLL                                         */
/* ============================================================ */

.fo-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--fo-duration-slow) var(--fo-ease-out),
	            transform var(--fo-duration-slow) var(--fo-ease-out);
}
.fo-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.fo-fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}