/* Additions to Cassiopeia's template.css for the static site: brand, a CSS-only dropdown menu (Cassiopeia's own
   needs Bootstrap/MetisMenu JavaScript) and the former Widgetkit blocks. */

.brand-logo { display: inline-flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
/* The logo is drawn for a light background (black lettering): a white plate keeps it readable on the dark header. */
.brand-logo img { height: 50px; width: auto; box-sizing: content-box; padding: 4px 6px; background: #fff;
  border-radius: 3px; }
.brand-name { font-size: 1.5rem; font-weight: 300; line-height: 1.2; }

.site-nav .nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.site-nav .nav-item { position: relative; }
.site-nav a { color: #fff; text-decoration: none; display: block; padding: .35rem 0; }
.site-nav a:hover, .site-nav a:focus, .site-nav .active > a { text-decoration: underline; }
.site-nav .mod-menu__sub { display: none; position: absolute; z-index: 10; left: 0; top: 100%; min-width: 14rem;
  margin: 0; padding: .5rem 1rem; list-style: none; background: hsl(240, 68%, 12%); border-radius: .25rem; }
.site-nav .parent:hover > .mod-menu__sub, .site-nav .parent:focus-within > .mod-menu__sub { display: block; }
@media (max-width: 767.98px) {
  .site-nav .nav { flex-direction: column; }
  .site-nav .mod-menu__sub { display: block; position: static; background: none; padding: 0 0 0 1rem; }
}

/* Content lists: plain bullets in the header colour (the content's pasted orange image markers are dropped). */
.com-content-article__body li, .category-desc li, .blog-item li { margin: .35rem 0; }
.com-content-article__body li::marker, .category-desc li::marker, .blog-item li::marker {
  color: var(--cassiopeia-color-primary, #112855); }
li:empty { display: none; } /* an empty item was invisible without its image marker; a bullet alone looks broken */

/* Widgetkit "slideshow": a horizontal scroll-snap strip, each slide an image with a centered caption. */
.wk-slideshow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin: 0 0 1.5rem;
  border-radius: .25rem; scrollbar-width: thin; }
.wk-slide { flex: 0 0 100%; position: relative; scroll-snap-align: start; min-height: 300px; color: #fff;
  text-decoration: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.wk-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk-slide::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.wk-cover { position: relative; z-index: 1; padding: 1rem; text-align: center; }
.wk-cover h1 { color: #fff; font-size: clamp(1.4rem, 4vw, 2.4rem); margin: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

.wk-map-frame { width: 100%; height: 400px; border: 0; border-radius: .25rem; }

.wk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem; }
.wk-grid h3 { font-size: 1.1rem; }
.wk-grid ul { list-style: none; padding: 0; }
.container-footer .grid-child { display: block; } /* Cassiopeia lays it out as a row; here: grid, then copyright */
.footer a { color: #fff; }
.copyright { margin-top: 1rem; opacity: .8; }