/* ============================================================================ 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. Consolidated 2026-06-24: element-level alignment uses a single convention, `.is-aligned-{left|center|right}` (emitted by `guidelines_alignment_class()`). The old per-block conventions (`align--*`, `hero--align-*`, `menu-interactive--align-*`, `faq-one-col--align-*`) are gone with their blocks / refactors. `modular-block__section` keeps its own `.modular-block-section--align-*` for the section-level content cascade - a distinct mechanism, not this element-level override. ============================================================================ */ /* Left alignment (default) — explicit so child blocks can override a parent's center/right alignment. */ .is-aligned-left { --explicit-width-margin-start: 0; --explicit-width-margin-end: auto; } /* Center alignment */ .is-aligned-center { --explicit-width-margin-start: auto; --explicit-width-margin-end: auto; } /* Right alignment */ .is-aligned-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 { margin-inline-start: var( --explicit-width-margin-start, 0 ); margin-inline-end: var( --explicit-width-margin-end, auto ); } /* ============================================================================= Responsive visibility utilities — is-hidden-mobile / is-hidden-desktop ============================================================================= Emitted by guidelines_visibility_classes() (see block-helpers.php). The hiding applies on the FRONT END only: in the iframed editor the carries .editor-styles-wrapper, which the :not() guards exclude, and the editor instead shows the block dimmed with a dashed outline so it stays visible and selectable while composing. ============================================================================= */ @media ( max-width: 768px ) { body:not( .editor-styles-wrapper ) .is-hidden-mobile { display: none !important; } } @media ( min-width: 769px ) { body:not( .editor-styles-wrapper ) .is-hidden-desktop { display: none !important; } } /* Editor indicator: dimmed + dashed so per-breakpoint copies are obvious. */ body.editor-styles-wrapper :is( .is-hidden-mobile, .is-hidden-desktop ) { opacity: 0.55; outline: 1px dashed color-mix( in srgb, currentColor 40%, transparent ); outline-offset: 2px; }