/* Style for the div inside the foreignObject (which is your node) */
#family-tree .node {
    justify-content: center;
    border: 2px solid #ccc;  /* Border around the node */
    border-radius: 8px;      /* Slightly rounded corners */
    padding: 2px;
    background-color: #fff;  /* Background color for better contrast */
    box-shadow: 2px 2px 5px #0000001a;  /* Soft shadow for depth */
    max-height: 180px;
}

/* Ensure text inside node is centered and fits the space */
#family-tree .nodeText {
    text-align: center;
    display: none;
}

#family-tree .nodeBodyText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1rem;   
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0;
}

#family-tree .nodeFooterText {
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 2px;
    width: 100%;
    font-size: 1rem;
}

#family-tree .nodeImage {
    width: 80px;
    height: 80px;
    border-radius: 30%;
}

#family-tree .parents-link {
    cursor: pointer;
    z-index: 100;
    background-color: transparent !important;
}

#family-tree .bodyName {
    font-size: 0.9rem;
    font-weight: bold; 
    cursor: pointer;
    overflow: hidden;
}

/* Adjust the linage class to ensure connector lines are narrow */
#family-tree .linage {
    stroke: RGB(107, 66, 38);            /* Line color */
    stroke-width: 4px;     /* Thin stroke for the lines */
    fill: none;              /* Ensure there's no fill */
    stroke-linejoin: round;  /* Rounded line joins */
    z-index: 10;
}

#family-tree .marriage {
    stroke: #7109f8;
    stroke-width: 4px;
    fill: none;
    /* make the stroke ends curved */
    stroke-linecap: round;
    stroke-linejoin: round;
    z-index: 9;
}

#family-tree .treegender_female {
    /* Earthy green with gradient */
    background: linear-gradient(to right, #a8d5ba, #7bb38d);
    justify-content: center;
    align-items: center;
    text-align: center;
}

#family-tree .treegender_male {
    /* Warm amber with gradient */
    background: linear-gradient(to bottom, #f7d1a1, #e9b379);
    justify-content: center;
    align-items: center;
    text-align: center;
}

#family-tree .treegender_other {
    /* Muted purple gradient */
    background: linear-gradient(to bottom, #cfd4b3, #b4b37f);
    justify-content: center;
    align-items: center;
    text-align: center;
}


/**********************************************
* FAMILY TREE EDIT BUTTON
***********************************************/
/* Style the "Edit" button */
#family-tree .ft-edit-btn {
    cursor: pointer;
    color: rgb(230, 227, 227);
    z-index: 100;
}

/* Style the "+" button */
#family-tree .ft-dropdown-btn {
    cursor: pointer;
    z-index: 100;
}

/* Syle the "view" button */
#family-tree .ft-view-btn {
    color: rgb(230, 227, 227);
    cursor: pointer;
    z-index: 100;
}