/**
 * Single Wiki Artikel page styles — loaded only on is_singular('wiki_artikel').
 *
 * Infobox's own "card" appearance (background, border, radius, field
 * grid) is already styled by the block itself in the companion plugin.
 * This file only arranges it into a two-column grid alongside the main
 * content and handles its sticky scroll behavior — the block's own
 * stylesheet explicitly leaves that to the theme.
 */

.lunar-article {
	max-width: 1000px;
	margin: 0 auto;
	padding: 24px 40px 64px;

	/* .lunar-article is a flex item of .lunar-site-wrapper (layout.css,
	   the sticky-footer shell used on every template — flex-direction:
	   column, so width is the CROSS axis). align-items: stretch is
	   supposed to size cross-axis children to the container's width
	   automatically, but once deeply nested non-wrapping content exists
	   (e.g. Tabs' tab strip), the browser lets that content's intrinsic
	   minimum width win instead — forcing this element, and the whole
	   page, wider than the viewport. Setting width explicitly (instead
	   of leaving it to auto-stretch) is what actually stops that. */
	width: 100%;
	min-width: 0;
}

/* ---------------------------------------------------------------------
   Two-column layout (main content + Infobox sidebar)

   The sidebar is a real sibling element (see single.php), not content
   floated within the text column — so its height and the content
   column's height are completely independent of each other. Neither
   one can create empty space or overlap in the other.

   Source order in single.php is sidebar-then-content (so mobile, which
   collapses this to a plain block layout, shows Infobox near the top).
   grid-column below re-orders them visually for desktop, independent
   of that source order.
   ------------------------------------------------------------------ */

.lunar-article__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

/* Only reserve the sidebar column when a sidebar element actually
   exists — grid-template-columns is otherwise a fixed definition, so
   an article with no Infobox block would keep this space blank
   instead of the content simply using the full width. */
.lunar-article__layout:has( .lunar-article__sidebar ) {
	grid-template-columns: 1fr 320px;
	/* align-items intentionally left at its default (stretch): the
	   sidebar's box stretches to match the content column's height,
	   which is what makes the sticky rule below stop by itself once it
	   reaches the end of the content — no scroll cap, no JS needed. */
}

.lunar-article__content {
	grid-column: 1;
	grid-row: 1;

	/* Without this, a grid item's default minimum width is based on its
	   content's intrinsic size — so a block with a wide, non-wrapping
	   inner row (e.g. Tabs' tab strip) can force this column, the grid,
	   and the whole page wider instead of scrolling internally the way
	   that block's own CSS already intends. */
	min-width: 0;
}

.lunar-article__sidebar {
	grid-column: 2;
	grid-row: 1;

	position: sticky;
	top: 24px;
}

@media ( max-width: 640px ) {
	.lunar-article__layout {
		display: block;
	}

	.lunar-article__sidebar {
		position: static;
		margin-bottom: 24px;
	}

	.lunar-infobox {
		width: 100%;
		max-width: none;
	}
}

/* ---------------------------------------------------------------------
   Article header (badge, title, tagline)
   ------------------------------------------------------------------ */

.lunar-article__title {
	font-family: var( --font-display );
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 1.15;
	margin: 14px 0 8px;
}

.lunar-article__byline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-size: 0.85rem;
	color: var( --color-text-muted );
}

.lunar-article__byline-avatar {
	border-radius: 50%;
}

.lunar-article__byline-text a {
	color: var( --color-text );
	font-weight: 600;
}

.lunar-article__tagline {
	font-family: var( --font-body );
	font-style: italic;
	color: var( --color-text-muted );
	font-size: 1.05rem;
	margin: 0 0 24px;
}

/* ---------------------------------------------------------------------
   Article body
   ------------------------------------------------------------------ */

/* ---------------------------------------------------------------------
   Core content elements (paragraph, list, quote, native image/table)

   Same rhythm as headings: symmetric top/bottom margin, and because
   adjacent margins collapse to whichever is larger (not summed), this
   is what actually keeps spacing consistent regardless of which pair
   of elements happens to sit next to each other — including next to
   LunarCore blocks, without touching a single LunarCore file.
   ------------------------------------------------------------------ */

.lunar-article__content p,
.lunar-article__content ul,
.lunar-article__content ol,
.lunar-article__content blockquote,
.lunar-article__content figure.wp-block-image,
.lunar-article__content figure.wp-block-table {
	margin: 20px 0;
}

/* ---------------------------------------------------------------------
   Headings (H2–H6)

   No automatic separator line — a heading is told apart from body text
   by size, weight, and spacing alone. Top margin tightens as the level
   gets deeper (H2 opens a new section and needs more breathing room;
   H6 is a minor sub-point and sits closer to what precedes it). Bottom
   margin stays small and consistent so every heading reads as
   attached to the content it introduces, not floating between two
   things.

   Excluded: .lunar-accordion-item__title and .lunar-timeline-item__title
   — both are headings structurally (for accessibility/document
   outline), but they're a block's own internal title, not an authored
   section heading, and LunarCore already gives each its complete own
   styling. Without this exclusion, this rule's selector (class + type)
   outranks the plugin's own rule (class only) by CSS specificity and
   silently overrides it.
   ------------------------------------------------------------------ */

.lunar-article__content h2:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ),
.lunar-article__content h3:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ),
.lunar-article__content h4:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ),
.lunar-article__content h5:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ),
.lunar-article__content h6:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ) {
	font-family: var( --font-display );
	font-weight: 700;
	line-height: 1.3;
}

.lunar-article__content h2:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ) {
	font-size: 1.5rem;
	margin: 40px 0 8px;
}

.lunar-article__content h3:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ) {
	font-size: 1.25rem;
	margin: 32px 0 8px;
}

.lunar-article__content h4:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ) {
	font-size: 1.1rem;
	margin: 28px 0 6px;
}

.lunar-article__content h5:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ) {
	font-size: 1rem;
	margin: 24px 0 6px;
}

.lunar-article__content h6:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ) {
	font-size: 0.9rem;
	margin: 20px 0 6px;
}

/* No awkward gap if one of these happens to be the very first thing
   inside ITS OWN container — the article content column itself, or
   any nested container such as an Accordion item's body. Deliberately
   not scoped to direct children only: a heading (or paragraph, list,
   etc.) that opens a block's inner content shouldn't need extra top
   space just because it's technically "inside" something. */
.lunar-article__content h2:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ):first-child,
.lunar-article__content h3:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ):first-child,
.lunar-article__content h4:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ):first-child,
.lunar-article__content h5:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ):first-child,
.lunar-article__content h6:not( .lunar-accordion-item__title ):not( .lunar-timeline-item__title ):first-child,
.lunar-article__content p:first-child,
.lunar-article__content ul:first-child,
.lunar-article__content ol:first-child,
.lunar-article__content blockquote:first-child,
.lunar-article__content figure.wp-block-image:first-child,
.lunar-article__content figure.wp-block-table:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------------
   Manual separator (WordPress core Separator block)

   Core already provides the block's structure and both style variants
   (default = short, centered; is-style-wide = full width) — this only
   re-colors and re-spaces it to match the site's palette instead of
   the generic currentColor/opacity core ships with.
   ------------------------------------------------------------------ */

.lunar-article__content .wp-block-separator {
	border: none;
	border-bottom: 1px solid var( --color-border );
	opacity: 1;
	margin: 32px auto;
}

.lunar-article__content .wp-block-separator:not( .is-style-wide ) {
	width: 100px;
}

.lunar-article__content .wp-block-separator.is-style-wide {
	width: 100%;
}

/* ---------------------------------------------------------------------
   Article footer ("Terakhir diperbarui" + update notes)
   ------------------------------------------------------------------ */

.lunar-article__meta {
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid var( --color-border );
	font-size: 0.85rem;
	color: var( --color-text-muted );
}

.lunar-article__updated {
	margin: 0 0 8px;
}

.lunar-article__update-notes {
	margin: 0;
	padding-left: 20px;
}

.lunar-article__update-notes li {
	margin-bottom: 4px;
}

@media ( max-width: 640px ) {
	.lunar-article {
		padding: 16px 20px 40px;
	}
}