/* =========================================================================
   actions.css — Share & Action Toolbar
   Styling für die Share-Toolbar, Fallback-Menü und Toast-Benachrichtigung.
   Reagiert auf data-theme="dark|contrast|focus" (Variablen aus index.html).
   =========================================================================
*/

/* ── 1. TOOLBAR-CONTAINER ──────────────────────────────────────────────── */
#share-action-toolbar {
  margin    : 40px 0 0;
  padding   : 24px 0 8px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

[data-theme="dark"]     #share-action-toolbar { border-top-color: rgba(255,255,255,.12); }
[data-theme="contrast"] #share-action-toolbar { border-top-color: #FFFF00; }

/* ── 2. SEMANTISCHE NAVIGATION ─────────────────────────────────────────── */
#share-action-toolbar nav {
  display       : flex;
  flex-direction: column;
  gap           : 6px;
}

#share-action-toolbar .sha-toolbar-btns {
  display  : flex;
  flex-wrap: wrap;
  gap      : 10px;
  list-style: none;
  margin   : 0;
  padding  : 0;
}

/* ── 3. ACTION-BUTTONS (Sekundärstil passend zur Site) ─────────────────── */
.sha-btn {
  display         : inline-flex;
  align-items     : center;
  gap             : 8px;
  padding         : 9px 18px;
  min-height      : 44px; /* WCAG 2.1 SC 2.5.5 Touch-Target */
  border          : 2px solid #b20020;
  border-radius   : 980px;
  background      : rgba(255, 255, 255, .92);
  backdrop-filter : blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color           : #b20020;
  font-family     : inherit;
  font-weight     : 600;
  font-size       : .9rem;
  cursor          : pointer;
  transition      : all .2s cubic-bezier(.25, .1, .25, 1);
  white-space     : nowrap;
}

.sha-btn:hover {
  background : #b20020;
  color      : #fff;
  transform  : scale(1.03);
}

.sha-btn:focus-visible {
  outline       : 3px solid #b20020;
  outline-offset: 3px;
}

/* SVG-Icon innerhalb des Buttons                                           */
.sha-btn-icon svg {
  width         : 18px;
  height        : 18px;
  vertical-align: middle;
  flex-shrink   : 0;
  pointer-events: none;
}

/* ── 4. DUNKEL-MODUS ───────────────────────────────────────────────────── */
[data-theme="dark"] .sha-btn {
  background  : rgba(255, 255, 255, .08);
  color       : #ff8fa3;
  border-color: #ff8fa3;
}
[data-theme="dark"] .sha-btn:hover {
  background  : #b20020;
  color       : #fff;
  border-color: #b20020;
}
[data-theme="dark"] .sha-btn:focus-visible {
  outline-color: #ff8fa3;
}

/* ── 5. KONTRAST-MODUS ─────────────────────────────────────────────────── */
[data-theme="contrast"] .sha-btn {
  background     : #000;
  color          : #fff;
  border         : 2px solid #fff;
  border-radius  : 4px;
  backdrop-filter: none;
}
[data-theme="contrast"] .sha-btn:hover {
  background     : #333;
  transform      : none;
  text-decoration: underline;
}
[data-theme="contrast"] .sha-btn:focus-visible {
  outline      : 4px solid #FFFF00;
  outline-offset: 3px;
}

/* ── 6. FALLBACK-SHARE-MENÜ (für Browser ohne Web Share API) ──────────── */
#sha-fallback-menu {
  position      : fixed;
  bottom        : 80px;
  left          : 50%;
  transform     : translateX(-50%);
  background    : rgba(255, 255, 255, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border        : 1px solid rgba(0, 0, 0, .12);
  border-radius : 16px;
  padding       : 20px;
  z-index       : 9900;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  min-width     : 240px;
  box-shadow    : 0 8px 32px rgba(0, 0, 0, .18);
  animation     : sha-menu-in .15s ease;
}

@keyframes sha-menu-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#sha-fallback-menu a {
  display        : block;
  padding        : 10px 16px;
  border-radius  : 8px;
  background     : #f0f0f5;
  color          : #1d1d1f;
  text-decoration: none;
  font-weight    : 500;
  transition     : background .15s;
}
#sha-fallback-menu a:hover  { background: #b20020; color: #fff; }
#sha-fallback-menu a:focus-visible { outline: 3px solid #b20020; outline-offset: 2px; border-radius: 6px; }

#sha-fallback-menu .sha-menu-close {
  background  : transparent;
  border      : none;
  color       : #777;
  font-size   : .85rem;
  cursor      : pointer;
  padding     : 6px 0 0;
  text-align  : center;
  font-family : inherit;
}
#sha-fallback-menu .sha-menu-close:hover { color: #1d1d1f; }

/* ── 7. TOAST-BENACHRICHTIGUNG ─────────────────────────────────────────── */
#sha-toast {
  position     : fixed;
  bottom       : 28px;
  left         : 50%;
  transform    : translateX(-50%);
  background   : rgba(29, 29, 31, .92);
  color        : #fff;
  padding      : 10px 22px;
  border-radius: 980px;
  font-size    : .88rem;
  font-family  : inherit;
  z-index      : 9999;
  pointer-events: none;
  animation    : sha-toast-in .2s ease;
  white-space  : nowrap;
}

@keyframes sha-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── 8. SCREEN-READER-ONLY (Lebendige Region für A11y) ────────────────── */
.sha-sr-only {
  position  : absolute;
  width     : 1px;
  height    : 1px;
  padding   : 0;
  margin    : -1px;
  overflow  : hidden;
  clip      : rect(0, 0, 0, 0);
  white-space: nowrap;
  border    : 0;
}

/* ── 9. RESPONSIVE — MOBILE ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sha-btn {
    padding    : 8px 14px;
    font-size  : .85rem;
  }
  #sha-fallback-menu {
    left     : 16px;
    right    : 16px;
    transform: none;
    min-width: auto;
  }
  #sha-toast {
    left     : 16px;
    right    : 16px;
    transform: none;
    text-align: center;
    white-space: normal;
  }
}

/* ── 10. INSTALL-GUIDE-DIALOG (iOS / macOS Safari) ─────────────────────── */

/* Halbtransparenter Hintergrund */
#sha-install-guide-backdrop {
  position  : fixed;
  inset     : 0;
  background: rgba(0, 0, 0, .45);
  z-index   : 9800;
  animation : sha-menu-in .15s ease;
}

/* Dialog-Karte */
#sha-install-guide {
  position      : fixed;
  bottom        : 0;
  left          : 0;
  right         : 0;
  background    : rgba(255, 255, 255, .98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius : 20px 20px 0 0;
  padding       : 28px 24px 40px; /* extra Padding unten für Home-Indicator */
  z-index       : 9900;
  max-height    : 80dvh;
  overflow-y    : auto;
  animation     : sha-guide-in .25s cubic-bezier(.25, .1, .25, 1);
}

@keyframes sha-guide-in {
  from { transform: translateY(100%); opacity: .5; }
  to   { transform: translateY(0);    opacity: 1;  }
}

/* Auf Desktop: zentriertes Modal statt Sheet */
@media (min-width: 600px) {
  #sha-install-guide {
    bottom        : auto;
    left          : 50%;
    right         : auto;
    top           : 50%;
    transform     : translate(-50%, -50%) !important;
    border-radius : 20px;
    width         : min(480px, 90vw);
    animation     : sha-menu-in .2s ease;
    max-height    : 90dvh;
  }
}

#sha-install-guide h2 {
  margin         : 0 0 16px;
  font-size      : 1.15rem;
  font-weight    : 700;
  color          : #1d1d1f;
  font-family    : inherit;
}

#sha-install-guide ol {
  margin         : 0 0 24px;
  padding-left   : 1.4em;
  display        : flex;
  flex-direction : column;
  gap            : 12px;
}

#sha-install-guide li {
  font-size      : .97rem;
  line-height    : 1.5;
  color          : #3a3a3c;
  font-family    : inherit;
}

#sha-install-guide strong {
  color          : #1d1d1f;
  font-weight    : 600;
}

/* iOS-Share-Icon über der Überschrift */
.sha-guide-ios-icon {
  text-align     : center;
  margin         : 0 0 12px;
  color          : #b20020;
}

/* Schließen-Button passt zum Rest der sha-btn-Styles */
.sha-guide-close {
  width          : 100%;
  justify-content: center;
  border-radius  : 12px !important; /* Sheet-typisch eher eckig als Pill */
}

/* ── 11. DARK MODE — Install-Guide ─────────────────────────────────────── */
[data-theme="dark"] #sha-install-guide {
  background : rgba(28, 28, 30, .97);
}
[data-theme="dark"] #sha-install-guide h2,
[data-theme="dark"] #sha-install-guide strong {
  color: #f5f5f7;
}
[data-theme="dark"] #sha-install-guide li {
  color: #aeaeb2;
}
[data-theme="dark"] .sha-guide-ios-icon {
  color: #ff8fa3;
}

/* ── 12. KONTRAST-MODUS — Install-Guide ────────────────────────────────── */
[data-theme="contrast"] #sha-install-guide {
  background    : #000;
  border        : 2px solid #FFFF00;
  border-radius : 8px;
}
[data-theme="contrast"] #sha-install-guide h2,
[data-theme="contrast"] #sha-install-guide li,
[data-theme="contrast"] #sha-install-guide strong {
  color: #fff;
}
[data-theme="contrast"] .sha-guide-ios-icon {
  color: #FFFF00;
}

/* ── 13. DRUCK ─────────────────────────────────────────────────────────── */
@media print {
  #share-action-toolbar,
  #sha-toast,
  #sha-fallback-menu,
  #sha-install-guide,
  #sha-install-guide-backdrop { display: none !important; }
}