/*
 * FINARVIA SITE UI V1
 * Sticky header, responsive navigation,
 * anchor offset and back-to-top.
 */

:root{
    --fv-sticky-header-height:72px;
}


/* ---------------------------------
   ANCHOR OFFSET
--------------------------------- */

html{
    scroll-padding-top:
        calc(
            var(--fv-sticky-header-height)
            + 18px
        );
}

.fv-main [id]{
    scroll-margin-top:
        calc(
            var(--fv-sticky-header-height)
            + 18px
        );
}


/* ---------------------------------
   STICKY HEADER
--------------------------------- */

.fv-header{
    position:sticky;
    top:0;
    z-index:1000;

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

    border-bottom:
        1px solid rgba(16,24,40,.08);

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

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

    backdrop-filter:
        blur(12px);
}

.fv-header.is-scrolled{
    box-shadow:
        0 7px 24px
        rgba(16,24,40,.09);
}

body.admin-bar .fv-header{
    top:32px;
}


.fv-header .fv-header__inner{
    position:relative;

    display:flex;
    align-items:center;

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

    gap:28px;

    padding-top:8px;
    padding-bottom:8px;
}


/* ---------------------------------
   LOGO
--------------------------------- */

.fv-header .fv-logo{
    display:flex;
    align-items:center;

    flex:0 0 auto;

    width:auto;
    max-width:none;
}

.fv-header .fv-logo img{
    display:block;

    width:auto;
    height:42px;

    max-width:190px;

    object-fit:contain;
}


/* ---------------------------------
   DESKTOP NAV
--------------------------------- */

.fv-primary-nav{
    margin-left:auto;
}

.fv-primary-nav__list{
    display:flex;
    align-items:center;

    gap:5px;

    margin:0;
    padding:0;

    list-style:none;
}

.fv-primary-nav__list li{
    margin:0;
    padding:0;
}

.fv-primary-nav__list a{
    display:flex;
    align-items:center;

    min-height:38px;

    padding:8px 12px;

    border-radius:9px;

    color:#344054;

    font-size:14px;
    line-height:1.2;
    font-weight:700;

    text-decoration:none;

    transition:
        background-color .15s ease,
        color .15s ease;
}

.fv-primary-nav__list a:hover{
    color:#075e54;
    background:#eef7f4;
}

.fv-primary-nav__list
.current-menu-item > a,
.fv-primary-nav__list
a[aria-current="page"]{
    color:#075e54;
    background:#e6f3ef;
}


/* ---------------------------------
   BURGER
--------------------------------- */

.fv-menu-toggle{
    display:none;

    width:42px;
    height:42px;

    margin-left:auto;
    padding:9px;

    border:1px solid #d7dfdd;
    border-radius:11px;

    background:#ffffff;

    cursor:pointer;
}

.fv-menu-toggle span{
    display:block;

    width:100%;
    height:2px;

    margin:4px 0;

    border-radius:999px;

    background:#101828;

    transition:
        transform .18s ease,
        opacity .18s ease;
}

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

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

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


/* ---------------------------------
   BACK TO TOP
--------------------------------- */

.fv-back-to-top{
    position:fixed;

    right:24px;
    bottom:
        max(
            24px,
            calc(
                env(safe-area-inset-bottom)
                + 14px
            )
        );

    z-index:900;

    display:flex;
    align-items:center;
    justify-content:center;

    width:48px;
    height:48px;

    padding:0;

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

    border-radius:50%;

    background:#075e54;
    color:#ffffff;

    box-shadow:
        0 8px 24px
        rgba(0,60,52,.23);

    font-size:25px;
    line-height:1;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateY(10px);

    cursor:pointer;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease,
        background-color .18s ease;
}

.fv-back-to-top:hover{
    background:#064e46;
}

.fv-back-to-top.is-visible{
    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translateY(0);
}

.fv-back-to-top:focus-visible{
    outline:
        3px solid
        rgba(244,211,94,.65);

    outline-offset:3px;
}


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

@media(max-width:767px){

    :root{
        --fv-sticky-header-height:60px;
    }

    body.admin-bar .fv-header{
        top:46px;
    }

    .fv-header .fv-header__inner{
        min-height:
            var(--fv-sticky-header-height);

        gap:12px;

        padding-top:6px;
        padding-bottom:6px;
    }

    .fv-header .fv-logo img{
        height:34px;
        max-width:150px;
    }

    .fv-menu-toggle{
        display:block;
    }

    .fv-primary-nav{
        position:absolute;

        top:calc(100% + 1px);
        left:0;
        right:0;

        display:none;

        margin:0;

        padding:8px;

        border:
            1px solid #e2e8e6;

        border-top:0;

        border-radius:
            0 0 15px 15px;

        background:#ffffff;

        box-shadow:
            0 14px 24px
            rgba(16,24,40,.11);
    }

    .fv-primary-nav.is-open{
        display:block;
    }

    .fv-primary-nav__list{
        display:grid;
        gap:3px;
    }

    .fv-primary-nav__list a{
        width:100%;
        min-height:42px;

        padding:10px 12px;

        font-size:14px;
    }

    .fv-back-to-top{
        right:14px;

        width:44px;
        height:44px;

        font-size:22px;
    }
}


@media(
    prefers-reduced-motion:
    reduce
){

    html{
        scroll-behavior:auto;
    }

    .fv-header,
    .fv-menu-toggle span,
    .fv-back-to-top{
        transition:none;
    }
}


/* =========================================================
   FINARVIA STICKY HEADER FINAL FIX V1
   Keep this block after all responsive header rules.
   ========================================================= */

.fv-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* WordPress toolbar when logged in. */
body.admin-bar .fv-header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar .fv-header {
        top: 46px !important;
    }
}


/* =========================================================
   FINARVIA MOBILE FIXED HEADER V1
   Reliable fallback for mobile browsers where sticky header
   can be offset by the visual viewport / browser chrome.
   Desktop remains sticky.
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --fv-mobile-fixed-header-height: 60px;
    }

    .fv-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100%;

        z-index: 1000 !important;
    }

    /*
     * Fixed header is removed from normal document flow,
     * so reserve exactly its height before page content.
     */
    .fv-main {
        padding-top:
            var(--fv-mobile-fixed-header-height);
    }

    /*
     * WordPress toolbar when logged in.
     */
    body.admin-bar .fv-header {
        top: 46px !important;
    }
}
