/*==========================================================
    KIYOMI RYOKAN
    LAYOUT
    Navbar • Mobile Menu • Footer • Shared Page Helpers
==========================================================*/


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

.site-header{

    position:fixed;

    top:1.5rem;

    left:0;

    width:100%;

    z-index:1000;

    pointer-events:none;

}

.nav-wrapper{

    position:relative;

    width:min(92%, var(--container-width));

    margin-inline:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:1rem 1.75rem;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.4);

    border-radius:var(--radius-pill);

    box-shadow:var(--shadow-md);

    transition:background .4s var(--ease-soft), box-shadow .4s var(--ease-soft), border-radius .4s var(--ease-soft);

    pointer-events:auto;

}

.site-header.scrolled .nav-wrapper{

    background:rgba(255,255,255,.95);

    box-shadow:var(--shadow-lg);

}


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

.logo a{

    display:flex;

    flex-direction:column;

    gap:.15rem;

    line-height:1;

}

.logo-main{

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

    font-size:2rem;

    letter-spacing:.18em;

    font-weight:700;

    color:var(--color-text);

    transition:color .3s ease;

}

.logo-sub{

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:.28em;

    color:var(--color-text-light);

}


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

.nav-menu{

    display:flex;

    align-items:center;

    gap:2.25rem;

}

.nav-menu a{

    position:relative;

    font-weight:500;

    font-size:.95rem;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:var(--color-primary);

    transition:width .35s var(--ease-soft);

}

.nav-menu a:hover::after,
.nav-menu a.active::after{

    width:100%;

}

.nav-menu a.active{

    color:var(--color-primary);

}

.nav-actions{

    display:flex;

    align-items:center;

    gap:1rem;

}


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

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    background:var(--color-surface);

    box-shadow:var(--shadow-sm);

}

.menu-toggle span{

    width:20px;

    height:2px;

    background:var(--color-text);

    transition:transform .35s var(--ease-soft), opacity .25s ease;

}

.menu-toggle.active span:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}


/*==========================================================
    MOBILE NAV PANEL
==========================================================*/

@media(max-width:992px){

    .nav-menu{

        position:absolute;

        top:calc(100% + 1rem);

        left:0;

        width:100%;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

        padding:1.25rem 2rem;

        background:rgba(255,255,255,.97);

        backdrop-filter:blur(18px);

        border-radius:var(--radius-lg);

        box-shadow:var(--shadow-lg);

        border:1px solid rgba(255,255,255,.5);

        opacity:0;

        visibility:hidden;

        transform:translateY(-12px);

        transition:
            opacity .35s var(--ease-soft),
            transform .35s var(--ease-soft),
            visibility 0s linear .35s;

    }

    .nav-menu.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

        transition:
            opacity .35s var(--ease-soft),
            transform .35s var(--ease-soft),
            visibility 0s linear 0s;

    }

    .nav-menu li{

        width:100%;

        border-bottom:1px solid var(--color-border);

    }

    .nav-menu li:last-child{

        border-bottom:none;

    }

    .nav-menu a{

        display:block;

        padding:1rem 0;

        font-size:1.05rem;

    }

    .nav-menu a::after{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}


/*==========================================================
    PAGE HELPERS
==========================================================*/

main{

    min-height:100vh;

}

.page-header{

    padding-top:12rem;

    padding-bottom:5rem;

    text-align:center;

}

.page-content{

    padding-bottom:var(--space-8);

}

.container-sm{

    width:min(90%,800px);

    margin-inline:auto;

}

.container-lg{

    width:min(94%,1440px);

    margin-inline:auto;

}

.container-fluid{

    width:100%;

}

.two-column{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:4rem;

    align-items:center;

}

.three-column{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

}

.four-column{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:2rem;

}


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

.site-footer{

    position:relative;

    background:var(--color-ink);

    color:#fff;

    padding:6rem 0 2rem;

    margin-top:8rem;

    overflow:hidden;

}

.site-footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    background:linear-gradient(90deg, transparent, var(--color-accent), transparent);

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:3rem;

}

.footer-title{

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

    font-size:2rem;

    color:#fff;

    margin-bottom:1rem;

}

.footer-heading{

    margin-bottom:1.2rem;

    text-transform:uppercase;

    letter-spacing:.12em;

    font-size:.85rem;

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

}

.footer-links{

    display:flex;

    flex-direction:column;

    gap:.85rem;

}

.footer-links a{

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

    transition:color .3s ease, transform .3s ease;

    display:inline-block;

}

.footer-links a:hover{

    color:var(--color-accent);

    transform:translateX(4px);

}

.footer-bottom{

    margin-top:4rem;

    padding-top:2rem;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

}

.footer-bottom p{

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

}


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

@media(max-width:1100px){

    .nav-menu{

        gap:1.5rem;

    }

}

@media(max-width:992px){

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

    .two-column{

        grid-template-columns:1fr;

    }

    .three-column{

        grid-template-columns:1fr 1fr;

    }

    .four-column{

        grid-template-columns:1fr 1fr;

    }
}

@media(max-width:768px){

    .site-header{

        top:1rem;

    }

    .nav-wrapper{

        padding:1rem 1.25rem;

    }

    .logo-main{

        font-size:1.6rem;

    }

    .page-header{

        padding-top:10rem;

    }

    .footer-grid{

        grid-template-columns:1fr;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

    .three-column,

    .four-column{

        grid-template-columns:1fr;

    }

}