/* ═══════════════════════════════════════════════════════════
   AEOvara Share Button
   Värit: #e61d76 (magenta) · #7f1f9f (violetti) · tumma tausta
   ═══════════════════════════════════════════════════════════ */

/* ── Fixed wrapper ────────────────────────────────────────── */
/* Back-to-top: bottom:32px right:32px 48×48px z-index:9998   */
/* Share-fixed: tulee sen yläpuolelle (32+48+10 = 90px)       */
.aeovara-share-fixed {
  position: fixed;
  bottom: 90px;        /* back-to-top bottom(32) + height(48) + gap(10) */
  right: 32px;
  z-index: 9997;       /* back-to-top on 9998 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.aeovara-share-fixed.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Mobiili: vastaa back-to-top mobiiliarvoja (bottom:20px right:16px 40×40px) */
@media (max-width: 639px) {
  .aeovara-share-fixed {
    bottom: 80px;      /* back-to-top mobile bottom(20) + height(40) + gap(20) */
    right: 16px;
  }

  .aeovara-share-fixed .aeovara-share-btn {
    width: 40px;
    height: 40px;
  }
}

/* ── Inline wrapper ───────────────────────────────────────── */
.aeovara-share-wrap {
  position: relative;
  display: inline-block;
  z-index: 100;
}

/* ═══════════════════════════════════════════════════════════
   1. PÄÄNAPPI  (.aeovara-share-btn)
   48×48 px ympyrä · WCAG 2.5.5 minimitavoite täyttyy
   Kontrasti: valkoinen ikoni (#fff) gradienttia vasten ≥ 4.5:1
   ═══════════════════════════════════════════════════════════ */
.aeovara-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #e61d76, #7f1f9f);
  color: #ffffff;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
  /* Estä valinta/tappi-korostus mobiilissa */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.aeovara-share-btn:hover {
  filter: brightness(1.18);
  transform: scale(1.05);
}

/* focus-visible: selkeä outline, EI poisteta ilman korvaavaa */
.aeovara-share-btn:focus-visible {
  outline: 3px solid #e61d76;
  outline-offset: 2px;
  /* Ei muuta outline:none — outline on ainoa muutos */
}

/* Avattu tila: hieman kirkkaampi, ikoni kiertää */
.aeovara-share-btn[aria-expanded="true"] {
  filter: brightness(1.15);
}

.aeovara-share-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.aeovara-share-btn[aria-expanded="true"] svg {
  transform: rotate(20deg);
}

/* Päänapin tekstilabel on aina visuaalisesti piilotettu —
   nappi on ikoni-painike ja aria-label kattaa nimen */
.aeovara-share-btn .aeovara-share-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ═══════════════════════════════════════════════════════════
   2. SLIDE-LEFT VALIKKO  (.aeovara-share-menu)
   Glassmorphism · aukeaa napin VASEMMALLE PUOLELLE ylöspäin
   (fixed-nappi on oikeassa alakulmassa — ei tilaa oikealle)
   Tila-ohjaus: .is-open -luokka (JS lisää/poistaa)
   ═══════════════════════════════════════════════════════════ */
.aeovara-share-menu {
  position: absolute;
  bottom: 0;             /* tasataan napin alakreunaan, kasvaa ylöspäin */
  right: 58px;           /* napin leveys (48px) + 10px gap */
  left: auto;
  top: auto;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  min-width: 180px;

  /* Glassmorphism */
  background: rgba(20, 10, 30, 0.92);
  border: 1px solid rgba(255, 34, 133, 0.35);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);

  /* Kiinni-tila: näkymätön mutta DOM:issa (transitio toimii) */
  opacity: 0;
  transform: translateY(10px);
  will-change: transform;
  visibility: hidden;
  pointer-events: none;
  /* visibility viivästetään sulkemisessa, jotta transitio ehtii */
  transition:
    opacity    0.2s ease,
    transform  0.2s ease,
    visibility 0s   linear 0.2s;
}

/* Auki-tila: JS lisää .is-open */
.aeovara-share-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  /* Visibility heti, ei viivettä auki-suuntaan */
  transition:
    opacity    0.2s ease,
    transform  0.2s ease,
    visibility 0s   linear 0s;
}

/* ═══════════════════════════════════════════════════════════
   3. VALIKKONAPIT  (.aeovara-share-item)
   Teksti (#ffffff) tummalla taustalla ≥ 4.5:1
   ═══════════════════════════════════════════════════════════ */
.aeovara-share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  width: 100%;
  border-radius: 10px;
  color: #ffffff;
  font-family: Montserrat, -apple-system, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  /* Estä tekstin valinta klikkailun aikana */
  user-select: none;
  -webkit-user-select: none;
}

.aeovara-share-item:hover,
.aeovara-share-item:focus-visible {
  background: rgba(255, 34, 133, 0.2);
}

/* Tekstilabelin väri vaihtuu hover/focus/active -tilassa */
.aeovara-share-item:hover .aeovara-share-label,
.aeovara-share-item:focus-visible .aeovara-share-label,
.aeovara-share-item:active .aeovara-share-label {
  color: #ff80b5;
}

.aeovara-share-item:focus-visible {
  outline: 2px solid #e61d76;
  outline-offset: -2px;
}

.aeovara-share-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #ffffff;
  fill: currentColor;
}

/* ── Kopioi-palaute ───────────────────────────────────────── */
.aeovara-share-copy[data-copied="true"] {
  color: #4ade80;
}

/* ═══════════════════════════════════════════════════════════
   4. VALIKKOKOHTEIDEN TEKSTILABELIT
   Aina näkyvissä valkoisena · väri vaihtuu hover/active-tilassa
   Tämä yliajaa globaalin .sr-only-mobile -säännön (korkeampi spesifisyys)
   ═══════════════════════════════════════════════════════════ */
.aeovara-share-item .aeovara-share-label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  border-width: 0;
  color: #ffffff;
  transition: color 0.15s ease;
}

/* ═══════════════════════════════════════════════════════════
   5. MOBIILI  (max-width: 768px)
   Tekstilabelit näkyvät myös mobiilissa — sama efekti kuin desktopilla
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Valikko sijainti vasemmalle (nappi on 40px) */
  .aeovara-share-menu {
    bottom: 0;
    right: 54px;      /* napin leveys mobiilissa (40px) + 14px gap */
    left: auto;
    min-width: 170px;
  }

  /* Kosketusnäytölle riittävä kohdealue */
  .aeovara-share-item {
    padding: 12px 14px;
  }
}

/* ═══════════════════════════════════════════════════════════
   6. PREFERS-REDUCED-MOTION
   Kaikki animaatiot/transitiot käytännöllisesti poistettuna
   (0.01ms pitää JS transition-end -tapahtumat toiminnassa)
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .aeovara-share-btn,
  .aeovara-share-btn svg,
  .aeovara-share-menu,
  .aeovara-share-item,
  .aeovara-share-item .aeovara-share-label {
    transition-duration: 0.01ms !important;
  }

  .aeovara-share-btn:hover {
    transform: none;
  }
}