/*
 Theme Name:   Kaylee Archer Theme (Child of Twenty Twenty-One)
 Description:  Twenty Twenty-One Child Theme
 Author:       Deena Warner Design LLC
 Author URI:   https://deenawarnerdesign.com
 Template:     twentytwentyone
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         custom
 Text Domain:  twentytwentyonechild
*/

body {
	margin: 0px; padding: 0px;  text-align: center; font-family: "Lato", sans-serif; font-size: 1.1em; line-height: 1.6em; 
	background-image: url(images/background.jpg);
	}

h1, h2, h3 {
	font-family: "Grenze Gotisch", serif; font-optical-sizing: auto; font-weight: normal;
	margin: 0px; line-height: 1.1em; 
  }
  h2.has-extra-large-font-size {font-size: 260%; }
  h5 {margin: 0px; padding: 0px; text-transform: uppercase; letter-spacing: 1px; }
a { text-decoration: none; color: #063a6c; }
p a:hover { text-decoration: underline;  }
.home-width { max-width: 1200px; margin: 0 auto; }

main { padding: 50px 4%; }
.home p { padding: 0 4%;  max-width: 600px; margin-left: auto; margin-right: auto; }
p strong {color: #2e7f8d; }
.home .wp-block-buttons { padding: 20px 0 30px; }

/* Nav */
header {background-image: url(images/header-1.jpg); background-position: center top; background-repeat: repeat-x;}
.headerBg {
	background-image: url(images/header-bg-2.png); background-position: center top; background-repeat: no-repeat; height: 174px;
	}
.headLogo { padding-top: 50px;}
nav {
	border-top: 1px solid #4e9bb7; background-image: url(images/menu-bg.jpg); background-color: #011b40;
	background-position: center top; background-repeat: no-repeat; 
}

/* Books Page */
.one-book { width: 250px; display: inline-block; vertical-align: top; margin: 0 40px 40px; }
.one-book img { width: 100%; height: auto; max-width: 210px; display: block; margin: 0 auto; }

/* One Book */
.bookCol, .textCol { vertical-align: top; display: inline-block; }
.bookCol { width: 27%; background-color: #b2cddd; border-radius: 8px; padding: 30px 2%; text-align: left; }
.textCol { width: 54%; margin: 0 4% 20px 4%; text-align: left; }
.bookCol img { width: 100%; height: auto; }
.theBookFull {width: 100%; margin: 0 auto; max-width: 1100px; }

/* Extras */
.one-extra { margin-bottom: 60px; padding-bottom: 60px; border-bottom: 1px dotted #666; display: flex; }
.extra-img, .extra-text { text-align: left; }
.extra-img { width: 65%; }
.extra-text { width: 35%; }
.extra-img img { width: 94%; height: auto; }
.one-extra h4 { font-size: 150%; margin-bottom: 10px; }

/* Footer*/
footer {
	background-image: url(images/footer-bg.jpg); background-position: center top; background-repeat: no-repeat;
	background-color: #06111d; color: #e1f4ff;
	padding: 0 0 75px; 
}
.small-moon { background-image: url(images/narrow-bar.jpg); background-repeat: repeat-x; background-position: center top;  }
.footer-logo { padding: 30px 0 0; }
ul#footer-menu-list, ul#primary-menu-list, ul.sub-menu { list-style-type: none; margin: 0px; padding: 0px; }
ul#footer-menu-list li, ul#primary-menu-list li { display: inline-block; vertical-align: top; position: relative; }
ul#footer-menu-list li a {
	display: block; padding: 8px 16px; text-transform: uppercase; font-weight: 600; color: #b1d9f2; 
	letter-spacing: 3px; 
}
ul#footer-menu-list li a:hover { color: #FFF; }
ul#primary-menu-list li a {
	display: block; padding: 4px 30px; text-transform: uppercase; font-weight: 300; color: #FFF; 
	letter-spacing: 5px; font-size: 105%; 
}
ul#primary-menu-list li a:hover { color: #b1d9f2; }
ul#footer-menu-list li .sub-menu, ul#primary-menu-list li .sub-menu {display: none; }
ul#primary-menu-list li:hover .sub-menu { display: block; }
ul#primary-menu-list li .sub-menu { position: absolute; top: 34px; left: 0px; background-color: rgba(0,0,0,.9); text-align: left; width: 200px; }
ul#primary-menu-list li .sub-menu a { display: block; padding: 10px; text-align: left; text-transform: none; letter-spacing: 1px;  }
ul#footer-menu-list button, ul#primary-menu-list button { display: none; }

.socials { padding: 20px 0 0; }
.socials img { display: inline-block; margin: 0 20px 40px; }
.socials img:hover { opacity: .7; }
.copyright { font-size: 80%; }

@media only screen and (max-width: 480px) {

}


/* Dropdowns */
/* dd container */
.dropdown {
  display: inline-block;
  position: relative;
  outline: none;
  border-radius: 4px;
  background-color: #0b6d93;
  color: #FFF;
  cursor: pointer;
  background-image: url(images/arrow.png); background-position: 90% 50%; background-repeat: no-repeat;
  padding-right: 40px;
  width: 86%;
  margin-bottom: 10px; 
}

/* button */
.dropbtn {
  display: inline-block;
  padding: 12px 16px;
  color: #FFF;
  cursor: pointer;
  background-color: #0b6d93;
  transition: 0.35s ease-out;
}
.dropbtn:hover,.dropbtn.c:hover, .dropbtn.r:hover {
  color: #FFF;
}

/* dd content */
.dropdown .dropdown-content {
  position: absolute;
  top: 50%;
  visibility: hidden;
  opacity: 0;
  z-index: 100000;
  background-color: #0a5c82;
  font-size: 16px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  transition: 0.35s ease-out;
  width: 100%; 
}

/* center & right position menu relative to the button */
.dropdown .dropdown-content.c  {
  left: 0;
}
.dropdown .dropdown-content.r  {
  right: 0;
}

/* style link menu item */
.dropdown-content .mi {
  display: block;
  color: white;
  padding: 6px 12px;
  text-decoration: none;
  position: relative;
}
.dropdown-content .mi:hover { background-color: #083a60; }

/* show dd content */
.dropdown:focus .dropdown-content {
  outline: none;
  visibility: visible;
  opacity: 1;
  transform: translateY(20px);
}

.dropdown:focus .dropbtn::after {
  height: 0;
  border-bottom: 0;
  margin-bottom: 4px;
}

/* media queries */
@media (max-width:900px) {
	.dropdown { width: 76%; }
}
@media (max-width:745px) {
.dropdown .dropdown-content.r,
.dropdown .dropdown-content.c {
  left: 0;
  margin-left: 0;
  }
}
@media (max-width:700px) {
	.headLogo img { width: 80%; margin: 0 auto; display: block; }
	ul#primary-menu-list li a { letter-spacing: 1px; }
	.headerBg { height: auto; padding-bottom: 30px; }
	.bookCol, .textCol { display: block; width: 90%; margin: 0 auto 30px; }
	.bookCol img { width: 60%; height: auto; display: block; margin: 0 auto 20px; }
	.bookCol { text-align: center; }
	.dropdown { text-align: left; }
}
@media (max-width:550px) {
	ul#primary-menu-list li a { padding: 4px 12px;}
	.extra-img, .extra-text { text-align: center; width: 100%; }
	.one-extra { flex-flow: row wrap; }
}
@media (max-width:460px) {
	.footer-logo img { width: 80%; margin: 0 auto; display: block; }
	ul#primary-menu-list li#menu-item-22 { display: none; }
	.one-book { width: auto; }
}
@media (max-width:310px) {
	ul#primary-menu-list li a { font-size: 5vw; }
}