/*
 Theme Name:   STRiDE Theme
 Theme URI:    https://www.stride-dementia.org
 Description:  STRiDE Wordpress Theme
 Author:       Ben Schlaepfer
 Author URI:   https://mode2.ltd
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, bootstrap 4
 Text Domain:  stride-wp
*/

/* STRIDE OVERRIDE STYLES   */


html {
  scroll-behavior: smooth;
}

body {padding-top:20px;}

/* Hide Admin Bar */
#stride-front-end #wpadminbar {display: none;}


    .nav-previous a, .nav-next a {
      position: relative;
      display: block;
      padding: .75rem 1rem;
      margin-left: -1px;
      line-height: 1;
      color: #343a40;
      background-color: #fff;
      border: 1px solid #dee2e6;
      border-radius: 10rem;

    }

    .navbar {

      border-radius: 0px;

    }

    .nav-previous a {float:left;}
    .nav-next a {float:right;}

/* Homepage Styling  */
.country-blocks {padding:0 9px;}
.country-blocks div {background: #343a40;min-height:360px;padding:0;padding-top:270px;background-repeat: no-repeat;background-size: cover;}
.country-blocks div.w-100 {min-height: 0;padding:0;margin:0;}
.country-blocks div h3 {color:white;font-size:30px;font-weight:400;display:inline-block;padding:10px 25px 10px 10px;background-color: #343a40;;}

.country-blocks div.block-text {padding:20px;}
.country-blocks div.block-text h3 {font-size:24px;margin:0 0 10px 0;padding-left:0;line-height: 38px;}
.country-blocks div.block-text p a {color:white;margin-bottom:20px;}

.country-blocks h3 a {color:white;font-size:}
.country-blocks h3 a span {font-size: 22px;

display: inline-block;
margin-top: -20px;
position: relative;
	top: -6px;}
.country-blocks h3 a:hover {color:#eee;}
 
div.block-br {background-image: url(core-img/brazil.jpg); }
div.block-in {background-image: url(core-img/india.jpg);}
div.block-id {background-image: url(core-img/indonesia.jpg);}
div.block-jm {background-image: url(core-img/jamaica.jpg);}
div.block-ke {background-image: url(core-img/kenya.jpg);}
div.block-mx {background-image: url(core-img/mexico.jpg);}
div.block-za {background-image: url(core-img/south-africa.jpg);}


span.supported-by {font-size:11px;text-align:right}
img.supporter-logo {max-height:80px;}



p a, a {
  text-decoration: none;
  color: #6a6a6a;
}
a {
  transition: color .2s ease-in-out;
}

p a:hover, a:hover {
  text-decoration: underline;
  color:#212529;
}
a {
  color: #28788f;
  background-color: transparent;
}



/* Title styles*/

.page-title {
  font-size: 30px;
  font-weight: 300;
  line-height: 1.3;
  display: inline-block;
  background-color: #343A40;
  color:white;
  text-transform: uppercase;
  padding: 10px;
  padding-right: 60px;
  margin: 0px;
  border-left: 35px solid  #eee;
}

.archive .page-title {text-transform:none;}

.page-template-default .page-title {border-left: 35px solid  #fff;}

.page.page-template-default .page-title {border-left: 0px solid  #fff;}


.page-about-the-project h1.page-title  {background-color: #28788F;border-left:0;}
.page-contact h1.page-title, .category-highlights h1.page-title, .page-contact h1.page-title, .post-type-archive-videos h1.page-title   {border-left:0}



/* List Page Rows */
.ppl-row-top .col-2 {background:#eee;}
.ppl-row-top .col-10 {background:#fff;}
.ppl-row .col-2, .rch-row .col-2 {background:#eee}
.ppl-row {background:#fff; border-bottom:1px dotted silver;width:100%}
.ppl-row h2, .ppl-row h6 {font-size:26px;font-weight: 500;color: #28788F;margin-bottom:0;}
.ppl-row .col-2 h2, .ppl-row .col-2 h6 {font-size:20px;}
.ppl-row .col-10 i {}

.rch-row .col-12 {background-color:#28788F;color:white;}
.rch-row .col-12 h4 {margin-bottom:0;font-weight:300;}

.ppl-row .col-2 .img-thumbnail {border-radius:0;}

.intro-text p, h2.intro-text, h4.rch-pub-title {color:#28788F;font-size:26px;line-height:32px;}
h2.intro-text, h4.rch-pub-title {font-weight:500;}

.rch-lhcol p {font-weight: 700;margin-bottom:0;}

.rch-lhcol p.rch-phase-title {font-weight: 400;margin-bottom:0;color:#28788F}



.prt-intro a, .prt-mob-info a {font-weight:600;text-decoration:none;color:#343a40}
.prt-intro a:hover, .prt-mob-info a:hover {font-weight:600;text-decoration:underline;color:#343a40}

.prt-mob-title h3, h1.page-mob-title  { background-color: #343A40;color:white;padding: 10px;font-weight:600;}
h1.page-mob-title {text-transform: uppercase;margin-top:20px;font-size:26px;}
.prt-mob-info p {background:#fff; border-bottom:1px dotted silver;padding:10px}


/* STRiDE Map styles */


h2.map-cta {  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  display: inline-block;
  background-color: #28788f;
  color:white;
  text-transform: uppercase;
  padding: 10px;
  padding-right: 20px;
  margin: 0 0 -40px 0;
}

.list-group-flush.stride-map-legend .list-group-item {
	background-color:transparent;
	font-size: 15px;
	padding: 11px;}

.list-group-flush.stride-map-legend .list-group-item:hover {background-color:#efefef;}

/* Highlights & Videos SINGLE pages styles */


body.single-format-audio img.wp-post-image, body.single-format-video img.wp-post-image, body.single-videos img.wp-post-image  {display:none;}


/* Facet WP Dropdown Styles */

.col-12 .facetwp-facet {margin-bottom:8px;}

/* class applies to select element itself, not a wrapper element */
.facetwp-dropdown {
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #444;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 100%;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	/* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
		for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
		
	*/
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2328788F%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
	background-position: right .7em top 50%, 0 0;
	/* icon size, then gradient */
	background-size: .65em auto, 100%;
}
/* Hide arrow icon in IE browsers */
.facetwp-dropdown::-ms-expand {
	display: none;
}
/* Hover style */
.facetwp-dropdown:hover {
	border-color: #888;
}
/* Focus style */
.facetwp-dropdown:focus {
	border-color: #aaa;
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	box-shadow: 0 0 1px 3px rgba(40, 120, 143, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222; 
	outline: none;
}

/* Set options to normal weight */
.facetwp-dropdown option {
	font-weight:normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .facetwp-dropdown, :root:lang(ar) .facetwp-dropdown, :root:lang(iw) .facetwp-dropdown {
	background-position: left .7em top 50%, 0 0;
	padding: .6em .8em .5em 1.4em;
}

/* Disabled styles */
.facetwp-dropdown:disabled, .facetwp-dropdown[aria-disabled=true] {
	color: graytext;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
}

.facetwp-dropdown:disabled:hover, .facetwp-dropdown[aria-disabled=true] {
	border-color: #aaa;
}



/* Vignettes / Desk Review Sytling  */

.vqs-overview {margin:20px 0; padding:30px; border:2px solid #28788F; }
.vqs-response-text {text-transform: lowercase};

h4.card-title a .dr-response-text {text-transform: uppercase};

.accordion .card .card-header h4.card-title {
  color: red;
  font-size: 1.15rem;
}

.accordion .card .card-header h3.card-title a span.dr-response-text {
  color: #28788F;
  text-transform: uppercase;
}

 /* The side navigation menu */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #28788F; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}


#page-wrapper {  transition: 0.5s; /* 0.5 second transition effect to slide over the page */}


/* The navigation menu links */

ul#toc-links { list-style-type: none;
  margin: 10px;
  padding: 0;}


.sidenav a {
  padding: 5px;
  text-decoration: none;
  font-size: 15px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .close-btn {
  position: absolute;
  top: 6px;
  right: 12px;
  font-size: 16px;
  margin:0 10px 20px 0;
	
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
} 

.dr-toc {
  font-size: .96em;
  border-top: 1px solid #eee;
  padding: 10px;
  margin:0;
}

h3.dr-toc {
	padding-left:20px;
		font-weight:bold;
}
h4.dr-toc {
	padding-left:40px;

}

h5.dr-toc {
	padding-left:50px;
}

h6.dr-toc {
	padding-left:60px;
	  font-size: .96em!important;
}



/* Country Page Styles  */
ul.cpg-gallery {margin:20px 0;padding:0;list-style:none;}
li.cpg-gallery-img {display:inline-block;border:0;margin:0;padding:0}
li.cpg-gallery-img img {height:176px;width:176px;}

.single-country_page .card-body a {color:white;}


/* Button Styles  */

.next-button a {
  height:50px;
  line-height:50px;
  vertical-align:middle;
  text-align:center;
  padding:0 30px;
  color:#ffffff;
  background-color:#28788F;
  position:relative;
  display:inline-block;
  text-transform: uppercase;
}

.next-button.view-pub a {
  height:50px;
  line-height:50px;
  padding:0 20px;
  background-color:#259dc9;
  text-transform: unset;

}

.col-md-3 .next-button a{padding:0 20px;}

.next-button a:after{
  position:absolute;
  right:-20px;
  content:" ";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 25px 0 25px 20px;
  border-color: transparent transparent transparent #28788F;
}
.next-button.view-pub a:after{
  right:-20px;
  border-width: 25px 0 25px 20px;
  border-color: transparent transparent transparent #259dc9;
}

.next-button a:hover{
  background-color:teal;
}
.next-button a:hover:after{
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 25px 0 25px 20px;
  border-color: transparent transparent transparent teal;
}


.prev-button a{
  height:50px;
  line-height:50px;
  vertical-align:middle;
  text-align:center;
  padding:0 20px;
  color:#ffffff;
  background-color:#444;
  position:relative;
  display:inline-block;
  text-transform: uppercase;
}
.prev-button a:before{
  position:absolute;
  left:-20px;
  content:" ";
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 25px 20px 25px 0px;
  border-color: transparent #444 transparent transparent ;
}
.prev-button a:hover{
  background-color:#666;
}
.prev-button a:hover:before{
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 25px 20px 25px 0px;
  border-color: transparent #666 transparent transparent;
}


/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/
 
/* Set nav text size a bit smaller for portrait tablet */
@media (max-width: 992px) { 
  .navbar {font-size:.76em;}
  .navbar-nav .nav-item + .nav-item {border:0;}
}
 
@media (max-width: 767px) { 
  .navbar-nav .nav-item + .nav-item { border-top: 1px solid #e9ecef;}
}