/* ============================================================================
   Alignment — Utility Classes
   ============================================================================
   Generic per-element alignment override. Applied via the
   `guidelines_alignment_class()` helper on element block wrappers when an
   editor explicitly overrides the alignment inherited from the parent
   modular block.

   Sets BOTH text-align and align-items so the override works regardless of
   whether the element's wrapper renders text content or a flex column of
   block-level children. Element wrappers in this theme typically use
   `display: flex; flex-direction: column;` so align-items controls the
   cross-axis (horizontal) position of children.

   Specificity strategy: chaining `.is-alignable` (baseline, always emitted
   by the helper) with `.is-aligned-{value}` (only when overridden) gives
   the rules (0,2,0) specificity. That beats the element block's own
   `.element-{name}` (0,1,0) rule that defines `text-align: inherit;
   align-items: inherit;` — without needing !important.

   Reference: _dev/template-partials.md (helper docs in block-helpers.php)
============================================================================ */

.is-alignable.is-aligned-left {
    text-align: left;
    align-items: flex-start;
}

.is-alignable.is-aligned-center {
    text-align: center;
    align-items: center;
}

.is-alignable.is-aligned-right {
    text-align: right;
    align-items: flex-end;
}

/* ============================================================================
   Explicit-width content alignment via CSS variable cascade
   ============================================================================
   Block-level content with explicit width (placeholder pills, short skeleton
   lines, etc.) doesn't respond to text-align. Instead it needs `margin-inline`
   adjustments to follow the parent's alignment context.

   Pattern: every alignment class sets two CSS custom properties; descendants
   with explicit width consume them. New alignment classes can be added by
   setting the same variables.

   Naming inconsistency note: alignment classes across blocks use multiple
   conventions (`is-aligned-*`, `align--*`, `hero--align-*`, etc.). Logged in
   `_dev/potential-additions.md` for a future cleanup pass. Until then, this
   block enumerates each known convention explicitly.
============================================================================ */

/* Left alignment (default) — explicit so child blocks can override a parent's
   center/right alignment. */
.is-aligned-left,
.align--left,
.hero--align-left,
.menu-interactive--align-left,
.faq-one-col--align-left {
    --explicit-width-margin-start: 0;
    --explicit-width-margin-end: auto;
}

/* Center alignment */
.is-aligned-center,
.align--center,
.hero--align-center,
.menu-interactive--align-center,
.faq-one-col--align-center {
    --explicit-width-margin-start: auto;
    --explicit-width-margin-end: auto;
}

/* Right alignment */
.is-aligned-right,
.align--right,
.hero--align-right,
.menu-interactive--align-right,
.faq-one-col--align-right {
    --explicit-width-margin-start: auto;
    --explicit-width-margin-end: 0;
}

/* Consumers — block-level content with explicit width that should follow
   the parent alignment context. */
.empty-state-placeholder--header,
.empty-state-placeholder--subheader,
.empty-state-placeholder--content,
.skeleton--line-short {
    margin-inline-start: var( --explicit-width-margin-start, 0 );
    margin-inline-end: var( --explicit-width-margin-end, auto );
}