/* Custom CSS for themes and additional styling */
.bg-gradient-ancient {
  background: var(--gradient-hero, linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%));
}

.bg-gradient-hero {
  background: var(--gradient-hero, linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%));
}

.text-primary-light {
  color: var(--color-primary-light, var(--site-primary));
}

/* Fix for clickability issues */
.reading-progress {
  pointer-events: none;
  z-index: 45;
}

/* Ensure article cards are clickable */
.article-card {
  position: relative;
  z-index: 1;
  background-color: var(--color-bg-paper, #FFFFFF);
  border-radius: var(--radius-lg, 0.75rem);
  box-shadow: var(--shadow-card, 0 2px 4px rgba(0,0,0,0.1));
  overflow: hidden;
}

/* Prevent hover effects from blocking clicks */
.hover-lift {
  will-change: transform;
}

/* Ensure navigation doesn't block content clicks */
nav.sticky {
  z-index: 40 !important;
}

/* Reading progress bar should not interfere */
#readingProgress {
  pointer-events: none;
  z-index: 45;
}

/* Ensure all links in article cards are clickable */
.article-card a {
  position: relative;
  z-index: 2;
}

/* Fix for mobile menu overlay */
#mobileMenu {
  z-index: 30;
}

/* Ensure clickable areas are properly sized */
.article-card .block {
  display: block;
  width: 100%;
  height: 100%;
}

/* Remove any transform on article links to prevent click issues */
@media (pointer: fine) {
  .article-card:hover {
    transform: translateY(-0.25rem);
  }
  
  .article-card a {
    transform: none !important;
  }
}

/* Additional fixes for navigation overlap issues */
main {
  position: relative;
  z-index: 10;
}

/* Ensure sticky nav doesn't interfere with content */
nav[role="navigation"] {
  pointer-events: auto;
  z-index: 40 !important;
}

nav[role="navigation"] * {
  pointer-events: auto;
}

/* Article grid should be above any background elements */
section {
  position: relative;
  z-index: 5;
}

/* Ensure all interactive elements in articles are clickable */
article a,
article button {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Fix for body or wrapper elements interfering */
body > * {
  position: relative;
}

/* Specific fix for overlapping gradient backgrounds */
.bg-gradient-ancient::before,
.bg-gradient-ancient::after {
  pointer-events: none;
}

/* Ensure article content area is interactive */
.grid > article {
  position: relative;
  z-index: 10;
}

/* Debug: Make sure no pseudo-elements block clicks */
*::before,
*::after {
  pointer-events: none;
}

/* Re-enable pointer events for interactive pseudo-elements */
a::before,
a::after,
button::before,
button::after {
  pointer-events: auto;
}

/* Specific fix for parchment background */
.parchment-bg::before {
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Ensure all content is above the parchment background */
.parchment-bg > * {
  position: relative;
  z-index: 1;
}

/* Enhanced Article v6 Styles */
.bg-secondary-dark {
  background-color: var(--color-secondary-dark, var(--site-secondary));
}

.bg-primary-dark {
  background-color: var(--color-primary-dark, var(--site-primary));
}

.text-primary {
  color: var(--color-primary, var(--site-primary));
}

.bg-primary {
  background-color: var(--color-primary, var(--site-primary));
}

/* Better spacing utilities */
.max-w-prose {
  max-width: 75ch;
}

/* Shadow styles */
.shadow-ancient {
  box-shadow: var(--shadow-card, 0 10px 30px rgba(139, 111, 71, 0.15));
}

/* Text color utilities */
.text-text-muted {
  color: var(--color-text-secondary, #5C4033);
}

.text-text-primary {
  color: var(--color-text-primary, #2D1810);
}

/* Article card text fix */
.article-card h3,
.article-card h3 a {
  color: var(--color-text-primary, #2D1810) !important;
}

.article-card p {
  color: var(--color-text-secondary, #5C4033) !important;
}

.article-card:hover h3,
.article-card:hover h3 a {
  color: var(--color-primary, var(--site-primary)) !important;
}

/* Force text visibility on article cards */
.article-card .text-text-muted {
  color: var(--color-text-secondary, #5C4033) !important;
}

.article-card .text-primary {
  color: var(--color-primary, #B8860B) !important;
}

/* Ensure all text in article cards is visible */
.article-card div {
  color: var(--color-text-primary, #2D1810);
}

.article-card time,
.article-card span {
  color: var(--color-text-secondary, #5C4033) !important;
}

/* Debug: Force all text to be visible */
.article-card * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Override any color that might be transparent or same as background */
.article-card h3,
.article-card h3 a,
.article-card p,
.article-card div,
.article-card span,
.article-card time {
  color: inherit !important;
  opacity: 1 !important;
}

.article-card h3,
.article-card h3 a {
  color: #2D1810 !important; /* Force dark brown for ancient.tips */
}

.article-card p,
.article-card .text-text-muted {
  color: #5C4033 !important; /* Force medium brown for ancient.tips */
}

/* Ensure consistent image aspect ratios */
.aspect-\[16\/9\] {
  aspect-ratio: 16 / 9 !important;
  position: relative;
  overflow: hidden;
}

.aspect-\[21\/9\] {
  aspect-ratio: 21 / 9 !important;
  position: relative;
  overflow: hidden;
}

/* Enforce aspect ratio with height constraint */
.article-card .aspect-\[16\/9\] {
  width: 100%;
  height: auto;
}

/* Legacy browser support for aspect ratio */
@supports not (aspect-ratio: 16 / 9) {
  .aspect-\[16\/9\] {
    position: relative;
    padding-bottom: 56.25%; /* 9/16 * 100% */
    height: 0;
    overflow: hidden;
  }
  
  .aspect-\[16\/9\] > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.article-card img,
.article-hero img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center !important;
}

/* Ensure the container maintains aspect ratio */
.article-card a.aspect-\[16\/9\] {
  display: block;
  width: 100%;
  background-color: var(--color-bg-alt, #f5f5f5);
}

/* Animation utilities */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-delayed {
  animation-delay: 0.2s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.animate-delayed-long {
  animation-delay: 0.4s;
  opacity: 0;
  animation-fill-mode: forwards;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Hero Background Images */
.bg-hero-ancient {
  background-image: url('https://images.unsplash.com/photo-1589519160732-57fc498494f8?q=80&w=2940&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-hero-marketing {
  background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2944&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fallback hero pattern */
.bg-hero-pattern {
  background: var(--gradient-hero, linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%));
}