/* Additions on top of the old easyqt.css (which is copied as-is by the snapshot script). */

/* Hero: slide down then fade the text in (was a MooTools Fx.Morph to 357px) */
#slide { height: 357px; overflow: hidden; animation: ezq-slide 1.2s .75s cubic-bezier(.39, .575, .565, 1) both; }
#slideinner { animation: ezq-fade .6s 1.9s both; }
@keyframes ezq-slide { from { height: 0; } to { height: 357px; } }
@keyframes ezq-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #slide, #slideinner { animation: none; } }

a:focus-visible { outline: 2px solid #00406c; outline-offset: 2px; }

/* Lightbox (replaces slimbox) */
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px 60px; background: rgba(0, 0, 0, .85); }
.lb[hidden] { display: none; }
.lb figure { margin: 0; max-width: 100%; max-height: calc(100% - 40px); display: flex; flex-direction: column; align-items: center; }
.lb img { max-width: 100%; max-height: calc(100vh - 110px); background: #fff; padding: 6px; box-shadow: 0 0 20px rgba(0, 0, 0, .5); }
.lb figcaption { color: #fff; font: 14px/1.4 Arial, sans-serif; margin-top: 8px; text-align: center; }
.lb button { position: absolute; background: none; border: 0; color: #fff; font: 40px/1 Arial, sans-serif; cursor: pointer; padding: 10px; opacity: .8; }
.lb button:hover, .lb button:focus-visible { opacity: 1; }
.lb .lb-close { top: 10px; right: 15px; font-size: 32px; }
.lb .lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb .lb-prev[hidden], .lb .lb-next[hidden] { display: none; }