/* ===== Luxa Blocks — the 5 flexible blocks (Container/Grid/Button/Heading/Text) =====
 * v3.2.0: the 9 old monolithic section blocks (Hero, Stats, Features…)
 * were removed — their styling lived here as fixed .luxa-hero/.luxa-stats/
 * etc. rules. They're replaced by block PATTERNS (includes/core/patterns.php)
 * built from the 5 blocks below; each pattern instance's look comes from
 * its own per-instance inline <style> tag (computed by containerCss() /
 * buttonCss() / etc. in assets/js/primitives.js), not from fixed classes
 * here. This file only needs the small set of base rules every instance
 * of these 5 blocks shares, regardless of its own inline overrides.
 *
 * --lxb-font-family and --lxb-btn-bg/--lxb-btn-color are printed by
 * SettingsRegistry::print_css_variables() (Settings → Luxa Blocks) and
 * Pro's TypographySettings — changing them there cascades into every
 * block below automatically.
 */

.luxa-container,
.luxa-grid,
.luxa-btn-wrap {
	box-sizing: border-box;
}
.luxa-container *,
.luxa-grid > * {
	box-sizing: border-box;
	min-width: 0;
}

.luxa-grid {
	display: grid;
}

/* ------------------------------------------------------------
 * Editor-only override: Gutenberg's core editor CSS gives every
 * direct child of a ".block-editor-block-list__layout" a default
 * ~28px margin-top/bottom (the classic "space between blocks in the
 * post" spacing) — this is separate from the theme.json "layout"
 * block support we already disabled via `supports:{layout:false}`.
 * Since useInnerBlocksProps() makes OUR OWN Container/Grid wrapper
 * double as that "block list" element, its children (Heading/Text/
 * Button) get that default margin too, stacking on top of our own
 * `gap`. These classes never appear in saved/front-end HTML (they're
 * editor-only), so this rule is a no-op outside the editor — it only
 * needs to exist at all, no need to gate it further.
 * ------------------------------------------------------------ */
.luxa-container.block-editor-block-list__layout > .block-editor-block-list__block,
.luxa-grid.block-editor-block-list__layout > .block-editor-block-list__block {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.luxa-btn {
	display: inline-block;
	text-decoration: none;
	font-family: var(--lxb-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	background: var(--lxb-btn-bg, #5b4fe8);
	color: var(--lxb-btn-color, #fff);
}
.luxa-btn:hover {
	opacity: 0.9;
}

.luxa-heading {
	margin: 0;
	font-family: var(--lxb-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	line-height: 1.3;
	color: inherit;
}

.luxa-text {
	margin: 0;
	font-family: var(--lxb-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	color: inherit;
}

/* Native <details> marker cleanup — used by the FAQ pattern's core
 * Details block, not a Luxa block, but styled here so the pattern looks
 * intentional out of the box rather than like raw unstyled HTML. */
.wp-block-details > summary {
	cursor: pointer;
	font-weight: 600;
}