@charset "UTF-8";

/* CSS Document */

/*
Theme Name: Northern Neck Hidden History Trail
Theme URI: https://nnkhiddenhistorytrail.org/
Author: Consociate
Author URI: consociate.marketing
Text Domain: nnk-history-trail
*/

/* GENERAL 
#################################################### */

body { font-family: "azo-sans-web", sans-serif; font-weight: 400; font-style: normal; font-size: 18px }

b, strong, .bold { font-weight: 700 }

h1, h2, h3, h4, h5 { font-weight: 400; line-height: 1.25em; margin-bottom: 1.25rem }
h1 { font-size: 70px }
h2 { font-size: 60px }
h3 { font-size: 50px }
h4 { font-size: 40px }
h5 { font-size: 30px }
h6 { font-size: 26px }

.left { text-align: left }
.right { text-align: right }
.center { text-align: center }

.norm { font-weight: 400 }
.bold { font-weight: 700 }
.caps { text-transform: uppercase }

.script { font-family: "espiritu-script", sans-serif }

.txt-green { color: #007540 }
.txt-gold { color: #F99523 }
.txt-red { color: #BE1E2D }
.txt-brown { color: #834400 }
.txt-black { color: #000 }

.bg-green { background-color: #007540 }
.bg-gold { background-color: #F99523 }
.bg-red { background-color: #BE1E2D }
.bg-brown { background-color: #834400 }


/* Nav */

.navbar { padding-top: 25px; padding-bottom: 25px }
.navbar .logo img { width: 0; margin-top: -50px; margin-bottom: -100px }

.navbar { background: url("images/gr-border-colors.jpg") center top no-repeat; }
#header .border-top { background: url("images/gr-border-colors.jpg") center center no-repeat; width: 100%; height: 10px }

.nav-link { font-weight: 700; margin: 0 10px; text-transform: uppercase}

#intro, #explore { padding-top: 100px; padding-bottom: 100px }
.grass-top { background: url(images/gr-grass-green-edge.png) left center no-repeat; max-width: 1400px; width: 100%; height: 35px; 
	margin-top: -35px; position: relative }
.grass-black { background: url(images/gr-grass-black-edge.png) right center no-repeat; max-width: 1400px; width: 100%; height: 35px; margin-top: -35px; float: right; position: relative}
	
#intro { background: rgb(0,117,64);
	background: linear-gradient(0deg, rgba(0,117,64,1) 0%, rgba(0,59,32,1) 100%); color: #fff }
#intro .text { padding-left: 8% }
#intro .btn { position: relative; z-index: 10 }
#intro img.jagged { margin-top: -75px; margin-bottom: -75px; position: relative; z-index: 9 }
#intro .video { text-align: right }

#explore { background-color: #000; color: #fff; text-align: center; border-bottom: 10px solid #F99523  }
#explore img { border-radius: 15px; margin-top: 25px }
#explore .col-md-4 { width: 30% }
#explore .col-md-4.mid { width: 40% }

#visit { background: linear-gradient(89deg, rgba(85,175,173,1) 0%, rgba(85,175,173,1) 50%, rgba(52,158,190,1) 100%); color: #fff }
#visit .map { background: url(images/gr-map-counties.jpg) right center no-repeat; background-size: cover; width: 100%; height: 700px }
#visit .text { padding-top: 100px; padding-bottom: 100px; padding-right: 5%; text-align: right }
#visit span.txt-black { font-weight: 600; text-transform: uppercase }
#visit .text img { width: 90%; margin-right: -35px }

footer { padding-top: 50px; padding-bottom: 50px; background-color: #000; color: #fff }
footer .logo img { padding: 45px }
footer .bi { margin: 0 8px; color: #F99523; font-size: 1.25em }
footer .copyright { text-align: center }

#ada { padding-top: 25px; padding-bottom: 25px; background-color: #007540; color: #fff }

/* Pages */

#main { }


/*
####################################################
C O M P O N E N T S
####################################################
*/

/* IMAGES */

img { max-width: 100%; height: auto; }


/* LINKS */

a { text-decoration: none; transition: 200ms; font-weight: 700; color: #F99523 }
a:hover { color: #fff }

footer .contact a { color: #fff }

a img { transition: 200ms }
a img:hover { transform: scale(.97) }

/* BUTTONS */

.btn { border: none; padding: 12px 20px 10px 20px; font-size: 17px; color: #fff; text-transform: uppercase }
.btn:hover { background: #000; color: #fff  }

.wp-block-button__link { transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-size: 18px }
.wp-block-button__link:hover { background-color: #003D52 !important }

/* Shadows */

.shadow { box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important; }

.shadow-text { text-shadow: -1px -1px 1px #fff, 1px 1px 1px rgba(0,0,0,.50) }

/* Spacing */

.max-800, .max-1000, .max-1200, .max-w { margin-left: auto; margin-right: auto }
.max-800 { max-width: 800px }
.max-1000 { max-width: 1000px }
.max-1200 { max-width: 1000px }

.mar-0 { margin: 0 }

.flush { padding-left: 0; padding-right: 0 }

/*
####################################################
E X T R A S
####################################################
*/

/* Anchor scroll sticky menu offset */
html {
  scroll-padding-top: 275px;
}

/* WP admin bar offset */
body.admin-bar .navbar {
    margin-top: 32px;
}

/* Nav scroll */

.navbar-fixed-top.scrolled .logo img {
  width: 150px;
  transition: width 200ms ease
}
.navbar.navbar-fixed-top.scrolled { 
	background: rgba(255,255,255,0.9);
	transition: background 200ms ease}

/*
.navbar.navbar-fixed-top.scrolled  {
  padding-top: 25px;
  transition: padding-top 200ms ease
}
.navbar-fixed-top.scrolled .nav-link {
  font-size: 16px
}

#header .navbar-fixed-top.scrolled .logo img {
  max-width: 200px;
  transition: max-width 200ms ease
}

.bg-light .navbar-toggler {
  border-color: rgb(0,0,0,1);
}
.navbar-fixed-top.scrolled .navbar-brand.m-show img {
  width: 85px;
  transition: width 200ms ease
}
*/

/* Full-width in WP Block Editor (Cover block) */
.alignfull {
    width:  100vw;
    max-width:  100vw;
    margin-left:  calc(50% - 50vw);
}
.wp-block-cover.alignfull {
    padding-top: 100px; padding-bottom: 100px; /* margin-top: 50px; margin-bottom: 75px */
}

.wp-block-cover__inner-container { max-width: 1200px }

#XXX { overflow-x: hidden } /* Fix for PC horizontal scroll bars with .alignfull */

/* Image Wraps */

.crop { height: 300px }
.crop img { 
	object-fit: cover;
    width: 100%;
    height: 100% !important;
}

/* Nav dropdown on hover */
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}


/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Custom */
@media (min-width: 1925px) {

}

/* Extra large devices (large desktops, 1200px and up)
 * No media query since this is the default in Bootstrap because it is "mobile first"
 */
@media (min-width: 1200px) {

}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {


}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 991px) {
	
	.m-hide { display: none }
	.m-show { display: block }
	
	/* Breaks WP BLOCK columns early w/ tweaks */
	.wp-block-columns { display:block } 
	.wp-block-column:nth-child(2n),
		.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n) { margin-left: 0 }
	
	/*
	.navbar-toggler { background-color: #0A6399; border-color: #0A6399; color: #fff; font-size: 25px }
	.offcanvas { background: rgb(10,99,153);
		background: linear-gradient(166deg, rgba(10,99,153,1) 0%, rgba(108,201,244,1) 30%, rgba(0,147,216,1) 100%); }
	.offcanvas-title { color: #fff }
	.offcanvas-title img { max-width: 200px }
	.navbar-expand-lg .navbar-nav .nav-link { color: #0A6399; font-size: 22px; font-weight: 700 }
	.offcanvas .navbar-nav .nav-link.active { border-bottom: 0 }
	*/
	
	#explore .col-md-4 { width: 100% }


}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767px) {
	
	.reverse-mobile { flex-direction: column-reverse }
}

/* Extra small devices (portrait phones, less than 544px) */
@media (max-width: 543px) {

}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (max-width: 950px) {

}