/*@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Figtree&display=swap');*/

/* Figtree */
@font-face {
  font-family: "Figtree-VariableFont_wght";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Figtree/Figtree-VariableFont_wght.woff2") format("woff2"),
    /* Super Modern Browsers */
      url("../fonts/Figtree/Figtree-Italic-VariableFont_wght.woff2")
      format("woff2"),
    url("../fonts/Figtree/Figtree-VariableFont_wght.ttf") format("truetype"),
    /* Safari, Android, iOS */
      url("../fonts/Figtree/Figtree-Italic-VariableFont_wght.ttf")
      format("truetype");
}

:root {
  --cassiopeia-color-primary: rgb(203, 187, 205);
  --cassiopeia-color-hover: midnightblue;
  --cassiopeia-color-link: #224faa;
  --body-bg: #f1eef6;
  --blog-box-shadow: #dfe3e7;
  --blog-box-background: #eee5e7;
  --heading-color: #224faa;
  --body-font-family: "Figtree-VariableFont_wght", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --body-font-weight: 400;
  --table-highlight: #d0d1e6;
  --table-lowlight: #f1eef6;
}
.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #f1eef6;
}
.table-striped>thead>tr>th, 
.table-striped>tbody>tr:nth-child(even)>td, 
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #d0d1e6;
}
.table {
  border-color: #163c50;
}
.table .w-5 {
   width:5%; 
}
.table .w-10 { 
	width:10%; 
}
@media (max-width: 576px) {
  .small-on-mobile {
    font-size: 0.7rem; 
  }
}
@media (max-width: 576px) {  table td,
  table th {
    padding: 0.25rem; 
  }
}
.boxed .blog-item {
  box-shadow: 0 0 2px #3339421a, 0 2px 5px #33394214, 0 5px 15px #33394214,
    inset 0 3px 0 var(--blog-box-shadow);
  background-color: var(--blog-box-background);
}
.breadcrumb {
  background-color: #00000000;
  margin-bottom: 0;
}
/*body.wrapper-fluid header > .grid-child {
  padding-left: 5%;
  padding-top: 0em;
}
.container-header {
  padding-top: 0.5em;
}
.container-header .grid-child {
  padding: 0em;
}
*/
.data-table {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: small;
  border-collapse: collapse;
  margin: 0 50px;
}
.data-table thead {
  background: #d0d1e6;
}
.data-table tbody tr:nth-child(odd) {
  background: #f1eef6;
}
.data-table tbody tr:nth-child(even) {
  background: #d0d1e6;
}
.data-table td,
th {
  border: 1px solid #163c50;
  padding: 3px 7px 2px 7px;
}
.alt-data-table th {
  background: var(--table-highlight);
  border-collapse: collapse;
  margin: 0 50px;
}
.alt-data-table td,
th {
  border: 1px solid #163c50;
  padding: 3px 7px 2px 7px;
}
.highlight {
  background: var(--table-highlight);
}

.blog-items[class^="masonry-"] .blog-item,
.blog-items[class*=" masonry-"] .blog-item {
  display: flex;
}

figure {
  display: inline-block;
  margin: 3px;
}
figcaption {
  text-align: center;
}
.bequest-highlight {
  margin: 15px;
  border: 1px solid #cacacc;
  background: #d0d1e6;
  font-style: italic;
}

.donate {
  align-items: center;
  display: flex;
}
.footer .grid-child {
  padding: 1rem 0.5em;
}

.back-to-top-link {
  position: fixed;
  bottom: 20px;
  right: 130px;
}

.card .top-a {
  card-border-width: 0;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  color: var(--heading-color);
  font-family: var(--body-font-family);
}
body.wrapper-fluid .site-grid {
  grid-gap: 0 1em;
  grid-template-columns: [full-start] minmax(0, 1fr)[main-start] repeat(4, minmax(0, 25%))[main-end] minmax(0, 1fr)[full-end];
}
/*
@supports (display: grid) {
  .site-grid {
    grid-gap: 0 1em;
    grid-template-columns:
      [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem))
      [main-end] minmax(0, 1fr) [full-end];
    grid-template-areas:
      ". banner banner banner banner ."
      ". top-a top-a top-a top-b ."
      ". comp comp comp comp ."
      ". side-r side-r side-r side-r ."
      ". side-l side-l side-l side-l ."
      ". bot-a bot-a bot-a bot-a ."
      ". bot-b bot-b bot-b bot-b .";
    display: grid;
  }

  .site-grid > [class^="container-"],
  .site-grid > [class*=" container-"] {
    column-gap: 1em;
    width: 100%;
    max-width: none;
  }

  .site-grid > .full-width {
    grid-column: full-start / full-end;
  }

  @media (width >= 992px) {
    .site-grid {
      grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-b ."
        ". side-l comp comp side-r ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
    }
    body.wrapper-fluid .site-grid {
      grid-gap: 0 2em;
      grid-template-columns:
        [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 20%))
        [main-end] minmax(0, 1fr) [full-end];
    }
    .brand-menu {
      padding-top: 0%;
    }
    .container-header .navbar-brand a {
      padding-left: 5%;
    }
  }

  @media (width < 992px) {
    .brand-menu {
      padding-top: 0%;
    }
    .container-header .navbar-brand a {
      padding-left: 0%;
    }
  }
}
.metismenu.mod-menu .metismenu-item {
  flex-wrap: wrap;
  align-items: center;
  padding: .0em 1em 0.5em 1em;
  font-size: 1.1rem;
  line-height: 1.5;
  display: flex;
}

dt.article-info-term {
  display:none;
}

.container-component > :first-child, .container-sidebar-left > :first-child, .container-sidebar-right > :first-child, .container-component > * + *, .container-sidebar-left > * + *, .container-sidebar-right > * + * {
  margin-top: 0em;
}
*/

/* Make header font size smaller */
/*
h1,.h1 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h1,
  .h1 {
    font-size: 2rem;
  }
}

h2,
.h2 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h2,
  .h2 {
    font-size: 1.75rem;
  }
}

h3,
.h3 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h3,
  .h3 {
    font-size: 1.5rem;
  }
}

h4,
.h4 {
  font-size: 1.25rem;
}

h5,
.h5 {
  font-size: 1rem;
}

h6,
.h6 {
  font-size: 1rem;
}
*/
.ed-container {
  display: inline-block;
  background: none;
  position: relative;
  width: 200px;
  height: 200px;
  vertical-align: middle;
  margin-right: 3%;
  margin-bottom: 3%;
  border: 1px solid #999;
}

.ed-container a {
  text-decoration: none;
  height: 100%;
  position: absolute;
  top: 0;
}

.ed-img {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  width: 100%;
  height: 100%;
}
.ed-text {
  position: absolute;
  text-align: center;
  bottom: -13px;
  left: 0;
  font-size: 17px;
  text-shadow: 0 0 5px black;
  width: 100%;
  color: white;
}

.ed-hovertext {
  position: relative;
  text-align: left;
  opacity: 0;
  color: black;
  padding: 20px 10px;
}

.ed-info {
  position: absolute;
  text-align: center;
  bottom: -15px;
  left: 0;
  font-size: 17px;
  width: 100%;
  color: black;
}

.ed-container:hover .ed-img {
  opacity: 0.2;
}

.ed-container:hover .ed-hovertext {
  color: black;
  font-size: small;
  opacity: 1;
  top: 40px;
}

.ed-container:hover .ed-text {
  top: 10px;
  color: black;
  text-shadow: none;
}

/* ============================================================
   SLIM BANNER — single-row header
   Collapses the brand row and the nav row into one horizontal
   bar on wide screens (logo left, menu + search middle, donate
   right). Narrower screens fall back to a compact two-row, then
   to the stock hamburger below 992px.
   ============================================================ */

/* --- All widths: a shorter search box, vertically aligned to
   match the logo and menu height. --- */
.container-header .mod-finder__search .form-control,
.container-header .mod-finder__search .btn {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  height: auto;
}

/* Translucent "frosted" field so the search blends into the header
   gradient instead of sitting on top as an opaque white block. The
   field sits over the dark end of the gradient, so text/icon are white. */
.container-header .mod-finder__search .form-control {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.container-header .mod-finder__search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.container-header .mod-finder__search .form-control:focus {
  background-color: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
  color: #fff;
}
.container-header .mod-finder__search .btn {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.container-header .mod-finder__search .btn:hover,
.container-header .mod-finder__search .btn:focus {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.85);
}

/* Vertically centre the PayPal donate button. The button is an
   inline <input type="image">, so baseline spacing otherwise leaves
   a gap below it; flex-centre the wrapper chain and make it a block. */
.container-header .donate,
.container-header .donate .mod-custom,
.container-header .donate form {
  display: flex;
  align-items: center;
  margin: 0;
}
.container-header .donate input[type="image"],
.container-header .donate img {
  display: block;
}

@media (min-width: 992px) {
  /* No stray top margin (it threw off the vertical centring) and
     a sensible cap so the field doesn't dominate the row. */
  .container-header .container-search {
    margin-top: 0;
    max-width: 220px;
  }
}

/* --- Single row: only once the viewport is wide enough to hold
   logo + menu + search + donate on one line without wrapping. --- */
@media (min-width: 1200px) {
  /* Lay the whole header out as one centred horizontal bar */
  .container-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 1.5em;
  }

  /* Promote the brand box's children (logo + donate) to direct
     flex items of the header so they can sit on the same line
     as the nav and be re-ordered independently. */
  .container-header > .grid-child:first-child {
    display: contents;
  }

  /* Logo: left-most, trimmed down, no row padding */
  .container-header .navbar-brand {
    order: 1;
    margin: 0;
    padding-left: 1.5em;
  }
  .container-header .brand-logo img {
    height: 66px;
    width: auto;
  }

  /* Nav (menu + search): takes the remaining width, sits beside
     the logo instead of on its own row */
  .container-header .container-nav {
    order: 2;
    flex: 1 1 auto;
    align-items: center;
    padding: 0;
  }
  .container-header nav {
    margin-top: 0;
  }

  /* Donate button: pushed to the far right */
  .container-header .donate {
    order: 3;
    flex: 0 0 auto;
    padding-right: 1.5em;
  }

  /* Tighten the menu so everything fits on a single line, and
     vertically centre the items (drop their extra bottom pad) */
  .container-header .mod-menu > li + li {
    margin-left: 1em;
  }
  .container-header .metismenu.mod-menu .metismenu-item {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    font-size: 1rem;
  }
}

/* --- Medium widths (992–1199px): not enough room for one line,
   so keep the stock two-row stack but strip the excess padding so
   it stays slim and tidy instead of wrapping awkwardly. --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-header .grid-child {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
  }
  .container-header nav {
    margin-top: 0;
  }
  .container-header .container-nav {
    padding-bottom: 0.25em;
  }
  .container-header .brand-logo img {
    height: 46px;
    width: auto;
  }
  .container-header .metismenu.mod-menu .metismenu-item {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
  }
}