@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Pinyon+Script&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
/*


font-family: "Playfair Display", serif;
font-family: "Lato", sans-serif;

font-family: "Oswald", sans-serif;
font-family: "Open Sans", sans-serif;
*/
* {
box-sizing: border-box;
margin: 0;
}
/*
1. Warm Bakery Classic (Safe + Inviting)
#F5E6D3 – soft cream background
#C89666 – warm tan (primary accent)
#6B3E2E – rich cocoa brown (text / headers)
#2D545E – muted blue (buttons / links)

💡 Feels cozy and homemade, but the blue adds contrast so it doesn’t feel flat.

2. Rustic Sweet & Spice (More personality)
#FFF3E8 – light pastry cream
#D17A3A – caramel orange (great for CTAs)
#8B3A2E – cinnamon brown/red
#3E4A3C – muted olive green

💡 This one subtly hints at both baked goods and hot sauces without being loud.

3. Modern Comfort (Clean but warm)
#FAF7F2 – off-white background
#A67C52 – soft mocha
#5A2E1F – deep espresso
#E07A5F – soft terracotta accent

💡 Feels slightly more modern and polished while still very “homemade.”

4. Sweet Shop Contrast (Most engaging)
#FDF1E7 – warm light background
#B5653B – baked brown
#7A1F1F – deep red (great for hot sauce tie-in)
#3A4660 – muted navy for structure
*/

h1, h2, h3 { font-family: "Playfair Display", serif; }
nav a, p,.badge { font-family: "Lato", sans-serif;  }
header {
	grid-area: header;
    	display: flex;
    	align-items: flex-end;   /* ⬅️ pushes content to bottom */
    	padding: 20px 20px 0 20px;
    	background-image: url("images/HHGTanLogoNew.jpg");
    	background-size: cover;
    	background-position: center;
    	aspect-ratio: 16 / 9; /* adjust to your image */
}
header h1{
	background: rgba(181, 101, 59, 0.85); /* #B5653B */
    color: #FDF1E7;
    border: 2px solid #8B3A2E;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	padding: 20px;
	font-size: 3rem;
	margin-bottom: 0;
}

nav{
	grid-area: nav;
	background: #3A4660; /* muted navy */
    border: 10px dotted #B5653B;
	margin: 0;
	padding: 10px;
}
nav ul{
	list-style-type: none;
	margin: 0;
	padding: 10px 0 20px 0;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
nav ul li{
	background: #7A1F1F; /* deep red */
    border: 2px solid #FDF1E7;
	margin-right: 20px;
	padding: 20px 30px;

	border-radius: 20px;
}
nav ul li a {
	color: #FDF1E7;
	text-decoration: none;
	font-weight: bold;
	font-size: 2em;
}

/*Hover actions for Nav*/
nav li:hover{
	background-color: #B5653B;
	border-color: #F5E6D3;
	border-radius: 50px;
	}
nav li:hover a{
	/*color: #e1b382;*/
	color: #ed8a63;
	}

body {
	font-family: 'Lato', sans-serif;
	display: grid;

	grid-template-columns: 4fr 4fr 4fr;
	
	grid-template-areas:
		"header header header"
		"nav nav nav"
		"main main main";
	background: #FDF1E7;
	margin: 0;
}

main {
	grid-area: main;
	margin: 20px;
	padding: 10px;
  	display: grid;
  	grid-template-columns: 8fr 4fr;
  	grid-template-areas: 
		"section1 section2";
  	gap: 20px; /* nice spacing */

}


main section{
	padding: 20px;	

}


/*Section edits*/
/*Home*/
.sec1{
	grid-area: section1;
	background: #FDF1E7;
    border: 2px solid #3E4A3C;
    display: flex;
    flex-wrap: wrap;           /* allows cards to go to next row */
    justify-content: center;   /* center the cards */
	align-items: flex-start;
    gap: 20px;                 /* space between cards */
}
.card {
    background: #fff;
    border-radius: 10px;
    flex: 1 1 250px;
    max-width: 300px;
    min-width: 250px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
}
.card img {
    width: 100%;
    height: 150px;
    object-fit: cover;         /* keeps images nice */
    border-radius: 8px;
}

.sec2{
	grid-area: section2;
	background: #3A4660; 
    color: #FDF1E7;
	min-width: 0;
	align-self: start;
	display: flex;              /* 👈 add */
    flex-direction: column;     /* stack vertically */
    align-items: center;        /* 👈 centers cards horizontally */
    gap: 10px; 
	justify-content: center;
    padding: 30px 20px;
    border-radius: 15px;
}
.sec2 h2 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 10px;
}

.featured {
    position: relative; /* needed for badge */

    width: 100%;
    max-width: 350px;   /* bigger than normal cards */
    padding: 20px;

    transform: scale(1.05); /* slight pop-out effect */
}

.featured:hover {
    transform: scale(1.08);
    transition: 0.3s ease;
}

.featured {
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

.featured h3, .featured p{
	color: #6B3E2E;
}


.badge {
    position: absolute;
    top: 10px;
    left: 10px;

    background: #7A1F1F;
	color: #fff;
    font-weight: bold;
    font-size: 0.9rem;

    padding: 5px 10px;
    border-radius: 20px;
}

.sec2 .card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 300px;
	height: auto;
}

/*Contacts HTML*/

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.contact-header img{
	width: 100%;
	height: auto;

}

.contact-form, .contact-info {
	flex: 1 1 280px; /* Lowering the base width allows it to shrink better on tiny phones */
    min-width: 0;
    padding: 1.5rem;
    background: #f9f9f9;
    border-radius: 8px;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none;
    border-color: #d4a373; /* Or your brand's primary color */
    box-shadow: 0 0 5px rgba(212, 163, 115, 0.5);
}
.contact-form input, .contact-form textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.contact-form button {
    background-color: #333;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #555;
}




/*Media Queries*/

@media screen and (max-width: 925px) {
main{
		grid-template-columns: 12fr;
		grid-template-areas:
			"section2"
			"section1";
}
nav ul {
        gap: 10px; 
    }
    nav ul li {
        margin-right: 0; 
        flex: 1 1 40%; 
        text-align: center;
        padding: 10px 15px; /* Added slight reduction for mobile tap targets */
    }
    nav ul li a {
        font-size: 1.2rem; /* Scaled down from 2em so it doesn't overflow buttons */
    }
}


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

header h1 {
        font-size: 1.8rem; /* Keeps title from breaking the layout */
    }
    
    .contact-container {
        padding: 1rem;
    }
    
    .card {
        flex: 1 1 100%; /* Makes product cards full-width on tiny screens */
        max-width: none;
    }
}

@media screen and (max-width: 480px) {
	.home-page header h1 {
        display: none; /* This makes the site look much cleaner */
    }
    
    header {
        aspect-ratio: 16 / 9; /* Ensures the logo image stays visible */
        background-position: center;
    }

    /* 2. Stack Navigation buttons vertically */
    /* On tiny screens, side-by-side buttons get too cramped */
    nav ul li {
        flex: 1 1 100%; 
        margin-right: 0;
        margin-bottom: 8px; /* Space between stacked buttons */
        padding: 15px;      /* Better tap target for fingers */
    }

    nav ul li a {
        font-size: 1.1rem;
    }

    /* 3. Adjust main layout padding */
    main {
        margin: 10px;
        padding: 5px;
    }

    /* 4. Make product cards and contact boxes full width */
    .card, .contact-form, .contact-info {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }

    /* 5. Reduce the dotted border size so it doesn't look overwhelming */
    nav {
        border-width: 5px;
    }
}
@media screen and (max-width: 320px) {
    /* 1. Remove forced min-widths */
    .card, .contact-form, .contact-info {
        min-width: 0 !important; 
        width: 100%;
        padding: 10px; /* Reduce padding to save space */
    }

    /* 2. Scale down the navigation even more */
    nav ul li a {
        font-size: 0.9rem;
    }

    /* 3. Reduce site-wide margins */
    main {
        margin: 5px;
    }

    /* 4. Shrink the H1 so it doesn't overlap the logo image */
    header h1 {
        font-size: 1.2rem;
        padding: 10px;
    }
}