.sidebar {
    width: 300px; 
    border-right: 1px solid var(--hamato-border-color);
    margin-right:30px;
    padding-right:30px;
    font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    word-break:break-word;
}

.sidebarHeader{
    display:flex;
    gap:8px;
    padding-bottom:16px;
    margin-left:20px;
}

.sidebarTitle{
    font-size:24px;
    font-weight:600;
    font-family:"Nunito Sans",sans-serif;
    margin-top:6px;
    line-height:1.3;
}

.searchButton{
    margin-left: 20px;
    margin-bottom:24px;
    font-size: 16px;
    width:fit-content;
    text-decoration: none;
    font-family:Arial, Helvetica, sans-serif;
}
.searchButton img {
    width: 24px;
    height: 24px;
    padding-right:4px;
}

.selectedNavigationElement {
    margin-left: 20px;
    padding-bottom:4px;
}

.selectedNavigationElement >a:first-of-type {
    color:var(--hamato-primary-color) !important;
    font-weight:700;  
}
.selectedNavigationElement >summary:first-of-type {
    color:var(--hamato-primary-color) !important;
    font-weight:700;  
}
.selectedNavigationElement > summary > span:nth-of-type(2)>a {
    color: var(--hamato-primary-color) !important;
    font-weight: 700;
}

.navigationElement {
    margin-left: 20px;
    padding-bottom:4px;
}

.navigationElement .link{
    color:var(--hamato-primary-color);
}

.selectedNavigationElement a:hover,
.navigationElement a:hover{
    font-weight:700;
}

/* remove native marker so our icons show cleanly */
details > summary { 
    list-style: none; 
    display:flex;
    align-items:flex-start;
    cursor:pointer;
    gap:8px;
    padding-bottom:2px;
}

details > summary::-webkit-details-marker { display: none; }

details[open] > summary { font-weight: 600; }

/* icon swapping scoped to the current details node */
details > summary .iconOpen { display: none; }
details[open] > summary .iconOpen { display: inline-block; }
details[open] > summary .iconClosed { display: none; }