/* trassel.nu on Cassiopeia (Joomla 6). Carries the Joomla 3 look over: the dark hero photo
   behind the header, a white text logo with the slogan under it, and JA Social II's violet
   (#7442a6) as the accent. Cassiopeia loads this file by itself and updates never touch it. */

:root {
  --cassiopeia-color-primary: #7442a6;
  --cassiopeia-color-link: #7442a6;
  --cassiopeia-color-hover: #4f2c73;
}

.container-header {
  background:
    linear-gradient(rgba(20, 16, 30, .55), rgba(20, 16, 30, .55)),
    url("../../../../../images/headers/trassel-bg.jpg") center / cover no-repeat;
  background-color: #2b2236;
  min-height: 14rem;
}

/* The home page is the hero, as it was: the photo fills the first screen. */
.itemid-101 .container-header {
  min-height: 70vh;
}

.container-header .navbar-brand,
.container-header .brand-logo,
.container-header .site-description {
  color: #fff;
}

.container-header .brand-logo {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-decoration: none;
}

.container-header .site-description {
  border-left: 1px solid rgba(255, 255, 255, .6);
  padding-left: .75rem;
  margin-top: .5rem;
  max-width: 26rem;
  font-size: 1rem;
  opacity: .95;
}

.container-header .mod-menu > li > a,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  color: #fff;
}

.container-header .mod-menu > li.active > a,
.container-header .metismenu > li.active > a {
  text-decoration: underline;
  text-underline-offset: .35em;
}

.btn-primary {
  --btn-bg: #7442a6;
  --btn-border-color: #7442a6;
  --btn-hover-bg: #4f2c73;
  --btn-hover-border-color: #4f2c73;
}

.container-header > .grid-child {
  padding-inline: clamp(1rem, 4vw, 3rem);
}