:root {
  --cassiopeia-color-primary: #0088cc;
  --cassiopeia-color-link:    #0088cc;
  /*--cassiopeia-color-hover: green;  adding this made the colour of the header and footer shade to green*/
}

  /*set the colour of the article title to blue in the single article page. */
  div.page-header h2  {color: #4169E1;}

  /* set font sizes */
  h1 {font-size:calc((1.375rem + 1.5vw) * .7); } 
  h2 {font-size:calc((1.325rem +  .9vw) * .7); } 
  h3 {font-size:calc((1.3rem   +  .6vw) * .7); }

  /* set font weights */
  h1 {font-weight:500; }
  h2 {font-weight:500; }
  h3 {font-weight:500; }

  /* sets underline for links */
  a:link 	{ text-decoration: none; }
  a:visited { text-decoration: none; }
  a:hover 	{ text-decoration: underline; }

  /* set the sidebar-right module to be at the top for small viewports. 
     Only for pages with the rightsidebartop class, as set in the menu option (eg the Home page) */
  @supports (display: grid) {  @media (max-width: 991px) {
       .rightsidebartop .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 ."
              ". comp comp comp comp ."
              ". bot-a bot-a bot-b bot-b ."   }
  }  }

  /* Welcome message */
  .site-grid>.full-width {  text-align: center;  margin-top: 15px;  margin-bottom: 0;  }

  /* Header:  Padding. */
  .navbar-brand { padding-bottom: 0rem; }

  /*Control the menu bar */
  /* Reduce header height & resolve misalignment of menu and search field in narrower screen widths */
  .container-header .mod-finder .form-control { margin-top: 0em; }

  .container-header .container-nav { justify-content: space-between;  } 

  .container-header .navbar { padding-right: 1rem; }

  .container-header .container-nav nav { margin-top: 0em; }

  @media (max-width: 767.98px)   .container-header .container-nav nav {
    margin-top: 0.5em; 
  }

  .metismenu.mod-menu .metismenu-item {font-size: 1.0rem; }

  /* hamburger on between 768 and 991*/
  @media (min-width: 768px)  {  @media (max-width: 991px)  {
    .navbar-expand-md .navbar-toggler { display: flex; }
  } }
  /* menu off between 768 and 991*/
  @media (min-width: 768px)  {  @media (max-width: 991px)  {
    div.navbar-collapse.collapse.show  { display: flex!important ;}
  } }
  @media (min-width: 768px)  {  @media (max-width: 991px)  {
    div.navbar-collapse.collapse  { display: none!important ;}
  } }

/* OffCanvas menu: make the hamburger not increase the height of the header.  
   Needs offcanvas.php and offcanvas-metismenu.php in templates/cassiopeia/html/mod_menu,
   also set Layout to offcanvas-metismenu in Site Modules - Main Menu - Advanced. */
.offcanvas.show {
   background-color: var(--cassiopeia-color-primary);
   background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}
@media (min-width: 992px) {
  .offcanvas-start {
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .offcanvas .metismenu.mod-menu .metismenu-item > ul {
    margin-top: 1rem;
    width: 100%;
    position: relative;
  }
  .offcanvas-header > *:only-child {
    margin-left: auto;
  }  
}

/* For narrow widths 1.to move offcanvas menu to right of burger icon, 2. to hide header and 3. to control display of expanded burger menu */
@media (max-width: 991.98px) { 
  .offcanvas-start { left: 100px; }
  
  .offcanvas-header { display: none; }
  
  .offcanvas.show { bottom: auto;   width: auto; } 
}


  /* Search field */
  .container-header .mod-finder .form-control { padding: .1rem 2rem}
  .container-header .mod-finder { padding-right: 1rem; }
  .awesomplete>input { max-width: 170px }

  /* footer */
  .footer .grid-child { align-items: start;  padding-top: .6em;  padding-bottom: .6em;}


  /* Articles.
     Make the text and title be to the right of the image and remove the caption when the viewport is small. 
     It seems to work for Featured and Category Blog pages but not Tagged Items pages.
     NB You have to override the default display: block; first.  */
  @supports (display: grid) {  @media (max-width: 991px) {
    div.blog-item figure {display: flex; }
  }  }
  @supports (display: grid) {  @media (max-width: 991px) {
    .image-left .blog-item { flex-direction:row; }
  }  }
  @supports (display: grid) {  @media (max-width: 991px) {
    div.blog-item figcaption {display: none; }
  }  }
  /* standardize the image size and make it shrink proportionally*/
  @media (max-width: 991px) {
    .image-left .blog-item .item-image, .image-right .blog-item .item-image {
    flex: 0 0 40%;
    height: fit-content;
    }  }

  /* stop text being truncated on very narrow  screens and place bullet correctly */
  .blog-item { overflow: visible;  }
  .com-content-article ol, .com-content-article ul { overflow: visible;  list-style-position: inside; }