/* ==========================================================
   WILDFINS
   HEADER + NAVIGATION + FOOTER
   Version 0.1
   ========================================================== */


/* ==========================================================
   SITE HEADER
   ========================================================== */

.site-header{

    position:sticky;

    top:0;
    left:0;

    width:100%;

    z-index:var(--z-navigation);

    background:var(--color-background);

    color:#30483b;

}


/* ----------------------------------------------------------
   HEADER INNER
   ---------------------------------------------------------- */

.site-header-inner{

    width:min(var(--content-wide),96vw);

    min-height:var(--header-height);

    margin-inline:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


/* ==========================================================
   BRAND
   ========================================================== */

.site-brand{

    display:flex;

    align-items:center;

    gap:14px;

    color:inherit;

}


.site-brand-mark{

    width:34px;
    height:34px;

    display:block;

    flex:0 0 auto;

}


.site-brand-name{

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

    font-size:.95rem;

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

    letter-spacing:.13em;

    line-height:1;

    text-transform:uppercase;

}


.site-brand-tagline{

    margin-left:4px;

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

    font-size:.70rem;

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

    letter-spacing:.04em;

    opacity:.88;

}


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

.site-nav{

    display:flex;

    align-items:center;

    gap:34px;

}


.site-nav a{

    position:relative;

    display:block;

    padding:8px 0;

    color:#30483b;

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

    font-size:1.40rem;

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

    letter-spacing:.13em;

    line-height:1;

    text-transform:uppercase;

}


.site-nav a::after{

    content:"";

    position:absolute;

    left:0;
    right:100%;

    bottom:0;

    height:1px;

    background:currentColor;

    transition:right var(--transition);

}


.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after{

    right:0;

}


.site-nav a:hover{

    color:inherit;

}


/* ==========================================================
   HEADER ON LIGHT BACKGROUNDS
   ========================================================== */

.site-header--light{

    position:relative;

    color:var(--color-primary);

}


/* ==========================================================
   MOBILE NAVIGATION
   ========================================================== */

.site-nav-toggle{

    display:none;

    width:42px;
    height:42px;

    padding:0;

    border:0;

    background:transparent;

    color:inherit;

    cursor:pointer;

}


.site-nav-toggle span{

    display:block;

    width:22px;
    height:1px;

    margin:5px auto;

    background:currentColor;

}


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

.site-footer{

    padding:64px 0 34px;

    background:var(--color-primary);

    color:rgba(255,255,255,.78);

}


.footer-inner{

    width:min(var(--content-wide),96vw);

    margin-inline:auto;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:48px;

}


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

.footer-brand-line{

    font-size:1.43rem;

}


.footer-brand-claim{

    font-size:.9rem;

}


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

.footer-meta p{

    font-size:.82rem;

}


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

.footer-nav{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:30px;

    flex-wrap:wrap;

}


.footer-nav a{

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

    font-size:1.36rem;

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

    letter-spacing:.12em;

    text-transform:uppercase;

    color:rgba(255,255,255,.72);

}


.footer-nav a:hover{

    color:var(--color-white);

}


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

.footer-meta{

    width:min(var(--content-wide),96vw);

    margin:34px auto 0;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.14);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

}


.footer-meta p{

    margin:0;

    max-width:none;

    font-size:.9rem;

    line-height:1.4;

    color:rgba(255,255,255,.48);

}


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

@media (max-width:900px){

    .site-header-inner{

        min-height:80px;

    }


    .site-nav{

        gap:22px;

    }


    .footer-inner{

        align-items:flex-start;

        flex-direction:column;

        gap:24px;

    }


    .footer-nav{

        justify-content:flex-start;

        gap:24px;

    }

}


@media (max-width:700px){

    .site-header-inner{

        width:92vw;

    }


    .site-brand-name{

        font-size:.88rem;

    }


    .site-brand-tagline{

        display:none;

    }


    .site-nav{

        display:none;

    }


    .site-nav-toggle{

        display:block;

    }


    .footer-inner,
    .footer-meta{

        width:92vw;

    }


    .site-footer{

        padding-top:52px;

    }


    .footer-meta{

        align-items:flex-start;

        flex-direction:column;

        gap:8px;

    }

}


/* ==========================================================
   TEMPORARY DEVELOPMENT MARK
   ========================================================== */

.dev-logo-mark{

    width:34px;
    height:34px;

    border:1px solid currentColor;

    border-radius:50%;

    display:grid;

    place-items:center;

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

    font-size:.65rem;

    line-height:1;

}

/* ==========================================================
   WILDFINS LOGO
========================================================== */

.site-brand-logo{
    display:block;
    width:440px;
    height:auto;
}
/* ==========================================================
   MOBILE NAVIGATION – OPEN STATE
   ========================================================== */

@media (max-width:700px){

    .site-header-inner{
        position:relative;
    }


    .site-nav{
        display:none;

        position:absolute;

        top:100%;
        right:0;

        width:100%;

        padding:24px 0 28px;

        flex-direction:column;
        align-items:flex-end;

        gap:18px;

        background:var(--color-background);
    }


    .site-nav.is-open{
        display:flex;
    }


    .site-nav a{
        padding:6px 0;

        font-size:1.05rem;
    }

}