/*
	Website Name: Sal's Auto Parts, LLC, Custom Website
	Designed by: Katherine Leonard, Car-Part.com
	Last updated: 23 Sept 2025
*/

/* Styling for responsive pages */
.container {
	max-width: 95%;
}

@media screen and ( max-width: 1199px ) {
    #hero.home {
        background-attachment: scroll;
        background-position: center center;
        background-size: cover;
    }
	#pgHeader {
		background-size: cover;
		background-position: bottom;
		background-attachment: scroll;
		position: relative;
		z-index: 150;
	}
	#menuBtn {
		margin-right: .5rem;
	}
	#mainMenu ul.nav {
		background-color: #e8ff03;
		/* box-shadow: -3px 3px 3px rgba( 0,0,0,0.7 ); */
		color: #000;
		min-width: 20ch;
	}
	#mainMenu ul.nav li.desktop {
		display: none;
	}
	#mainMenu ul.nav li.mobile {
		display: block;
	}
	#mainMenu ul.nav li:hover {
		background-color: #333;
        color: #fff;
	}
	section.content {
		padding: 0 1rem 0 2rem;
	}
    #searchPane {
        flex-direction: column;
    }
    #homeQuote, #homeSearch {
        width: calc( 100% - 4rem );
    }
}
@media screen and ( max-width: 999px ) {
	#highline.flex-parent-row, section .container.flex-parent-row, #pgFooter .flex-parent-row {
		flex-wrap: wrap;
		flex-direction: column;
	}
	#pgHeader .slogan {
		font-size: 3rem;
	}
    #social {
        color: transparent;
        position: fixed;
            top: calc( 50% );	/* The vertical offset should be the number of icons to be shown times 2; e.g. FB, Instagram, and eBay icons showing should be ( 50% - 6rem ); */
            left: 0;
        z-index: 503;
    }
    ul.social .fb { background-position: 0 0 }
    ul.social .tw { background-position: -1em 0 }
    ul.social .yt { background-position: -2em 0 }
    ul.social .li { background-position: -3em 0 }
    ul.social .gm { background-position: -4em 0 }
    ul.social .eb { background-position: -5em 0 }
    ul.social .yl { background-position: -6em 0 }
    ul.social .em { background-position: -7em 0 }
    ul.social .tx { background-position: -8em 0 }
    ul.social .ph { background-position: -9em 0 }
    ul.social .sk { background-position: -10em 0 }
    ul.social .ig { background-position: -11em 0 }
    ul.social .sms { background-position: -12em 0 }
    ul.social .tt { background-position: -13em 0 }
    ul.social .sc { background-position: -14em 0 }
    ul.social .wa { background-position: -15em 0 }
	#hero.contact {
		background-attachment: scroll;
		background-position: center center;
		height: 30vh;
	}
	#hero.home h1 {
		font-size: 2rem;
	}
	section.home aside.flex-child-col {
		order: 0;
		width: auto;
		max-width: 340px;
		margin: auto;
	}
	section.home main.flex-child-col {
		order: 1;
		width: auto;
		max-width: 100%;
	}
	#about main, #about aside {
		margin: 1rem auto;
		width: auto;
	}
	#about main {
		max-width: 65ch;
	}
	#map {
		height: 50vh;
	}
	#hlAddr, #hlContact, #ftrBiz, #ftrDMV, #ftrContact {
		margin: .5rem auto;
		text-align: center;
	}
	#imgNav {
		padding: 1rem;
	}
	#imgNav .flex-box {
		width: calc( 100vw - 5rem );
		height: 33vw;
		margin: 0 1rem 1rem;
	}
	#imgNav .desktop, #reviewBox { display: none ; }
	#imgNav .mobile { display: flex; }
	#pgFooter .block {
		display: block;
		padding: .25em;
	}
	#pgFooter .divider {
		display: none;
	}
}
@media screen and ( max-width: 899px ) {
    #pgHeader .flex-parent-row {
        flex-flow: column nowrap;
        padding-bottom: 2rem;
    }
    #highline {
        display: none;
    }
    #searchPane {
        display: none;
    }
}