/**
 * Name:        Main Site Stylesheet
*/

/**
 * -------------
 * CSS Variables
 * -------------
 */

:root {
  --primary-colour:           #7D2C2C;
  --secondary-colour:         #954A4A;
  --tertiary-colour:          #C17272;

  --header-background-colour: var(--primary-colour);

  --fixed-top-depth:          78px;
}

/**
 * --------------
 * General Styles
 * --------------
 */

pre {
  font-family:                inherit;
}

* {  
  box-sizing:                 border-box;
}

/* Stop the scrolling bounce when using a fixed header */
html, body {
  overscroll-behavior:        none;
}

/* Supports the fix-top header and nav bar */
body {
  margin:                     0px;
  padding-top:                var(--fixed-top-depth);
  min-width:                  350px;
}

header, footer, nav {
  background-color:           white;
}

input {
  border-width:               1px;
}

a:hover {
  color:                      #0d6efd;
}

/**
 * Deal with bullets overflowing floating elements
 * Needs to be constrained to main page articles since it will break the drop 
 * down menu system
 */

article ul, article ol { 
  overflow:                   hidden; 
}

/* Even smaller font size beyond Bootstrap's fs-6 */
.fs-7 {
  font-size:                  12px;
}

/**
 * --------------
 * Heading Styles
 * --------------
 */

h1 {
  font-size:                  28px!important;
  color:                      rgba(0, 0, 0, 0.9);
}

h2 {
  font-size:                  24px!important;
  color:                      rgba(0, 0, 0, 0.9);
}

h3 {
  font-size:                  20px!important;
  color:                      rgba(0, 0, 0, 0.9);
}

h1 a, h2 a, h3 a {
  text-decoration:            none;
  color:                      rgba(0, 0, 0, 0.9);
}

/**
 * ---------------------------
 * Responsive Div Table Styles
 * ---------------------------
 */

div.table-div-striped {
}

div.table-div-striped-columns {
}

div.table-div-striped div.table-thead-row,
div.table-div-striped-columns  div.table-thead-row {
  background:                 -webkit-linear-gradient( 45deg, var( --primary-colour ), var( --tertiary-colour ) );
  background:                 linear-gradient(         45deg, var( --primary-colour ), var( --tertiary-colour ) );
}

div.table-div-striped div.table-tbody-row:nth-of-type( odd ) {
  background-color:           #ffffff;
}

div.table-div-striped div.table-tbody-row:nth-of-type( even ) {
  background-color:           #e9ecef;
}

div.table-div-striped-columns div.col:nth-of-type( odd ) {
  background-color:           #ffffff;
}

div.table-div-striped-columns div.col:nth-of-type( even ) {
  background-color:           #e9ecef;
}

/**
 * -------------------
 * Post Comment Styles
 * -------------------
 */

ul.comment-list {
  list-style-type:            none!important;
  padding-left:               0;
}

ul.comment-list ul.children {
  list-style-type: none!important;
}

.comment-quote {
  min-height:                 40px;  
  border:                     2px solid #dee2e6;
  padding:                    5px; 
  margin:                     1em 0 3em;
  box-shadow:                 0 .125rem .25rem rgba(0,0,0,.075)!important;
  position:                   relative;
  background-color:           #ffffff;
  color:                      #333333;
  transition:                 all 0.3s ease-in;
  /* css3 */
  -webkit-border-radius:      10px;
  -moz-border-radius:         10px;
  border-radius:              10px;
}

.comment-quote .comment-quote-left {
  margin-left:                30px;
}

.comment-quote-left:before {
  content:                    "";
  position:                   absolute;
  transition:                 all 0.3s ease-in;
  top:                        5px;
  left:                       -30px;
  border-top:                 15px solid transparent;
  border-bottom:              15px solid transparent;
  border-left:                15px solid transparent;
  border-right:               15px solid #dee2e6;
  /* reduce the damage in FF3.0 */
  display:                    block;
  width:                      0;
}

.comment-quote-left:after {
  content:                    "";
  position:                   absolute;
  top:                        8px;
  left:                       -24px;
  border-top:                 12px solid transparent;
  border-bottom:              12px solid transparent;
  border-left:                12px solid transparent;
  border-right:               12px solid white;
  /* reduce the damage in FF3.0 */
  display:                    block;
  width:                      0;
}

/**
 * -----------------
 * Table Styles
 * -----------------
 */

.bb-thead, .bb-tfoot {
  background-color:           54585d;
  color:                      #ffffff;
  font-weight:                bold;
  border:                     1px solid #54585d;
}

.bb-tcell {
  color:                      #636363;
  border:                     1px solid #dddfe1;
}

.container .bb-row:nth-of-type(even) div {
background-color:             #ffffff;
}
.container .bb-row:nth-of-type(odd) div {
background-color:             #f9fafb;
}

.bb-tcell a {
  text-decoration:            none;
}

.bb-tcell a:hover {
  text-decoration:            underline;
}

/**
 * ------------------
 * Page Header Styles
 * ------------------
 */

/**
 * ------------------
 * Page Footer Styles
 * ------------------
 */

footer .navbar, footer .navbar .nav-link {
  padding-top:                0px!important;
  padding-bottom:             0px!important;
  padding-left:               0px!important;
}

/**
 * --------------
 * Feature Styles
 * --------------
 */

p a {
  text-decoration:            none;
}

p a:hover {
  text-decoration:            underline;
}

/**
 * -------------------
 * Figure/Image Styles
 * -------------------
 */

figure {
  display:                    table!important;
  padding:                    5px!important;
}
 
figure img { 
  display:                    block!important;
}
 
figcaption {
  display:                    table-caption!important;
  text-align:                 center;
  font-size:                  .85em;
  font-style:                 italic;
  color:                      #767676;
  caption-side:               bottom!important;
  margin-top:                 0px!important;
  margin-bottom:              0px!important;
}

.photonic-stream {
  margin-top:                 0px!important; 
}

/* When applied to a parent div, this clears any image float */
.clearfix:after {
    content:                  "";
    display:                  table;
    clear:                    both;
}

/**
 * -----------------
 * Pagination Styles
 * -----------------
 */

div.pagination {
  display:                    table; 
  margin:                     0 auto;
}

nav.pagination {
  position:                   relative;
  display:                    block;
  text-align:                 center;
}

.nav-links {
  position:                   relative;
}
.nav-links ul {
  margin:                     0;
  padding:                    0
}
.nav-links ul li {
  list-style:                 none;
  margin:                     0 10px 0 0;
  padding:                    0;
  float:                      left;
}
.nav-links ul li span.current {
  padding:                    10px 12px;
  background:                 #777;
  border:                     1px solid #777;
  display:                    block;
  line-height:                1;
  border-radius:              4px;
  color:                      #fff;
}

.nav-links ul li a {
  padding:                    10px 12px;
  background:                 #ddd;
  color:                      #666;
  text-decoration:            none;
  border:                     1px solid #ccc;
  border-radius:              3px;
  display:                    block;
  line-height:                1;
}

.nav-links ul li a:hover {
  background:                 #999;
  border-color:               #888;
  color:                      #fff;
}

/**
 * -------------------------
 * Previous/Next Post Styles
 * -------------------------
 */

.prev-next-link a {
  text-decoration:            none;
}

.prev-next-link a:hover {
  text-decoration:            underline;
}

/**
 * --------------------------------------------------
 * Navbar Styles and Bootstrap Multi-Level Drop Downs
 * --------------------------------------------------
 */

a.navbar-brand:hover {
  color:                      #0d6efd;
}

/* Dropdown Menu */
.dropdown-menu {
  /* This ensures on clicking the dropdown-menu doesn't appear to move up by 2px */
  margin-top:                 0px!important; 
  padding:                    0;
  padding-top:                0px!important; 
  border-radius:              4px;
  box-shadow:                 0 1px 3px 0 rgb(0 0 0 / 10%);
}

.dropdown .dropdown-submenu {
  top:                        0!important;
  left:                       90%!important;
  margin-left:                0.125rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  /* Item that could be selected now */
  background:                 #7aacde!important;
  border-radius:              4px;
  color:                      white!important;
}

/* Dropup Menu */
.dropup-menu {
  /* This ensures on clicking the dropup-menu doesn't appear to move up by 2px */
  position:                   absolute;!important;
  bottom:                     24px!important;
  margin-bottom:              0px!important; 
  padding:                    0;
  padding-top:                0px!important; 
  border-radius:              4px;
  box-shadow:                 0 1px 3px 0 rgb(0 0 0 / 10%);
}

/**
 * -----------------
 * Login Form Styles
 * -----------------
 */

form p.login-username label, 
form p.login-password label,
form p.login-remember label {
  margin-bottom:              0.5rem;
}

form p.login-username input.input, 
form p.login-password input.input {
  display:                    block;
  width:                      100%;
  padding:                    .375rem .75rem;
  font-size:                  1rem;
  font-weight:                400;
  line-height:                1.5;
  color:                      #212529;
  background-color:           #fff;
  background-clip:            padding-box;
  border:                     1px solid #ced4da;
  -webkit-appearance:         none;
  -moz-appearance:            none;
  appearance:                 none;
  border-radius:              .25rem;
  transition:                 border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

p.login-remember input.form-check-input {
  width:                      1em;
  height:                     1em;
  margin-top:                 .25em;
  vertical-align:             top;
  background-color:           #fff;
  background-repeat:          no-repeat;
  background-position:        center;
  background-size:            contain;
  border:                     1px solid rgba(0,0,0,.25);
  -webkit-appearance:         none;
  -moz-appearance:            none;
  appearance:                 none;
  /*-webkit-print-color-adjust: exact;
  color-adjust:               exact;*/
}

p.login-submit input.button {
    display:                inline-block;
    font-weight:            400;
    line-height:            1.5;
    color:                  #212529;
    text-align:             center;
    text-decoration:        none;
    vertical-align:         middle;
    cursor:                 pointer;
    -webkit-user-select:    none;
    -moz-user-select:       none;
    -ms-user-select:        none;
    user-select:            none;
    background-color:       transparent;
    border:                 1px solid transparent;
    padding:                .375rem .75rem;
    font-size:              1rem;
    border-radius:          .25rem;
    transition:             color .15s ease-in-out,
                            background-color .15s ease-in-out,
                            border-color .15s ease-in-out,
                            box-shadow .15s ease-in-out;
  }

p.login-submit input.button-primary {
  color:                    #fff;
  background-color:         #0d6efd;
  border-color:             #0d6efd;
}

/**
 * ------------------------
 * Other Ad-Hoc Style Fixes
 * ------------------------
 */

/* Deal with empty columns */
.col-empty, .col:empty, [class^=col-]:empty { 
  display:                  none; 
}

/* Make sure the brand logo and name vertically align */
.navbar-brand {
  display:                  flex!important;
  align-items:              center!important;
}

.wp-block-quote {
  padding-left:             8px!important; 
  border-left:              4px solid rgb(222,226,230)!important;
}

/* Reduce the indentation of bullets against lists in the sidebar */
ul.wp-block-latest-posts,
ul.wp-block-archives {
  list-style:               initial!important;
  padding-left:             1rem!important;
}

/* Allow readonly controls to appear as disabled */
input[readonly] {
  background-color:         rgba(239, 239, 239, 0.3);
  border-color:             rgba(118, 118, 118, 0.3);
  color:                    rgb(84, 84, 84);
}

/* Fix scrollbar issue when using a bootstrap modal */
/* More complex due to the use of a fixed-top       */
.fixed-top {
  padding-right:            0 !important;
}

.compensate-for-scrollbar {
  margin-right:             0 !important;
}

.modal-open{
  overflow-y:               inherit;
  padding-right:            0 !important;
}

/* Fix for the WP admin bar overlaying on top of the fixed site header */
/* Default WP admin bar height is 32px on desktop, 46px on mobile */
body.admin-bar .site-header,
body.admin-bar header.site-header,
body.admin-bar .fixed-top {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar header.site-header,
  body.admin-bar .fixed-top {
    top: 46px;
  }
}

/**
 * ---------------
 * WP Admin Styles
 * ---------------
 */

/* Admin Style in support of External Featured Images */
#featured_image {
  width:                    120px;
}

td.featured_image.column-featured_image img {
  max-width:                100%;
  height:                   auto;
}

/**
 * -----------------
 * WP Content Styles
 * -----------------
 */

.file-download {
  color:                    #ffffff;
}

.dovecote-table {
  font-size:                small;
}

.dovecote-table table thead {
  background-color:         #bbbbbb;
}

/**
 * ---------------------
 * Media Specific Styles
 * ---------------------
 */

@media (min-width: 1200px) {
  .navbar-nav li:hover>ul.dropdown-menu {
    /* controversial will open on hover but only on desktop */
    display:                block;
  }
}

@media (min-width: 992px) {
  /* ONLY DESKTOP - Convert toggle to right > in deeper levels */
  .at_depth_1 .dropdown-toggle::after,
  .at_depth_2 .dropdown-toggle::after,
  .at_depth_3 .dropdown-toggle::after {
    display:                inline-block;
    margin-left:            1.5em;
    vertical-align:         0.255em;
    content:                "";
    border-top:             0.3em solid;
    border-right:           0.3em solid transparent;
    border-bottom:          0;
    border-left:            0.3em solid transparent;
    left:                   0;
    /* rotate right */
    -o-transform:           rotate(-90deg);
    -ms-transform:          rotate(-90deg);
    -moz-transform:         rotate(-90deg);
    -webkit-transform:      rotate(-90deg);
    transform:              rotate(-90deg);
  }
}

@media (max-width: 991.98px) {
  /* Smaller devices allow collapsible menu to be scrollable - supports longer menus */
  .navbar-collapse {
    max-height:             calc(100vh - 100px);
    overflow-y:             auto;
  }
  /* Smaller devices remove shadow & border from children */
  .offcanvas .dropdown-menu {
    border:                 none;
    box-shadow:             none;
  }
  /* Smaller devices offcanvas, add indent */
  .depth_1 .dropdown-item {
    margin-left:            10px;
  }
  .depth_2 .dropdown-item {
    margin-left:            15px;
  }
  .depth_3 .dropdown-item {
    margin-left:            20px;
  }
}