/* Graph paper background will be rendered by p5.js in script.js */

/* White content cards already handled by Tailwind, but we add extra spacing if needed */
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

/* Optional: Adjust for scroll behavior or smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Extra control if you want */
header {
  background-position: center 60%; /* matches your object-[50%_70%] */
  background-repeat: no-repeat;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* prevent horizontal scrollbars */
}



.parallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;       /* bigger than container to avoid gaps */
  object-fit: cover;
  object-position: 50% 70%;

  /* Scroll-driven parallax */
  animation: parallax-move linear;
  animation-timeline: scroll();     /* experimental, Chrome/Safari TP */
  animation-range: 0 400px;         /* controls how long before it maxes out */
}

@keyframes parallax-move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-40px);   /* slow drift upwards */
  }
}

/* Optional: nicer defaults for long text in the Highlights card */
.prose h3 { font-size: 1.5rem; font-weight: 700; margin-top: 1rem; margin-bottom: 0.5rem; }
.prose h4 { font-size: 1.25rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.5rem; }
.prose p  { margin: 0.75rem 0; line-height: 1.7; }
.prose ul { list-style: disc; padding-left: 1.5rem; }
.prose li { margin: 0.25rem 0; }

/* --- MathJax inline/display fixes --- */

/* Inline math: keep it truly inline with text */
.highlights-content mjx-container[display="false"] {
  display: inline !important;
  vertical-align: middle !important;
  margin: 0 .15em !important;
  line-height: inherit !important;
}

/* Prevent <p> and <li> inside .prose from forcing line breaks before/after math */
.highlights-content p mjx-container[display="false"],
.highlights-content li mjx-container[display="false"],
.highlights-content h3 mjx-container[display="false"],
.highlights-content h4 mjx-container[display="false"] {
  display: inline !important;
}

/* Display math: centered block */
.highlights-content mjx-container[display="true"] {
  display: block !important;
  text-align: center !important;
  margin: 1em 0 !important;
}
 
/* ===== MathJax: keep inline math in-flow ===== */

/* Make ALL MathJax containers inline by default */
.highlights-content mjx-container {
  display: inline !important;
  text-indent: 0 !important;
  margin: 0 .15em !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
}

/* But if MathJax marks it as display math, put it on its own line */
.highlights-content mjx-container[display="true"] {
  display: block !important;
  text-align: center !important;
  margin: 1em 0 !important;
}

/* Ensure the SVG inside inline math doesn't flip to block */
.highlights-content mjx-container[display="false"] > svg {
  display: inline !important;
}

/* Safety: paragraphs/lists should not treat newlines as hard breaks */
.highlights-content p,
.highlights-content li {
  white-space: normal !important;
}

/* MathJax inline/display fixes */
.highlights-content mjx-container[display="false"] {
  display: inline !important;         /* force inline */
  vertical-align: middle !important;
  margin: 0 .15em !important;
  line-height: inherit !important;
}

.highlights-content mjx-container[display="true"] {
  display: block !important;          /* keep display math centered */
  text-align: center !important;
  margin: 1em 0 !important;
}

/* Kill any block-level forcing from prose */
.highlights-content p > mjx-container,
.highlights-content li > mjx-container,
.highlights-content h3 > mjx-container,
.highlights-content h4 > mjx-container {
  display: inline !important;
}

.npr-player-wrapper {
  width: 100%;
  overflow: hidden;
}
.npr-player-wrapper iframe {
  transform: scale(1.2); /* increase size */
  transform-origin: top left;
  width: 50%;
  height: 290px; /* keep original NPR height */
}

.image-card {
  position: relative;
  display: block;
  border-radius: 0.75rem;
  overflow: hidden;
  height: 200px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-card:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.image-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3); /* slightly darker by default */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* move text to bottom */
  align-items: flex-start; /* left-align text */
  padding: 1rem; /* <-- NEW: adds space from edges */
  text-align: left;
  color: white;
  opacity: 0.9; /* clearer text initially */
  transition: background 0.3s ease, opacity 0.3s ease;
}

.image-card:hover .overlay {
  background: rgba(0,0,0,0.6);
  opacity: 1;
}

.image-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
  max-width: 90%; /* prevents text from touching edges */
  word-break: break-word;
}

.image-card p {
  font-size: 0.875rem;
  max-width: 90%; /* prevents text from stretching edge-to-edge */
}

.image-card.dark-overlay .overlay {
  background: rgba(0, 0, 0, 0.65); /* darker default */
}

.image-card.dark-overlay:hover .overlay {
  background: rgba(0, 0, 0, 0.85);
}