/**
 * Blog Social Sharing Styles
 *
 * Premium social sharing features for blog posts including:
 * - Bottom post sharing section
 * - Floating share button
 * - Slide-out share menu
 * - Platform-branded colors
 * - Smooth animations and transitions
 * - Mobile responsive
 * - Fully accessible
 *
 * @package MWANGI
 * @version 1.0.0
 */

/* ============================================================================
   POST SHARE SECTION (Bottom of Post)
   ========================================================================= */

.post-share-section {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border-primary, #333333);
}

.post-share-section h3 {
  font-size: var(--font-size-lg, 1.25rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #FFFFFF);
  margin: 0 0 1.5rem 0;
  font-family: var(--font-display, 'Lexend', sans-serif);
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ============================================================================
   SHARE BUTTON BASE STYLES
   ========================================================================= */

.share-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;

  /* Typography */
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  font-family: var(--font-sans, 'Lexend', sans-serif);
  text-decoration: none;
  white-space: nowrap;

  /* Visual Style */
  background: var(--color-bg-tertiary, #1F1F1F);
  color: var(--color-text-secondary, #B4B4B4);
  border: 1px solid var(--color-border-primary, #333333);
  border-radius: 8px;

  /* Button Reset */
  cursor: pointer;
  outline: none;

  /* Transitions */
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;

  /* Performance */
  will-change: transform;
}

.share-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* SVG icons with fill (brand icons) */
.share-btn svg[fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

/* SVG icons with stroke (utility icons like copy/link) */
.share-btn svg[stroke="currentColor"] {
  stroke: currentColor;
  fill: none;
}

/* Hover States - Platform Colors */
.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Twitter/X - Black (new X branding) */
.share-twitter:hover {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

/* Facebook - Blue */
.share-facebook:hover {
  background: #1877F2;
  border-color: #1877F2;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
}

/* LinkedIn - Professional Blue */
.share-linkedin:hover {
  background: #0A66C2;
  border-color: #0A66C2;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(10, 102, 194, 0.4);
}

/* WhatsApp - Green */
.share-whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}

/* Copy Link - MWANGI Blue */
.share-copy:hover {
  background: var(--color-primary, #29B5ED);
  border-color: var(--color-primary, #29B5ED);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(41, 181, 237, 0.4);
}

/* Active/Press State */
.share-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Focus State - Accessibility */
.share-btn:focus-visible {
  outline: 3px solid var(--color-primary, #29B5ED);
  outline-offset: 3px;
}

/* Copy Button States */
.share-copy.copied {
  background: var(--color-success, #10B981);
  border-color: var(--color-success, #10B981);
  color: #FFFFFF;
  pointer-events: none;
}

.share-copy.copy-failed {
  background: var(--color-error, #EF4444);
  border-color: var(--color-error, #EF4444);
  color: #FFFFFF;
  pointer-events: none;
}

/* ============================================================================
   FLOATING SHARE BUTTON
   ========================================================================= */

.floating-share-btn {
  /* Positioning - Fixed on right side, above scroll-to-top */
  position: fixed;
  right: 2rem;
  bottom: 6rem; /* Positioned above scroll-to-top (which is at 2rem) */
  z-index: 99;

  /* Size - Touch-friendly */
  width: 56px;
  height: 56px;

  /* Visual Style - Glassmorphic with MWANGI Blue */
  background: linear-gradient(135deg,
    rgba(41, 181, 237, 0.15) 0%,
    rgba(41, 181, 237, 0.08) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(41, 181, 237, 0.3);
  border-radius: 50%;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(41, 181, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Center the icon */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Button reset */
  padding: 0;
  border-style: solid;
  cursor: pointer;

  /* Color */
  color: var(--color-primary, #29B5ED);

  /* Initial state - hidden */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);

  /* Smooth transitions */
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Performance optimization */
  will-change: transform, opacity;

  /* Accessibility */
  outline: none;
}

/* Visible state */
.floating-share-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover state */
.floating-share-btn:hover {
  transform: translateY(-4px) scale(1.05);
  border-color: rgba(41, 181, 237, 0.6);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(41, 181, 237, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg,
    rgba(41, 181, 237, 0.25) 0%,
    rgba(41, 181, 237, 0.12) 100%
  );
}

/* Active state */
.floating-share-btn:active {
  transform: translateY(-2px) scale(1.02);
}

/* Focus state */
.floating-share-btn:focus-visible {
  outline: 3px solid var(--color-primary, #29B5ED);
  outline-offset: 4px;
  border-color: rgba(41, 181, 237, 0.8);
}

/* SVG icon */
.floating-share-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

/* Floating button uses stroke-based share icon */
.floating-share-btn svg[stroke="currentColor"] {
  stroke: currentColor;
  fill: none;
}

.floating-share-btn:hover svg {
  transform: scale(1.1);
}

/* ============================================================================
   FLOATING SHARE MENU (Modal/Drawer)
   ========================================================================= */

.floating-share-menu {
  /* Positioning - Full viewport overlay */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;

  /* Initially hidden */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Backdrop */
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Transition */
  transition:
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state */
.floating-share-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Menu Content Container */
.floating-share-menu-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;

  /* Visual Style */
  background: var(--color-bg-secondary, #151515);
  border: 1px solid var(--color-border-primary, #333333);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* Transition */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active menu content */
.floating-share-menu.active .floating-share-menu-content {
  transform: translate(-50%, -50%) scale(1);
}

/* Close Button */
.close-share-menu {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;

  /* Visual */
  background: transparent;
  border: 1px solid var(--color-border-primary, #333333);
  border-radius: 8px;
  color: var(--color-text-secondary, #B4B4B4);
  cursor: pointer;
  padding: 0;

  /* Center icon */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Transition */
  transition: all 0.2s ease;
}

.close-share-menu:hover {
  background: var(--color-bg-tertiary, #1F1F1F);
  border-color: var(--color-primary, #29B5ED);
  color: var(--color-primary, #29B5ED);
}

.close-share-menu svg {
  width: 18px;
  height: 18px;
}

/* Menu Title */
.floating-share-menu h4 {
  font-size: var(--font-size-xl, 1.5rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #FFFFFF);
  margin: 0 0 1.5rem 0;
  font-family: var(--font-display, 'Lexend', sans-serif);
}

/* Share Options Grid */
.floating-share-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.floating-share-options .share-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 1rem 1.25rem;
  font-size: var(--font-size-base, 1rem);
}

.floating-share-options .share-btn svg {
  width: 22px;
  height: 22px;
}

/* ============================================================================
   MOBILE RESPONSIVENESS
   ========================================================================= */

@media (max-width: 768px) {
  /* Bottom share section */
  .share-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .share-btn {
    width: 100%;
    justify-content: center;
  }

  /* Floating share button */
  .floating-share-btn {
    right: 1rem;
    bottom: 5.5rem; /* Positioned above scroll-to-top on mobile */
    width: 48px;
    height: 48px;
  }

  .floating-share-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Floating menu */
  .floating-share-menu-content {
    width: 95%;
    padding: 1.5rem;
  }

  .floating-share-menu h4 {
    font-size: var(--font-size-lg, 1.25rem);
    margin-bottom: 1.25rem;
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .floating-share-btn {
    right: 0.75rem;
    bottom: 5rem;
    width: 44px;
    height: 44px;
  }

  .floating-share-btn svg {
    width: 16px;
    height: 16px;
  }

  .floating-share-menu-content {
    padding: 1.25rem;
  }

  .close-share-menu {
    width: 32px;
    height: 32px;
  }

  .floating-share-options .share-btn {
    padding: 0.875rem 1rem;
    font-size: var(--font-size-sm, 0.875rem);
  }
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================= */

/* High contrast mode */
@media (prefers-contrast: high) {
  .share-btn,
  .floating-share-btn,
  .close-share-menu {
    border-width: 2px;
  }

  .share-btn:focus-visible,
  .floating-share-btn:focus-visible {
    outline-width: 4px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .share-btn,
  .floating-share-btn,
  .floating-share-menu,
  .floating-share-menu-content,
  .close-share-menu {
    transition: none;
  }

  .floating-share-btn:hover,
  .share-btn:hover {
    transform: none;
  }
}

/* ============================================================================
   PRINT STYLES
   ========================================================================= */

@media print {
  .post-share-section,
  .floating-share-btn,
  .floating-share-menu {
    display: none !important;
  }
}