/* -------------------------------------------------*/
/* Custom Lightbox CSS to match search overlay style */
/* -------------------------------------------------*/
/* Lightbox styles */
#lightbox-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; overflow: hidden; background-color: rgba(0, 0, 0, 0); transition: background-color 0.3s ease; }
#lightbox-container.active { display: block; background-color: rgba(0, 0, 0, 0.8); animation: fadeIn 0.3s ease forwards; }
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
#lightbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; }
#lightbox-content { position: relative; max-width: 90%; max-height: 90%; margin: 2% auto; z-index: 10000; }
#lightbox-image-container { display: flex; justify-content: center; align-items: center; height: 80vh; opacity: 0; transition: opacity 0.4s ease; transform: scale(0.9); animation: zoomIn 0.4s ease forwards; }
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
#lightbox-container.active #lightbox-image-container { opacity: 1; }
#lightbox-image { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 1; transition: opacity 0.3s ease; }
#lightbox-image.transitioning { opacity: 0; }
#lightbox-caption { color: white; text-align: center; padding: 10px; font-size: 14px; opacity: 0; transition: opacity 0.3s ease 0.2s; }
#lightbox-container.active #lightbox-caption { opacity: 1; }
#lightbox-close { position: absolute; top: 15px; right: 15px; font-size: 30px; color: white; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.4); width: 40px; height: 40px; border-radius: 5px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; z-index: 10001; }
#lightbox-close:hover { background: rgb(60 220 20 / 60%); transform: scale(1.1); }
#lightbox-prev, #lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.3); color: white; font-size: 24px; padding: 15px 10px; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.4); transition: all 0.3s; z-index: 10001; opacity: 0.7; }
#lightbox-prev:hover, #lightbox-next:hover { background: rgb(60 220 20 / 60%); opacity: 1; }
#lightbox-prev { left: 10px; border-radius: 3px 0 0 3px; }
#lightbox-next { right: 10px; border-radius: 0 3px 3px 0; }
/* -------------------------------------------------*/
/*     Custom code syntax highlighting styles       */
/* -------------------------------------------------*/
pre { background: #1e1d1d17; border-radius: 6px; padding: 16px; overflow-x: auto; font-family: 'Courier New', 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px; line-height: 1.6; margin: 16px 0; max-width: 100%; overflow-x: auto; box-sizing: border-box; white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; }
code { font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px; }
/* Inline code */
:not(pre)>code { background: #f4f4f4; padding: 3px 5px; border-radius: 3px; color: #000000; font-size: 0.9em; margin: 2px 4px; }
/* Syntax colors for highlighted code blocks live in assets/css/hljs-theme.css
   (loaded conditionally, only on pages with a code block — see
   render_hljs_scripts() in core/render/tf-page.php) since highlight.js uses
   its own .hljs-* class names, not the language-scoped ones this file used
   to define for the old hand-rolled highlighter. */
/* Light theme alternative - add .light-theme class to <pre> if needed */
pre.light-theme { background: #f8f8f8; color: #2c3e50; }
/* Optional: Add line numbers */
pre.line-numbers { counter-reset: linenumber; padding-left: 50px; position: relative; }
pre.line-numbers code { display: block; }
pre.line-numbers code::before { counter-increment: linenumber; content: counter(linenumber); position: absolute; left: 16px; color: #666; width: 20px; text-align: right; }
@media (max-width: 768px) {
  pre { white-space: pre-wrap; word-break: break-word; }
}