/* =========================================================
   COUNTRY HERO — prev/next arrow buttons
   Transparent by default; become clear/solid on hover, focus,
   or click (press) so the icon reads clearly. Uses only the
   site's existing colours (white + --ink). Scoped under .hero
   and loaded only on the country pages, so nothing else is
   affected.
========================================================= */
.hero .hero-nav{
  position:absolute;
  z-index:3;
  right:24px;
  bottom:24px;
  display:flex;
  gap:10px;
}
.hero .hero-arrow{
  width:46px; height:46px;
  border-radius:50%;
  background:transparent;                 /* transparent all the time … */
  border:1px solid rgba(255,255,255,0.35);
  color:rgba(255,255,255,0.78);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
/* … until hovered / focused / pressed → solid white so the arrow is clear */
.hero .hero-arrow:hover,
.hero .hero-arrow:focus-visible,
.hero .hero-arrow:active{
  background:#fff;
  color:var(--ink);
  border-color:#fff;
  transform:scale(1.06);
}
.hero .hero-arrow svg{ display:block; }

@media (max-width:560px){
  .hero .hero-nav{ right:16px; bottom:16px; gap:8px; }
  .hero .hero-arrow{ width:42px; height:42px; }
}