/* ============================================================================
 * ICONS — one box, one gap
 * ----------------------------------------------------------------------------
 * Every icon that sits beside a label gets a fixed square and a fixed gap, so
 * the text beside it starts at the same place on every row. Without this a
 * bolt, a chart and a headset each take a different width and the column
 * edge wanders.
 * ========================================================================== */
/* -- 1. One icon box, one gap --------------------------------------------- */
:root,[data-theme]{
  --icon-gap:0.55em;
  --icon-box:1.25em;
}

/* Any icon that sits beside a label: a fixed square, optically centred, never
   pushing the baseline around. */
.nav-links a i,
.footer-links a i,
.hub-link i,
.gmb-badge i,
.gmb-source i,
.sec-eyebrow i,
.hero-eyebrow i,
.hosting-eyebrow i,
.app-strip-eyebrow i,
.final-cta-eyebrow i,
.ds-hero-eyebrow i,
.ct-eyebrow i,
.btn i,
.chip i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--icon-box);
  height:var(--icon-box);
  flex:0 0 var(--icon-box);
  font-size:0.85em;
  line-height:1;
  margin:0;
}
.nav-links a,
.footer-links a,
.hub-link,
.gmb-badge,
.gmb-source,
.btn,
.chip{gap:var(--icon-gap)}

/* Buttons: the icon rides with the label, and the label is what is centred */
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
.btn i{position:relative;top:0}

/* ============================================================================
 * THE ICON SET
 * ----------------------------------------------------------------------------
 * Inline SVG from areas/public/components/icons.php: 24×24, stroke-drawn,
 * colour inherited. An icon is 1em square so it scales with the text beside
 * it, and it never changes the line box it sits in.
 * ========================================================================== */

.tx-icon{
  display:inline-block;
  width:1em;
  height:1em;
  flex:none;
  vertical-align:-0.125em;   /* sits on the text baseline, not above it */
  overflow:visible;
}

/* Stroke weight is part of the brand: hairline at display sizes, a little
   heavier when the icon is small, so it does not disappear. */
.tx-icon{stroke-width:1.75}
.tx-icon--sm{stroke-width:2}

/* Brand marks are filled, so the stroke rules do not apply to them. */
.tx-icon--brand{stroke:none}

/* The spinner */
.tx-icon--spin{animation:tx-spin 1s linear infinite}
@keyframes tx-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tx-icon--spin{animation:none}}