/*
   Sweet Treat Cupcakes & More - External Style Sheet
   Author: Joshua Prescott
   Date: April 2026
   Description: Stylesheet for Sweet Treat Cupcakes & More website
*/

/* ===== CSS CUSTOM PROPERTIES ==== */
:root {
   --color-pink:        #f4a7b9;
   --color-pink-dark:   #d97fa0;
   --color-cream:       #fff8f0;
   --color-brown:       #5c3317;
   --color-brown-light: #8b5e3c;
   --color-white:       #ffffff;
   --color-border:      #c8846a;
   --font-heading:      Georgia, 'Times New Roman', serif;
   --font-body:         'Palatino Linotype', Palatino, serif;
}

/* ===== BODY ===== */
body {
   background-color: var(--color-cream);
   color: var(--color-brown);
   font-family: var(--font-body);
   font-size: 16px;
   margin: 0;
   padding: 0;
}

/* ==== HEADER ===== */
header {
   background-color: var(--color-pink);
   border-bottom: 4px solid var(--color-border);
   text-align: center;
   padding: 24px 32px;
}

header h1 {
   font-family: var(--font-heading);
   font-size: 2.4rem;
   color: var(--color-brown);
   margin: 0;
}

/* ===== NAV ==== */
nav {
   background-color: var(--color-brown);
   display: flex;
   justify-content: center;
   padding: 0;
}

nav a {
   color: var(--color-white);
   text-decoration: none;
   font-family: var(--font-heading);
   font-size: 1rem;
   padding: 12px 32px;
   border-right: 1px solid var(--color-brown-light);
   display: inline-block;
}

nav a:last-child {
   border-right: none;
}

nav a:hover {
   background-color: var(--color-pink-dark);
   color: var(--color-brown);
}

/* ===== GLOBAL IMG ===== */
img {
   max-width: 100%;
   height: auto;
}

/* ===== MAIN GRID CONTAINER ===== */
.grid-container {
   display: grid;
   grid-template-columns: 1fr 220px;
   grid-template-rows: auto auto;
   gap: 4px;
   background-color: var(--color-border);
   border: 3px solid var(--color-border);
   margin: 24px 32px;
}

/* ===== SIDEBAR ===== */
/* Req: rounded corners + box shadow on the aside element */
.sidebar {
   background-color: var(--color-white);
   padding: 24px 20px;
   grid-column: 2;
   grid-row: 1 / 3;
   border-left: 2px solid var(--color-border);
   border-radius: 12px;
   box-shadow: 4px 4px 12px rgba(92, 51, 23, 0.25);
}

.sidebar h2 {
   font-family: var(--font-heading);
   color: var(--color-brown);
   font-size: 1.3rem;
   margin-top: 0;
   padding-bottom: 8px;
   border-bottom: 2px solid var(--color-pink);
}

.sidebar ul {
   list-style: none;
   padding: 0;
   margin: 0 0 16px 0;
}

.sidebar ul li {
   padding: 10px 0;
   border-bottom: 1px solid var(--color-pink);
   font-size: 0.95rem;
   color: var(--color-brown-light);
}

.sidebar ul li::before {
   content: "- ";
   color: var(--color-pink-dark);
   font-weight: bold;
}

/* ==== FEATURED SECTION ==== */
.featured {
   background-color: var(--color-cream);
   padding: 24px 28px;
   grid-column: 1;
   grid-row: 1;
}

.featured h2 {
   font-family: var(--font-heading);
   color: var(--color-brown);
   font-size: 1.5rem;
   margin-top: 0;
   border-bottom: 2px dashed var(--color-pink);
   padding-bottom: 8px;
}

.featured img {
   width: 100%;
   max-width: 420px;
   height: 200px;
   display: block;
   margin: 12px 0;
   border: 3px solid var(--color-pink);
   border-radius: 8px;
   background-color: var(--color-pink);
}

.featured p {
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--color-brown-light);
   margin-top: 8px;
}

/* ==== CUPCAKE TYPES ==== */
.types {
   background-color: var(--color-white);
   padding: 20px 28px;
   grid-column: 1;
   grid-row: 2;
   border-top: 2px solid var(--color-border);
}

.types h3 {
   font-family: var(--font-heading);
   color: var(--color-brown);
   font-size: 1.2rem;
   margin-top: 0;
   border-bottom: 2px solid var(--color-border);
   padding-bottom: 6px;
}

.types ul {
   list-style: disc;
   padding-left: 24px;
   margin: 0;
}

.types ul li {
   padding: 6px 0;
   font-size: 0.95rem;
   color: var(--color-brown-light);
}

/* ===== INTERIOR PAGE MAIN ===== */
/* Used by about, menu, order pages */
.page-main {
   padding: 40px 48px;
   max-width: 860px;
   margin: 0 auto;
}

.page-main h2 {
   font-family: var(--font-heading);
   color: var(--color-brown);
   font-size: 1.8rem;
   border-bottom: 3px dashed var(--color-pink);
   padding-bottom: 10px;
   margin-top: 0;
}

.page-main h3 {
   font-family: var(--font-heading);
   color: var(--color-brown);
   font-size: 1.3rem;
   margin-top: 28px;
}

.page-main p {
   line-height: 1.7;
   color: var(--color-brown-light);
   font-size: 1rem;
}

/* ==== MENU PAGE: FLAVOR LEGEND === */
.flavor-legend {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
   padding: 18px 32px 32px;
   max-width: 860px;
   margin: 0 auto;
}

.legend-title {
   width: 100%;
   text-align: center;
   font-weight: 700;
   color: var(--color-brown);
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin-bottom: 4px;
}

.flavor-tag {
   background: #fff0f5;
   border: 1px solid #e8b4c8;
   color: #7a2a4a;
   border-radius: 20px;
   padding: 4px 14px;
   font-size: 0.82rem;
   font-style: italic;
}

/* ===== MENU PAGE: CUPCAKE CARDS ==== */
.menu-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 24px;
}

.menu-card {
   background-color: var(--color-white);
   border: 2px solid var(--color-pink);
   border-radius: 12px;
   box-shadow: 2px 4px 10px rgba(92, 51, 23, 0.15);
   padding: 18px 16px;
   text-align: center;
}

.menu-card h3 {
   font-family: var(--font-heading);
   color: var(--color-brown);
   font-size: 1.1rem;
   margin: 0 0 8px 0;
}

.menu-card p {
   font-size: 0.88rem;
   color: var(--color-brown-light);
   margin: 0 0 10px 0;
   line-height: 1.5;
}

.menu-card .price {
   font-weight: bold;
   color: var(--color-pink-dark);
   font-size: 1rem;
}

/* ===== ORDER PAGE: FORM ==== */
.order-form {
   background-color: var(--color-white);
   border: 2px solid var(--color-pink);
   border-radius: 14px;
   box-shadow: 3px 5px 14px rgba(92, 51, 23, 0.15);
   padding: 32px 36px;
   max-width: 600px;
   margin: 0 auto;
}

.order-form label {
   display: block;
   font-family: var(--font-heading);
   font-weight: bold;
   color: var(--color-brown);
   margin-bottom: 4px;
   margin-top: 16px;
   font-size: 0.95rem;
}

.order-form input,
.order-form select,
.order-form textarea {
   width: 100%;
   padding: 8px 12px;
   border: 1px solid var(--color-border);
   border-radius: 6px;
   font-family: var(--font-body);
   font-size: 0.95rem;
   color: var(--color-brown);
   background-color: var(--color-cream);
   box-sizing: border-box;
}

.order-form textarea {
   height: 90px;
   resize: vertical;
}

.order-form .submit-btn {
   display: block;
   margin: 24px auto 0;
   background-color: var(--color-pink-dark);
   color: var(--color-white);
   border: none;
   border-radius: 8px;
   padding: 12px 40px;
   font-family: var(--font-heading);
   font-size: 1rem;
   cursor: pointer;
   letter-spacing: 0.04em;
   transition: background-color 0.2s;
}

.order-form .submit-btn:hover {
   background-color: var(--color-brown);
}

/* ===== ABOUT PAGE ===== */
.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 32px;
   margin-top: 24px;
}

.about-card {
   background-color: var(--color-white);
   border: 2px solid var(--color-pink);
   border-radius: 12px;
   box-shadow: 2px 4px 10px rgba(92, 51, 23, 0.12);
   padding: 20px 22px;
}

.about-card h3 {
   font-family: var(--font-heading);
   color: var(--color-brown);
   margin-top: 0;
   font-size: 1.1rem;
   border-bottom: 1px solid var(--color-pink);
   padding-bottom: 6px;
}

.about-card p {
   font-size: 0.95rem;
   color: var(--color-brown-light);
   line-height: 1.6;
   margin: 0;
}

/* ===== FOOTER ===== */
footer {
   background-color: var(--color-brown);
   color: var(--color-white);
   text-align: center;
   padding: 16px 32px;
   border-top: 4px solid var(--color-border);
}

footer .footer-nav {
   display: flex;
   justify-content: center;
}

footer .footer-nav a {
   color: var(--color-white);
   text-decoration: none;
   font-family: var(--font-heading);
   font-size: 1rem;
   padding: 10px 32px;
   border-right: 1px solid var(--color-brown-light);
}

footer .footer-nav a:last-child {
   border-right: none;
}

footer .footer-nav a:hover {
   color: var(--color-pink);
}

footer p {
   font-size: 0.85rem;
   margin-top: 10px;
   color: var(--color-pink);
}