/* =============================================
   Project Dukkha - Utility Classes
   Helpers, Loading States, and Utility Components
   ============================================= */

/* =============================================
   Utility Classes
   ============================================= */

.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;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-serif { font-family: var(--font-serif); }
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-text-primary); }

.bg-surface { background-color: var(--color-surface); }
.bg-elevated { background-color: var(--color-surface-elevated); }

.border { border: 1px solid var(--color-border); }
.border-accent { border-color: var(--color-accent); }

.rounded { border-radius: var(--border-radius); }
.rounded-lg { border-radius: var(--border-radius-lg); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.transition { transition: all var(--transition-normal); }

/* =============================================
   Loading States
   ============================================= */

.loading {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top: 2px solid var(--color-accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =============================================
   Diagram Utilities
   ============================================= */

/* General Styling for Actual Diagrams (SVG files embedded via <img>) */
.diagram-visual {
    display: block;
    width: 100%;
    max-width: 700px; /* Adjust max width for all diagrams as needed for consistency */
    height: 400px; /* Fixed height to create a viewport for cropping */
    margin: var(--space-8) auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    object-fit: none; /* Don't scale the SVG, show it at original size */
    object-position: center center; /* Center the SVG within the viewport */
    overflow: hidden; /* Hide parts that extend beyond the viewport */
}

/* =============================================
   Protocol Components
   ============================================= */

/* Protocol list & details styles */
.protocol-list { 
  display: grid; 
  gap: 1rem; 
  grid-template-columns: 1fr; 
  max-width: 900px; 
  margin: 0 auto; 
}

.protocol-card { 
  border: 1px solid var(--color-border); 
  padding: 1rem; 
  border-radius: 8px; 
  background: var(--color-surface); 
}

details.protocol-summary { 
  border: 1px solid var(--color-border); 
  padding: 0.6rem; 
  border-radius: 6px; 
  background: transparent; 
}

details.protocol-summary summary { 
  font-weight: 600; 
  cursor: pointer; 
}

details.protocol-summary[open] { 
  background: rgba(0,0,0,0.02); 
}

/* =============================================
   Reading Progress & Prompt & Dropdown
   ============================================= */

.read-progress {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container-width);
  height: 8px; /* slightly thicker */
  background: transparent;
  /* align to page content by matching container padding */
  padding: 0 var(--container-padding);
  pointer-events: none;
  z-index: 1000;
  display: none;
  box-sizing: border-box;
}
.read-progress.visible {
  display: block;
}
.read-progress__bar {
  width: 0;
  height: 100%;
  background: var(--color-accent);
  transition: width 220ms ease;
  border-radius: 999px;
}
@media (max-width: 767px) {
  .read-progress { display: none; }
  .read-progress.visible { display: none; }
}

.read-prompt {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  max-width: 280px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-md);
  display: none;
}
.read-prompt.active { display: block; }
.read-prompt__close {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  background: none;
  border: none;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}
.read-prompt__close:focus { outline: 2px solid var(--color-accent); }

.nav-dropdown { position: relative; }
.nav-dropdown__toggle {
  background: none;
  border: none;
  cursor: pointer;
}
.nav-dropdown__toggle:focus { outline: 2px solid var(--color-accent); }
.nav-dropdown__menu {
  position: fixed; /* Changed from absolute to fixed */
  left: auto; /* Let JavaScript handle positioning */
  top: auto; /* Let JavaScript handle positioning */
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
  display: none;
  min-width: 200px;
  z-index: 1000; /* Much higher than nav's z-index: 100 */
  box-shadow: var(--shadow-lg); /* Add shadow for better visual separation */
}
.nav-dropdown.open .nav-dropdown__menu { display: block; }
.nav-dropdown__menu li { list-style: none; }
.nav-dropdown__menu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-primary);
}
.nav-dropdown__menu a:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  background: var(--color-surface);
}

/* =============================================
   Layout Utilities: Sticky Footer (Corrected)
   ============================================= */

/* Now that footer comes after footnotes in HTML, this is much simpler */
@media (min-height: 800px) {
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  main {
    flex: 1;
  }
  
  .footer {
    margin-top: auto;
  }
}