/* Shared site navigation. Keep this file loaded after page-specific CSS. */
.site-navbar{
    position:sticky;
    top:0;
    z-index:50;
    min-height:112px;
    padding:8px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:32px;
    font-family:Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at 8% 15%, rgba(200,155,60,.11), transparent 26%),
        linear-gradient(100deg, #fffaf2 0%, #fffdf9 58%, #f7f0e6 100%);
    border-bottom:1px solid rgba(93,59,115,.14);
    box-shadow:0 5px 18px rgba(62,36,79,.08);
}

.site-navbar::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:3px;
    background:linear-gradient(90deg, #5d3b73 0%, #c89b3c 50%, #5d3b73 100%);
    opacity:.72;
}

.site-navbar a{
    text-decoration:none!important;
}

.site-navbar .site-nav-brand{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    gap:20px;
    margin:0;
    color:#5d3b73;
}

.site-navbar .site-nav-brand img{
    display:block;
    width:108px;
    height:auto;
    border-radius:50%;
    filter:drop-shadow(0 3px 7px rgba(93,59,115,.13));
}

.site-navbar .site-nav-brand::after{
    content:"Handmade in Derbyshire";
    max-width:100px;
    padding-left:20px;
    border-left:1px solid rgba(200,155,60,.48);
    color:#6d5a45;
    font-family:Georgia,serif;
    font-size:.9rem;
    font-style:italic;
    line-height:1.35;
}

.site-navbar .site-nav-links{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:26px;
    flex-wrap:wrap;
}

.site-navbar .site-nav-links a{
    position:relative;
    margin:0;
    padding:10px 0 8px;
    color:#34362f;
    font-size:1.04rem;
    font-weight:650;
    white-space:nowrap;
    transition:color .18s ease;
}

.site-navbar .site-nav-links a:not(.site-nav-etsy)::after{
    content:"";
    position:absolute;
    left:50%;
    right:50%;
    bottom:2px;
    height:2px;
    border-radius:2px;
    background:#c89b3c;
    transition:left .18s ease, right .18s ease;
}

.site-navbar .site-nav-links a:not(.site-nav-etsy):hover{
    color:#5d3b73;
}

.site-navbar .site-nav-links a:not(.site-nav-etsy):hover::after{
    left:0;
    right:0;
}

.site-navbar .site-nav-links .site-nav-etsy{
    padding:12px 19px;
    border:1px solid #5d3b73;
    border-radius:9px;
    background:linear-gradient(135deg, #5d3b73, #76508c);
    color:#fff;
    font-weight:700;
    box-shadow:0 4px 11px rgba(93,59,115,.18);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.site-navbar .site-nav-links .site-nav-etsy:hover{
    color:#fff;
    transform:translateY(-2px);
    background:linear-gradient(135deg, #6c4782, #86619a);
    box-shadow:0 7px 15px rgba(93,59,115,.24);
}

@media(max-width:1180px){
    .site-navbar{
        padding-left:24px;
        padding-right:24px;
        gap:20px;
    }

    .site-navbar .site-nav-brand::after{
        display:none;
    }

    .site-navbar .site-nav-links{
        gap:18px;
    }

    .site-navbar .site-nav-links a{
        font-size:.96rem;
    }
}

@media(max-width:760px){
    .site-navbar{
        position:relative;
        display:block;
        min-height:0;
        padding:14px 16px 17px;
        text-align:center;
    }

    .site-navbar .site-nav-brand{
        justify-content:center;
        margin-bottom:12px;
    }

    .site-navbar .site-nav-brand img{
        width:112px;
    }

    .site-navbar .site-nav-links{
        justify-content:center;
        gap:8px 14px;
    }

    .site-navbar .site-nav-links a{
        padding:5px 0;
        font-size:.86rem;
    }

    .site-navbar .site-nav-links .site-nav-etsy{
        padding:8px 12px;
    }
}

@media(prefers-reduced-motion:reduce){
    .site-navbar .site-nav-links a,
    .site-navbar .site-nav-links a::after{
        transition:none;
    }
}