/* custom.css — per-site design layer.
 *
 * Ships EMPTY. This is where a site gets a bespoke look WITHOUT forking the
 * template: it loads after site.css and theme.css, so anything here wins.
 * `sites update-template` PRESERVES this file (it's treated like config.json),
 * so template updates never clobber a site's custom design.
 *
 * Two sites built on this same template can look completely different — one
 * clean and light, another dark and technical — by living here. Use CSS
 * variables from theme.css (--color-primary, etc.) plus plain overrides of
 * the component classes in site.css (.hero, .card, .btn-primary, header,
 * footer, section bands…).
 */

/* Image and video heroes paint a dark scrim, so the title has to be light.
   The kit's default .hero is a blank light band; that color would sit on
   top of the photo. Min-height keeps a short image from collapsing the band. */
.hero-image,
.hero-media {
  color: #fff;
  min-height: 20rem;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  .hero-image,
  .hero-media { min-height: 28rem; }
}

/* Resolve2D dark footer */
[data-footer] {
  background: var(--color-dark);
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-footer] .font-bold,
[data-footer] .font-semibold {
  color: #fff;
}

[data-footer] p,
[data-footer] li,
[data-footer] a {
  color: rgba(255, 255, 255, 0.75);
}

[data-footer] a:hover {
  color: #fff;
}

/* Resolve2D text-only page heroes */
.hero:not(.hero-image):not(.hero-media) {
  background: linear-gradient(135deg, var(--color-dark), var(--color-primary));
  color: #fff;
  border-bottom: 0;
}

/* Resolve2D readable content cards — presentation only */
.resolve2d-card-content > :is(h2, h3) {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem 0.35rem;
  border: 1px solid var(--zk-border-strong);
  border-bottom: 0;
  border-radius: 0.75rem 0.75rem 0 0;
}

.resolve2d-card-content > :is(h2, h3) + :is(p, ul, ol) {
  margin: 0 0 1.5rem;
  padding: 0.35rem 1.5rem 1.25rem;
  border: 1px solid var(--zk-border-strong);
  border-top: 0;
  border-radius: 0 0 0.75rem 0.75rem;
}