/*
 Theme Name:   Twenty Twenty Five Child
 Theme URI:    http://example.com/twentytwentyfive-child/
 Description:  Twenty Twenty Five Child Theme
 Author:       Megan Coyle
 Author URI:   http://work.mcoyle.com
 Template:     twentytwentyfive
 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, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwentyfive-child
*/
@import url("../twentytwentyfive/style.css");


/* Navigation */
/* =============================================================================
   HEADER
   ============================================================================= */
* {
  font-family: 'Roboto', sans-serif;
}

header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body {
  padding-top: 70px; /* adjust to match your header height */
}

/* When admin bar is present */
.admin-bar header.wp-block-template-part {
  top: 32px; /* admin bar is 32px tall */
}

/* Admin bar is 46px tall on mobile */
@media screen and (max-width: 782px) {
  .admin-bar header.wp-block-template-part {
    top: 46px;
  }
}
@media screen and (max-width: 600px) {
  .admin-bar header.wp-block-template-part {
    top: 0;
  }
}

/* Navigation */
#logo h1 {
    display: inline-block;
    float: left;
    margin-bottom: 0;
	padding-left: 10px;
}
#logo h1:hover {
    opacity: .8;
}
#logo a {
	color: white;
}

p.wp-block-site-title a {
    text-decoration: none;
}

.main-navigation {
    clear: none;
    display: block;
}
.navigation-top .wrap {
    padding: 0.75em 0;
}
.navigation-top nav {
    float: right;
}
.navigation-top, .navigation-top.site-navigation-fixed {
    background: black;
}
.navigation-top {
	border-top: none;
	border-bottom: none;
}
#top-menu a {
    color: white;
}
.menu-mainnav-container {
    margin-right: 40px;
}
.site-header .navigation-top .menu-scroll-down {
    color: white;
    top: 0.7em;
}
.sub-menu a {
    color: black !important;
}
.sub-menu a:hover {
    color: white !important;
}


/* Header / Hero Section */
.mc-hero {
  margin: 0;
  background-color: lightgray;
  width: 100%;
  margin-bottom: -40px;
}

.site-hero {
  max-width: 1400px;
  height: 70vh;
  margin: auto;
  background-image: url('/wp-content/uploads/cropped-curtain-call.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wp-block-cover__inner-container h1 {
    font-size: 3.5em;
    color: white;
    margin-bottom: 0;
}

.wp-block-cover__inner-container h2 {
    font-size: 2em;
    color: white;
    margin-top: 0;
    padding-top: 0;
}

.landing-page-header {
    padding-top: 15%;
}

.landing-page-header h1 {
    font-size: 3.0em;
    margin-bottom: 0;
    color: white;
}

.landing-page-header h2 {
    font-size: 2em;
    color: white;
    margin-top: 0;
    padding-top: 0;
}

@media screen and (max-width: 880px) {
    .site-hero {
        height: 80vh;
        background-size: cover; /* scale nicely */
        background-position: center top; /* center horizontally, push image below top */
    }

    .landing-page-header {
        padding-top: 20px;
        text-align: center;
    }

    .landing-page-header h1 {
        font-size: 2.5em; /* scale for mobile */
        margin-bottom: 0.2em;
    }

    .landing-page-header h2 {
        font-size: 1.5em;
    }
}


/* Header Styles */
/* remove gradient */
.custom-header-media:before {
    background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0);
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 0);
    background: none !important;
    filter: none;
}

.has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
    top: 0;
    display: block;
    left: 0;
    height: auto;
    padding-top: 0;
    position: absolute;
    width: 100%;
}
.landing-page-header {
    padding-top: 30%;
}

.landing-page-header h1 {
    font-size: 3.0em;
	margin-bottom: 0;
	color: white;
	font-weight: 800;
}
.landing-page-header h2 {
    font-size: 2em;
    color: white;
    margin-top: 0;
    padding-top: 0;
}
body:not(.title-tagline-hidden) .site-branding-text {
    display: block;
    vertical-align: middle;
    margin: auto;
    max-width: 400px;
}
.btn {
  border: 1px solid white;
  box-sizing: border-box;
  display: inline-block;
  font-family: inherit;
  font-weight: 300;
  letter-spacing: 1px;
  margin-left: 0.5em;
  outline: medium none;
  padding: 0.5em 0.6em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.01);
  transition: all 0.2s ease 0s;
  vertical-align: middle;
  color: white; }
  .btn:hover {
    background: white;
    border: 1px solid white;
    color: black; }


/* Fonts */
h5 {
	text-transform: none;
	font-size: .9rem;
    margin-top: 0;
    padding-top: 0;
}
.site-content-contain li {
    margin-left: 25px;
}

/* blog */
.single-featured-image-header img {
    max-width: 1000px;
}

/* Sidebar for blog */
#secondary li {
    margin-left: 0;
}
.page .panel-content .entry-title, .page-title, body.page:not(.twentyseventeen-front-page) .entry-title {
    color: black;
    font-size: 14px;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

/* Posts Styles */
.single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) .page-header, .archive.page-one-column:not(.has-sidebar) #primary {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}

@media screen and (min-width: 48em){
	.wrap {
		max-width: 1100px;
		padding-left: 3em;
		padding-right: 3em;
	}
}

/* Homepage */
.home .entry-content {
	text-align: center;
}

.home h2.entry-title {
	text-align: center;
}

@media screen and (min-width: 30em) {
	.home.page-one-column .panel-content .wrap {
    	max-width: 840px;
	}
}

/* =============================================================================
   FORM
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  background: #fff;
  background-image: -webkit-linear-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  );
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: block;
  padding: 0.7em;
  width: 100%;
}

select.wpcf7-form-control,
input[type="date"],
input[type="file"]{
  color: #666;
  background: #fff;
  background-image: -webkit-linear-gradient(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  );
  border: 1px solid #bbb;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  display: block;
  padding: 0.7em;
  width: auto;
}

input[type="file"] {
	margin-bottom: 10px;
}

form.wpcf7-form input,
form.wpcf7-form select,
form.wpcf7-form textarea {
	margin-top: 5px;
}

form.wpcf7-form p {
    font-size: 16px;
}

input[type="button"],
input[type="submit"] {
  background-color: #222;
  border: 0;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1;
  padding: 1em 2em;
  text-shadow: none;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background: #42424e;
}


/* Resume */
.resume-list {
	list-style: none;
}
ul.resume-list {
	margin-left: 0;
	}
.resume-list .fa {
    padding-right: 10px;
}

.resume-container {
    float: right;
    max-width: 65%;
}

.resume-skills {
    float: left;
    max-width: 30%;
}
.resume-mobile {
	display: none;
}

/* Global Footer Styles */
.social-media {
	max-width: 900px;
	margin: auto;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
footer .fa {
    color: white;
	margin-left: 5px;
	margin-right: 5px;
}
footer .fa:hover {
	opacity: .8;
}

.site-footer {
	border-top: none;
	background: black;
	margin-top: 0;
}


/* Mobile Devices*/
@media screen and (max-width: 880px) {
	.portfolio-icons, .design-icons {
		display: block;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
		width: 100%;
	}
	.portfolio-icons img, .design-icons img {
	max-width: 230px;
	width: 100%;
	margin: auto;
	}
	.resume-list {
    -webkit-columns: 1;
    -moz-columns: 1;
    columns: 1;
	list-style: none;
	}
	.landing-page-header {
    padding-top: 30px;
}

.landing-page-header h1 {
    font-size: 3em;
	margin-bottom: 0;
	font-weight: 800;
}
.landing-page-header h2 {
    font-size: 2em;
    margin-top: 0;
    padding-top: 0;
}
}

@media screen and (min-width: 48em) {
		.js .main-navigation ul, .js .main-navigation ul ul, .js .main-navigation > div > ul {
		display: block;
		margin-right: 40px;
	}	
}

@media all and (max-width: 800px) {
		.resume-container {
		float: none;
		max-width: 100%;
	}

	.resume-skills {
		float: none;
		max-width: 100%;
	}
	
	.resume-mobile {
	display: block;
	}
}

@media all and (max-width: 766px) {
	#logo h1 {
    margin-left: 20px;
	margin-top: 5px;
	}
	.menu-toggle {
		color: white;
	}
	.navigation-top nav {
    float: none;
	}
	.menu-mainnav-container {
    margin-right: 0;
	}
	.main-navigation ul {
    background: black;
	}
	.sub-menu a {
    color: white !important;
	}

}