/* ==========================================================
   BASE
========================================================== */

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-family);
    font-size:var(--font-size-base);
    font-weight:var(--font-weight-normal);
    line-height:var(--line-height);
    background:var(--background);
    color:var(--text);

    /* Fixed Header Offset */
    padding-top:90px;
}

.container{
    width:min(calc(100% - (var(--container-padding) * 2)), var(--container));
    margin-inline:auto;
}

main{
    min-height:70vh;
}

section{
    padding:100px 0;

    /* One Page Anchor Offset */
    scroll-margin-top:90px;
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--text);
    font-weight:var(--font-weight-bold);
    line-height:1.2;
    margin-bottom:var(--space-lg);
}

h1{
    font-size:var(--font-size-4xl);
}

h2{
    font-size:var(--font-size-3xl);
}

h3{
    font-size:var(--font-size-2xl);
}

h4{
    font-size:var(--font-size-xl);
}

h5{
    font-size:var(--font-size-lg);
}

h6{
    font-size:var(--font-size-base);
}

p{
    color:var(--gray);
    margin-bottom:var(--space-md);
}

small{
    font-size:var(--font-size-sm);
}

/* ==========================================================
   BUTTON
========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;

    padding:16px 34px;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);
}

.btn--primary{

    background:var(--primary);
    color:var(--white);

}

.btn--primary:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}

.btn--outline{

    border:2px solid rgba(255,255,255,.7);

    background:transparent;

    color:var(--white);

}

.btn--outline:hover{

    background:var(--white);

    color:var(--text);

}

/* ==========================================================
   CARD
========================================================== */

.card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    padding:var(--space-xl);

}

/* ==========================================================
   FORM
========================================================== */

label{

    display:block;

    margin-bottom:.5rem;

    font-weight:var(--font-weight-medium);

}

input,
textarea,
select{

    width:100%;

    padding:14px 18px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    background:var(--white);

    transition:var(--transition);

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(85,107,47,.15);

}

textarea{

    min-height:160px;

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{
    text-align:center;
}

.text-left{
    text-align:left;
}

.text-right{
    text-align:right;
}

.w-100{
    width:100%;
}

.d-flex{
    display:flex;
}

.align-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

.justify-center{
    justify-content:center;
}

.gap-sm{
    gap:var(--space-sm);
}

.gap-md{
    gap:var(--space-md);
}

.gap-lg{
    gap:var(--space-lg);
}

/* ==========================================================
   SCROLL REVEAL
========================================================== */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

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

@media (max-width:992px){

    body{

        padding-top:90px;

    }

    section{

        scroll-margin-top:90px;

    }

}