/* ==========================================
   STYLE.CSS
   Global Styles
========================================== */

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{

    background:var(--color-background);

    color:var(--color-text);

    font-family:var(--font-body);

    font-size:var(--font-size-md);

    line-height:var(--lh-body);

    overflow-x:hidden;

    min-width:320px;

}

/* ==========================================
   CONTAINER
========================================== */

.container{

    width:min(
        var(--container-width),
        calc(100% - (var(--container-padding) * 2))
    );

    margin-inline:auto;

}

/* ==========================================
   MAIN
========================================== */

main{

    overflow:hidden;

}

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

section{

    position:relative;

    padding:var(--section-padding) 0;

}

.section-title{

    font-family:var(--font-heading);

    font-size:var(--font-size-5xl);

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

    line-height:1.05;

    margin-bottom:var(--space-5);

    color:#fff;

}

.section-title span{

    color:var(--color-primary);

}

.section-subtitle{

    display:inline-block;

    margin-bottom:var(--space-3);

    color:var(--color-primary);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.8rem;

    font-weight:600;

}

.section-description{

    max-width:700px;

    color:var(--color-text-light);

}

/* ==========================================
   BUTTONS
========================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:14px 28px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    text-decoration:none;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    color:#111;

    background:linear-gradient(
        180deg,
        var(--color-primary-light),
        var(--color-primary)
    );

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

}

.btn-primary:hover{

    color:#111;

    transform:translateY(-2px);

    filter:brightness(1.05);

}

/* ==========================================
   LINKS
========================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition-fast);

}

a:hover{

    color:var(--color-primary);

}

/* ==========================================
   IMAGES
========================================== */

img{

    max-width:100%;

    display:block;

}

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

.text-center{

    text-align:center;

}

.text-primary{

    color:var(--color-primary);

}

.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);}

.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);}
.mb-5{margin-bottom:var(--space-5);}

/* ==========================================
   ACCESSIBILITY: SKIP LINK
========================================== */

.skip-link{

    position:absolute;

    top:-100px;
    left:16px;

    z-index:2000;

    padding:12px 20px;

    background:var(--color-primary);
    color:#111;

    border-radius:var(--radius-sm);

    font-weight:600;

    transition:top var(--transition-fast);

}

.skip-link:focus{

    top:16px;

}