/*
 * Polaris elements that render in PAGE FLOW, outside the #polaris-ui island.
 *
 * DELIBERATELY UNSCOPED, like builder-icons.css. Icon Text and Icon Note are not cards:
 * they sit in the host theme's own content flow so they inherit its typography, which
 * means metronic.css (scoped to #polaris-ui) cannot reach them. Only what those two
 * elements actually need lives here — no utilities, no reset.
 */

/* Icon medallion. Geometry, shape choice and the icon's constant fraction of the shape
 * all come from Polaris_UI::hexagon() inline; this supplies only the tint, taken from
 * the icon's own colour so a palette choice carries through to the shape. */
.pls-medallion__geo {
    fill: color-mix(in srgb, currentColor 8%, transparent);
    stroke: color-mix(in srgb, currentColor 20%, transparent);
    stroke-width: 1.5;
}

/* A row is icon + copy. Top-aligned, because a wrapped paragraph beside a centred icon
 * reads as a mistake — the icon belongs level with the FIRST line. */
.pls-icon-text__line {
    display: flex;
    gap: 12px;
}

/* BASELINE, not flex-start. Box-to-box alignment made the icon depend on two things it
 * has no business depending on: its own line-height (the box was `1lh` of the ICON, while
 * the copy's first line is `1lh` of the PARAGRAPH — those differ whenever the theme gives
 * <p> its own line-height, which is most themes) and its own font-size. Aligning the
 * baselines removes both: the browser puts the glyph's baseline on the first line's
 * baseline whatever the sizes and leadings are. */
.pls-icon-text__line--top {
    align-items: baseline;
}

/* A medallion is a shape, not a letter: it has no meaningful baseline, so a top-aligned
 * row with one goes back to box alignment. */
.pls-icon-text__line--top:has(.pls-medallion),
.pls-icon-note--top:has(.pls-medallion) {
    align-items: flex-start;
}

.pls-icon-text__line--middle {
    align-items: center;
}

/* The optical correction, in TWO halves, one per element, and that is the whole point.
 *
 * A Phosphor glyph's ink sits from the baseline to about 0.85em above it, so its ink
 * centre is ~0.424em above the baseline. Text is read as centred on its cap band, whose
 * centre is ~0.296em above the baseline (Poppins cap 0.697em, measured, less the small
 * inline-block baseline offset). Aligning those two centres therefore means moving the
 * glyph DOWN by 0.424 icon-ems and UP by 0.296 text-ems.
 *
 * Those are different units, and no single element can express both: `em` on the icon is
 * the icon's size. So the correction is split — __ico keeps the COPY's font size and
 * carries the text-em half, and __glyph carries the chosen icon size and the icon-em half.
 * Verified on the live footer at 1x, 1.5x, 2x and 3x icon size: the icon's ink centre
 * stays within 0.44px of the copy's cap centre at every one of them. A single 0.12em
 * transform (b304) was only right at 1x, and drifted a pixel per 0.5x after that. */
.pls-icon-text__ico {
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1;
    transform: translateY(-0.296em);
}

.pls-icon-text__glyph {
    display: inline-block;
    line-height: 1;
    transform: translateY(0.424em);
}


/* The copy column: paragraphs inside it keep the theme's rhythm but lose the leading and
 * trailing margins that would break the alignment with the icon. */
.pls-icon-text__body > :first-child {
    margin-top: 0;
}

.pls-icon-text__body > :last-child {
    margin-bottom: 0;
}

/* Icon Note: one icon, one block of rich copy. Same parts, wider gap. */
.pls-icon-note {
    display: flex;
    gap: 16px;
}

.pls-icon-note--top {
    align-items: baseline;   /* same reasoning as the Icon Text row above */
}

/* A medallion is a box in its own right: it must NOT be squeezed to one line's height,
 * and the glyph-ink correction above would shift a 56px shape by 7px. */
/* Neither half of the correction applies to a shape: it is centred on its own geometry
 * already, and 0.424em of a 56px medallion is 24px of nonsense. */
.pls-icon-text__ico:has(.pls-medallion),
.pls-icon-text__glyph:has(.pls-medallion) {
    transform: none;
}

.pls-icon-note--middle {
    align-items: center;
}

.pls-icon-note__body > :first-child {
    margin-top: 0;
}

.pls-icon-note__body > :last-child {
    margin-bottom: 0;
}