/* assets/css/custom.css is automatically included, processed, minimized, stripped by the theme */

/* force 2 columns: add {.two-col-children} after {{<children type="card">}} */
.two-column .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: 1.5rem; /* optional spacing between cards */
}
/* fall back to 1 column on small screens */
@media (max-width: 768px) {
  .two-column .cards {
    grid-template-columns: 1fr;
  }
}


/* multiple notices side-by-side */
.notices-sidebyside {
  display: flex;
  gap: 1rem;
  align-items: flex-start;         /* .box(es) can be different heights */
/*  align-items: stretch;          /* make all .box the same height (but I can't get .box-content to stretch vertically) */
}
.notices-sidebyside > .box {
  flex: 1 1 0;                     /* all notices share the horizontal space equally */
}
/* Stretch the inner inset box to fill the notice -- doesn't seem to be needed...
.notices-sidebyside > .box > .box-content {
  flex: 1 1 auto !important;       /* take all remaining height *
}*/
.notices-sidebyside a {
  font-weight: 500;                /* normal 300 on colored notice backgrounds are hard to see */
}


/* resize images to fit inside card rather than cropping */
/* to use, put a <div class="fit-images-in-card"> around the card container (e.g. 'cards' or "children') & has local effect */
/* might need to put "display:flex; align-items:center;" on .fit-images-in-card .card-container .card-image */
.fit-images-in-card .card-container .card-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}


/* put multiple figures side-by-side on a single line (row) */
.figure-row { /* put this on an enclosing element, e.g div */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.figure-for-3wide { /* {{< figure src="" class="figure-for-3wide" >}} */
  margin: 0;
  flex: 0 1 30%;
  aspect-ratio: 1/1; /* square image containers */
}
.figure-row .figure-for-3wide figcaption p {
  font-size: large;
}
.figure-for-3wide img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}


/* don't orphan chevron if there are headings inside an %expand% shortcode */
details > summary h1,
details > summary h2,
details > summary h3,
details > summary h4,
details > summary h5,
details > summary h6 {
  display: inline;
  margin-block-start: 0;
  margin-block-end: 0;
}