/*
Theme Name: Birding Trail
Theme URI: http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial
Description: A demo theme built to accompany the Treehouse blog post <a href="http://teamtreehouse.com/wordpress-bootstrap-theme-tutorial">How to Build a WordPress Theme with Bootstrap</a>.
Author: Zac Gordon
Author URI: http://teamtreehouse.com/
Version: 1.1
Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

This simple theme was built using the example Bootstrap theme "Basic marketing site" found on the Bootstrap web site http://twitter.github.com/bootstrap/examples/hero.html

Also uses the cover template found on the Bootstrap site https://getbootstrap.com/docs/4.3/examples/cover/

*/

/* =====================================================
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
  color: #ef3b23;
}

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

.copy{
  color:#1A2C42;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #1A2C42;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: .05rem solid #1A2C42;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
/*
  border: .05rem solid #fff;
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */

  background-color: #1A2C42;
  border: .05rem solid #1A2C42;
  color: #fff;
}


/* =====================================================
 * Base structure
	reference: iPhone SE 320X568; - minimum dimensions?
 */

html{
  height:100%;
}
html,
body {
  background-color: #fff;
  color: #1A2C42;
}

/*
  color: #365c8b;
alternative 
  color: #1A2C42;
*/

body {

  display:flex;
  flex-direction:column;

  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
/*  -webkit-text-size-adjust:100%;*/
  margin:0;
  padding:0;
      -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
}

/*container common to all pages, main content between header and footer */
.content {
  flex:1 0 auto;
  order:2;
}

.header.row,
.footer.row {
  padding:0.75rem 0 0.75rem 0;
}

#page-container {
  padding:0rem;
}
.main-logo {
	width:90%;
}

/*lead label*/
.lead-label {
  color:#fff;
}


/* for menu */


a:hover {
 color:#333;
}

/*
a:visited {
  color:#666;
}

.btn a:visited {
  color:#000;
}
*/
img .aligncenter {
  text-align:center;
  margin:auto;
}

/* =====================================================
 * HEADER
 *  added wp css tags to bootstrap nav links (.menu-item tags) - dunno if this will mess with other menus though!
*/
.header {
  order:1;
  flex-shrink:0;
  width:100%;
}

.header a,
.header a:visited {
  color: #1A2C42;
}

/* temporarily hide header logo */
img .header_logo {
  display:none;
}

.masthead {
  padding-bottom: 0.7rem !important;
  margin-bottom:0 ;
  padding-left:1.5rem;
  padding-right:1.5rem;
  justify-content:space-between;
}

/*formatting for header logo*/
.masthead img {
  width:auto;
}

.masthead.inner {
  padding-left:1.5rem;
  padding-right:1.5rem;
  
}
.inner {
  text-align:center;
}
.nav {
  justify-content:flex-end;
}
.menu-item a:hover {
  text-decoration:none;
}
.menu-item,
.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.menu-item:hover,
.menu-item:focus,
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.menu-item,
.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.current-menu-item,
.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

/* logo  or text on front page*/
.masthead-brand {
  display:inline-flex;
  justify-content:flex-start; /*float left*/
  padding-top:0rem;
  padding-bottom:0rem;
  width:auto;
}

/*contains menu items */
.menu-main-container {
  justify-content:flex-end;
  width:auto;
}

/*note: on the map page, trigger map dimensions when width reaches this threshold */
@media (max-width:450px){
  .masthead {
    justify-content:center;
    flex-direction:column;
  }
  .masthead-brand {
    justify-content:center;
  }
  
  .nav-masthead {
    justify-content:center;
  }
  .menu-main-container {
    justify-content:center;
  }
}

/* =====================================================
 * FOOTER
 *  
 */

.footer {
  width:100%;
  flex-shrink: 0;
  order:3;
  line-height: 60px; /* Vertically center the text there */
}

.mastfoot {
  color: rgba(255, 255, 255, .5);
  text-align:center;
  line-height:0.8rem;
 }

 .mastfoot.inner {
  padding-left:0rem;
  padding-right:0rem;
 }

.mastfoot p{
  margin-bottom:0rem;
}
 .social {
  font-size:1.6rem !important;
  padding:2px;
 }
.copy {
  font-size:0.8rem;
}
/* =====================================================
 * Front Page
 */

.row-pad {
  padding-top:1.1rem;
  padding-bottom:0rem;
}

.lead-label {
  font-weight:500;
  font-size:1.1rem;
}

.front-page {
  padding: 0 1.5rem;
  flex-direction:column;
}

.front-page .btn-lg {
  padding: .75rem 1.25rem;
  font-weight: 700;
}

.front-page-logo {
  width:50%;
}
.lead {
  text-align:center;
  font-weight:350;
}
.center-block {
  text-align:center;
}

.inner {
  text-align:center;
  padding-left:3rem;
  padding-right:3rem;
}

/*items for learn more box*/
.learn-more {
  margin-top:2rem;
  background: #1A2C42;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  margin-bottom:1rem;
}

.fp-label {
  font-size:0.8rem;
}

.fp-topic {
  margin:0 0.5rem;
  color:#fff;
}
.fp-topic-icon {
  color: #fff;
}

/* =====================================================
 * sidebar
 */

.sidebar {
  border:#bbbbbb;
  border-width:0.8em;
  padding-top:15px;
  border-radius: 3px;
}

.sidebar ul {
  padding-left:30px;

}
.sidebar li a {
}
/* =====================================================
 * PAGE
 */
.page-title {
  text-align: Center;
}

/* =====================================================
 * BLOG
 */

/* remove hyperlink formatting on cards */
.card a,
.card a:hover,
.card a:visited {
  color:unset;
}

.card-title {
  padding-left:0.5rem;
  font-weight:700;
  font-size:1.2rem;
  padding: 0rem 0.5rem 0rem 0.5rem;
  margin: 0rem;
}

.card-white {
  background: #fff;
  color: #1A2C42;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  display:inline-block;
  box-shadow: 0 4px 8px 0 rgba(26,44,66,0.2), 0 6px 20px 0 rgba(26,44,66,0.19);
}

.blog-nav {
  height:1.5rem;
  width:100%;
  text-align:center;
  margin-top:0.5rem;
  margin-bottom:1rem;
}

.card-columns {
  margin-left:auto;
  margin-right:auto;
  margin: 0rem 1rem;
}

.card-columns a,
.card-columns a:hover,
.card-columns a:visited {
  text-decoration:none;
}


.card-img-top {
  height:auto;
}


.blog-card-category {
  font-size:0.6rem;
  padding:0.5rem;
  color:#aaa;
}

p.blog-post-meta {
  width:100%;
  text-align: center;
  font-size:0.85rem;
}

h3.cover-heading{
  text-align:center;
}


/* Bootstrap md breakpo - shifts from image below to image beside */
@media (min-width:768px) {
p.blog-post-meta {
  text-align:left;
}
/*  .display-4 {
    font-size: 3rem;
  }

.thumb-img{
  height:100%;
  border-radius:0 3px 3px 0;
  width:initial;
  position:absolute;
  top:0px;
  left:unset;
  right:0px;
  }
*/
}

/* Bootstrap lg breakpoint */
@media (min-width:992px) {

}
/* Bootstrap xl breakpoint */
@media (min-width:1200px) {


}


/* Alternative?
.card-blue {
  background: #1A2C42;
  color:#fff;
  border:.05rem solid #fff;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
*/


/* =====================================================
 * MAP
 */
 
.map-body {
  width:100%;
  top:0rem;
  right:0rem;
  bottom:0rem;
  left:0rem;
  display:block;
  flex:1 0 auto;
 }

#map-container {
  width:100%;
  margin:0;
}
#map_canvas {
  width: 100%;
  padding:0rem;
}

.map {
  padding:0rem;
  height:inherit;
  width:100%;
  padding: 0 0rem;
}

/* controls where map tool buttons are placed */

#map-button-group {
  margin-right:0.5rem;
  margin-top:0.5rem;
}


#map-button-group i {
  font-size:1rem;
 /* color:#666;*/
 color:#1A2C42;
}

#map-site-search {
  width:100%;
}

#map-site-search-input {
  border:none;
  font:unset;
  font-size:0.8rem;
  width:80%;
  text-align-last:center;
}

#map-site-search-box {
/*  border: 1px solid #1A2C42;*/
  border:none;
  display:inline-block;
}

.fa-search {
  padding:0 0.5rem;
  border: 1 solid #ccc;
}

/* The popup bubble on map formatting */
/* site label that pops up when point hovered over*/
/* The bubble is anchored above the tip. */
.popup-bubble-anchor {
  position: absolute;
  width: 100%;
/*  bottom:  TIP_HEIGHT=  1.5rem;
  left: 1.5rem;
*/}

.popup-bubble-content {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -100%);
  /* Style the info window. */
  box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
  max-width:6rem;
  border:none;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  background:#1A2C42;
  color:#ffffff;
  padding:5.5px;
  color:white;
  line-height:1em;
  font-weight:300;
  font-size:0.7rem;
  text-shadow:none;
  padding:0.6rem !important;
  margin:0;
  cursor:pointer;
  z-index: null;
}

.popup-bubble-content:hover {
  background:#444;
  z-index: 999;
}

/* controls site detail popup background color */
.modal-content {
  background:#1A2C42;
  color:#fff;
}

#DESCRIPTION {
  text-align:left;
}

.bird-sighting a,
.bird-sighting a:hover,
.bird-sighting a:visited {
  color:#fff;
}

#w3w-info a,
#w3w-info a:hover,
#w3w-info a:visited {
  color:#fff;
}

/* controls x color on site detail popup */
button.close:hover {
  color:#ddd;
}

button.close {
  color:white;
}

#map-location {
  font-size:1.25rem;
  cursor: pointer;
}

#map-location-container{
  display:float-right;
}
#button-container {
  width:inherit;
  margin-right:0rem;
  margin-left:0rem;
}
.foreground-fa {
  color: #1A2C42;
}



/* controls feature badges */

.feature-img {
  width:20px;
  height:20px;
  float:left;
  margin-top:0.5rem;
  margin-bottom:0.5rem;
  margin-left:0rem;
  margin-right:0.5rem;
  display:inline;
}

.f-hide {
  display:none;
}


/* keep these in front of image */
#modal-header-image {
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  opacity:0.6;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.modal-site-title {
  z-index: 100;
}
.modal-open-status {
  z-index: 110;
}
.modal-title {
  z-index:100;
  float:left;
  font-size:2rem;
  font-weight:650;
  line-height:1.2;
}

@media screen and (max-width:768px) {
  .modal-title {
  font-size:1.5rem;
  }
}

@media screen and (max-width:576px) {
  .modal-title {
  font-size:1.1rem;
  }
}
.site-modal-header {
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;

}

#close-modal {
  z-index:100;
}

#site-open-status {
  z-index:100;
  float:left;
  font-size:0.65rem;
}

.modal-footer {
  margin:0rem;
  flex-direcction:column;
  height: 9rem;
}


#HOURS {
  padding-bottom:0.8rem;
}

.modal-footer-row {
  margin:0.3rem 1rem !important;
  width:100%;
}

.footer-footer-buttons {
  display:inline;
  padding:0 0.5rem 0 0.5rem;
}

.nav-web-buttons {
  margin:0 0.25rem 0 0.25rem;
}

.site-open-badge {
  margin:0.6rem 0;
  padding:0.4rem;
  display:block;
}

.modal-subheading {
  padding: 0.5rem;
  text-align: left;
  font-style: italic;
  font-weight:600;
  color:#ccc;
  background:#222;
}

#ebird-badge {
  float:right;
  font-weight:400;
}

.modal-subsection a {
  text-decoration: underline;
}

.modal-subsection-column {
  font-size:0.9rem;
}

.site-info {
  padding:0.8rem;
  font-size:0.9rem;
}
/*
 * What3Words formatting
 */

/* w3w footer div class */
#w3w {
  height:0.9rem;
}
.w3w-info {
  vertical-align:center;
  height:3rem;
}

#w3w-link:hover{
  text-decoration:none;
}

/* w3w address text */

#w3w-address{
  font-family:'Source Sans Pro', sans-serif;
  font-size: 0.6rem;
  padding-left:0.2rem;
}