/*
    STRATFORD GLASS & LOCK - site overrides
    Loaded after ../../shared/css/stylesheet.css, so rules here win at equal specificity.

    Contains only what differs from the shared base:
      1. Values that differ between the two sites.
      2. Rules whose background image differs per site (url(../images/...) resolves
         inside stratford/images/, not shared/images/).
      3. Stratford-only sections (#lock, #porch-patio, the contact iframe).
*/


/*NAV*/
header section nav ul li {
    margin-left: 30px;
}


/*PER-SITE IMAGERY*/
#about-us .col12:first-child,
#about-us-2 .col12:first-child {
    background: url(../images/thumbs/agm-building.webp) no-repeat center;
    background-size: cover;
    border-radius: 10px;
    box-shadow: 10px 10px 40px 0px rgba(36,51,138,.2);
}

#home {
    background: url(../images/banners/home-hero.webp) no-repeat center #f9f9f9;
    background-size: cover;
    padding: 250px 0 100px;
}
#about {
    background: url(../images/banners/about-hero.webp) no-repeat center #f9f9f9;
    background-size: cover;
    padding: 250px 0 100px;
}


/*STRATFORD-ONLY SERVICES*/
#lock {
    background: url(../images/banners/lock-hero.webp) no-repeat center #f9f9f9;
    background-size: cover;
    padding: 250px 0 100px;
}
#porch-patio {
    background: url(../images/banners/porch-patio-hero.webp) no-repeat center #f9f9f9;
    background-size: cover;
    padding: 250px 0 100px;
}
/* Matches the shared #windows:after / #doors:after / ... overlay treatment. */
#lock:after,
#porch-patio:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.5);
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
}


/*SERVICES GRID - Stratford markup uses .col12*/
#services .col12 {
    width: calc(50% - 40px);
}


/*CONTACT FORM EMBED*/
#contact-us .col12 iframe {
    width: 100%;
    height: 770px;
    overflow: hidden;
}
#contact-us .col12 .leadform {
    min-width: none !important;
}


/*MEDIA QUERIES*/

@media (max-width: 1400px) {
    header section nav ul li {
        margin-left: 15px;
    }
    header section nav ul li:first-child {
        margin-left: 0;
    }
}


@media (max-width: 1250px) {
    header nav ul {
        display: none;
    }
    header nav .hamburger {
        display: inline-block;
    }
}


@media (max-width: 960px) {
    #contact-us .col12 iframe {
        height: 770px;
    }
}


@media (max-width: 768px) {
    #services .col12 {
        width: 100%;
    }

    #home {
        background: url(../images/banners/home-hero-mobile.webp) no-repeat left bottom #f9f9f9;
        background-size: cover;
        padding: 200px 0 80%;
    }
}