/* --- CSS VARIABLES --- */
:root {
    --scots-blue: #1a263e;
    --scots-maroon: #5b202e;
    --scots-red: #a92625;
    --scots-light: #d8d4ce;
    --white: #ffffff;
}

/* --- GLOBAL STYLES --- */
body {
    font-family: 'Lora', serif;
    background-color: var(--scots-light);
    color: var(--scots-blue);
    margin: 0;
    padding: 0;
}

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    color: var(--scots-maroon);
}

h1 {
    margin-top: 0; 
    font-size: 4rem;
}

p {
    font-size: 1.5rem; 
}

/* --- HEADER DESKTOP STYLES --- */
.site-header {
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 20px;
    background-color: var(--scots-blue);
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-bottom: 4px solid var(--scots-red);
    color: var(--scots-light);
}

.header-left {
    position: absolute; 
    left: 20px;
}

.header-left .logo {
    height: 200px; 
    margin-top: 40px; 
    width: auto;
}

.header-center h1 {
    margin: 0;
    color: var(--white);
}

.header-center p {
    margin: 5px 0 0 0;
}

.header-right {
    position: absolute; 
    right: 20px; 
    display: flex; 
    gap: 20px;
}

.header-right a {
    color: var(--scots-light); 
    text-decoration: none; 
    font-size: 2rem; 
    font-weight: bold;
}

/* --- MAIN CONTAINER & MENU TITLE --- */
.menu-title-container {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 20px; 
    margin-bottom: 20px;
}

/* --- WAFFLE MENU GRID --- */
.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
}

.waffle-card {
    background-color: var(--white);
    border: 3px solid var(--scots-red);
    border-radius: 15px;
    padding: 20px;
    width: 250px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    box-sizing: border-box;
}

.waffle-card:hover {
    transform: translateY(-5px);
}

.waffle-icon {
    font-size: 4rem;
    margin: 10px 0;
}

.price {
    font-weight: bold;
    font-size: 1.2rem;
    color: var(--scots-red);
    margin: 10px 0;
}

/* --- BUTTONS --- */
button {
    background-color: var(--scots-red);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-family: 'Fredoka', sans-serif;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
}

button:hover {
    background-color: var(--scots-maroon);
}

/* --- SHOPPING CART & FORM --- */
.cart-section {
    background-color: var(--white);
    padding: 20px;
    border-radius: 15px;
    border: 3px solid var(--scots-maroon);
    box-sizing: border-box;
}

.cart-items {
    list-style-type: none;
    padding: 0;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.total {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: right;
    margin-top: 15px;
}

.order-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.order-form input {
    padding: 10px;
    font-size: 1rem;
    border: 2px solid var(--scots-light);
    border-radius: 8px;
}

#checkout-btn {
    background-color: var(--scots-red);
    font-size: 1.2rem;
    margin-top: 10px;
}

#checkout-btn:hover {
    background-color: var(--scots-maroon);
}

.success-message {
    display: none; 
    background-color: #d1fae5;
    color: #065f46;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
    width: 100%;
    max-width: 300px;
}

/* --- FOOTER LAYOUT --- */
.footer-contacts {
    display: flex; 
    justify-content: space-evenly; 
    flex-wrap: wrap; 
    font-family: 'Lora', serif; 
    max-width: 1000px; 
    margin: 40px auto 0 auto; 
    gap: 40px;
}

/* ========================================================= */
/* --- MOBILE RESPONSIVENESS (Screens 768px and smaller) --- */
/* ========================================================= */
@media (max-width: 768px) {
    /* Stack the header and remove absolute positioning */
    .site-header {
        flex-direction: column;
        padding-top: 30px;
        gap: 15px;
    }
    .header-left, .header-right {
        position: static;
    }
    
    /* Shrink the logo so it doesn't take up the whole screen */
    .header-left .logo {
        height: 225px;
        margin-top: 0;
    }
    
    /* Shrink huge fonts */
    .header-center h1 {
        font-size: 2.8rem;
    }
    .menu-heading, .cart-heading {
        font-size: 2.2rem !important;
    }
    
    /* Shrink the red fern flourishes so the title fits */
    .fern-svg {
        width: 50px;
        height: auto;
    }
    
    /* Allow the waffle cards to shrink slightly more */
    .waffle-card {
        min-width: 100%;
    }
    
    /* Stack the footer contacts vertically */
    .footer-contacts {
        flex-direction: column;
        gap: 20px;
    }
}