/* ==========================================================
   SOCIAL — Ernest Bluff Social
   "Connecting our community"

   Palette: Modern social media — blue-purple gradient,
   clean white surfaces, vibrant accent colors
   Font: Inter (modern geometric sans — the quintessential
   social media font)
   No image — vivid gradient header
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.site-social {
    font-family: 'Inter', 'Roboto', sans-serif;

    /* Page background — soft gray */
    --color-bg: #f0f2f5;
    --color-body-bg: #ffffff;

    /* Title bar — bold social blue */
    --color-title-bar-bg: #1d4ed8;
    --color-title-bar-text: #ffffff;

    /* Header — no image, gradient band */
    --color-header-bg: #6366f1;
    --header-image: url('/images/headers/social.png');
    --header-height: 325px;

    /* Navigation — indigo-blue */
    --color-menu-bg: #4338ca;
    --color-menu-text: #ffffff;
    --color-menu-hover: #3730a3;
    --color-menu-hover-text: #c7d2fe;

    /* Container border */
    --color-container-border: #6366f1;

    /* Footer */
    --color-footer-bg: #312e81;
    --color-footer-text: #c7d2fe;
    --color-helper-footer-bg: #1e1b4b;
    --color-helper-footer-text: #818cf8;
}


/* Title bar — clean modern social branding */
.site-social .site-title-bar .title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.site-social .site-title-bar .subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
    opacity: 0.85;
}


/* Header — vibrant blue-to-purple gradient */
.site-social .header-image {
    background-size: cover;
}


/* Menu — clean rounded hover */
.site-social .menu-button {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    transition: background 0.2s, transform 0.15s;
}

.site-social .menu-button:hover {
}


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


/* Content — modern social feed feel */
.site-social #content {
    line-height: 1.6;
    color: #1f2937;
}

.site-social #content h1,
.site-social #content h2,
.site-social #content h3 {
    font-family: 'Inter', sans-serif;
    color: #312e81;
    font-weight: 700;
}

.site-social #content a {
    color: #4f46e5;
}

.site-social #content a:hover {
    color: #6366f1;
}


/* Footer — subtle modern */
.site-social #site-footer {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
}