/* Custom styles for MoleCraft SMP Wiki */

/* Section cards - background images */
.grid.cards:first-of-type > ul > li {
  position: relative;
  overflow: hidden;
}

.grid.cards:first-of-type > ul > li::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: 0;
  transition: opacity 0.3s ease;
}

.grid.cards:first-of-type > ul > li:hover::before {
  opacity: 0.25;
}

.grid.cards:first-of-type > ul > li > * {
  position: relative;
  z-index: 1;
}

/* Role Play card - rp1 */
.grid.cards:first-of-type > ul > li:nth-child(1)::before {
  background-image: url("../img/rp1.jpg");
}

/* Nations card - nations1 */
.grid.cards:first-of-type > ul > li:nth-child(2)::before {
  background-image: url("../img/nations1.jpg");
}

/* Community card - community1 */
.grid.cards:first-of-type > ul > li:nth-child(3)::before {
  background-image: url("../img/community1.jpg");
}

/* Blog card - blog1 */
.grid.cards:first-of-type > ul > li:nth-child(4)::before {
  background-image: url("../img/blog1.jpg");
}

/* Header background image */
.md-header {
  position: relative;
  background: transparent;
}

.md-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/mcgrasspattern.jpg");
  background-size: 200px;
  background-position: top left;
  background-repeat: repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.md-header__inner {
  position: relative;
  z-index: 1;
}