html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* the page as a column at least as tall as the window - the footer (margin-top: auto) sits at the bottom of a
   short page and after the content of a long one */
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* the logo in the header (from the CMS Site Logo page or Site:Logo) - any size of file fits */
.siteLogo {
  max-height: 48px;
  max-width: 240px;
  width: auto;
}

/* footer with the details from CMS Options (ViewComponents/FooterViewComponent) */
.siteFooter {
  padding-block: 1rem;
  font-size: 0.9rem;
}

.siteFooter address,
.siteFooter p {
  margin-bottom: 0.5rem;
}

.footerSeparator {
  margin-inline: 0.5rem;
  opacity: 0.5;
}

/* ---- CMS content ---- */

/* images never wider than their column (CMS uploads can be any size), keep their proportions */
img {
  max-width: 100%;
  height: auto;
}

/* the same inside the HTML from the CMS editor (it may set width / height attributes inline) */
.cmsHtml img,
.cmsHtml video {
  max-width: 100%;
  height: auto;
}

/* embedded players (YouTube etc.) - only narrowed, an iframe needs its own height */
.cmsHtml iframe {
  max-width: 100%;
}

/* the assets of a block: a wrapping row with a gap */
.cmsAssets {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.cmsAssets img {
  flex: 1 1 280px;
  max-width: 100%;
  object-fit: cover;
}