/*
  Theme Name: Autumn 2025 / Good Parts Marketing
  Text Domain: Autumn 2025 / Good Parts Marketing
  Version: 1.0
  Description: Music Theme
  Author: Patrick Kozub, pckozub@gmail.com
*/

@font-face {
	font-family: "PatuaOne";
	src:
    local("PatuaOne"),
    url("PatuaOne-Regular.ttf");
}
@font-face {
	font-family: "Adler";
	src:
    local("Adler"),
    url("Adler.ttf");
}
@font-face {
	font-family: "Dongle";
	src:
    local("Dongle"),
    url("Dongle-Regular.ttf");
}
@font-face {
  font-family: "Ewert";
  src: url("Ewert-Regular.ttf");
}
@font-face {
  font-family: "Quicksand";
  src: url("Quicksand-VariableFont_wght.ttf");
}


        @font-face {
        font-family: "New Amsterdam";
        src: url(NewAmsterdam-Regular.ttf);
}

        @font-face {
        font-family: "Coustard";
        src: url(Coustard-Regular.ttf);
}


html{
	
	--dark-header-color: #19344D;
	
	
	
  --darkblue: #1f313d;
  --white: #ffffff;
  --lighterblue: #9fd1dd;
  --header-text-color: #000000; /*#1f313d; */
	--heading-text-color: #000000; /*#1f313d; */
  --heading-background-color: #ffffff; /* #1f313d;*/
  --heading-name-color: #ffffff;
  --heading-link-color: #000000;
  --header-menu-unselected-background: transparent;
  --header-menu-unselected-text: #000000;
  --footer-text-color: grey;
  --slideout-menu-unselected-text: var(--darkblue);
	
	--landing-heading-text-size: 6em;
	--landing-heading-line-height: 0.73em;
	--landing-subheading-text-size: 2em;
	--market-title-text-color: #d7d8be;
	color: #3d3d3d;
	
			font-size: 48px;
}
body{
        background-color: #F1E9D0;
        margin: 0;
	font-family: "Dongle", sans-serif;
}

a {
	color: #295581;
}
a :visited {
	color: #8ea49f;
}

   .container {
        display: grid;
        grid-template-rows: 5rem 4rem 130px 130px 1fr auto;
	   grid-template-columns: 1fr 80% 1fr;
    }


    .container-page {
        display: grid;
        grid-template-rows: 5rem 4rem  0px 51px 1fr auto;
	   grid-template-columns: 1fr 75% 1fr;
    }

    .the-content 
{
            grid-row:  5/6;
        grid-column: 2/3;
}

    .header-bar {
        width: inherit;
        display: inline-block;
        background-color: var(--dark-header-color);
		grid-row: 1/2;
		grid-column: 1/4;
        
    }

   .myname2 {
        color: #e5d5a4;
        font-size: 2rem;
        text-shadow: -.075em 0.025em 0px #000000;
        font-family: "New Amsterdam";
        letter-spacing: .5rem;
        margin-left: 1rem;
	   
    }
   .myname {
        color: #F1E9D0;
        font-size: 4rem;
	   margin-top: 1rem;
	    text-shadow: -0.075em 0.025em 0px #000000;
        font-family: "New Amsterdam";
        letter-spacing: .5rem;
        margin-left: auto;
	   margin-right: auto;
	   text-align: center;
	   display:block;
	   
    }

	h4 {
		font-size: 2rem;
		text-align:center;
        font-family: "New Amsterdam";
	}

	h5 {
		font-size: 1.5rem;
		text-align:center;
        font-family: "New Amsterdam";
		padding-bottom: 0;
		margin-bottom: 1rem;
	}
 
h3, h3 > a {
			font-size: 3rem;
		text-align:center;
        font-family: "New Amsterdam";
text-decoration: none;
	color: #3d3d3d;
	
}

    .desktop-nav {
        grid-row:  2/3;
        grid-column: 1/4;
        background-color: var(--dark-header-color);
        text-align: center;
        height: 100%;
        vertical-align: middle;
    }
.desktop-nav > ul {
	padding: 0;
}

    .desktop-nav a {
        color: #ebebde;
        font-family: "Dongle", sans-serif;
        font-size: 1rem;
        text-decoration: none;
        height: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
        vertical-align: middle;
		text-shadow: 1px 1px 2px #445451;

    }
	
.desktop-nav .current_page_item {
	background-color: #F1E9D0;
	color: #222A28;
	border-radius: .25rem;
	
		text-shadow: none;
	
}

 .gradient-bar {
        background-image: url("gradient.png");
        background-repeat: repeat-x;
	 	background-position-y: top;
        width: inherit;
        display: block;
        grid-row:  4/5;
        grid-column: 1/4;
    }
    .space-bar {
        background-color: var(--dark-header-color);
        grid-row:  3/4;
        grid-column: 1/4;
                width: 100%;
        display: block;
        width: inherit;
        height: inherit;
    }

    #truck {
        display: block;
        margin-left: auto;
        margin-right: auto;
		margin-top: auto;
		margin-bottom: auto;
		padding-top: 1em;
        grid-row:  3/5;
        grid-column: 1/4;
		max-width: 80%;
		
    }
    .quote-block {
        text-align: center;
    }
    .quote-text {
        font-family: "Coustard";
        font-style: italic;
        font-size: 1.5rem;
        font-weight: 100;
        letter-spacing: 1rem;
    }
    .quote-attrib {
        font-family: "Coustard";
        font-size: .75rem;
    }

/* Landing styles */
	.landing-sublinks {
		text-align: center;
		font-family: "Dongle", sans-serif;
		color: #bcc2d8;
		font-size: 1rem;
	}
.landing-sublinks a {
	color: #bcc2d8;
}

#landing-header{
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 15% 1fr;
	background-image: url('images/thegoodparts_background.jpg');
  background-size: cover;
  background-position: center top;
  height: 100%;
  position: absolute;
  width: 100%;
  overflow-y: scroll;

}
nav.landing-menu {
  color: white;
			animation-name: fade-in;
	animation-delay: 1.25s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	margin-top: 1rem;
	opacity: 0;
}
nav.landing-menu a {
  color: #464759;
	background-color: #bcc2d8;
  text-decoration: none;
  font-weight: normal;
  margin-top: .5rem;
	display: block;
	width: 25%;
	border-radius: .25em;
	padding: .12rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-family: "Dongle", sans-serif;
	font-size: 1rem;
}


nav.landing-menu a:last-child {
  color: #000000;
	background-color: #ffffff;
  text-decoration: none;
  margin-top: 2rem;
	display: block;
}

nav.landing-menu p{
  text-align: center;
}

.page-wrapper {
  width: 100%;
}

.content-wrapper {
  max-width: 1200px;
	width: 95%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.content-footer{
	background-color: #463B16;
	color: #e5d5a4;
	text-align: center;
	font-size: 1rem;
	grid-row:  6/7;
    grid-column: 1/4;
}

.content-footer a, .content-footer a:visited {
	color: #ffffff;
}

p.chorus-or-refrain {
  padding-left: 1rem;
}

p.bridge {
  padding-left: 2rem;
}

.song-list {
  padding: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.song-list li {
  list-style-type: none;
  margin-bottom: 1rem;
}

#mobile-menu{
  display:none;
}
#mobile-menu-slideout {
    display: none;
}

.post-container {
  margin-bottom: 4em;
}

.wpforms-container-full {
  width: 95% !important;
  margin-left: auto;
  margin-right: auto;
}

p.centered {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

intro.ul > li {
	text-align: left !important;
}

.media {
  max-width: 95%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.video{
	display: block;
	width: 600px;
	margin-left: auto;
	margin-right: auto;
	height: 400px;
}

div.landing-content {
	display:block;
	width: 100%;
	height: 100%;
	grid-column: 1/3;
  	grid-row: 2/3;
}

span.landing-heading{
	font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-style: normal;
	display:block;
	height: calc(2 * 0.73em);
	font-size: 4rem;
	color: #ffffff;
	vertical-align:bottom;
	animation-name: fade-in;
	animation-delay: .5s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
	text-align: center;
}
span.landing-subheading {
	vertical-align:top;
	font-family: "Dongle", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 2rem;
	color: #464759;
	letter-spacing: .9rem;
	line-height: 0.73em;
	width: 100%;
	display: block;
	animation-name: fade-in;
	animation-delay: .75s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	opacity: 0;
	text-transform: uppercase;
	text-align: center;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@media screen and (max-width: 2500px) {
	html {
		font-size: 40px;
	}
}

@media screen and (max-width: 1600px) {
	
	html{
		font-size: 26px;
	}
		
	--landing-heading-text-size: 5em;
	--landing-heading-line-height: 0.6em;
	--landing-subheading-text-size: 4em;
	
}

@media screen and (max-width: 1200px){
	
		html{
  		font-size: 24px;
	}

}

/** mobile */
@media screen and (max-width: 900px) {
	
	--landing-heading-text-size: 5em;
	--landing-heading-line-height: 0.6em;
	--landing-subheading-text-size: 4em;
	
	html{
		font-size: 24px;		
	}
	
		h4 {
		font-size: 1.5rem;
	}
	
			h5 {
		font-size: 1.25rem;
	}
 
h3, h3 > a {
			font-size: 2rem;
	
}


	div.landing-content {
	display:block;
	width: 100%;
	height: 100%;
	grid-column: 2/3;
  	grid-row: 2/3;
}
	
	span.landing-heading {
		letter-spacing: .2rem;
		font-size: 2.5rem;
		text-align: center;
	}
	
	span.landing-subheading {
		font-size: .75rem;
		text-align: center;
		color: #464759;
	}
	
	.landing-sublinks {
		text-align: center;
	}

  #landing-header{
    display: grid;
	  grid-template-columns: 1rem 1fr 1rem;
	  grid-template-rows: 1fr 400px;
    background-size: cover;
    height: 100%;
    position: absolute;
    width: 100%;
  
  }
	
	.myname {
		margin-top: 2rem;
		font-size: 2.5rem;
        width: 100%;
		   text-align:center;
		   display: block;
	   
    }
	
.media {
  max-width: 95%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}


  .song-list li {
    list-style-type: none;
    margin-bottom: 2rem;
  }

  p {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
	
	.video {

		display: block;
	width: 320px;
	margin-left: auto;
	margin-right: auto;
	height: 240px;
	}
	
	   .container {
        display: grid;
        grid-template-rows: 10rem 2rem 130px 130px 1fr auto;
	   grid-template-columns: 1fr 80% 1fr;
    }


    .container-page {
        display: grid;
        grid-template-rows: 10rem 3rem  0px 51px 1fr auto;
	   grid-template-columns: 1fr 95% 1fr;
    }

    .the-content 
{
            grid-row:  5/6;
        grid-column: 2/3;
}

	
	.mobile-nav-bar{
		grid-row:  2/3;
        grid-column: 1/4;
        background-color: var(--dark-header-color);
        text-align: center;
        height: 100%;
        vertical-align: middle;
	}
	
  #mobile-menu{
    height: 2rem;
	  width: 2rem;
    margin-left: auto;
	  margin-right: auto;
    display: block;
    cursor: pointer;
	border-radius: 4px;
	grid-row:  1/2;
    grid-column: 2/4;
	  

  }

  #mobile-menu-close {
    cursor: pointer;
    height: 2em;
    width: 2em;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  #mobile-menu-slideout {
    display: block;
    width: 300px;
    position: fixed;
    background-color: #5b6b61;
    height: 100%;
    top: 0;
    right: -300px;
    overflow-x: hidden;
    transition: 0.5s;
  }

  #mobile-menu-slideout ul{
    padding: 0;
  }
	
	
	
	#mobile-menu-slideout .menu-item {
    color: white;
	  width: 80%;
		margin-left: auto;
		margin-right: auto;
	   display: block;
		text-align: center;
		font-size: 1.5rem;
		margin-top: .5rem;
  }
	
		#mobile-menu-slideout .current-menu-item {
    color: #5b6b61;
	background-color: white;
			border-radius: 4px;
  }
	#mobile-menu-slideout a {
		text-decoration: none;
		color: white;
	}

  .menu {
    padding: 0;
  };

  
  nav.landing-menu .current-menu-item {
    border-radius: .25em;
    background-color: var(--lighterblue);
    color: var(--darkblue);
    border: solid 3px var(--slideout-menu-unselected-text);
  }
	
	.desktop-nav {
		display: none;
	}


}