/*
 * Cassiopeia user.css
 * Custom overrides for this site. Loaded automatically after the template
 * stylesheet (asset "template.user"), so no core file needs to be edited.
 */

/*
 * Header brand logo.
 * Previously the 1367x204 px logo was rendered at full container width
 * (~1304x195 px). Halving that gives ~652x97 px.
 */
.navbar-brand .logo {
  height: 97px;
  width: auto;
}

/* On small screens scale it down so it never overflows the header */
@media (max-width: 767.98px) {
  .navbar-brand .logo {
    height: 12vw;
  }
}

/*
 * Align header and footer content with the main content column.
 *
 * Cassiopeia centers .grid-child with max-width: 1320px and adds 8px side
 * padding, while .site-grid keeps a 16px grid gap on each side. That made the
 * header/footer content 8px narrower (wide screens) or 8px wider (narrow
 * screens) than the content column. 1352px = 1320px content + 2 x 16px
 * padding, so the inner edges now line up at every viewport width.
 */
header.container-header > .grid-child,
footer.container-footer > .grid-child {
  max-width: 1352px;
  padding-left: 16px;
  padding-right: 16px;
}

/*
 * Center the logo and the main menu in that column.
 * Cassiopeia left-aligns the brand (margin-inline-end: auto) and lets the
 * menu stretch over the full row (flex: 1 1 0%), so both sat on the left.
 */
header.container-header .navbar-brand {
  margin-inline: auto;
}

@media (min-width: 992px) {
  header.container-header .container-nav {
    justify-content: center;
  }

  header.container-header .container-nav .mod-menu {
    flex: 0 1 auto;
    justify-content: center;
  }
}