/*
 * STP Nuke Theme
 * Version 0.8.0
 *
 * Main Stylesheet
 */

@import url("variables.css");
@import url("components.css");

/* =====================================================
   GLOBAL
===================================================== */

html{
    box-sizing:border-box;
}

*,
*:before,
*:after{
    box-sizing:inherit;
}

body{
    margin:0;
    font-family:var(--font-family);
    font-size:var(--font-size-sm);
    line-height:var(--line-height);
    color:var(--color-text);
    background:var(--color-background);
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    color:var(--color-primary);
    text-decoration:none;
    transition:var(--transition-fast);
}

a:hover{
    color:var(--color-secondary);
}

.container{
    width:min(var(--container-width),92%);
    margin:0 auto;
}

/* =====================================================
   HERO
===================================================== */

.hero{
    background:linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-secondary)
    );
    color:#fff;
    text-align:center;
    padding:6rem 0;
}

.hero h1{
    margin:0;
    font-size:var(--font-size-hero);
}

.hero p{
    margin:1.5rem auto 0;
    max-width:700px;
    font-size:var(--font-size-md);
}

/* =====================================================
   CONTENT SECTIONS
===================================================== */

.intro,
.services,
.cta,
.contact{
    padding:var(--spacing-lg) 0;
}

.services{
    background:var(--color-surface);
}

.contact{
    background:#eef5fb;
}

/* =====================================================
   GRIDS
===================================================== */

.service-grid,
.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:2rem;
}

/* =====================================================
   CONTACT
===================================================== */

.contact-header{
    text-align:center;
    margin-bottom:3rem;
}

.contact-header h2{
    color:var(--color-primary);
}

.contact-button{
    text-align:center;
    margin-top:3rem;
}

/* =====================================================
   FOOTER
===================================================== */

.site-footer{
    background:var(--color-primary);
    color:#fff;
}

.site-footer .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.5rem 0;
}

.site-footer a{
    color:#fff;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:768px){

    .site-header .container,
    .site-footer .container{
        flex-direction:column;
        text-align:center;
        gap:1rem;
    }

    .primary-navigation ul{
        flex-direction:column;
        gap:1rem;
    }

    .hero{
        padding:4rem 0;
    }

    .hero h1{
        font-size:2.5rem;
    }

    .hero p{
        font-size:1.1rem;
    }

    .service-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .button-primary,
    .button-secondary{
        width:100%;
        max-width:320px;
        text-align:center;
    }

}