/**
 * Blog Table Styles
 *
 * Beautiful, responsive table styling for markdown tables in blog posts.
 * Designed for MWANGI brand - clean, modern, dark-mode optimized.
 *
 * Features:
 * - Zebra striping for readability
 * - Smooth hover effects
 * - Mobile-responsive with horizontal scroll
 * - Accessible semantic structure
 * - Brand color accents (MWANGI blue #29B5ED)
 */

/* ========================================================================
   TABLE WRAPPER - Mobile Scroll Container
   ======================================================================== */

.blog-table-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  margin: var(--space-2xl) 0;
  border-radius: var(--border-radius-lg);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-md);
  border: var(--border-width-thin) solid var(--color-border-secondary);

  /* Smooth scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  /* Subtle scroll indicator shadows */
  background-image:
    linear-gradient(to right, var(--color-bg-primary) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--color-bg-primary) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(41, 181, 237, 0.1), rgba(41, 181, 237, 0)),
    linear-gradient(to left, rgba(41, 181, 237, 0.1), rgba(41, 181, 237, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ========================================================================
   TABLE STRUCTURE
   ======================================================================== */

.blog-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono, 'SF Mono', 'Consolas', 'Monaco', monospace);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  background: transparent;
  margin: 0;

  /* Prevent text selection issues on mobile */
  user-select: text;
}

/* ========================================================================
   TABLE HEADER
   ======================================================================== */

.blog-table thead {
  background: linear-gradient(135deg,
    rgba(41, 181, 237, 0.08) 0%,
    rgba(41, 181, 237, 0.12) 100%
  );
  border-bottom: 2px solid var(--color-primary);
  position: relative;
}

.blog-table thead tr {
  background: transparent;
}

.blog-table th {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  white-space: nowrap;
  background: transparent;
  border: none;

  /* Sticky header on scroll (optional enhancement) */
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(135deg,
    rgba(41, 181, 237, 0.08) 0%,
    rgba(41, 181, 237, 0.12) 100%
  );

  /* Subtle shadow when scrolling */
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* First and last header cells */
.blog-table th:first-child {
  padding-left: var(--space-xl);
}

.blog-table th:last-child {
  padding-right: var(--space-xl);
}

/* ========================================================================
   TABLE BODY
   ======================================================================== */

.blog-table tbody {
  background: var(--color-bg-primary);
}

.blog-table tbody tr {
  border-bottom: var(--border-width-thin) solid var(--color-border-tertiary);
  transition: background-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  background: transparent;
}

/* Zebra striping for readability */
.blog-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.01);
}

.blog-table tbody tr:nth-child(even) {
  background: rgba(41, 181, 237, 0.02);
}

/* Row hover effect */
.blog-table tbody tr:hover {
  background: rgba(41, 181, 237, 0.08);
  box-shadow: inset 0 0 0 1px rgba(41, 181, 237, 0.2);
  cursor: default;
}

/* Last row - no border */
.blog-table tbody tr:last-child {
  border-bottom: none;
}

/* ========================================================================
   TABLE CELLS
   ======================================================================== */

.blog-table td {
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-primary);
  vertical-align: middle;
  white-space: nowrap;
  background: transparent;
  border: none;

  /* Smooth text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* First and last cells */
.blog-table td:first-child {
  padding-left: var(--space-xl);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.blog-table td:last-child {
  padding-right: var(--space-xl);
}

/* Numeric cells - slightly muted */
.blog-table td:not(:first-child) {
  color: var(--color-text-secondary);
}

/* ========================================================================
   ALIGNMENT
   ======================================================================== */

/* Left alignment (default) */
.blog-table th[style*="text-align: left"],
.blog-table td[style*="text-align: left"] {
  text-align: left;
}

/* Center alignment */
.blog-table th[style*="text-align: center"],
.blog-table td[style*="text-align: center"] {
  text-align: center;
}

/* Right alignment - for numbers */
.blog-table th[style*="text-align: right"],
.blog-table td[style*="text-align: right"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

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

@media (max-width: 768px) {
  .blog-table-wrapper {
    margin: var(--space-xl) -var(--space-md);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .blog-table {
    font-size: var(--font-size-xs);
  }

  .blog-table th,
  .blog-table td {
    padding: var(--space-sm) var(--space-md);
  }

  .blog-table th:first-child,
  .blog-table td:first-child {
    padding-left: var(--space-md);
  }

  .blog-table th:last-child,
  .blog-table td:last-child {
    padding-right: var(--space-md);
  }
}

/* ========================================================================
   EXTRA SMALL SCREENS - Card Layout Alternative
   ======================================================================== */

@media (max-width: 480px) {
  /* Keep horizontal scroll on very small screens */
  .blog-table-wrapper {
    margin: var(--space-lg) -var(--space-sm);
  }

  .blog-table th,
  .blog-table td {
    padding: var(--space-xs) var(--space-sm);
    white-space: normal;
    min-width: 100px;
  }

  .blog-table th:first-child,
  .blog-table td:first-child {
    min-width: 120px;
    position: sticky;
    left: 0;
    background: var(--color-bg-primary);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    z-index: 5;
  }

  .blog-table thead th:first-child {
    z-index: 15;
  }
}

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

@media print {
  .blog-table-wrapper {
    overflow: visible;
    box-shadow: none;
    border: var(--border-width-thin) solid #333;
  }

  .blog-table {
    font-size: 9pt;
    page-break-inside: auto;
  }

  .blog-table tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  .blog-table thead {
    display: table-header-group;
  }

  .blog-table tbody tr:hover {
    background: transparent;
  }
}

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

/* Focus styles for keyboard navigation */
.blog-table:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Screen reader improvements */
.blog-table caption {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .blog-table {
    border: 2px solid currentColor;
  }

  .blog-table th,
  .blog-table td {
    border: 1px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .blog-table tbody tr,
  .blog-table th,
  .blog-table td {
    transition: none;
  }

  .blog-table-wrapper {
    scroll-behavior: auto;
  }
}

/* ========================================================================
   SCROLL TO TOP BUTTON - Blog Post Enhancement
   ======================================================================== */

/**
 * Gorgeous scroll-to-top button for blog posts
 *
 * Design: Glassmorphic button with MWANGI blue accent
 * Features:
 * - Smooth fade in/out with slide-up animation
 * - Glassmorphic background with backdrop blur
 * - Hover scale + glow effect
 * - Touch-friendly 48x48px minimum target
 * - Keyboard accessible (Tab + Enter/Space)
 * - Screen reader friendly with ARIA labels
 * - Performance optimized (GPU accelerated)
 */

.blog-scroll-to-top {
  /* Positioning */
  position: fixed;
  bottom: var(--space-2xl, 2rem);
  right: var(--space-2xl, 2rem);
  z-index: 100;

  /* 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 - smooth entrance */
.blog-scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Hover state - scale up + enhanced glow */
.blog-scroll-to-top: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 - press feedback */
.blog-scroll-to-top:active {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(41, 181, 237, 0.3);
}

/* Focus state - keyboard accessibility */
.blog-scroll-to-top:focus-visible {
  outline: 3px solid var(--color-primary, #29B5ED);
  outline-offset: 4px;
  border-color: rgba(41, 181, 237, 0.8);
}

/* SVG icon styling */
.blog-scroll-to-top svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon animation on hover */
.blog-scroll-to-top:hover svg {
  transform: translateY(-2px);
}

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

@media (max-width: 768px) {
  .blog-scroll-to-top {
    /* Smaller on mobile but still touch-friendly */
    width: 48px;
    height: 48px;
    bottom: var(--space-xl, 1.5rem);
    right: var(--space-xl, 1.5rem);
  }

  .blog-scroll-to-top svg {
    width: 20px;
    height: 20px;
  }
}

/* Extra small screens - position to avoid bottom nav */
@media (max-width: 480px) {
  .blog-scroll-to-top {
    bottom: var(--space-lg, 1.25rem);
    right: var(--space-lg, 1.25rem);
  }
}

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

/* High contrast mode support */
@media (prefers-contrast: high) {
  .blog-scroll-to-top {
    border-width: 2px;
    border-color: currentColor;
  }

  .blog-scroll-to-top:focus-visible {
    outline-width: 4px;
  }
}

/* Reduced motion - disable animations */
@media (prefers-reduced-motion: reduce) {
  .blog-scroll-to-top,
  .blog-scroll-to-top svg {
    transition: opacity 0.01ms, visibility 0.01ms;
    will-change: auto;
  }

  .blog-scroll-to-top:hover,
  .blog-scroll-to-top:active {
    transform: none;
  }

  .blog-scroll-to-top:hover svg {
    transform: none;
  }
}

/* Dark theme enhancements (already dark, but ensure consistency) */
@media (prefers-color-scheme: dark) {
  .blog-scroll-to-top {
    /* Slightly more visible in very dark environments */
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.6),
      0 0 20px rgba(41, 181, 237, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* ========================================================================
   PRINT STYLES - Hide on print
   ======================================================================== */

@media print {
  .blog-scroll-to-top {
    display: none !important;
  }
}