/* style.css — small custom rules that Tailwind utilities don't cleanly cover */

body { font-family: "Open Sans", ui-sans-serif, system-ui, sans-serif; }

/* Graphic-content blur toggle: content stays blurred until the viewer
   explicitly opts in, per the editor-controlled content_warning flag.
   On the gallery/cards, .graphic-blur is toggled directly (thumbnail is
   the only child, nothing else to keep sharp). On the video page, the
   warning overlay sits as a SIBLING of the blurred <video> (not a child)
   — CSS filter blurs an element's entire rendered subtree, so nesting the
   warning text inside the blurred wrapper would blur the warning itself. */
.graphic-blur {
  filter: blur(24px);
  transition: filter 0.2s ease;
}
.graphic-blur.revealed {
  filter: none;
}
#player-wrap.revealed .graphic-blur {
  filter: none;
}
#player-wrap.revealed .graphic-overlay-text {
  display: none;
}

/* Video card hover */
.video-card { transition: transform .15s ease, box-shadow .15s ease; }
.video-card:hover { transform: translateY(-2px); }

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

/* Custom scrollbar for dark theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #011C34; }
::-webkit-scrollbar-thumb { background: #23405c; border-radius: 6px; }

video { background: #000; }

/* Rich-text content (About/Contact, admin-editable via Page Editor).
   Not using Tailwind's "prose" classes — the typography plugin was never
   actually loaded, so those were no-ops. Each <h2> reads as its own
   distinct section (e.g. "Mission", "What we do"), not just a bigger
   line of running text. */
.rich-content h1 {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #F8F9F9;
  margin-bottom: 1.5rem;
}
.rich-content h2 {
  font-size: 1.375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #FF9933;
  margin-top: 2.5rem;
  margin-bottom: 0.9rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.rich-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.rich-content h3 { font-size: 1.1rem; font-weight: 700; color: #F8F9F9; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.rich-content p { color: rgba(255, 255, 255, 0.75); line-height: 1.75; margin-bottom: 1rem; }
.rich-content a { color: #FF9933; text-decoration: underline; }
.rich-content ul, .rich-content ol { margin-left: 1.25rem; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.75); }
.rich-content ul { list-style: disc; }
.rich-content ol { list-style: decimal; }
.rich-content li { margin-bottom: 0.35rem; line-height: 1.7; }
.rich-content blockquote {
  border-left: 3px solid #FF9933;
  padding-left: 1rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1rem;
}
.rich-content strong { color: #F8F9F9; font-weight: 700; }