/* Replacements for things Squarespace's runtime JS used to switch on.
   Copied into public/assets/css/ by build_public.py. */

/* Newsletter block is faded in by JS once "rendered" */
.newsletter-block:not(.rendered) { opacity: 1; }
.newsletter-form-spinner { display: none; }

/* Blog list items fade in once JS marks them .is-loaded */
.blog-basic-grid .blog-basic-grid--container,
.blog-side-by-side .blog-item,
.blog-alternating-side-by-side .blog-item { opacity: 1; transform: none; }

/* Squarespace forms are hidden until the React form app mounts */
.form-inner-wrapper[hidden] { display: block !important; }
.selfhost-form-message { margin-top: 1rem; font-weight: 500; }
.selfhost-form-message[data-state="error"] { color: #b00020; }

/* Summary (latest news) block: Squarespace positioned items absolutely with JS.
   A plain CSS grid gives the same autocolumns look. */
.sqs-block-summary-v2 .summary-item-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
  height: auto !important;
}
.sqs-block-summary-v2 .summary-item {
  visibility: visible;
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  transform: none !important;
}
.sqs-block-summary-v2 .summary-thumbnail-container { display: block; }
.sqs-block-summary-v2 .summary-thumbnail.img-wrapper {
  position: relative;
  aspect-ratio: 3 / 2;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden;
}
.sqs-block-summary-v2 .summary-thumbnail-image {
  opacity: 1 !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Marquee: the wavy SVG text-path needs Squarespace's JS; use a straight scrolling band instead */
.Marquee-display > h1:has(.Marquee-svg) { display: none; }
.Marquee-display { width: 100%; overflow: hidden; }
.Marquee-measure {
  position: static;
  visibility: visible;
  display: flex;
  justify-content: center;
  width: 100%;
}
.Marquee.selfhost-marquee .Marquee-measure {
  justify-content: flex-start;
  width: max-content;
  animation: selfhost-marquee var(--marquee-duration, 30s) linear infinite;
}
@keyframes selfhost-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .Marquee.selfhost-marquee .Marquee-measure { animation: none; }
}

/* Video blocks: the iframe is written in at build time instead of by JS */
.sqs-video-wrapper { position: absolute; inset: 0; }
.sqs-video-wrapper iframe { width: 100%; height: 100%; border: 0; }
.embed-block-wrapper { position: relative; }

/* Posts recovered from the WordPress-era archive */
.recovered-post img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; }
.recovered-post figure { margin: 0 0 1.5rem; }
.recovered-post figcaption { font-size: .85em; opacity: .75; text-align: center; }
.recovered-post iframe { max-width: 100%; }
.recovered-category-heading { grid-column: 1 / -1; margin: 0 0 1rem; }

/* Holding site (make_holding.py) */
.holding-footer-links { display: flex; flex-direction: column; gap: .5em; }
.holding-email a { font-size: 1.25em; font-weight: 500; }