/* =========================================================
   LogicGraft Shared Page Additions
   File: assets/css/site-pages-additions.css
========================================================= */


/* =========================================================
   Mega Menu Overview Link
========================================================= */

.mega-menu-overview {
    display: inline-flex;
    align-items: center;
    margin-top: 22px;
    color: var(--lg-gold-soft);
    font-size: 12px;
    font-weight: 800;
    transition:
        transform .2s ease,
        color .2s ease;
}

.mega-menu-overview:hover,
.mega-menu-overview:focus-visible {
    color: var(--lg-text);
    transform: translateX(3px);
}


/* =========================================================
   Footer Legal Links
========================================================= */

.footer-legal {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 18px;
}

.footer-legal a {
    color: inherit;
}


/* =========================================================
   Service Hero Visual
   Alignment / Overflow Fix
========================================================= */

.page-hero-visual {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.page-system-card {
    position: relative;
    inset: auto;

    width: calc(100% - 28px);
    min-height: 0;

    margin-left: 28px;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.page-system-flow {
    width: 100%;
}

.page-system-row {
    min-height: 68px;
}


@media (max-width: 1050px) {

    .page-hero-visual {
        min-height: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .page-system-card {
        width: 100%;
        margin-left: 0;
    }

}


@media (max-width: 700px) {

    .page-hero-visual {
        min-height: 0;
    }

    .page-system-card {
        width: 100%;
        margin: 0;
        padding: 20px;
    }

    .page-system-row {
        min-height: 0;
    }

}


/* =========================================================
   Homepage Orbit — Mobile Stack Fix
========================================================= */

/*
 * Keep the homepage text first.
 * The complete LogicGraft ecosystem visual is then displayed
 * directly below the hero copy on tablet/mobile.
 */

@media (max-width: 1080px) {

    .home-hero-grid {
        grid-template-columns: 1fr !important;
    }

    .home-hero-copy {
        width: 100%;
    }

    .home-hero-visual {
        width: 100% !important;

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

        min-height: 0 !important;

        margin-top: 18px;
        padding: 18px 0 4px;

        overflow: visible;
    }

}


@media (max-width: 700px) {

    /*
     * The visual should always be visible below the hero copy.
     * We intentionally remove the reveal transform here so a
     * mobile observer/animation cannot leave it invisible.
     */

    .home-hero-visual,
    .home-hero-visual.reveal,
    .home-hero-visual.reveal.visible {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .home-hero-visual {
        margin-top: 40px;
        padding: 0 0 8px;
    }

    .home-orbit-card {
        width: min(
            340px,
            calc(100vw - 44px)
        ) !important;

        max-width: 100%;

        aspect-ratio: 1 / 1;

        margin: 0 auto;

        flex: 0 0 auto;
    }


    /* Centre brand */

    .home-orbit-center {
        width: 104px !important;
        height: 104px !important;

        gap: 4px;

        border-radius: 24px !important;
    }

    .home-orbit-logo {
        width: 58px !important;
        max-height: 64px;
        object-fit: contain;
    }

    .home-orbit-center small {
        margin-top: 1px;

        font-size: 8px !important;
        line-height: 1.2;

        letter-spacing: .09em;
    }


    /* Outer connected blocks */

    .home-orbit-item {
        min-width: 78px !important;

        padding:
            10px
            10px !important;

        border-radius: 13px !important;

        text-align: left;
    }

    .home-orbit-item b {
        margin-bottom: 4px !important;

        font-size: 11px !important;
        line-height: 1.1;
    }

    .home-orbit-item span {
        font-size: 9px !important;
        line-height: 1.2;

        font-weight: 600;
    }


    /*
     * Keep every card inside the phone viewport.
     * Positions are still radial, but no negative offsets.
     */

    .orbit-one {
        top: 2% !important;
        left: 50% !important;
        right: auto !important;

        transform: translateX(-50%);
    }

    .orbit-two {
        top: 26% !important;
        right: 0 !important;
        left: auto !important;
    }

    .orbit-three {
        right: 7% !important;
        bottom: 7% !important;
        left: auto !important;
    }

    .orbit-four {
        left: 7% !important;
        bottom: 7% !important;
        right: auto !important;
    }

    .orbit-five {
        top: 26% !important;
        left: 0 !important;
        right: auto !important;
    }


    /* Mobile connector lines */

    .connector-one {
        width: 74px !important;

        transform:
            translate(0, -31px)
            rotate(-90deg) !important;
    }

    .connector-two {
        width: 92px !important;

        transform:
            translate(16px, -9px)
            rotate(-27deg) !important;
    }

    .connector-three {
        width: 88px !important;

        transform:
            translate(12px, 20px)
            rotate(38deg) !important;
    }

    .connector-four {
        width: 88px !important;

        transform:
            translate(-8px, 20px)
            rotate(142deg) !important;
    }

    .connector-five {
        width: 92px !important;

        transform:
            translate(-16px, -9px)
            rotate(207deg) !important;
    }

}


/* =========================================================
   Very Small Phones
========================================================= */

@media (max-width: 380px) {

    .home-hero-visual {
        margin-top: 34px;
    }

    .home-orbit-card {
        width: min(
            300px,
            calc(100vw - 32px)
        ) !important;
    }

    .home-orbit-center {
        width: 92px !important;
        height: 92px !important;
    }

    .home-orbit-logo {
        width: 50px !important;
    }

    .home-orbit-center small {
        font-size: 7px !important;
    }

    .home-orbit-item {
        min-width: 70px !important;

        padding:
            8px
            9px !important;
    }

    .home-orbit-item b {
        font-size: 10px !important;
    }

    .home-orbit-item span {
        font-size: 8px !important;
    }

    .connector-one {
        width: 64px !important;
    }

    .connector-two,
    .connector-five {
        width: 80px !important;
    }

    .connector-three,
    .connector-four {
        width: 76px !important;
    }

}


/* =========================================================
   Footer Mobile
========================================================= */

@media (max-width: 760px) {

    .footer-legal {
        gap: 14px;
    }

}