/* ══════════════════════════════════════════════════════════════
   menu-mail.css — жълто пликче в менюто за контакти

   В менюто връзката към /contacts/ беше с емоджи „🖂" (U+D83D U+DD82),
   което не се рисува еднакво на всички системи — на повечето излиза
   като празно квадратче.

   Тук го заменяме с истинска иконка: SVG пликче с жълт цвят.
   Иконката е векторна, затова е ясна на всякакъв екран.
   ══════════════════════════════════════════════════════════════ */

.linkWrapper a .linkSpan.ke-menu-mail {
  display: inline-block;
  width: 1.22em;
  height: .98em;
  font-size: 1em;
  line-height: 1;
  /* пликче: правоъгълник с диагонали */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Crect x='1.1' y='1.1' width='21.8' height='15.8' rx='2.2' fill='none' stroke='%23ffd27e' stroke-width='2.4'/%3E%3Cpath d='M2.2 2.6 12 10.1l9.8-7.5' fill='none' stroke='%23ffd27e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent !important;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: -.1em;
  transition: transform .2s ease, opacity .2s ease;
}

.linkWrapper a:hover .linkSpan.ke-menu-mail {
  transform: translateY(-1px);
  opacity: .85;
}

/* при плътно меню цветът остава същият — жълтото се чете на тъмнозелено */
body.ke-nav-scrolled .linkWrapper a .linkSpan.ke-menu-mail {
  background-size: contain;
}

/* малко отстояние, за да не опира в „GALLERY" */
.linkWrapper a .linkSpan.ke-menu-mail { margin-left: .35em; }