/* ==========================================================
   Little Pouch Crew Tasmania
   Version 2.1
========================================================== */

/* ==========================================================
   FONTS
========================================================== */

@font-face{
    font-family:'Handcaps';
    src:url('../fonts/Handcaps.otf') format('opentype');
    font-weight:normal;
    font-style:normal;
}

:root{
    --green:#4E684C;
    --green-dark:#3B5239;
    --green-light:#7E9677;
    --cream:#F8F6F1;
    --white:#FFFFFF;
    --brown:#8A705A;
    --text:#444444;
    --container:1200px;
    --radius:12px;
    --shadow:0 12px 35px rgba(0,0,0,.08);
    --transition:.30s ease;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:'Open Sans',sans-serif;
    background:var(--cream);
    color:var(--text);
    line-height:1.7;
    font-size:17px;
}
img{display:block;max-width:100%;height:auto;}
a{text-decoration:none;color:inherit;transition:var(--transition);}
ul{list-style:none;}

.container{
    width:min(92%,1200px);
    margin:auto;
}

section{padding:90px 0;}

h1,h2,h3,h4{
    font-family:'Cormorant Garamond',serif;
    color:var(--green);
    font-weight:600;
    margin-bottom:20px;
}

h1{font-size:4rem;}
h2{font-size:3rem;}
h3{font-size:2.2rem;}

p{margin-bottom:20px;}

/* HEADER */

#site-header{
    background:rgba(248,246,241,.96);
    position:sticky;
    top:0;
    z-index:1000;
    border-bottom:1px solid #e8e5df;
    backdrop-filter:blur(8px);
}

.site-branding{
    text-align:center;
    padding:26px 0 10px;
}

.logo{
    display:inline-block;
}

.logo-line1{
    display:block;
    font-family:'Handcaps',cursive;
    font-size:3.8rem;
    color:var(--green);
    line-height:1;
}

.logo-line2{
    display:block;
    margin-top:10px;
    font-family:'Open Sans',sans-serif;
    font-size:1rem;
    font-weight:600;
    letter-spacing:8px;
    text-transform:uppercase;
    color:var(--brown);
}

/* NAVIGATION */

nav{
    padding:14px 0 22px;
}

nav ul{
    display:flex;
    justify-content:center;
    gap:42px;
    flex-wrap:wrap;
}

nav a{
    font-family:'Open Sans',sans-serif;
    font-size:.9rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#555;
    position:relative;
}

nav a:hover,
nav a.active{
    color:var(--green);
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:2px;
    background:var(--green);
    transition:var(--transition);
}

nav a:hover::after,
nav a.active::after{
    width:100%;
}

/* HERO */

.hero{
    min-height:calc(100vh - 165px);
    display:flex;
    align-items:center;
}

.hero h1{max-width:800px;}
.hero p{
    max-width:620px;
    font-size:1.2rem;
}

/* BUTTONS */

.btn{
    display:inline-block;
    background:var(--green);
    color:#fff;
    padding:15px 34px;
    border-radius:999px;
    font-weight:600;
}

.btn:hover{
    background:var(--green-dark);
}

/* FOOTER */

footer{
    background:var(--green);
    color:#fff;
    margin-top:80px;
    padding:70px 0 30px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
}

footer h3,footer h4{color:#fff;}

.copyright{
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.2);
    text-align:center;
}

/* RESPONSIVE */

@media(max-width:900px){

    .logo-line1{font-size:3rem;}
    .logo-line2{letter-spacing:5px;}

    nav ul{gap:22px;}

    .footer-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    body{font-size:16px;}

    .logo-line1{font-size:2.4rem;}
    .logo-line2{
        font-size:.85rem;
        letter-spacing:3px;
    }

    nav ul{
        gap:14px;
    }

    nav a{
        font-size:.8rem;
    }

    h1{font-size:2.8rem;}
    h2{font-size:2.2rem;}

    section{
        padding:60px 0;
    }

}