body {
  background-image: url('/theme-static/images/metastore_background.jpg') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

.main {
  background-image: none !important;
  background-color: transparent !important;
  flex: 1 !important;
}

.toolbar {
  background-color: #ffffff !important;
}

.toolbar:not(:has(.breadcrumb)) {
  background-color: transparent !important;
}

.masthead,
.site-footer,
.module.search {
  background-image: none !important;
  background-color: #00617d !important;
  color: #ffffff !important;
}

.site-footer {
  margin-top: auto !important;
}

.hero {
  background-image: none !important;
  background-color: transparent !important;
  display: none;
}

#site-logo img {
  max-height: 130px !important;   /* desired height */
  height: auto !important;
  width: auto !important;
  display: block !important;
}





/* The featured image needs to look well on both computers and phones */


/* Featured image: scale to container without cropping */
.featured.media-overlay {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* Ensure anchor fills container */
.featured.media-overlay .media-image,
.featured.media-overlay .media-image a {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Show whole image (no crop), responsive and overriding inline sizes */
.featured.media-overlay .media-image img.img-responsive {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain; /* prevents cropping; may show letterboxing */
  object-position: center center;
}

/* Limit height on small screens so image doesn't overwhelm viewport */
@media (max-width: 600px) {
  .featured.media-overlay .media-image img.img-responsive {
    max-height: 40vh; /* adjust (e.g., 30vh–50vh) to taste */
    width: auto;
    max-width: 100%;
    height: auto;
  }
}

/* Reduce padding on very small screens */
@media (max-width: 480px) {
  .featured.media-overlay,
  .featured.media-overlay .media-image {
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* This is about the stats box */

/* Layout: three columns, second column wider to fit "organizations" */
.module-stats .card.box ul {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: 0;
  align-items: stretch;
}

/* Default column behavior: allow natural sizing, but keep them on one row */
.module-stats .card.box ul li {
  box-sizing: border-box;
  margin: 0;
  padding: 0.5rem;
  min-width: 0; /* allow content to shrink */
  display: block;
}

/* Make second item a bit wider using flex-basis priority */
.module-stats .card.box ul li:nth-child(1) { flex: 0 1 25%; }  /* datasets */
.module-stats .card.box ul li:nth-child(2) { flex: 0 1 40%; }  /* organizations (wider) */
.module-stats .card.box ul li:nth-child(3) { flex: 0 1 25%; }  /* groups */

/* Let items grow if space allows but keep proportions */
.module-stats .card.box ul li:nth-child(1),
.module-stats .card.box ul li:nth-child(2),
.module-stats .card.box ul li:nth-child(3) {
  flex-grow: 1;
}

/* Ensure link fills its item and text wraps naturally */
.module-stats .card.box ul li a {
  display: block;
  width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Stack number above label inside each item for clarity */
.module-stats .card.box ul li a strong,
.module-stats .card.box ul li a strong span {
  display: block;
}

/* Slightly reduce padding on very small screens */
@media (max-width: 420px) {
  .module-stats .card.box ul li {
    padding: 0.35rem;
  }
}

/* If you want equal widths again on larger viewports, override at wider breakpoint */
@media (min-width: 768px) {
  .module-stats .card.box ul li { flex-basis: auto; flex: 0 1 auto; }
}