/* ==========================================================================
   Glint Stack — Front-end container, card & content styles
   --------------------------------------------------------------------------
   Loaded globally (unlayered) so these rules win against the theme's
   `@layer blocks` overrides — most importantly the rule
   `.wp-site-blocks .wp-block-heading { margin-left/right ... !important }`
   which otherwise pins headings, paragraphs and buttons to the left edge.

   Colors come from the active theme palette via custom properties:
   --color-bg   → var(--wp--preset--color--background)  (#fbecef)
   --color-mauve → var(--wp--preset--color--mauve)      (#564d79)
   ========================================================================== */

/* Prevent horizontal scroll while a stack is present */
body:has(.glintstack),
body:has(.wp-block-glintstack-stack) {
	overflow-x: hidden;
}

/* ---------- Stack container (full-bleed, like glinthero) ----------
   !important is required: the block's spacing support emits an inline
   `margin-left:0;margin-right:0`, and the theme/core constrained-layout rules
   (`.has-global-padding > .alignfull`, `.is-layout-constrained > :where(...)`)
   also set margins. Inline + layered styles lose to an unlayered !important. */
.wp-block-glintstack-stack,
.glintstack,
.glintstack.alignfull,
.wp-block-glintstack-stack.alignfull {
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	/* Kill vertical margin AND padding the block's spacing support may emit
	   inline (e.g. padding-block: var(--wp--preset--spacing--30)) — the stack is
	   meant to sit flush top and bottom. */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	padding: 0 !important;
	box-sizing: border-box;
	/* No overflow:hidden here — it would break sticky positioning. */
}

.glintstack__cards {
	position: relative;
}

/* The InnerBlocks save wrapper (<div class="wp-block-glintstack-stack">) is a
   passthrough. It also matches the full-bleed selector above, so reset it here
   (more specific) to span its parent without re-applying viewport margins. */
.glintstack__cards > .wp-block-glintstack-stack {
	position: static;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------- Sticky card ---------- */
.glintstack-card,
.wp-block-glintstack-stack-card {
	position: sticky;
	top: var(--card-top, 0);
	height: var(--card-height, 50vh);
	width: 100%;
	margin: 0;
	box-shadow: none;
}

.glintstack-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	background-color: var(--card-bg-color, var(--color-bg, #fbecef));
	border-top: var(--menu-line-thickness, 3px) solid var(--color-mauve, #564d79);
	border-bottom: var(--menu-line-thickness, 3px) solid var(--color-mauve, #564d79);
	box-shadow: none;
}

.glintstack-card--no-border .glintstack-card__inner {
	border-top: none;
	border-bottom: none;
}

/* ---------- Game of Life canvas ---------- */
.glintstack-card__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: auto;
}

/* ==========================================================================
   Content layer — centered both axes (mirrors glinthero)
   ========================================================================== */
.glintstack-card__content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* safe center keeps content top-aligned (no clipping) when it overflows
	   a short card, while still centering it vertically when it fits. */
	justify-content: safe center;
	height: 100%;
	padding: 2rem;
	box-sizing: border-box;
	text-align: center;
	pointer-events: none;
}

/* The save wrapper + constrained group span the content area and stay centered.
   --glintstack-content-size caps the text column; falls back to the theme
   content-size, then a comfortable default. */
.glintstack-card__content > .wp-block-glintstack-stack-card {
	width: 100%;
	max-width: var(--glintstack-content-size, var(--wp--style--global--content-size, 52rem));
	margin-inline: auto;
}

/* The has-global-padding root padding eats horizontal space inside the card —
   neutralize it so children get the full content column. */
.glintstack-card__content .has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.glintstack-card__content .wp-block-group {
	width: 100%;
	max-width: none;
}

/* ----------------------------------------------------------------------------
   Centering override — UNLAYERED, beats the theme's @layer blocks rule
   `.wp-site-blocks .wp-block-heading { margin-left/right ... !important }`.
   Unlayered styles always win over layered ones regardless of specificity.
   --------------------------------------------------------------------------- */
.glintstack-card__content :is(
	h1, h2, h3, h4, h5, h6,
	.wp-block-heading,
	p, .wp-block-paragraph,
	.wp-block-list, .wp-block-quote
) {
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
	max-width: 100%;
}

/* Block-level wrappers (groups, buttons, images, custom button) re-centered too. */
.glintstack-card__content :is(
	.wp-block-group,
	.wp-block-buttons,
	.wp-block-button,
	.wp-block-image,
	.glint-button-wrapper
) {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Wide / full alignments stay centered (don't get pinned left). */
.glintstack-card__content .alignwide,
.glintstack-card__content .alignfull {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Button rows: keep buttons on a centered horizontal line. */
.glintstack-card__content .wp-block-buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

/* ---------- Columns: preserve native horizontal layout ---------- */
.glintstack-card__content .wp-block-columns {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.glintstack-card__content .wp-block-column :is(p, .wp-block-heading) {
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-align: left !important;
	max-width: none;
}

/* ---------- Interactive elements keep pointer events ---------- */
.glintstack-card__content a,
.glintstack-card__content button,
.glintstack-card__content input,
.glintstack-card__content textarea,
.glintstack-card__content select,
.glintstack-card__content [role="button"],
.glintstack-card__content .wp-block-button,
.glintstack-card__content .glint-button-wrapper {
	pointer-events: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.glintstack-card__content {
		padding: 1.5rem;
	}
}

@media (max-width: 640px) {
	.glintstack-card__content {
		padding: 1rem;
	}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.glintstack-card__canvas {
		display: none;
	}
}