/* Main-menu FontAwesome fallback.
   Most main-menu icons are bespoke gradient SVGs (.pa-menu-icons.<name>).
   Icons with no such SVG (e.g. info / envelope / question) render instead as a
   FontAwesome glyph filled with the same brand gradient.

   The <i> carries BOTH .pa-menu-icons and .pa-menu-icon so it inherits the exact
   icon box (2.5rem x 2rem block, margin) from .pa-menu-icons — identical geometry
   to the SVG rows, so the icon cell scales the row the same way and the title stays
   centered. This file loads after app.css, so the overrides below win.

   .pa-menu-icon then only: drops the SVG's left padding (it offsets a centered
   background, not a text glyph), centers the glyph in the box, and paints it with
   the brand gradient. font-size is the one knob to match the SVG icons' visual size. */
.pa-menu-icon {
  padding-left: 0;
  line-height: 2rem;   /* == box height: vertically centers the glyph */
  text-align: center;  /* horizontal center, mirrors the SVG's background-position:center */
  transform: translateY(-15%);  /* FA glyph baseline sits low in the line box; nudge it onto the SVG icons' optical center */
  font-size: 1.25rem;
  background: linear-gradient(to right, #7D3BA6 0%, #C22D82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}