/* =================================================================
   TYPOGRAPHY
   Accent font, square bullets (+ auto colour, Safari fallback), accent pipe, category badge.
   Loaded by inc/enqueue.php (order matters: see the list there).
   ================================================================= */

/* ---------------------------------------------------------------
   Halyard alternate Q — stylistic set 15 (the "other glyph option").

   Bulletproof on purpose: applied to EVERY element with !important,
   on every page, from the theme. It previously lived in the
   homepage's own Elementor Custom CSS (so it only applied on the
   homepage) and targeted h1-h6/p only (so spans, lists and buttons
   missed out). Inheritance alone is not enough either: the `font`
   shorthand — which Elementor and browsers use on buttons, inputs,
   menu toggles etc. — silently resets font-feature-settings to
   normal. The universal + !important rule survives all of that.

   Fonts without an ss15 (Mozzarella, the icon font) ignore it.
   To add another feature site-wide, extend THIS rule, e.g.
   font-feature-settings: "ss15", "tnum" — the property is not
   additive, so a second rule elsewhere would replace, not add.
--------------------------------------------------------------- */
*, ::before, ::after {
    font-feature-settings: "ss15" !important;
}

/* ---------------------------------------------------------------
   Accent typography — wrap any Mozzarella (secondary) text in
   .typography-accent. Sizes at 0.87em of the surrounding text so
   it optically matches Halyard at any font size.
--------------------------------------------------------------- */
/* Mozzarella reads visually larger than Halyard — 0.87em optically
   balances the two. Re-tune if the secondary font changes. */
.typography-accent {
    font-family: var(--e-global-typography-secondary-font-family);
    font-style: italic;
    font-size: 0.87em;
    padding-right: 0.12em;
}
/* ---------------------------------------------------------------
   List bullets — Halyard's square bullet glyph, as in InDesign.
   For list-style-type: disc the browser draws its OWN synthetic
   round dot and never consults the typeface; InDesign instead uses
   the font's U+2022 BULLET glyph, which in Halyard Display is a
   small SQUARE. Setting content on ::marker makes the browser
   typeset the real character in the list's font — so the square
   appears, and it scales/colours with the text automatically.
   (\2002 is an en-space: content-markers don't get the default
   disc's gap, so we bring our own.)

   Global on purpose: ::marker only exists on lists that actually
   render bullets, so menus/nav/icon lists (list-style: none) are
   naturally unaffected.

   SAFARI FALLBACK (.sq-bullet-fb): Safari — incl. every iPhone —
   ignores content on ::marker. assets/js/square-bullets.js detects
   that with a layout probe and then tags exactly the <li>s that
   really show bullets (display:list-item + marker type not none —
   checked PER LI, because e.g. the mega menu's UL computes `disc`
   but its flexed lis never render markers). Those get a ::before
   square in Halyard, absolutely positioned in the marker gutter so
   layout doesn't shift, with the same en-space-sized gap. Browsers
   that pass the probe never add the class and use ::marker.
--------------------------------------------------------------- */
ul li::marker {
    content: "\2022\2002";
    color: var(--ipg-cobalt) !important;
}

li.sq-bullet-fb {
    list-style: none;
    position: relative;
}
li.sq-bullet-fb::before {
    content: "\2022";
    position: absolute;
    inset-inline-end: calc(100% + 0.5em);   /* right edge 0.5em (≈ en-space) before text */
    top: 0;
    color: var(--ipg-cobalt) !important;
}

/* Auto bullet colour: cobalt on dark text, arctic on light text — no
   tagging needed. Relative-colour syntax reads the list item's own
   text colour (currentColor), takes its luma, and turns that into a
   0/1 switch t (0 below luma 140, 1 above 160, a short ramp between).
   Each channel is then cobalt + t * (arctic - cobalt), so the result
   is exactly one of the two brand colours. The channel numbers ARE
   --ipg-cobalt (0 82 215) and --ipg-arctic (175 233 253): vars can't
   be pulled apart inside another colour, so if the palette changes,
   update these six numbers. Browsers without relative colour keep
   the plain cobalt above. */
@supports (color: rgb(from currentColor r g b)) {
    ul li::marker,
    li.sq-bullet-fb::before {
        color: rgb(from currentColor
            calc(0   + clamp(0, (0.299 * r + 0.587 * g + 0.114 * b - 140) / 20, 1) * 175)
            calc(82  + clamp(0, (0.299 * r + 0.587 * g + 0.114 * b - 140) / 20, 1) * 151)
            calc(215 + clamp(0, (0.299 * r + 0.587 * g + 0.114 * b - 140) / 20, 1) * 38)
        ) !important;
    }
}

.elementor-widget-text-editor ul {
	padding: 0px 0px 0px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
/* ---------------------------------------------------------------
   Category badge — output by the [ipg_category_badge] shortcode.
   Colour + text colour come in as CSS vars from the shortcode
   (per-term, from ACF); everything else is styled here so size /
   font are tweakable in one place. 2 letters read as a circle,
   3 letters as a short pill.
--------------------------------------------------------------- */
.ipg-cat-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0em;
    border-radius: 999px;
    background: var(--badge-color, var(--ipg-cobalt));
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Accent pipe — a coloured "|" divider, e.g. "Trade Marks | Alex Perry".
   The <span class="pipe"> comes from either assets/js/accent-pipe.js
   (wraps any "|" inside .work-highlights h5 / .accent-pipe) or the
   [ipg_join_fields] shortcode. Global on purpose: .pipe means the same
   thing everywhere. Retune the colour per section with --pipe-color. */
.pipe {
    color: var(--pipe-color, var(--ipg-powder));
}

.no-wrap {
    text-wrap: nowrap;
}

.elementor-widget-text-editor ul {
    margin-bottom: 12px;;
}
.elementor-widget-text-editor p:last-child, .elementor-widget-text-editor ul:last-child {
    margin-bottom: 0px;;
}