/**
 * Name:        Main Site Stylesheet
*/

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

:root {
  --primary-colour:           #B9CBAB;
  --secondary-colour:         #F0F9E8;
  --tertiary-colour:          #BA976D;

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

  --fixed-top-depth:          65px;
  --scroll-top-depth:         85px;

  --wp-admin-bar-height:      46px;
  --wp-admin-bar-height-wide: 32px;

  --eff-admin-bar-height:     0px;
  --eff-scroll-offset:        var( --scroll-top-depth );

  /* Site-Specific Variables */
  --page-background-image:    url( 'https://live.staticflickr.com/65535/55139060827_0ce2b64a3e_o.png' ),
                              url( 'https://live.staticflickr.com/65535/55140124373_3493738f47_o.png' ),
                              url( 'https://live.staticflickr.com/65535/55140332730_a34554d11e_o.png' ),
                              url( 'https://live.staticflickr.com/65535/55139943491_3115c13086_o.png' ),
                              url( 'https://live.staticflickr.com/65535/55139060832_1690e0fd44_o.png' );
  --page-background-position: top left,
                              top right,
                              bottom left,
                              bottom right,
                              top left;
  --page-background-size:     auto,
                              auto,
                              auto,
                              auto,
                              auto;
  --page-background-repeat:   no-repeat,
                              no-repeat,
                              no-repeat,
                              no-repeat,
                              repeat;
}

/**
 * ---------------------------------------
 * Deal with Admin Header/Smooth Scrolling
 * ---------------------------------------
 */

/* WP admin bar present */
body.admin-bar {
  --eff-admin-bar-height:     var( --wp-admin-bar-height-wide );
  --eff-scroll-offset:        calc( var( --scroll-top-depth ) + var( --eff-admin-bar-height ) );
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --eff-admin-bar-height:   var( --wp-admin-bar-height );
    --eff-scroll-offset:      calc( var( --scroll-top-depth ) + var( --eff-admin-bar-height ) );
  }
}

/* Fix for the WP admin bar overlaying on top of the fixed site header */
body.admin-bar .site-header,
body.admin-bar header.site-header,
body.admin-bar .fixed-top {
  top:                        var( --eff-admin-bar-height );
}

/**
 * ---------------------
 * Page Structure Styles
 * ---------------------
 */

/* Stop the scrolling bounce when using a fixed header */
html {
  scroll-padding-top:         var( --eff-scroll-offset );
  overscroll-behavior:        none;
  scrollbar-gutter:           stable;
}

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

header.fixed-top {
  top:                        var( --eff-admin-bar-height );
  z-index:                    1030;
  background:                 transparent;
}

header.fixed-top .navbar {
  background:                 transparent;
}

main#main-content {
  position:                   relative;
  z-index:                    1;
  padding-top:                0px !important;;
}

/**
 * ----------------------
 * Page Background Styles
 * ----------------------
 */

/* Supports the fancy background */
body::before {
  content:                    "";
  position:                   fixed;
  inset:                      0;
  z-index:                    -1;
  pointer-events:             none;

  background-image:           var( --page-background-image );
  background-position:        var( --page-background-position );
  background-size:            var( --page-background-size );
  background-repeat:          var( --page-background-repeat );
}

body::after {
  content:                    "";
  position:                   fixed;
  top:                        0;
  left:                       0;
  right:                      0;
  height:                     calc( var( --fixed-top-depth ) + var( --eff-admin-bar-height ) );
  z-index:                    1020;
  pointer-events:             none;

  background-image:           var( --page-background-image );
  background-position:        var( --page-background-position );
  background-size:            var( --page-background-size );
  background-repeat:          var( --page-background-repeat );
}

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

pre {
  font-family:                inherit;
}

* {  
  box-sizing:                 border-box;
}

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

/* Rounded containers with a white background */
.white-container {
  background-color:           white;
}

/**
 * --------------------
 * Redacted Text Styles
 * --------------------
 */

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

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

.mobile-slide {
  max-width:                  1320px;
}

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

h1 {
  font-size:                  28px !important;
  color:                      rgba(0, 0, 0, 0.9);
  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( --secondary-colour ) );
  background:                 linear-gradient(         45deg, var( --primary-colour ), var( --secondary-colour ) );
  color:                      var( --bs-body-color ) !important;
}

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 {
  background-color:           #e9ecef;
}

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

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

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

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

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

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

/**
 * ----------
 * FAQ Styles
 * ----------
 */

#faqs {
  background-color:           #fff;
  border-radius:              .375rem;
  border:                     var( --bs-border-width ) var( --bs-border-style ) var( --bs-border-color ) !important;
  padding:                    1rem;
  margin-top:                 1rem;
}

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

nav {
}

.navbar {
  padding:                    0px 0px 0px 0px;
}

.form-inline {
  padding:                    5px 5px 5px 5px;
}

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

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

.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%);
}

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

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

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

.site-brand {
  display:                    inline-flex;
  align-items:                center;
  white-space:                normal;
}

.site-brand img {
  width:                      50px;
  flex:                       0 0 auto;
}

.site-brand-text {
  display:                    inline-block;
  width:                      240px;
  line-height:                1;
  text-align:                 left;
  margin-left:                8px;
}

.site-brand-text-line1 {
  font-family:                'Cinzel', serif;
  font-size:                  44px;
  font-weight:                700;
  letter-spacing:             0.06em;
  color:                      #224116;
}

.site-brand-text-line2 {
  font-family:                'Cinzel', serif;
  font-size:                  36px;
  font-weight:                700;
  letter-spacing:             0.06em;
  color:                      #9B9240;
}

@media (max-width: 1200px) {
  #header-menu {
    background-color:         #fff;
    border-radius:            0.375rem;
    overflow:                 hidden;
  }

  #header-menu .navbar-nav {
    padding:                  0;
  }

  #header-menu .nav-link {
    padding-left:             0.75rem;
    padding-right:            0.75rem;
  }

  #header-menu .search-form {
    padding-left:             0.75rem;
    padding-right:            0.75rem;
  }
}

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

.site-footer .footer-row {
  position:                   relative;
}

@media (max-width: 1200px) {
  .footer-menu-wrap {
    position:                 static;
  }

  .footer-menu-wrap .dropdown-menu {
    position:                 absolute;
    left:                     0.75rem;
    right:                    0.75rem;
    bottom:                   100%;
    transform:                none !important;
    min-width:                0;
    margin-bottom:            0.5rem;
    padding:                  0.5rem;
    border-radius:            0.375rem;
    background:               #fff;
    box-shadow:               0 0.5rem 1rem rgba(0,0,0,.15);
  }

  .footer-menu-wrap .navbar-nav {
    width:                    100%;
  }

  .footer-menu-wrap .nav-link {
    display:                  block;
    width:                    100%;
    padding-left:             0.75rem;
    padding-right:            0.75rem;
  }
}

@media (min-width: 1200px) {
  /* Keep Bootstrap padding generally, but remove the left edge for the footer menu only */
  #footer-menu .nav-item:first-child .nav-link {
    padding-left:             0 !important;
  }

  .navbar-nav li:hover>ul.dropdown-menu {
    /* controversial will open on hover but only on desktop */
    display:                  block;
  }

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

/**
 * ---------------------------
 * Bootstrap 5 - Button Styles
 * ---------------------------
 */

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
  background-color:           var( --primary-colour ) !important;
  border-color:               #000000 !important;
  color:                      var( --bs-body-color ) !important;
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:visited {
  background-color:           var( --secondary-colour ) !important;
  border-color:               #000000 !important;
  color:                      var( --bs-body-color ) !important;
}

/**
 * -------------------------------
 * Bootstrap 5 - Breadcrumb Styles
 * -------------------------------
 */

.breadcrumb {
  display:                    -ms-flexbox;
  display:                    flex;
  -ms-flex-wrap:              wrap;
  flex-wrap:                  wrap;
  padding:                    .75rem 1rem;
  margin-bottom:              1rem;
  list-style:                 none;
  background-color:           #e9ecef;
  border-radius:              .25rem;
}

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

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

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

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

/**
 * --------------------------
 * OpenLayer Map Popup Styles
 * --------------------------
 */

/* Style for the popup */
.ol-popup {
  position:                   absolute;
  left:                       -50px;
  background-color:           white;
  box-shadow:                 0 1px 4px rgba(0,0,0,0.2);
  padding:                    15px;
  border-radius:              10px;
  border:                     1px solid #cccccc;
  bottom:                     12px;
  min-width:                  200px;
}

.ol-popup:after, .ol-popup:before {
  top:                        100%;
  border:                     solid transparent;
  content:                    " ";
  height:                     0;
  width:                      0;
  position:                   absolute;
  pointer-events:             none;
}

.ol-popup:after {
  border-top-color:           white;
  border-width:               10px;
  left:                       48px;
  margin-left:                -10px;
}

.ol-popup:before {
  border-top-color:           #cccccc;
  border-width:               11px;
  left:                       48px;
  margin-left:                -11px;
}

.ol-popup-closer {
  text-decoration:            none;
  position:                   absolute;
  top:                        2px;
  right:                      8px;
}

.ol-popup-closer:after {
  content:                    "✖";
}




/* Tweaks to fix styling */

.bc-header-navbar-brand-image {
  width:                      190px;
}

.bc-stack {
  display:                    flex;
  flex-direction:             column;
  gap:                        16px;
}

.bc-page-body-title-outer + .bc-page-body-content-outer {
  margin-top:                 0px !important;
}

.bc-comments-outer .comment-respond {
  margin-top:                 0px !important;
  margin-bottom:              16px !important; 
}