/* ==========================================================================
   SITEMAP SECTION STYLES (Teal/Charcoal Redesign)
   ========================================================================== */

/* Container */
.sitemap-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 80px 20px;
    background-color: var(--surface-card);
    border-radius: 24px;
    border: 1px solid var(--border-light);
    /* Soft container edge */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    /* Hide the 999px mask extensions */
}

/* Base Node Styling */
.sitemap-node {
    display: inline-flex;
    align-items: center;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    font-family: var(--font-body);
}

/* Homepage Node (Level 1) - Full Width Banner Style */
.sitemap-node.level-1 {
    background-color: var(--primary-orange);
    color: var(--text-light);
    font-weight: 600;
    font-size: 16px;
    padding: 16px 40px;
    border-radius: 16px 16px 16px 16px;
    /* Rounded pill or top-heavy? User said "rounded top corners only" */
    /* Let's do a nice pill for the Root, straightforward */
    min-width: 280px;
    justify-content: center;
    gap: 12px;
    margin-bottom: 60px;
    /* Space for split line */
    box-shadow: 0 4px 12px rgba(169, 86, 53, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sitemap-node.level-1 i {
    font-size: 20px;
}

/* Level 2 Nodes ("Book Scoreboard") - Header Cards */
.sitemap-node.level-2 {
    background-color: var(--ripple-color);
    color: var(--text-light);
    font-weight: 600;
    font-size: 16px;
    padding: 16px 32px;
    border-radius: 12px;
    margin-bottom: 40px;
    border: 1px solid var(--border-orange);
    min-width: 220px;
    justify-content: center;
}

/* Level 3 & 4 Nodes (Children) - Dark Cards */
.sitemap-node.level-3,
.sitemap-node.level-4 {
    background-color: var(--surface-card);
    color: var(--text-light);
    padding: 14px 20px;
    border-radius: 10px;
    width: 260px;
    /* Fixed width for cleanness */
    justify-content: space-between;
    /* Text Left, Icon Right */
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sitemap-node.level-3:hover,
.sitemap-node.level-4:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sitemap-node.level-3 i,
.sitemap-node.level-4 i {
    color: var(--border-light);
    font-size: 18px;
    margin-left: 12px;
}


/* 
   DESKTOP: Hierarchy Layout 
   (Default > 768px)
*/
@media (min-width: 769px) {
    .sitemap-tree {
        display: flex;
        justify-content: center;
        gap: 80px;
        /* Wide gap between columns */
        position: relative;
        width: 100%;
        align-items: flex-start;
    }

    /* ROOT CONNECTOR: Down from Homepage */
    .sitemap-tree::before {
        content: "";
        position: absolute;
        top: -64px;
        /* Matches margin-bottom of L1 */
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 34px;
        /* 64 - 30 for split level */
        background-color: var(--border-light);
    }

    /* Root Dot (Intersection at Split) */
    .sitemap-tree::after {
        content: "";
        position: absolute;
        top: -34px;
        /* At split level */
        left: 50%;
        transform: translateX(-50%);
        width: 10px;
        height: 10px;
        background-color: var(--border-light);
        border-radius: 50%;
    }

    .sitemap-branch {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
        max-width: 400px;
    }

    /* HORIZONTAL SPLIT BAR */
    .sitemap-branch::before {
        content: "";
        position: absolute;
        top: -30px;
        /* Split Level */
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--border-light);
    }

    .sitemap-branch:first-child::before {
        left: 50%;
    }

    .sitemap-branch:last-child::before {
        right: 50%;
    }

    /* VERTICAL LINE TO L2 HEADER */
    .sitemap-branch::after {
        content: "";
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 30px;
        /* Connects split to L2 top */
        background-color: var(--border-light);
    }

    /* CHILD CONTAINER & LEFT RAIL */
    .sitemap-children {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
        position: relative;
        padding-left: 50px;
        margin-top: 0;
    }

    /* VERTICAL RAIL (Left side of column) */
    .sitemap-children::before {
        content: "";
        position: absolute;
        top: -20px;
        bottom: 0;
        left: 0;
        width: 2px;
        background-color: var(--border-light);
        z-index: 0;
    }

    /* Connector L2 to Rail */
    .sitemap-children::after {
        content: "";
        position: absolute;
        top: -20px;
        left: 0;
        right: 50%;
        height: 2px;
        background-color: var(--border-light);
        z-index: 0;
    }

    /* Add Vertical Line from L2 Bottom to the Connector Line */
    .sitemap-node.level-2::after {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 20px;
        background-color: var(--border-light);
        z-index: 0;
    }

    /* Individual Child Connectors (Level 3) */
    .sitemap-node.level-3 {
        position: relative;
        margin-left: 0;
        z-index: 1;
        /* Above rail */
    }

    /* Horizontal Line (Rail to Card) */
    .sitemap-node.level-3::before {
        content: "";
        position: absolute;
        left: -50px;
        /* From Rail (0) to Card (50) */
        top: 50%;
        transform: translateY(-50%);
        /* Perfect Center */
        width: 50px;
        height: 2px;
        background-color: var(--border-light);
    }

    /* The Intersection Dot */
    .sitemap-node.level-3::after {
        content: "";
        position: absolute;
        left: -54px;
        /* Centered on Rail (-50px) - (8px/2 width diff? No, 10px dot -> -55?) */
        /* Rail is at 0 relative to Container. Node is at 50px. */
        /* Pseudo is relative to Node. Left: -50px is Rail center. */
        /* Dot width: 10px. Center: 5px. */
        /* So Left should be -50px - 5px = -55px. */
        /* Let's stick to -54px visually or fix to -55px for math perfection. */
        /* Previous was -54px. Let's try -55px for perfect center on 2px rail (1px center). */
        top: 50%;
        transform: translateY(-50%);
        /* Perfect Center */
        width: 10px;
        height: 10px;
        background-color: var(--border-light);
        border-radius: 50%;
        box-shadow: 0 0 0 4px var(--surface-card);
        /* Knockout */
        z-index: 2;
    }



    /* Using box-shadow on the dot for the mask */
    .sitemap-children>.sitemap-node.level-3:last-child::after {
        box-shadow: 0 0 0 4px var(--surface-card),
            /* Knockout */
            -1px 20px 0 16px var(--surface-card);
        /* Vertical Mask downward */
        /* The second shadow is the mask. 
           X: -1px (fine tune), Y: 20px (down), Blur: 0, Spread: 16px (width). 
           Color: BG. */
        clip-path: polygon(-50% -50%, 150% -50%, 150% 100%, -50% 100%, -50% 500%, 150% 500%);
        /* Complex? No, just the box-shadow is usually enough. */
    }


    /* Fix Rogue Level 4 Node (Direct child of sitemap-children) */
    .sitemap-children>.sitemap-node.level-4 {
        width: 260px;
        z-index: 1;
    }

    .sitemap-children>.sitemap-node.level-4::before {
        left: -50px;
        top: 50%;
        transform: translateY(-50%);
        width: 50px;
        height: 2px;
        background-color: var(--border-light);
    }

    .sitemap-children>.sitemap-node.level-4::after {
        left: -55px;
        /* Aligned with L3 dot */
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        background-color: var(--border-light);
        border-radius: 50%;
        box-shadow: 0 0 0 4px var(--surface-card);
        z-index: 2;
    }

    /* Mask for Rogue L4 */
    .sitemap-children>.sitemap-node.level-4:last-child::after {
        box-shadow: 0 0 0 4px var(--surface-card),
            -1px 20px 0 16px var(--surface-card);
    }

    /* LEVEL 4 (Subgroups) */
    .sitemap-subgroup.level-4 {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-left: 32px;
        position: relative;
    }

    /* L4 Rail */
    .sitemap-subgroup.level-4::before {
        content: "";
        position: absolute;
        top: -24px;
        bottom: 0;
        left: 0;
        width: 2px;
        background-color: var(--border-light);
        z-index: 0;
    }

    /* L4 Horizontal Hook (to L3) */
    .sitemap-subgroup.level-4::after {
        content: "";
        position: absolute;
        top: -24px;
        left: -20px;
        width: 20px;
        height: 2px;
        background-color: var(--border-light);
        display: block;
        z-index: 0;
    }

    .sitemap-node.level-4 {
        margin-left: 0;
        width: 220px;
        font-size: 14px;
        padding: 10px 16px;
        position: relative;
        z-index: 1;
    }

    .sitemap-node.level-4::before {
        content: "";
        position: absolute;
        left: -32px;
        /* From Rail (0) to Card (32) */
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 2px;
        background-color: var(--border-light);
    }

    /* L4 Dot */
    .sitemap-node.level-4::after {
        content: "";
        position: absolute;
        left: -36px;
        /* Rail (0) - 32 - 4 = -36? 
                      Rail is at 0. Node at 32. 
                      Rel to Node: Rail is -32. 
                      Dot 8px. Center 4. -32 - 4 = -36. Correct. */
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background-color: var(--border-light);
        border-radius: 50%;
        box-shadow: 0 0 0 4px var(--surface-card);
        z-index: 2;
    }

    /* Mask L4 Rail at last child */
    .sitemap-subgroup.level-4>.sitemap-node.level-4:last-child::after {
        box-shadow: 0 0 0 4px var(--surface-card),
            -1px 20px 0 16px var(--surface-card);
    }

}

/* 
   MOBILE STYLES 
   (< 768px)
*/
@media (max-width: 768px) {
    .sitemap-container {
        padding: 16px 16px;
        align-items: flex-start;
    }

    .sitemap-tree {
        flex-direction: column;
        gap: 40px;
        width: 100%;
    }

    .sitemap-tree::before,
    .sitemap-tree::after {
        display: none;
    }

    /* No split line */

    .sitemap-branch {
        width: 100%;
        max-width: 100%;
        align-items: flex-start;
    }

    .sitemap-branch::before,
    .sitemap-branch::after {
        display: none;
    }

    .sitemap-node.level-1 {
        align-self: flex-start;
        margin-bottom: 30px;
        min-width: unset;
        width: 100%;
    }

    .sitemap-node.level-2 {
        align-self: flex-start;
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 20px;
    }

    .sitemap-children {
        padding-left: 24px;
        margin-left: 20px;
        gap: 16px;
        position: relative;
        /* Remove border-left, use pseudo for rail to control height/masking */
        border-left: none;
    }

    /* Mobile Rail */
    .sitemap-children::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        background-color: var(--border-light);
        z-index: 0;
    }

    .sitemap-node.level-3 {
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .sitemap-node.level-3::before {
        content: "";
        position: absolute;
        left: -24px;
        /* Reach back to rail (0) from padding (24) */
        top: 50%;
        transform: translateY(-50%);
        /* Fix centering */
        width: 24px;
        height: 2px;
        background-color: var(--border-light);
    }

    .sitemap-node.level-3::after {
        content: "";
        position: absolute;
        left: -29px;
        /* Rail (0) - 24 - 5 = -29? No. 
           Rail at 0. Node at 24.
           Left: -24 reaches rail.
           Dot center needed at 0.
           Dot width 10px. Center 5px.
           So Left: -24 - 5 = -29px. Correct.
        */
        top: 50%;
        width: 10px;
        height: 10px;
        background-color: var(--border-light);
        border-radius: 50%;
        transform: translateY(-50%);
        box-shadow: 0 0 0 4px var(--surface-card);
        /* Stronger knockout */
        z-index: 2;
    }

    /* Masking for Last Item (Level 3) */
    .sitemap-children>.sitemap-node.level-3:last-child::after {
        box-shadow: 0 0 0 4px var(--surface-card),
            -1px 20px 0 16px var(--surface-card);
        /* Mask rail below */
    }

    /* Level 4 Subgroups */
    .sitemap-subgroup.level-4 {
        padding-left: 20px;
        margin-left: 0;
        position: relative;
        border-left: none;
    }

    /* L4 Rail */
    .sitemap-subgroup.level-4::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        background-color: var(--border-light);
        z-index: 0;
    }

    .sitemap-node.level-4 {
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .sitemap-node.level-4::before {
        content: "";
        position: absolute;
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
        /* Fix centering */
        width: 20px;
        height: 2px;
        background-color: var(--border-light);
    }

    .sitemap-node.level-4::after {
        content: "";
        position: absolute;
        left: -24px;
        /* Rail at 0. Node at 20.
           Left -20 reaches rail.
           Dot 8px. Center 4px.
           -20 - 4 = -24px. Correct.
        */
        top: 50%;
        width: 8px;
        height: 8px;
        background-color: var(--border-light);
        border-radius: 50%;
        transform: translateY(-50%);
        box-shadow: 0 0 0 4px var(--surface-card);
        z-index: 2;
    }

    /* Masking for Last Item (Level 4) */
    .sitemap-subgroup.level-4>.sitemap-node.level-4:last-child::after {
        box-shadow: 0 0 0 4px var(--surface-card),
            -1px 20px 0 16px var(--surface-card);
    }
}

/* ==========================================================================
   GO-IKN SITEMAP STYLES
   ========================================================================== */

.go-ikn-sitemap-container {
    width: 100%;
    overflow-x: auto;
    padding: 24px 0 48px;
    background-color: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: 24px;
    margin: 32px 0px;
    padding: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* Subtle elevation */
    overflow: hidden;
}

.go-ikn-sitemap-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 900px;
}

.go-ikn-sitemap-root {
    background: var(--primary-orange);
    color: var(--text-dark);
    padding: 16px 48px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    border: 1px solid var(--primary-orange);
    margin-bottom: 32px;
    z-index: 1;
}

.go-ikn-sitemap-root::after {
    content: '';
    position: absolute;
    bottom: -32px;
    left: 50%;
    width: 1px;
    height: 32px;
    background: var(--border-light);
    z-index: 0;
}

.go-ikn-sitemap-branches {
    display: flex;
    width: 100%;
    position: relative;
}

.go-ikn-sitemap-branches::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--border-light);
}

.go-ikn-sitemap-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    position: relative;
}

.go-ikn-sitemap-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 24px;
    background: var(--border-light);
}

.go-ikn-sitemap-col-header {
    background: var(--ripple-color);
    border-radius: 16px;
    border: 1px solid var(--strike-orange);
    color: var(--primary-orange);
    width: 100%;
    text-align: center;
    padding: 14px 12px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 24px;
}

.go-ikn-sitemap-item-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    padding-left: 20px;
}

.go-ikn-sitemap-item {
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    color: var(--text-light);
    padding: 12px;
    border-radius: 12px;
    font-size: 15px;
    position: relative;
    width: 100%;
    text-align: left;
    line-height: 1.4;
}

.go-ikn-sitemap-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    width: 20px;
    height: 1px;
    background: var(--border-light);
}

.go-ikn-sitemap-item::after {
    content: '';
    position: absolute;
    top: -16px;
    bottom: -16px;
    left: -20px;
    width: 1px;
    background: var(--border-light);
    z-index: 0;
}

.go-ikn-sitemap-item:first-child::after {
    top: -24px;
}

.go-ikn-sitemap-item:last-child::after {
    bottom: 50%;
}

/* Mobile Responsiveness for Go-IKN Sitemap */
@media (max-width: 768px) {
    .go-ikn-sitemap-container {
        padding: 16px;
        overflow-x: hidden;
    }

    .go-ikn-sitemap-tree {
        min-width: 100%;
        align-items: stretch;
    }

    .go-ikn-sitemap-root {
        align-self: center;
        /* keep root centered */
        margin-bottom: 24px;
    }

    .go-ikn-sitemap-root::after {
        display: none;
        /* remove root vertical line */
    }

    .go-ikn-sitemap-branches {
        flex-direction: column;
        gap: 32px;
        /* space between sections */
    }

    .go-ikn-sitemap-branches::before {
        display: none;
        /* remove main horizontal connection line */
    }

    .go-ikn-sitemap-col {
        padding: 0;
        align-items: flex-start;
    }

    .go-ikn-sitemap-col::before {
        display: none;
        /* remove column vertical line */
    }

    .go-ikn-sitemap-col-header {
        margin-top: 0;
        margin-bottom: 16px;
        text-align: left;
        padding: 10px 16px;
    }

    .go-ikn-sitemap-item-list {
        padding-left: 16px;
    }
}