/*
 * Overrides on top of the Start Bootstrap Grayscale theme (css/styles.css).
 *
 * The masthead and signup-section in styles.css reference background images
 * via relative paths (../assets/img/...) that don't exist in this project —
 * we re-point them to the original GitHub Pages-hosted assets here.
 */

.masthead {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 75%, #000 100%), url("https://albertabeef.github.io/assets/img/bg-masthead.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.signup-section {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 75%, #000 100%), url("https://albertabeef.github.io/assets/img/bg-signup.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

/* Tighten the gap between the "also known as" line and the social icon row.
   Original .contact-section .social has margin-top: 5rem. */
.contact-section .social {
    margin-top: 0.75rem;
}

/* Center icons of varying sizes within each circle (default baseline-align
   makes 1em / 1.5em / 2em icons sit at different vertical positions). */
.contact-section .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Render email-button text as-typed (Grayscale's .btn forces uppercase
   and 80% font-size — bring it back to standard body size). */
.btn[href^="mailto:"] {
    text-transform: lowercase;
    letter-spacing: 0;
    font-size: 1rem;
}

/* Hero logo (M-trace SVG) sitting between the name and the tagline */
.hero-logo {
    width: 160px;
    height: 160px;
    margin: 2rem auto 1rem;
    display: block;
}

/* Expertise cards — white fill with teal border, matches the M_*.svg
   substrate color (#64a19d) used in the icons. */
.expertise-card {
    background: #fff;
    border: 2px solid #64a19d;
    border-radius: 8px;
}