/*
   =========================================================
   ZOOM PHOTO STUDIO - NAVIGATION.CSS vFONT-1.0
   Sticky Desktop Header + Full-Screen Mobile Navigation
   =========================================================
*/

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

.site_header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba( 253, 251, 248, 0.97 );
    border-bottom: 1px solid rgba( 221, 212, 202, 0.6 );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/*
   =========================================================
   HEADER INNER
   =========================================================
*/

.site_header_inner {
    position: relative;
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

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

.site_logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    color: var(--zoom-charcoal);
    line-height: 1;
}

.site_logo_word {
    font-family: var(--zoom-serif);
    font-size: 2.0625rem;
    font-weight: 500;
    letter-spacing: 0.11em;
}

.site_logo_sub {
    margin-top: 5px;
    padding-left: 0.42em;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.42em;
}

/*
   =========================================================
   DESKTOP NAVIGATION
   =========================================================
*/

.site_navigation ul {
    display: flex;
    align-items: center;
    gap: clamp( 15px, 1.5vw, 27px );
    margin: 0;
    padding: 0;
    list-style: none;
}

.site_navigation a {
    position: relative;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

/*
   =========================================================
   DESKTOP LINK UNDERLINE
   =========================================================
*/

.site_navigation a:not(.nav_cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -9px;
    height: 1px;
    background: var(--zoom-gold);
    transition: right 0.2s ease;
}

.site_navigation a:hover::after, .site_navigation a.is_active::after {
    right: 0;
}

/*
   =========================================================
   BOOK CONSULTATION BUTTON
   =========================================================
*/

.site_navigation .nav_cta {
    padding: 13px 15px;
    background: var(--zoom-charcoal);
    color: var(--zoom-white);
    border: 1px solid var(--zoom-charcoal);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.site_navigation .nav_cta:hover {
    background: var(--zoom-gold);
    border-color: var(--zoom-gold);
}

/*
   =========================================================
   MOBILE MENU BUTTON
   =========================================================
*/

.menu_button {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.menu_button span {
    display: block;
    width: 100%;
    height: 1px;
    margin: 6px 0;
    background: var(--zoom-charcoal);
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/*
   =========================================================
   OPEN HAMBURGER - CLOSE ICON
   =========================================================
*/

.menu_button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu_button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu_button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/*
   =========================================================
   TABLET / MOBILE
   =========================================================
*/

@media (max-width: 1120px) {

    /*
       72px becomes the fixed mobile header height.
       The navigation fills everything underneath it.
    */

    .site_header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
}

    .site_header_inner {
        min-height: 72px;
}

    /*
       -----------------------------------------------------
       MOBILE MENU BUTTON
       -----------------------------------------------------
    */

    .menu_button {
        display: block;
        flex: 0 0 42px;
        z-index: 1002;
}

    /*
       -----------------------------------------------------
       FULL-SCREEN MOBILE NAVIGATION
       -----------------------------------------------------
    */

    .site_navigation {
        position: absolute;
        top: 100%;
        left: calc( var(--zoom-pad) * -1 );
        width: 100vw;
        height: calc( 100dvh - 72px );
        padding: 18px var(--zoom-pad) 35px;
        background: var(--zoom-warm-white);
        border-top: 1px solid var(--zoom-line);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
}

    /* Fallback for browsers without dvh */

    @supports not (height: 100dvh) {

        .site_navigation {
            height: calc( 100vh - 72px );
}

    }

    /*
       -----------------------------------------------------
       OPEN MOBILE NAVIGATION
       -----------------------------------------------------
    */

    .site_navigation.is_open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
}

    /*
       -----------------------------------------------------
       MOBILE NAVIGATION LIST
       -----------------------------------------------------
    */

    .site_navigation ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 0;
}

    .site_navigation li {
        width: 100%;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--zoom-line);
}

    /*
       -----------------------------------------------------
       MOBILE LINKS
       -----------------------------------------------------
    */

    .site_navigation a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 52px;
        padding: 14px 0;
        color: var(--zoom-charcoal);
        font-size: 0.7812rem;
        font-weight: 500;
        letter-spacing: 0.075em;
        line-height: 1.3;
        text-transform: uppercase;
        white-space: normal;
}

    /* Remove desktop underline */

    .site_navigation a::after {
        display: none;
}

    /*
       -----------------------------------------------------
       CURRENT PAGE
       -----------------------------------------------------
    */

    .site_navigation a.is_active {
        color: var(--zoom-gold);
}

    /*
       -----------------------------------------------------
       MOBILE CTA
       -----------------------------------------------------
    */

    .site_navigation li:last-child {
        margin-top: 22px;
        border-bottom: 0;
}

    .site_navigation .nav_cta {
        display: flex;
        justify-content: center;
        min-height: 52px;
        margin: 0;
        padding: 14px 20px;
        background: var(--zoom-charcoal);
        color: var(--zoom-white);
        border: 1px solid var(--zoom-charcoal);
        text-align: center;
}

}

/*
   =========================================================
   SMALL MOBILE
   =========================================================
*/

@media (max-width: 600px) {

    .site_header_inner {
        min-height: 72px;
}

    .site_logo_word {
        font-size: 1.8438rem;
}

    .site_logo_sub {
        font-size: 0.5rem;
}

    .site_navigation {
        padding-top: 12px;
        padding-bottom: 25px;
}

    .site_navigation a {
        min-height: 50px;
        padding: 13px 0;
}

}

/*
   =========================================================
   VERY SHORT PHONE SCREENS
   Scrolling is only enabled when actually required.
   =========================================================
*/

@media (max-height: 650px) and (max-width: 1120px) {

    .site_navigation a {
        min-height: 44px;
        padding: 10px 0;
}

    .site_navigation li:last-child {
        margin-top: 14px;
}

}