/* Phosphor's own stylesheet (assets/icons/phosphor/styles.min.css) sizes every icon via
   var(--icon-font-size) with no fallback and no definition of its own — the admin theme
   only defines it inside datatables.css, which the public site never loads. Defining it
   here so icons render at a sensible default (1rem) instead of relying on inheritance
   accidentally landing on something reasonable. */
:root {
  --icon-font-size: 1rem;
}

/* Phosphor's own vertical-align formula (calc(calc(50% - var(--icon-font-size)) * .5))
   was tuned for the admin theme's specific line-height/font-size combinations — dropped
   into the public site's inline icon+text usages (e.g. "<i class="ph-tag"></i> Category")
   it sits icons visibly too low. Plain "middle" is a more reliable inline baseline for
   arbitrary surrounding line-heights than Phosphor's own formula. */
[class*=" ph-"],
[class^="ph-"] {
  vertical-align: middle !important;
}

/* Icon-only circular badges (social links, the phone-icon badge on event/tutor CTAs):
   these center their icon via text-align + line-height matching the box's fixed
   height, which still depends on the icon font's internal baseline metrics and ends up
   visibly off-center (verified ~3-5px low). Flexbox centering is independent of font
   metrics entirely, so it's exact regardless of the icon glyph's own vertical metrics. */
.social-icon a,
.about-author .author-icon .icon,
.event-details-items .author-icon .icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}