/* ==========================================================
   WEBDESIGN — Bluff Digital Solutions
   "Building the web for Ernest Bluff"

   Palette: Modern tech agency — vibrant teal/cyan gradients,
   dark surfaces, clean white, electric blue accents
   Font: Space Grotesk (contemporary geometric sans),
   system fallbacks
   No image — sleek gradient header
   ========================================================== */

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

.site-webdesign {
    font-family: 'Space Grotesk', 'Roboto', sans-serif;

    /* Page background — cool light gray */
    --color-bg: #f1f5f9;
    --color-body-bg: #ffffff;

    /* Title bar — dark tech surface */
    --color-title-bar-bg: #0f172a;
    --color-title-bar-text: #38bdf8;

    /* Header — no image, vibrant gradient */
    --color-header-bg: #0ea5e9;
    --header-image: url('/images/headers/webdesign.png');
    --header-height: 325px;

    /* Navigation — dark modern */
    --color-menu-bg: #1e293b;
    --color-menu-text: #e2e8f0;
    --color-menu-hover: #334155;
    --color-menu-hover-text: #38bdf8;

    /* Container border */
    --color-container-border: #0ea5e9;

    /* Footer */
    --color-footer-bg: #0f172a;
    --color-footer-text: #94a3b8;
    --color-helper-footer-bg: #020617;
    --color-helper-footer-text: #64748b;
}


/* Title bar — sleek tech branding */
.site-webdesign .site-title-bar .title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.site-webdesign .site-title-bar .subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 0.8;
}


/* Header — teal-to-blue tech gradient */
.site-webdesign .header-image {
    background-size: cover;
}


/* Menu — modern tech nav */
.site-webdesign .menu-button {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: background 0.2s, color 0.2s;
}

.site-webdesign .menu-button:hover {
    box-shadow: inset 0 -3px 0 #0ea5e9;
}


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


/* Content — clean tech readability */
.site-webdesign #content {
    line-height: 1.7;
    color: #1e293b;
}

.site-webdesign #content h1,
.site-webdesign #content h2,
.site-webdesign #content h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: #0f172a;
    font-weight: 700;
}

.site-webdesign #content a {
    color: #0ea5e9;
}

.site-webdesign #content a:hover {
    color: #0284c7;
}


/* Container — subtle modern shadow on desktop */
@media (min-width: 768px) {
    .site-webdesign #container {
        box-shadow: 0 4px 24px rgba(14, 165, 233, 0.1);
    }
}


/* Footer — modern tech */
.site-webdesign #site-footer {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}