/* mega-icons.css — header mega-menu nav icons (default + hover).
   The new icons in parts/header.html and parts/ar-header.html are full 34x34 SVGs
   that bake in their own rounded background + glyph (a Default tile and a Hover tile).
   Both are inlined per .rp-mega-icon-tile; this file shows the default and swaps to
   the hover SVG on link hover.

   Lives in its own tracked, enqueued source file (loaded after rp-mega-menu) on
   purpose: the mega-menu's own stylesheet ships minified + gitignored and is NOT
   rebuilt on deploy, so rules added there wouldn't reliably reach staging. Rules
   here are self-sufficient (they also size the tile) so the icons render correctly
   regardless of the deployed mega-menu.min.css state. */

/* 34x34 box; the SVG (also 34x34, with its own rounded bg) fills it. */
.rp-mega-icon-tile {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}
/* The SVG carries the background now — keep the tile transparent in every state. */
.rp-mega-link:hover .rp-mega-icon-tile,
.rp-mega-link--violet:hover .rp-mega-icon-tile {
  background-color: transparent;
}

/* Default shown, hover hidden — swap on link hover. */
.rp-mega-icon-tile .rp-mega-icon { display: block; width: 100%; height: 100%; }
.rp-mega-icon-tile .rp-mega-icon--hover { display: none; }
.rp-mega-link:hover .rp-mega-icon-tile .rp-mega-icon--default { display: none; }
.rp-mega-link:hover .rp-mega-icon-tile .rp-mega-icon--hover { display: block; }