/* General Body Styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #1a1a1a;
    color: #e0e0e0;
    padding: 40px;
    display: grid;
    place-items: start center;
}

/* --- LANGUAGE SWITCHER --- */
.lang-switcher {
    text-align: center;
    margin-bottom: 20px;
}
.lang-switcher a {
    color: #aaa;
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 5px;
    transition: all 0.3s ease;
}
.lang-switcher a:hover {
    background-color: #2c2c2c;
    color: #fff;
}
.lang-switcher a.active {
    background-color: #444;
    color: #fff;
    font-weight: bold;
}


/* Main Title */
.tree-container h1 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 50px;
}

/* --- Core Tree Structure --- */
[dir="ltr"] .tree ul {
    padding-left: 120px;
    margin: 0;
    list-style-type: none;
    position: relative;

}

[dir="ltr"] .tree li {
    /* A small gap between siblings */
    margin: 20px 0; 
    position: relative;
    list-style-type: none; /* This is the added line to ensure dots are hidden */
}

/* The node displaying the person's name and details */
[dir="ltr"] .tree .node {
    padding: 15px 25px;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 8px;
    display: inline-block;
    min-width: 180px;
    text-align: center;
}

[dir="ltr"] .tree .node-name {
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
}

[dir="ltr"] .tree .node-details {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 4px;
}

/* --- Connector Line Logic --- */

/* Horizontal line from the vertical connector to each child node */
[dir="ltr"] .tree li::before {
    content: '';
    position: absolute;
    top: 30px;
    left: -90px;
    width: 90px;
    height: 5px;
    background-color: #FFFFFF;
/*    transform: translateY(-50%); */
}

/* Vertical line connecting all sibling nodes */
[dir="ltr"] .tree ul::after {
    content: '';
    position: absolute; 
    top: -15px; 
    bottom: 40px;
    left: 30px;
    width: 5px;
    background-color: #FFFFFF;
}


/* --- Line Cleanup --- */

/* The very first level should not have incoming lines */
[dir="ltr"] .tree > ul {
    padding-left: 0;
}
[dir="ltr"] .tree > ul > li::before{
    display: none;
}
[dir="ltr"] .tree > ul::after {
    display: none;
}

/* For the first child in any list, hide the top part of the vertical line */
[dir="ltr"] .tree li:first-child::after {
    top: 50%;
}

/* For the last child in any list, hide the bottom part of the vertical line */
[dir="ltr"] .tree li:last-child::after {
    bottom: 50%;
}

/* For a single child, remove the vertical line entirely */
[dir="ltr"] .tree li:only-child::after {
    display: none;
}


/* Right to left */

/* --- RTL OVERRIDES (Right-to-Left for Arabic) --- * /
[dir="rtl"] .tree ul {
    padding-left: 0;
    padding-right: 120px; /* Indent children to the left * /
}
*/

/* --- Core Tree Structure --- */
[dir="rtl"] .tree ul {
    padding-right: 120px;
    margin: 0;
    right: 0;
    list-style-type: none;
    position: relative;

}

[dir="rtl"] .tree li {
    /* A small gap between siblings */
    margin: 20px 0; 
    position: relative;
    list-style-type: none; /* This is the added line to ensure dots are hidden */
}

/* The node displaying the person's name and details */
[dir="rtl"] .tree .node {
    padding: 15px 25px;
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 8px;
    display: inline-block;
    min-width: 180px;
    text-align: center;
}

[dir="rtl"] .tree .node-name {
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
}

[dir="rtl"] .tree .node-details {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 4px;
}


/* --- Connector Line Logic --- */

/* Horizontal line from the vertical connector to each child node */
[dir="rtl"] .tree li::before {
    content: '';
    position: absolute;
    top: 30px;
    right: -90px;
    width: 90px;
    height: 5px;
    background-color: #FFFFFF;
/*    transform: translateY(-50%); */
}

/* Vertical line connecting all sibling nodes */
[dir="rtl"] .tree ul::after {
    content: '';
    position: absolute; 
    top: -15px; 
    bottom: 40px;
    right: 30px;
    width: 5px;
    background-color: #FFFFFF;
}

/* --- Line Cleanup --- */

/* The very first level should not have incoming lines */
[dir="rtl"] .tree > ul {
    padding-right: 0;
}
[dir="rtl"] .tree > ul > li::before{
    display: none;
}
[dir="rtl"] .tree > ul::after {
    display: none;
}

/* For the first child in any list, hide the top part of the vertical line */
[dir="rtl"] .tree li:first-child::after {
    top: 50%;
}

/* For the last child in any list, hide the bottom part of the vertical line */
[dir="rtl"] .tree li:last-child::after {
    bottom: 50%;
}

/* For a single child, remove the vertical line entirely */
[dir="rtl"] .tree li:only-child::after {
    display: none;
}