/**
 * No-JavaScript fallback styles
 * Ensures graceful degradation when JavaScript is disabled
 */

/* Hide JavaScript-dependent elements when JS is disabled */
.no-js .js-only,
.no-js [data-js-only="true"] {
  display: none !important;
}

/* Show no-JS fallback elements */
.no-js .no-js-only {
  display: block !important;
}

/* Hide theme switcher when JS is disabled */
.no-js .theme-switcher,
.no-js .theme-toggle {
  display: none !important;
}

/* Hide PWA elements when JS is disabled */
.no-js .pwa-install-button,
.no-js .pwa-update-notification {
  display: none !important;
}

/* Hide code copy buttons when JS is disabled */
.no-js .copy-button,
.no-js .code-copy-button {
  display: none !important;
}

/* Search interface adjustments */
.no-js .search-interface {
  opacity: 0.5;
  pointer-events: none;
}

.no-js .search-input {
  cursor: not-allowed;
}

/* Show helpful messages for JS-dependent features */
.no-js-message {
  display: none;
}

.no-js .no-js-message {
  display: block;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem 0;
  color: #856404;
}

.no-js .no-js-message h3 {
  margin-top: 0;
  color: #856404;
}

.no-js .no-js-message a {
  color: #0056b3;
  text-decoration: underline;
}

.no-js .no-js-message code {
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

.no-js .no-js-message kbd {
  background: #f8f9fa;
  border: 1px solid #d0d7de;
  border-radius: 3px;
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.875em;
}

/* Dark mode support for no-JS messages */
@media (prefers-color-scheme: dark) {
  .no-js .no-js-message {
    background: #3d3000;
    border-color: #d29922;
    color: #ffc107;
  }
  
  .no-js .no-js-message h3 {
    color: #ffc107;
  }
  
  .no-js .no-js-message a {
    color: #58a6ff;
  }
  
  .no-js .no-js-message code,
  .no-js .no-js-message kbd {
    background: #2d333b;
    border-color: #444c56;
    color: #e6edf3;
  }
}

/* Ensure content is still readable without JS */
.no-js main {
  /* Content should be fully accessible */
}

/* Hide loading spinners when JS is disabled */
.no-js .loading,
.no-js .spinner,
.no-js [data-loading="true"] {
  display: none !important;
}

/* Show static content instead of dynamic content */
.no-js .static-fallback {
  display: block !important;
}

.js .static-fallback {
  display: none !important;
}

/* Mastodon comments fallback */
.no-js #load-comments {
  display: none !important;
}

/* Form enhancements that require JS */
.no-js .form-validation-message {
  display: none !important;
}

/* Image lightbox - show images normally without JS */
.no-js .lightbox-trigger {
  cursor: default;
  pointer-events: none;
}

/* Smooth scroll fallback */
.no-js {
  scroll-behavior: auto;
}

/* Progressive disclosure - show all content when JS is disabled */
.no-js .collapsible-content {
  display: block !important;
  max-height: none !important;
}

.no-js .expand-button {
  display: none !important;
}

/* Tabs - show all tab content when JS is disabled */
.no-js .tab-content {
  display: block !important;
}

.no-js .tab-button {
  pointer-events: none;
  opacity: 0.7;
}

/* Tooltips - convert to always-visible when JS is disabled */
.no-js [data-tooltip]::after {
  content: " (" attr(data-tooltip) ")";
  font-size: 0.875em;
  color: var(--color-text-muted);
}

/* Lazy loading - ensure images load without JS */
.no-js img[loading="lazy"] {
  /* Browser will still lazy load, but ensure they're visible */
}

/* Ensure navigation works without JS */
.no-js .mobile-menu-toggle {
  display: none !important;
}

.no-js .mobile-menu {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Print styles - ensure content prints correctly */
@media print {
  .no-js-message,
  .no-js-banner {
    display: none !important;
  }
}

/* Accessibility: Ensure focus styles work without JS */
.no-js a:focus,
.no-js button:focus,
.no-js input:focus,
.no-js textarea:focus,
.no-js select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Ensure forms work without JS validation */
.no-js form {
  /* Forms should use native HTML5 validation */
}

/* Show alternative content for interactive features */
.no-js .interactive-demo {
  display: none !important;
}

.no-js .static-demo {
  display: block !important;
}

/* Ensure all links are functional */
.no-js a[href^="#"] {
  /* Anchor links should still work */
}

/* Video/media controls */
.no-js .custom-video-controls {
  display: none !important;
}

.no-js video,
.no-js audio {
  /* Use native browser controls */
  controls: true;
}

/* Ensure readable font sizes without JS adjustments */
.no-js {
  font-size: 16px; /* Base font size */
}

/* Cookie consent / GDPR notices */
.no-js .cookie-consent {
  /* Show simplified version without JS */
}

/* Analytics opt-out */
.no-js .analytics-toggle {
  display: none !important;
}

/* Share buttons - show simple links instead of JS widgets */
.no-js .share-widget {
  display: none !important;
}

.no-js .share-links {
  display: block !important;
}

/* Ensure proper spacing without JS layout adjustments */
.no-js .dynamic-layout {
  /* Use static layout */
}

/* Comments section */
.no-js .comment-form-dynamic {
  display: none !important;
}

.no-js .comment-form-static {
  display: block !important;
}

/* Infinite scroll - show pagination instead */
.no-js .infinite-scroll-trigger {
  display: none !important;
}

.no-js .pagination {
  display: block !important;
}

/* Filter/sort controls that require JS */
.no-js .js-filter-controls {
  opacity: 0.5;
  pointer-events: none;
}

.no-js .js-filter-controls::after {
  content: " (Requires JavaScript)";
  font-size: 0.875em;
  color: var(--color-text-muted);
}