/* ================================
       CONFIGURABLE VARIABLES
    ================================ */
:root {
    --jc-border-color: #dddddd; /* change this to customise section borders */
    --jc-indent-line: #dddddd;

    --jc-item-spacing: 10px;

    --jc-folder-icon-size: 30px;
    --jc-file-icon-size: 20px;

    --jc-brand-title-size: 1.2rem;
    --jc-brand-title-weight: 600;
    --jc-brand-hover-bg: #f2f2f2;
    --jc-brand-hover-color: var(--primary-orange-color);

    --jc-file-title-size: 1rem;
    --jc-file-title-color: var(--primary-orange-color);
    --jc-file-title-weight: 400;
    --jc-file-hover-bg: #eee;
    --jc-file-hover-color: var(--primary-orange-color);

    --jc-folder-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFB510' /%3E%3Cstop offset='100%25' stop-color='%23F48120' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23grad)' d='M128 512L512 512C547.3 512 576 483.3 576 448L576 208C576 172.7 547.3 144 512 144L362.7 144C355.8 144 349 141.8 343.5 137.6L305.1 108.8C294 100.5 280.5 96 266.7 96L128 96C92.7 96 64 124.7 64 160L64 448C64 483.3 92.7 512 128 512z'/%3E%3C/svg%3E");
    --jc-folder-open-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23FFB510' /%3E%3Cstop offset='100%25' stop-color='%23F48120' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23grad)' d='M88 289.6L64.4 360.2L64.4 160C64.4 124.7 93.1 96 128.4 96L267.1 96C280.9 96 294.4 100.5 305.5 108.8L343.9 137.6C349.4 141.8 356.2 144 363.1 144L480.4 144C515.7 144 544.4 172.7 544.4 208L544.4 224L179 224C137.7 224 101 250.4 87.9 289.6zM509.8 512L131 512C98.2 512 75.1 479.9 85.5 448.8L133.5 304.8C140 285.2 158.4 272 179 272L557.8 272C590.6 272 613.7 304.1 603.3 335.2L555.3 479.2C548.8 498.8 530.4 512 509.8 512z'/%3E%3C/svg%3E");
    --jc-file-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23262629' d='M128 128C128 92.7 156.7 64 192 64L341.5 64C358.5 64 374.8 70.7 386.8 82.7L493.3 189.3C505.3 201.3 512 217.6 512 234.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128zM336 122.5L336 216C336 229.3 346.7 240 360 240L453.5 240L336 122.5zM248 320C234.7 320 224 330.7 224 344C224 357.3 234.7 368 248 368L392 368C405.3 368 416 357.3 416 344C416 330.7 405.3 320 392 320L248 320zM248 416C234.7 416 224 426.7 224 440C224 453.3 234.7 464 248 464L392 464C405.3 464 416 453.3 416 440C416 426.7 405.3 416 392 416L248 416z'/%3E%3C/svg%3E");
}

/* ================================
   LIST STRUCTURE
================================ */
.jc-directory,
.jc-directory ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* Top-level border between folders */
.jc-directory > .jc-directory-parent {
    border-top: 1px solid var(--jc-border-color);
    padding-top: var(--jc-item-spacing);
    margin-top: calc(var(--jc-item-spacing) - 1px);
}

/* First child shouldn't double border */
.jc-directory > .jc-directory-parent:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* ================================
   FOLDER ITEMS
================================ */
.jc-directory-parent {
    cursor: pointer;
    position: relative;
}

.jc-partner-brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

/* Closed folder SVG icon */
.jc-directory-parent .jc-partner-brand::before {
    content: "";
    display: block;
    margin-right: 10px;
    width: var(--jc-folder-icon-size);
    height: var(--jc-folder-icon-size);
    background-image: var(--jc-folder-gradient);
    background-size: contain;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}

/* Open folder SVG icon */
.jc-directory-parent.open .jc-partner-brand::before {
    background-image: var(--jc-folder-open-gradient);
}

.jc-partner-brand {
    font-weight: var(--jc-brand-title-weight);
    padding: 3px 10px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    font-size: var(--jc-brand-title-size);
}

.jc-partner-brand:hover {
    color: var(--jc-brand-hover-color);
    background-color: var(--jc-brand-hover-bg);
}

/* ================================
   SLIDE ANIMATION
================================ */
.jc-directory-child {
    overflow: hidden;
    border-left: 1px solid var(--jc-indent-line);
    margin-left: calc(var(--jc-folder-icon-size) + 20px) !important;
    height: 0;
    transition: height 0.25s ease;
    border-left: 1px solid var(--jc-indent-line);
}

.jc-directory-parent.open > .jc-directory-child {
    max-height: 1000px;
}

/* ================================
   FILE ITEMS
================================ */
.jc-directory-file {
    position: relative;
}

.jc-directory-file + .jc-directory-file {
    margin-top: 5px;
}
/* File SVG icon */
.jc-directory-file a::before {
    content: "";
    margin-right: 10px;
    display: block;
    margin-top: 0.1em;
    width: var(--jc-file-icon-size);
    height: var(--jc-file-icon-size);
    background-image: var(--jc-file-black);
    background-size: contain;
    background-repeat: no-repeat;
    flex: 0 0 auto;
}

/* Links */
.jc-directory-file {
    cursor: auto;
}

.jc-directory-file a {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-decoration: none;
    color: var(--jc-file-title-color);
    padding: 3px 10px;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    font-size: var(--jc-file-title-size);
}

.jc-directory-file a:hover {
    color: var(--jc-file-hover-color);
    background-color: var(--jc-file-hover-bg);
}