/* ==========================================================
   COMMERCE — Ernest Bluff Chamber of Commerce
   "Supporting local business since 1968"

   Palette: Professional, corporate — navy blue, warm gold,
   clean white, formal and trustworthy
   Font: Alegreya SC (formal serif for headings),
   Roboto (clean professional body)
   Image: city hall.png
   ========================================================== */

.site-commerce {
    font-family: 'Roboto', 'Alegreya', sans-serif;

    /* Page background */
    --color-bg: #eef1f5;
    --color-body-bg: #ffffff;

    /* Title bar — corporate navy */
    --color-title-bar-bg: #1e2d4a;
    --color-title-bar-text: #d4a937;

    /* Header image */
    --color-header-bg: #2c4066;
    --header-image: url('/images/commerce.png');
    --header-height: 325px;

    /* Navigation — navy with gold accent */
    --color-menu-bg: #2c4066;
    --color-menu-text: #f5f5f5;
    --color-menu-hover: #3a5580;
    --color-menu-hover-text: #d4a937;

    /* Container border */
    --color-container-border: #2c4066;

    /* Footer */
    --color-footer-bg: #1e2d4a;
    --color-footer-text: #b0bec5;
    --color-helper-footer-bg: #111c30;
    --color-helper-footer-text: #7d8fa3;
}


/* Title bar — formal serif with gold text */
.site-commerce .site-title-bar .title {
    font-family: 'Alegreya SC', serif;
    letter-spacing: 0.04em;
    font-weight: 700;
}

.site-commerce .site-title-bar .subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    letter-spacing: 0.05em;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
}


/* Header image */
.site-commerce .header-image {
    background-size: cover;
}


/* Menu — gold underline on hover */
.site-commerce .menu-button {
    font-family: 'Alegreya SC', serif;
    letter-spacing: 0.03em;
    border-left: 3px solid transparent;
}

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

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

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


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


/* Content — professional, corporate readability */
.site-commerce #content {
    line-height: 1.7;
    color: #2d3748;
}

.site-commerce #content h1,
.site-commerce #content h2,
.site-commerce #content h3 {
    font-family: 'Alegreya SC', serif;
    color: #1e2d4a;
}

.site-commerce #content a {
    color: #2c4066;
}

.site-commerce #content a:hover {
    color: #d4a937;
}


/* Footer — professional tone */
.site-commerce #site-footer {
    font-family: 'Roboto', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}