#navbar-container{
    /* 110 matches header.css, which set it so the bar stays above
       full-screen overlays such as the photographer portfolio view. */
    z-index: 110;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width:100%;
    padding-inline: var(--site-margin);
    height: calc(3rem + var(--site-margin));

    display: flex;
    align-items: center;

    font-size: 1rem;
}

.navbar-content{
    width:100%;
    height:100%;

    display:flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    border-radius: 999px;
    margin-top:0;

    transform: translateY(0);

    transition: 
        background-color .48s cubic-bezier(.48,-0.01,.26,1.01),
        padding .48s cubic-bezier(.48,-0.01,.26,1.01),
        margin-top .48s cubic-bezier(.48,-0.01,.26,1.01),
        transform .5s cubic-bezier(.48,-0.01,.26,1.01);
}

.navbar-content.scrolled-1{
    padding: calc(var(--site-margin)*0.75);
}

.navbar-content.scrolled-1 #smp-logo, .navbar-content.scrolled-1 .button-var-1{
    transition: color .48s cubic-bezier(.48,-0.01,.26,1.01);
    color: var(--bg-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}

.navbar-content.scrolled-1 .button-var-2{
    transition: color .48s cubic-bezier(.48,-0.01,.26,1.01), background-color .48s cubic-bezier(.48,-0.01,.26,1.01);
    color: black;
    background-color: var(--bg-color);
}

.navbar-content.scrolled-1.scrolled-1-done .button-var-2{
    transition: none;
    color: black;
}

.navbar-content.scrolled-1 .button-var-2:hover{
    transition: none;
    background-color: var(--bg-color-hover);
}

.navbar-content.scrolled-2{
    background-color: rgb(253 249 238);
    padding: calc(var(--site-margin)*0.75);
    margin-top: var(--site-margin);
    border: solid rgba(226, 232, 240, 0.60) 1px;
}

.navbar-content.scrolled-2.scrolled-2-beyond{
    transform: translateY(-120%);
}

.navbar-content.scrolled-2.scrolled-2-beyond.scroll-up{
    transform: translateY(0) !important;
}

/* Every page but the landing page (nav-bar.js adds the class): a flat bar
   spanning the full width, flush with the top, instead of the floating pill.
   It keeps the container's height, so .site-chrome-offset still matches. */
#navbar-container.navbar-static{
    padding-inline: 0;
}

#navbar-container.navbar-static .navbar-content.scrolled-2{
    box-sizing: border-box;
    background-color: white;   /* placeholder colour for now */
    margin-top: 0;
    padding: 0 var(--site-margin);
    border: none;
    border-bottom: 1px solid rgba(226, 232, 240, 0.60);
    border-radius: 0;
}

#navbar-container div{
    display:flex;
    align-items: center;
    gap: 1rem;
}

#smp-logo{
    color: var(--smp-orange)
}

/* #navbar-container div below sets display:flex on every div in here, so the
   hide has to match that specificity */
#navbar-container .navbar-content.mobile{
    display: none;
}

.button-var-1.nav-item{
    color: black;
    display: flex;
    align-items: center;
}

.button-var-1.nav-item:hover{
    text-decoration: none;
}

.nav-logo-button{
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.nav-logo-button .nav-logo{
    height: 1.75rem;
    width: auto;
}

@media screen and (max-width: 768px){
    #navbar-container .navbar-content.mobile{
        display: flex;
        border-radius: 1rem;
        border: none;
    }

    .navbar-content.scrolled-1 {
        padding: 0;
    }

    /* orange is the resting state, so a failed observer leaves the wordmark
       readable against the page rather than invisible */
    .navbar-content.mobile .nav-logo{
        color: var(--smp-orange);
        transition: color .3s ease;
    }

    .navbar-content.mobile.over-hero .nav-logo{
        color: var(--bg-color);
        /* filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); */
    }

    .scrolled-2 .nav-logo{
        color: var(--smp-orange) !important;
    }

    /* Signed-out call to action (Landing Page Mobile V3.1), toned down so it
       doesn't compete with the hero, but still clearly a button. Over the
       photo it's an outline button: a cream border with only a faint wash
       behind the text, so it doesn't match the round, filled "Shot by" and
       location labels (.hero-location in style.css), which can't be tapped.
       Its 10px corners are the same in both states, so it reads as one
       control that fills in orange once the bar turns solid. */
    .nav-become-button{
        flex: 0 0 auto;
        margin-left: auto;
        padding: 0.375rem 0.75rem;
        border-radius: 0.625rem;
        background-color: transparent;
        box-shadow: inset 0 0 0 1px rgba(76, 51, 0, 0.18);
        color: var(--dark-text-color);
        font-family: 'quicksand-bold';
        font-size: 0.8125rem;
        line-height: 1.3;
        white-space: nowrap;
        text-decoration: none;

        transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
    }

    .navbar-content.mobile.over-hero .nav-become-button{
        background-color: rgba(30, 25, 22, 0.15);   /* just enough for bright photos */
        box-shadow: inset 0 0 0 1.5px rgba(253, 249, 238, 0.9);
        color: var(--bg-color);
    }

    /* Once the bar turns solid it's the orange button again. The bar can
       still be over the hero (over-hero and scrolled-2 together), so this
       comes after and wins. */
    .navbar-content.mobile.scrolled-2 .nav-become-button{
        background-color: var(--smp-orange);
        box-shadow: none;
        color: var(--bg-color);
    }

    .nav-become-button:focus-visible{
        outline: 3px solid var(--smp-orange);
        outline-offset: 2px;
    }

    /* an opaque chip, so unlike the logo it doesn't need an over-hero variant */
    .nav-menu-button{
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;

        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border: none;
        border-radius: 999px;
        background-color: var(--smp-orange);
        color: var(--bg-color);
        cursor: pointer;
    }

    .nav-menu-button svg{
        width: 1.25rem;
        height: 1.25rem;
    }
}


/* Moved from style.css during integration: the navbar has to be
   self-contained now that style.css is landing-page only. */
@media screen and (max-width: 768px){
    #navbar-container{
        width: 100vw;
        width: 100dvw;
    }

    #navbar-container .navbar-content.desktop{
        display: none;
    }
}


/* Phone tab bar along the bottom (#mobile-bottom-nav in layout/default.html).
   Styled here rather than with Tailwind utilities: the precompiled
   tailwindcss.css has no md:hidden or justify-around. 3.625rem matches
   --bottom-nav-h, which the landing hero sizes itself around. */
#mobile-bottom-nav{
    display: none;
}

@media screen and (max-width: 768px){
    #mobile-bottom-nav{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;

        display: flex;
        height: 3.625rem;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: content-box;

        background-color: var(--bg-color);
        border-top: 1px solid rgba(226, 232, 240, 0.6);
    }

    #mobile-bottom-nav .nav-item{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        text-decoration: none;
    }

    #mobile-bottom-nav .nav-menu-icon{
        width: 1.5rem;
        height: 1.5rem;
    }

    #mobile-bottom-nav .nav-item span{
        font-family: 'quicksand-bold';
        font-size: 0.75rem;
        line-height: 1.2;
        color: black;
    }

    /* the current page (layout/default.html marks it .active) */
    #mobile-bottom-nav .nav-item.active .nav-menu-icon{ background-color: var(--smp-orange); }
    #mobile-bottom-nav .nav-item.active span{ color: var(--smp-orange); }
}

/* Reserves the space the fixed navbar occupies, so page content starts
   below it. The landing page omits this class because its hero is meant
   to run underneath a transparent bar. */
.site-chrome-offset{
    padding-top: calc(3rem + var(--site-margin));
}