/* ==========================================================
   SUPERYACHT GUIDE — SUPERYACHT NAVIGATOR
   Externalised from base.html — Phase 4
   Existing cascade order intentionally preserved.
   ========================================================== */

/* ----------------------------------------------------------
   BLOCK 1 — LANDING PROCESS INFOGRAPHIC
   ---------------------------------------------------------- */

/*
==============================================================
SUPERYACHT NAVIGATOR LANDING PAGE PROCESS INFOGRAPHIC
==============================================================

Only /superyacht-navigator/

Desktop:

Process infographic              Navigator sidebar
Process infographic              Navigator sidebar

Then:

--------------------------------------------------------------
Normal full-width landing-page content
--------------------------------------------------------------

The explicit clear after the infographic ensures that all existing
landing-page content begins below the Navigator sidebar and therefore
uses the normal full available page width.
==============================================================
*/


.syg-navigator-process-landing {
    display: block;

    width: auto;

    margin:
        0
        382px
        2rem
        0;

    padding: 0;
}


.syg-navigator-process-landing-image {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    margin: 0;

    border: 0;
}


/*
This is deliberately placed immediately after the infographic.

It ends the temporary sidebar relationship on the landing page.

Everything following it returns to normal full page width.
*/

.syg-navigator-process-landing-clear {
    display: block;

    clear: both;

    width: 100%;
    height: 0;

    margin: 0;
    padding: 0;
}


/*
Match the reduced sidebar width used by the existing Navigator
layout at medium desktop sizes.
*/

@media (max-width: 1180px) {

    .syg-navigator-process-landing {
        margin-right: 335px;
    }

}


/*
On tablet/mobile the Navigator sidebar already becomes full width
above the page content.

The infographic therefore uses the full width below it.
*/

@media (max-width: 900px) {

    .syg-navigator-process-landing {
        width: 100%;

        margin:
            0
            0
            1.5rem
            0;
    }

}

/* ----------------------------------------------------------
   BLOCK 2 — NAVIGATOR INTERFACE / STAGE NAVIGATION
   ---------------------------------------------------------- */

.syg-navigator-interface {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}


/* ==========================================================
   FULL-WIDTH APPROVED NAVIGATOR TITLE
   ========================================================== */

.syg-navigator-header {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    background: #f8f5ee;
}

.syg-navigator-header-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
}


/* ==========================================================
   ANCHOR STRIP
   ========================================================== */

.syg-navigator-anchor-strip {
    width: 100%;
    min-height: 76px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;

    background:
        linear-gradient(
            90deg,
            #002848 0%,
            #00335b 50%,
            #002848 100%
        );

    border-top: 1px solid rgba(185, 132, 47, 0.55);
    border-bottom: 1px solid rgba(185, 132, 47, 0.55);
}

.syg-navigator-anchor {
    color: #c38b30;
    font-size: 2rem;
    line-height: 1;
}

.syg-navigator-anchor-line {
    width: min(9vw, 125px);
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        #c38b30,
        transparent
    );
}


/* ==========================================================
   FULL-WIDTH TWO-COLUMN NAVIGATOR LAYOUT
   ========================================================== */

.syg-navigator-page-shell {
    width: 100%;
    max-width: none;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        350px;

    gap: 2rem;

    align-items: start;

    padding:
        2.25rem
        clamp(1rem, 3vw, 3.5rem)
        4rem;
}

.syg-navigator-main {
    min-width: 0;
    width: 100%;
}


/*
Make the actual Navigator tool page use the available main column
rather than inheriting a narrow site-wide content width.
*/

.syg-navigator-main > .container,
.syg-navigator-main .container {
    width: 100% !important;
    max-width: none !important;
}


/* ==========================================================
   RIGHT NAVIGATOR SIDEBAR
   ========================================================== */

.syg-navigator-sidebar {
    width: 100%;
    min-width: 0;
}

.syg-navigator-sidebar-inner {
    position: sticky;
    top: 1rem;

    background: #fbfaf7;

    border:
        1px solid
        rgba(10, 47, 83, 0.12);

    box-shadow:
        0 8px 28px
        rgba(0, 35, 67, 0.08);

    padding:
        1.1rem
        1rem
        1rem;
}

.syg-navigator-sidebar-heading {
    display: grid;

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

    align-items: center;

    gap: 0.75rem;

    margin:
        0
        0
        0.85rem;

    color: #062e56;

    text-align: center;
}

.syg-navigator-sidebar-heading strong {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.35rem;
    font-weight: 500;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.syg-navigator-sidebar-heading span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #bf8934
        );
}

.syg-navigator-sidebar-heading span:last-child {
    background:
        linear-gradient(
            90deg,
            #bf8934,
            transparent
        );
}


/* ==========================================================
   VERTICAL STAGES
   ========================================================== */

.syg-navigator-stage-list {
    display: flex;
    flex-direction: column;
}

.syg-navigator-stage {
    position: relative;

    display: grid;

    grid-template-columns:
        32px
        64px
        minmax(0, 1fr)
        20px;

    align-items: center;

    gap: 0.65rem;

    min-height: 96px;

    padding:
        0.55rem
        0.5rem;

    color: #092f56;

    text-decoration: none !important;

    border-bottom:
        1px solid
        rgba(8, 46, 82, 0.13);

    transition:
        background-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease;
}

.syg-navigator-stage:last-child {
    border-bottom: 0;
}

.syg-navigator-stage:hover {
    background: #f4f0e7;
}

.syg-navigator-stage.is-active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #00294d,
            #003b69
        );

    border:
        1px solid
        #bd8730;

    box-shadow:
        0 6px 18px
        rgba(0, 35, 67, 0.16);

    margin:
        0.15rem
        0;

    padding:
        0.65rem
        0.55rem;
}

.syg-navigator-stage-number {
    width: 30px;
    height: 30px;

    display: inline-flex;

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

    border-radius: 50%;

    background: #8a9198;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1rem;
}

.syg-navigator-stage.is-active
.syg-navigator-stage-number {
    background: #bf8730;
}


/* ==========================================================
   SPRITE ICONS
   ========================================================== */

.syg-navigator-stage-icon {
    display: block;

    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    border-radius: 50%;

    background-image:
        url('/media/navigator/navigator-stage-icons.webp');

    background-repeat: no-repeat;

    background-size:
        384px
        64px;
}

.syg-stage-icon-1 {
    background-position: 0 0;
}

.syg-stage-icon-2 {
    background-position: -64px 0;
}

.syg-stage-icon-3 {
    background-position: -128px 0;
}

.syg-stage-icon-4 {
    background-position: -192px 0;
}

.syg-stage-icon-5 {
    background-position: -256px 0;
}

.syg-stage-icon-6 {
    background-position: -320px 0;
}

.syg-navigator-stage:not(.is-active)
.syg-navigator-stage-icon {
    filter: grayscale(1);
    opacity: 0.62;
}


/* ==========================================================
   STAGE COPY
   ========================================================== */

.syg-navigator-stage-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 0.22rem;
}

.syg-navigator-stage-copy strong {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.08rem;
    font-weight: 500;

    line-height: 1.12;
}

.syg-navigator-stage-copy small {
    display: block;

    font-size: 0.8rem;
    line-height: 1.35;

    color: #33475a;
}

.syg-navigator-stage.is-active
.syg-navigator-stage-copy small {
    color:
        rgba(
            255,
            255,
            255,
            0.88
        );
}

.syg-navigator-stage-arrow {
    font-size: 1.8rem;

    color: #71808d;

    line-height: 1;
}

.syg-navigator-stage.is-active
.syg-navigator-stage-arrow {
    color: #c78b30;
}


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

@media (max-width: 1180px) {

    .syg-navigator-page-shell {
        grid-template-columns:
            minmax(0, 1fr)
            310px;

        gap: 1.35rem;

        padding-left: 1rem;
        padding-right: 1rem;
    }

    .syg-navigator-stage {
        grid-template-columns:
            28px
            54px
            minmax(0, 1fr)
            16px;

        gap: 0.5rem;
    }

    .syg-navigator-stage-icon {
        width: 54px;
        height: 54px;

        background-size:
            324px
            54px;
    }

    .syg-stage-icon-1 {
        background-position: 0 0;
    }

    .syg-stage-icon-2 {
        background-position: -54px 0;
    }

    .syg-stage-icon-3 {
        background-position: -108px 0;
    }

    .syg-stage-icon-4 {
        background-position: -162px 0;
    }

    .syg-stage-icon-5 {
        background-position: -216px 0;
    }

    .syg-stage-icon-6 {
        background-position: -270px 0;
    }

}


@media (max-width: 900px) {

    .syg-navigator-page-shell {
        grid-template-columns: 1fr;

        padding-top: 1.25rem;
    }

    .syg-navigator-sidebar {
        order: -1;
    }

    .syg-navigator-sidebar-inner {
        position: static;
    }

    .syg-navigator-stage {
        min-height: 78px;
    }

}


@media (max-width: 600px) {

    .syg-navigator-anchor-strip {
        min-height: 54px;
    }

    .syg-navigator-anchor {
        font-size: 1.55rem;
    }

    .syg-navigator-page-shell {
        padding:
            0.75rem
            0.5rem
            2rem;
    }

    .syg-navigator-sidebar-inner {
        padding:
            0.75rem
            0.55rem;
    }

    .syg-navigator-stage {
        grid-template-columns:
            28px
            46px
            minmax(0, 1fr)
            14px;

        min-height: 72px;
    }

    .syg-navigator-stage-icon {
        width: 46px;
        height: 46px;

        background-size:
            276px
            46px;
    }

    .syg-stage-icon-1 {
        background-position: 0 0;
    }

    .syg-stage-icon-2 {
        background-position: -46px 0;
    }

    .syg-stage-icon-3 {
        background-position: -92px 0;
    }

    .syg-stage-icon-4 {
        background-position: -138px 0;
    }

    .syg-stage-icon-5 {
        background-position: -184px 0;
    }

    .syg-stage-icon-6 {
        background-position: -230px 0;
    }

    .syg-navigator-stage-copy strong {
        font-size: 0.98rem;
    }

    .syg-navigator-stage-copy small {
        font-size: 0.72rem;
    }

}

/* ----------------------------------------------------------
   BLOCK 3 — TEMPORARY SIDEBAR COLUMN OVERRIDES
   Must remain after Block 2 in cascade order.
   ---------------------------------------------------------- */

/*
=============================================================
SUPERYACHT NAVIGATOR — TEMPORARY SIDEBAR COLUMN
=============================================================

DESKTOP STRUCTURE

FULL WIDTH
-------------------------------------------------------------
Navigator banner
Anchor strip


TEMPORARY TWO-COLUMN AREA
-------------------------------------------------------------
Normal page content                  Navigator menu
Normal page content                  Navigator menu
Normal page content                  Navigator menu


AFTER BOTTOM OF NAVIGATOR MENU
-------------------------------------------------------------
Normal page content returns automatically to full available width.
Normal page content
Normal page content


The sidebar therefore does NOT create a permanent second column
for the entire page.
=============================================================
*/


/* ----------------------------------------------------------
   Remove the old permanent CSS Grid relationship.
   ---------------------------------------------------------- */

.syg-navigator-page-shell {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    padding:
        2.25rem
        clamp(1rem, 3vw, 3.5rem)
        4rem !important;
}


/* ----------------------------------------------------------
   Sidebar becomes a temporary right-hand column.

   A float is intentional here.

   Normal document content flows beside it only until the
   bottom of the Navigator menu, then automatically expands
   to use the full page width.
   ---------------------------------------------------------- */

.syg-navigator-sidebar {
    float: right !important;

    width: 350px !important;
    max-width: 32% !important;

    margin:
        0
        0
        2rem
        2rem !important;

    position: relative;

    z-index: 2;
}


/*
The Navigator itself remains visible while scrolling only within
its own natural position. We deliberately remove sticky positioning
because the user wants the sidebar column to end with the height
of the navigation menu.
*/

.syg-navigator-sidebar-inner {
    position: static !important;
    top: auto !important;
}


/* ----------------------------------------------------------
   Main content is no longer a permanent grid column.
   ---------------------------------------------------------- */

.syg-navigator-main {
    display: block !important;

    width: auto !important;
    max-width: none !important;

    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;
}


/*
Bootstrap/container wrappers inside Navigator tools should not
force an artificial narrow fixed column.

They may use the available line width beside the sidebar and then
the full width once content passes below it.
*/

.syg-navigator-main > .container,
.syg-navigator-main > .container-fluid {
    width: auto !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ----------------------------------------------------------
   Prevent wide functional elements from disappearing beneath
   the sidebar.

   Forms, tables, cards and major sections respect the available
   content flow.
   ---------------------------------------------------------- */

.syg-navigator-main img,
.syg-navigator-main table,
.syg-navigator-main form {
    max-width: 100%;
}


/* ----------------------------------------------------------
   Clear the float at the END of the page content so footer and
   following site sections can never wrap around Navigator.
   ---------------------------------------------------------- */

.syg-navigator-page-shell::after {
    content: "";

    display: table;

    clear: both;
}


/* ----------------------------------------------------------
   Medium screens
   ---------------------------------------------------------- */

@media (max-width: 1180px) {

    .syg-navigator-sidebar {
        width: 310px !important;
        max-width: 36% !important;

        margin-left: 1.25rem !important;
    }

}


/* ----------------------------------------------------------
   Tablet / mobile

   Sidebar becomes a normal full-width Navigator section above
   page content. No cramped two-column mobile layout.
   ---------------------------------------------------------- */

@media (max-width: 900px) {

    .syg-navigator-page-shell {
        padding:
            1.25rem
            1rem
            3rem !important;
    }

    .syg-navigator-sidebar {
        float: none !important;

        width: 100% !important;
        max-width: none !important;

        margin:
            0
            0
            1.5rem
            0 !important;
    }

    .syg-navigator-main {
        width: 100% !important;
    }

}


/* ----------------------------------------------------------
   Small mobile
   ---------------------------------------------------------- */

@media (max-width: 600px) {

    .syg-navigator-page-shell {
        padding:
            0.75rem
            0.5rem
            2rem !important;
    }

}