/**
 * 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:          65px;
}

/**
 * ---------------
 * Carousel Styles
 * ---------------
 */

/*.mobile-slide {
  height:                     calc( 100vh - var(--fixed-top-depth) );
}*/

/**
 * --------------
 * 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;
}

/*#main-content {
  align-items:                center;
  margin-top:                 0px!important;
  overflow-x:                 hidden;
  overflow-y:                 scroll!important;
  height:                     calc( 100vh - var(--fixed-top-depth) );
}*/

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;
}

/* Redaction styles to mimic redacted text */

.redacted-bar {
  background-color:           black;
  color:                      black;
  border-radius:              3px;
  padding:                    0 0.5em;
  display:                    inline-block;
  line-height:                1.2;
  font-size:                  1em;
  font-family:                monospace;
}

/* Prevent text from being revealed on selection */
.redacted-bar::selection {
  background-color:           black;
  color:                      black;
}

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

.file-download {
  color: #ffffff;
}

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

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

/**
 * -----------------
 * 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;
}

/**
 * -------------------
 * 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;
}

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

h1 {
  font-size:                  28px!important;
  margin-bottom:              4px!important;
}

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( odd ) div.col {
  border:                     solid #e9ecef;
}

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

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

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

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

p a, li a {
  text-decoration:  none;
}

p a:hover, li 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;
}

/**
 * ------------------------
 * 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;
}

/**
 * -----------------
 * 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;
}

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

nav {
}

.navbar {
  /*margin:                     0px 4px 0px 4px;*/
  padding:                    0px 10px 0px 10px;
}

.menu-bar {
  background-image: linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  border:           rgba(0, 0, 0, 0.176) 1px solid;
}

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

a.navbar-brand {
  text-decoration:  none;
  color:            black!important;
  font-weight:      bold;
}

a.navbar-brand:hover {
  text-decoration:  none;
  color:            blue!important;
  font-weight:      bold;
}

a.nav-link {
  text-decoration:  none;
  color:            black!important;
  font-weight:      400;
}

a.nav-link:hover {
  text-decoration:  none;
  color:            blue!important;
  font-weight:      400;
}

.dropdown-menu {
  /* This ensures on clicking the dropdown-menu doesn't appear to move up by 2px */
  margin-top:           0px!important; 
  padding:              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;
  padding:              2px 0px 2px 0px!important;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus {
  /* Item that could be selected now */
  background:           #aaaaaa!important;
  color:                white!important;
}

.dropdown-item:hover {
  color:                blue!important;
}

header .navbar {
  padding-top:      0px!important;
  padding-bottom:   0px!important;
}

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

/**
 * ---------------------
 * 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;
  }

  .menu-bar {
    height: auto        50px!important;
  }
}

@media (min-width: 1200px) {
  /* 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: 1200px) {
  /* 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;
  }
}