/* Additions to the legacy theme for the static site. */
.post-content img { max-width: 100%; height: auto; }
.image-post img { width: 100%; height: auto; }
.more-in-category .item { margin-bottom: 25px; }
.more-in-category .card-thumb { display: block; margin: 0 auto 8px; max-width: 100%; height: auto; }
.blog-3 .item .image-post img { display: block; width: 100%; height: auto; }
.empty-listing { font-size: 1.1em; margin: 20px 0 60px; }
.short-page { min-height: calc(100vh - 330px); }

/* Desktop dropdown menu: CSS instead of the legacy ddsmoothmenu script. */
.navigation ul li:hover > ul,
.navigation ul li:focus-within > ul { display: block; visibility: visible; }

/* Masonry grid (site.js positions the cards; one column needs no JS). */
#contain.masonry { position: relative; }
#contain.masonry > .item { position: absolute; }

/* Responsive iframes (YouTube) in article bodies. */
.post-content iframe { max-width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Image viewer: <dialog> instead of the legacy fancyBox. */
dialog.viewer { padding: 0; border: 0; background: transparent; max-width: 95vw; max-height: 95vh; overflow: visible; }
dialog.viewer::backdrop { background: rgba(0, 0, 0, 0.8); }
dialog.viewer img { display: block; max-width: 95vw; max-height: 90vh; width: auto; height: auto; background: #fff; padding: 10px; border-radius: 3px; cursor: zoom-out; }
dialog.viewer button { position: absolute; border: 0; background: #4b4c4d; color: #fff; font-size: 26px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; opacity: 0.9; }
dialog.viewer button:hover { opacity: 1; }
dialog.viewer .viewer-close { top: -16px; right: -16px; }
dialog.viewer .viewer-prev { top: 50%; left: 10px; transform: translateY(-50%); }
dialog.viewer .viewer-next { top: 50%; right: 10px; transform: translateY(-50%); }

/* Back-to-top button (legacy #toTop styles, icon centred). */
#toTop { text-align: center; line-height: 37px; font-size: 22px; color: #666; }