/* =========================================================
   SOFTRENIX TECHNOLOGIES
   REUSABLE COMPONENTS
========================================================= */


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

.site-header {

    position: relative;

    width: 100%;

    z-index: var(--z-header);

    background: var(--color-off-white);

}


.header-inner {

    width: 100%;

    height: 100px;

    padding-inline: var(--container-padding);

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.header-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;

    z-index: -1;
    pointer-events: none;
    opacity: 0.45;

    background-image:
        linear-gradient(
            rgba(7, 19, 47, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(7, 19, 47, 0.045) 1px,
            transparent 1px
        );

    background-size: 80px 80px;

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 100%
    );
}
/* =========================================================
   BRAND
========================================================= */

.site-brand {

    display: inline-flex;

    align-items: center;

    width: 200px;
    height: 130px;

}


.site-brand img {

    width: 100%;

    height: auto;

    object-fit: contain;

}


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

.desktop-navigation {

    display: flex;

    align-items: center;

    gap: 2.75rem;

}


.nav-link {

    position: relative;

    color: var(--color-navy);

    font-size: 0.9rem;

    font-weight: var(--font-weight-medium);

    transition:
        color var(--duration-fast) ease;

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 100%;
    height: 1px;

    background: var(--color-blue);

    transform:
        scaleX(0);

    transform-origin: right;

    transition:
        transform var(--duration-normal) var(--ease-standard);

}


.nav-link:hover {

    color: var(--color-blue);

}


.nav-link:hover::after {

    transform:
        scaleX(1);

    transform-origin: left;

}


/* =========================================================
   BUTTONS
========================================================= */

.button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 1rem;

    min-height: 54px;

    padding: 0.9rem 1.35rem;

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

    font-size: 0.88rem;

    font-weight: var(--font-weight-semibold);

    white-space: nowrap;

    transition:
        transform var(--duration-normal) var(--ease-standard),
        background-color var(--duration-normal) ease,
        color var(--duration-normal) ease,
        border-color var(--duration-normal) ease,
        box-shadow var(--duration-normal) ease;

}


.button:hover {

    transform: translateY(-3px);

}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.button-primary {

    background: var(--color-blue);

    color: var(--color-white);

    box-shadow:
        0 10px 30px rgba(8, 108, 255, 0.22);

}


.button-primary:hover {

    background: var(--color-navy);

    box-shadow:
        0 14px 36px rgba(7, 19, 47, 0.20);

}


/* =========================================================
   SECONDARY BUTTON
========================================================= */

.button-secondary {

    border: 1px solid rgba(7, 19, 47, 0.16);

    background: rgba(255, 255, 255, 0.5);

    color: var(--color-navy);

}


.button-secondary:hover {

    border-color: var(--color-blue);

    color: var(--color-blue);

}


/* =========================================================
   LIGHT BUTTON
========================================================= */

.button-light {

    background: var(--color-white);

    color: var(--color-navy);

}


.button-light:hover {

    background: var(--color-blue);

    color: var(--color-white);

}


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

.header-cta {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.7rem 1rem;

    border: 1px solid rgba(7, 19, 47, 0.15);

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

    color: var(--color-navy);

    font-size: 0.85rem;

    font-weight: var(--font-weight-semibold);

    transition:
        background-color var(--duration-normal) ease,
        color var(--duration-normal) ease,
        border-color var(--duration-normal) ease,
        transform var(--duration-normal) var(--ease-standard);

}


.header-cta:hover {

    background: var(--color-navy);

    border-color: var(--color-navy);

    color: var(--color-white);

    transform: translateY(-2px);

}


.cta-arrow {

    font-size: 1rem;

}

/* =========================================================
   SOFTRENIX TECHNOLOGIES
   MOBILE NAVIGATION
========================================================= */


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

.mobile-menu-button {

    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: none;
    outline: none;

    background: transparent;

    cursor: pointer;

    position: relative;
    z-index: 1002;

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

    flex-direction: column;

    gap: 5px;

    -webkit-tap-highlight-color: transparent;
}


.mobile-menu-button span {

    display: block;

    width: 25px;
    height: 1.5px;

    margin: 0;

    background: var(--color-navy);

    transition:
        transform var(--duration-normal) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard),
        background var(--duration-normal) var(--ease-standard);
}


/* =========================================================
   MOBILE MENU BUTTON — ACTIVE / CLOSE STATE
========================================================= */

.mobile-menu-button.active span:first-child {

    transform: translateY(3.25px) rotate(45deg);
}


.mobile-menu-button.active span:last-child {

    transform: translateY(-3.25px) rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION — DEFAULT
========================================================= */

.mobile-navigation {

    display: none;
}


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

@media (max-width: 900px) {

    /* -----------------------------------------------------
       HIDE DESKTOP NAVIGATION
    ----------------------------------------------------- */

    .desktop-navigation,
    .header-cta {

        display: none;
    }


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

    .mobile-menu-button {

        display: flex;
    }


    /* -----------------------------------------------------
       MOBILE NAVIGATION CONTAINER
    ----------------------------------------------------- */

    .mobile-navigation {

        display: block;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        padding:
            1.5rem
            var(--container-padding)
            2rem;

        background: rgba(255, 255, 255, 0.98);

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

        border-top:
            1px solid rgba(7, 19, 47, 0.08);

        border-bottom:
            1px solid rgba(7, 19, 47, 0.08);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(-15px);

        transition:
            opacity var(--duration-normal) var(--ease-standard),
            transform var(--duration-normal) var(--ease-standard),
            visibility var(--duration-normal);

        z-index: 1001;
    }


    /* -----------------------------------------------------
       MOBILE NAVIGATION — OPEN STATE
    ----------------------------------------------------- */

    .mobile-navigation.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }


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

    .mobile-navigation nav {

        display: flex;

        flex-direction: column;

        width: 100%;
    }


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

    .mobile-navigation a {

        display: flex;

        align-items: center;

        width: 100%;

        min-height: 52px;

        padding: 0.9rem 0;

        border-bottom:
            1px solid rgba(7, 19, 47, 0.08);

        color: var(--color-navy);

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

        font-size: 1.15rem;

        font-weight: var(--font-weight-medium);

        text-decoration: none;

        transition:
            color var(--duration-fast) var(--ease-standard),
            padding-left var(--duration-fast) var(--ease-standard);
    }


    /* -----------------------------------------------------
       REMOVE BORDER FROM LAST LINK
    ----------------------------------------------------- */

    .mobile-navigation a:last-child {

        border-bottom: none;
    }


    /* -----------------------------------------------------
       LINK HOVER
    ----------------------------------------------------- */

    .mobile-navigation a:hover {

        color: var(--color-primary);

        padding-left: 6px;
    }


    /* -----------------------------------------------------
       LINK ACTIVE / FOCUS
    ----------------------------------------------------- */

    .mobile-navigation a:focus-visible {

        outline: 2px solid var(--color-primary);

        outline-offset: 4px;
    }


    /* -----------------------------------------------------
       PREVENT BODY SCROLL WHEN MENU IS OPEN
    ----------------------------------------------------- */

    body.mobile-menu-open {

        overflow: hidden;
    }
}


/* =========================================================
   SMALLER MOBILE DEVICES
========================================================= */

@media (max-width: 600px) {

    .mobile-menu-button {

        width: 42px;
        height: 42px;
    }


    .mobile-menu-button span {

        width: 23px;
    }


    .mobile-navigation {

        padding:
            1.25rem
            var(--container-padding)
            1.75rem;
    }


    .mobile-navigation a {

        min-height: 50px;

        font-size: 1.05rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE DEVICES
========================================================= */

@media (max-width: 380px) {

    .mobile-navigation {

        padding-left: 20px;
        padding-right: 20px;
    }


    .mobile-navigation a {

        font-size: 1rem;
    }
}


/* =========================================================
   DESKTOP — FORCE MOBILE NAVIGATION OFF
========================================================= */

@media (min-width: 901px) {

    .mobile-menu-button,
    .mobile-navigation {

        display: none !important;
    }
}