/* ==========================================================
   DINER — Mae's Diner
   "Best coffee in the Bluff"

   Palette: Warm retro 1950s — cream, cherry red, warm
   brown coffee tones, chrome silver accents
   Font: Pacifico (retro script for titles),
   Alegreya (warm body text)
   Image: diner1.png
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

.site-diner {
    font-family: 'Alegreya', Times, serif;

    /* Page background — warm cream */
    --color-bg: #fdf6ec;
    --color-body-bg: #fffdf8;

    /* Title bar — cherry red diner strip */
    --color-title-bar-bg: #b91c1c;
    --color-title-bar-text: #fef3c7;

    /* Header image */
    --color-header-bg: #92400e;
    --header-image: url('/images/headers/diner.png');
    --header-height: 325px;

    /* Navigation — warm brown with cream text */
    --color-menu-bg: #78350f;
    --color-menu-text: #fef3c7;
    --color-menu-hover: #92400e;
    --color-menu-hover-text: #ffffff;

    /* Container border */
    --color-container-border: #b91c1c;

    /* Footer */
    --color-footer-bg: #78350f;
    --color-footer-text: #fde68a;
    --color-helper-footer-bg: #451a03;
    --color-helper-footer-text: #d97706;
}


/* Title bar — retro script diner name */
.site-diner .site-title-bar .title {
    font-family: 'Pacifico', cursive;
    font-size: clamp(1.4rem, 5vw, 2.6rem);
    letter-spacing: 0.02em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

.site-diner .site-title-bar .subtitle {
    font-family: 'Alegreya', serif;
    font-style: italic;
    letter-spacing: 0.03em;
}


/* Header image — warm tint overlay */
.site-diner .header-image {
    background-size: cover;
}


/* Menu — warm retro buttons */
.site-diner .menu-button {
    font-family: 'Alegreya SC', serif;
    letter-spacing: 0.04em;
    border-left: 3px solid transparent;
}

.site-diner .menu-button:hover {
    border-left: 3px solid #fde68a;
}

@media (min-width: 768px) {
    .site-diner .menu-button {
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .site-diner .menu-button:hover {
        border-left: none;
        border-bottom: 3px solid #fde68a;
    }
}


/* Menu — Desktop alignment fix (3 nav items) */
@media (min-width: 768px) {
    .site-diner .menu-button {
        flex: 0 1 auto;
        max-width: 240px;
        min-width: 140px;
        padding: 0.25em 1.5em;
    }
}


/* Content — warm inviting tone */
.site-diner #content {
    line-height: 1.7;
    color: #3d1e00;
}

.site-diner #content h1,
.site-diner #content h2,
.site-diner #content h3 {
    font-family: 'Pacifico', cursive;
    color: #b91c1c;
    font-weight: normal;
}


/* Footer */
.site-diner #site-footer {
    font-family: 'Alegreya SC', serif;
    letter-spacing: 0.02em;
}