/* -------------- */
/* colour changes */
/* -------------- */

:root {
  --website-color-1: #54779C;
  --website-color-2: #994200;
  --cassiopeia-color-primary: var(--website-color-1) !important;
  --cassiopeia-color-link: var(--website-color-1) !important;
  --cassiopeia-color-hover: var(--website-color-2) !important;

  --body-color: var(--cassiopeia-color-primary);
  --border-width: 0px;
}
body {
    background-image: linear-gradient(#FFFFFF, #F8FF33 1050px);
}

/* ------------ */
/* card changes */
/* ------------ */

.card {
  --card-spacer-y: 0.5rem;
  --card-spacer-x: 0.5rem;
  --card-border-width: 0px;
  --card-bg: transparent;
}

/* --------------------------- */
/* left sidebar / menu changes */
/* --------------------------- */

/* show icon before menu items */
.mod-list a:before {
    content: url('../../../../../images/vmenuitemicon.png');
    padding-right: 6px;
}
/* reduce menu font size */
.mod-list {
    font-size: 1em;
}
/* remove underscores from menu items */
.mod-list li > a:hover {
    text-decoration: none;
}
/* change colour and remove underscores from menu items */
.mod-list li.active > a {
    color: var(--cassiopeia-color-hover);
    text-decoration: none;
}
/* reduce the width of the side bar */
.container-sidebar-left .sidebar-left:last-child {
    margin-top: 0;
    margin-bottom: 0;
}

/* ------------ */
/* grid changes */
/* ------------ */

/* change to that the sidebars / menu is above the content not below */
/* make the sidebars narrower than the content */

body.wrapper-fluid .site-grid {
    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-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-r side-r side-r side-r ." ". side-l side-l side-l side-l ." ". comp comp comp comp ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
  }
  @media (min-width: 800px) {
    .site-grid {
      grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ." ". side-l comp comp side-r ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";
    }
  }
}

/* ----------------- */
/* hamburger changes */
/* ----------------- */

/* remove hamburger selected focus border */
.navbar {
  --navbar-toggler-focus-width: 0;
}