/* ====== BLOG CSS ====== */
/* Main entry point - imports all modular CSS */

@import "_variables.css";
@import "_reset.css";
@import "_typography.css";
@import "_spacing.css";
@import "_layout.css";
@import "_components.css";
@import "_accessibility.css";
@import "_dark-mode.css";
@import "_responsive.css";

/* ====== ADDITIONAL UTILITIES ====== */

/* Image optimization */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* SVG styling */
svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* ====== ANIMATION UTILITIES ====== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 600ms ease forwards;
}

.slide-up {
  animation: slideUp 400ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.slide-down {
  animation: slideDown 400ms cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

/* Staggered delays */
.slide-up:nth-child(1) { animation-delay: 0ms; }
.slide-up:nth-child(2) { animation-delay: 50ms; }
.slide-up:nth-child(3) { animation-delay: 100ms; }
.slide-up:nth-child(4) { animation-delay: 150ms; }
.slide-up:nth-child(5) { animation-delay: 200ms; }
.slide-up:nth-child(n+6) { animation-delay: 250ms; }

/* ====== UTILITY CLASSES ====== */

.no-wrap {
  white-space: nowrap;
}

.line-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====== PROSE ENHANCEMENTS ====== */

.prose-lg {
  font-size: var(--step-1);
  line-height: 1.7;
}

.prose-sm {
  font-size: var(--step--1);
  line-height: 1.6;
}

/* ====== UTILITY SPACING CLASSES ====== */

.space-y-md > * + * {
  margin-top: var(--space-md);
}

.space-y-lg > * + * {
  margin-top: var(--space-lg);
}

.space-y-xl > * + * {
  margin-top: var(--space-xl);
}

.space-y-2xl > * + * {
  margin-top: var(--space-2xl);
}

.space-x-md {
  display: flex;
  gap: var(--space-md);
}

.space-x-lg {
  display: flex;
  gap: var(--space-lg);
}

.space-x-xl {
  display: flex;
  gap: var(--space-xl);
}

/* ====== FOOTNOTES STYLING ====== */

/* Footnote reference (superscript link in text) */
sup a.footnote-ref {
  /* Remove default link styling */
  text-decoration: none;
  
  /* Tight spacing - no extra margins */
  margin-left: 0.05em;
  margin-right: 0;
  padding: 0;
  
  /* Very small size to minimize line spacing impact */
  font-size: 0.65em;
  font-weight: 600;
  line-height: 1;
  
  /* Compact vertical spacing */
  vertical-align: super;
  
  color: var(--color-primary, #0066cc);
  
  /* Smooth transition for hover effects */
  transition: color 200ms ease;
}

/* Hover state - no underline, subtle color change */
sup a.footnote-ref:hover {
  text-decoration: none;
  cursor: pointer;
  color: var(--color-primary-dark, #0052a3);
  background-color: transparent;
}

/* Active/visited state */
sup a.footnote-ref:visited {
  color: var(--color-primary, #0066cc);
}

/* Focus state for accessibility */
sup a.footnote-ref:focus {
  outline: 2px solid var(--color-primary, #0066cc);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Footnotes section at the bottom */
.footnotes {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border, #e5e7eb);
  font-size: 0.95em;
  color: var(--color-text-secondary, #666);
}

.footnotes ol {
  margin: 0;
  padding-left: var(--space-lg);
}

.footnotes li {
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

/* Footnote content paragraph styling */
.footnotes li p {
  margin: 0;
  display: inline;
}

/* Footnote backref (link back to text) */
.footnotes a.footnote-backref {
  text-decoration: none;
  color: var(--color-primary, #0066cc);
  margin-left: 0.3em;
  font-weight: 500;
  transition: color 200ms ease;
}

.footnotes a.footnote-backref:hover {
  text-decoration: none;
  color: var(--color-primary-dark, #0052a3);
}

/* Dark mode adjustments for footnotes */
@media (prefers-color-scheme: dark) {
  sup a.footnote-ref {
    color: var(--color-primary-light, #66b3ff);
  }
  
  sup a.footnote-ref:hover {
    color: var(--color-primary-lighter, #99ccff);
  }
  
  .footnotes {
    border-top-color: var(--color-border-dark, #404040);
    color: var(--color-text-secondary-dark, #999);
  }
  
  .footnotes a.footnote-backref {
    color: var(--color-primary-light, #66b3ff);
  }
  
  .footnotes a.footnote-backref:hover {
    color: var(--color-primary-lighter, #99ccff);
  }
}

/* ====== END OF STYLESHEET ====== */