/* Uniform advance box for Divi's icons - hand written, not generated.
 *
 * WHY
 * ---
 * Divi's own ETmodules font is effectively fixed width: 402 of its 409 glyphs
 * advance exactly 1em. Font Awesome is not - in Divi's FA Solid font only 33%
 * of the icons advance 1em, 36% are narrower (down to 0.375em) and 30% wider
 * (up to 1.25em). Where an icon sits inline next to text, the text starts at a
 * different offset for every icon.
 *
 * WHY min-width AND NOT width  (this broke a layout in 1.0.1 - do not "fix" it)
 * ---------------------------------------------------------------------------
 * `.et-pb-icon` is not always the glyph. In the Blurb module - and anywhere an
 * icon gets a background, a border or padding - the very same element is the
 * styled box around the glyph, with `box-sizing: border-box` and often
 * `overflow: hidden`. A `width: 1em` there means "18px in total" while padding
 * and border alone need 28px, so the box collapses into a narrow strip.
 *
 * `min-width` cannot do that. On a padded box the natural border-box width is
 * already larger, so the rule is simply a no-op - no collapse, no regression.
 * On a bare inline glyph it does exactly what is needed. The rules below only
 * ever make a box wider, never narrower.
 *
 * The trade-off: icons wider than the box keep their width instead of being
 * squeezed into it, so about 30% of Font Awesome icons still stick out by up to
 * 0.25em. For a perfectly uniform grid set the box to the widest Font Awesome
 * advance, in Divi > Theme Options > Custom CSS:
 *
 *   :root { --mpfa-icon-box: 1.25em; }
 *
 * Switch the whole stylesheet off with `define( 'MPFA_ALIGN_ICONS', false );`
 * or the `mpfa_align_icons` filter.
 */

:root {
	--mpfa-icon-box: 1em;
}

/* Blurb, Icon, Icon List and everything else using Divi's icon element.
 * display is deliberately untouched - Divi sets inline-block, table-cell or
 * flex depending on the module, and all three honour min-width. justify-content
 * only takes effect in the flex case, text-align in the other two. */
.et-pb-icon {
	min-width: var(--mpfa-icon-box);
	text-align: center;
	justify-content: center;
}

/* Where the glyph lives in a pseudo element, the box above belongs to the
 * styled container and this is what actually carries the character. */
.et-pb-icon::after {
	display: inline-block;
	min-width: var(--mpfa-icon-box);
	text-align: center;
}

/* Button icons. These are absolutely positioned, so a width cannot push the
 * label around - it only makes the distance between icon and label consistent
 * across icons.
 *
 * No `display` here on purpose: absolute positioning already blockifies these,
 * so min-width applies anyway - and Divi keeps `.et_pb_button:before` at
 * `display: none` with the same specificity our rule would have. Setting display
 * would win by load order and reveal a pseudo element Divi wants hidden. */
.et_pb_button:after,
.et_pb_button:before {
	min-width: var(--mpfa-icon-box);
	text-align: center;
}

/* Image, gallery and portfolio overlays, centred via translate(-50%, -50%) and
 * likewise absolutely positioned. Centring the glyph inside a wider box keeps
 * the optical centre where it was. */
.et_overlay:before,
.et_pb_inline_icon:before {
	min-width: var(--mpfa-icon-box);
	text-align: center;
}