/* Custom CSS following GOV.UK Design System principles */
:root {
    --ul-primary-color: #041c2c; 
    --ul-print-color: #000;
}

/* ----- BASE STYLES (shared for both ul and ol) ----- */
ul.shade-black,
ol.shade-black {
  
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    
    /* MOBILE FIRST (GOV.UK standard) */
    font-size: 16px;
    line-height: 1.25;
    color: var(--ul-primary-color);
    
    margin-top: 0;
    margin-bottom: 20px;
    
    /* INDENTATION: GOV.UK uses padding-left on the list itself */
    padding-left: 20px;
}

/* ----- UNORDERED (bullets) ----- */
ul.shade-black {
    list-style-type: disc;
}

/* ----- ORDERED (numbers) ----- */
ol.shade-black {
    list-style-type: decimal;
}

/* ----- LIST ITEMS (spacing between items) ----- */
ul.shade-black > li,
ol.shade-black > li {
    margin-bottom: 0; /* GOV.UK: no gap on mobile for compactness */
}

/* ----- NESTED SUB-LISTS (any combination) ----- */
ul.shade-black ul,
ul.shade-black ol,
ol.shade-black ul,
ol.shade-black ol {
    margin-top: 10px;      /* GOV.UK: space between parent text and sub-list */
    margin-bottom: 0;      /* Prevents double margin */
    padding-left: 20px;    /* GOV.UK: adds another 20px indentation (total 40px) */
}

/* Ensure nested unordered lists keep bullets, nested ordered keep numbers */
ul.shade-black ul,
ol.shade-black ul {
    list-style-type: disc;
}
ul.shade-black ol,
ol.shade-black ol {
    list-style-type: decimal;
}

/* ----- DEEPER NESTING (3rd level and beyond) ----- */
ul.shade-black ul ul,
ul.shade-black ul ol,
ul.shade-black ol ul,
ul.shade-black ol ol,
ol.shade-black ul ul,
ol.shade-black ul ol,
ol.shade-black ol ul,
ol.shade-black ol ol {
    padding-left: 20px;    /* INDENTATION: total 60px+ */
    margin-top: 10px;
}

/* ----- TABLET & DESKTOP OVERRIDES (min-width: 641px) ----- */
@media (min-width: 40.0625em) {
    ul.shade-black,
    ol.shade-black {
        font-size: 19px;
        line-height: 1.3157894737; /* 25/19 */
        margin-bottom: 25px;
    }

    /* Add a small 5px gap between items on tablet/desktop */
    ul.shade-black > li,
    ol.shade-black > li {
        margin-bottom: 5px;
    }
    
    /* Also apply the gap to nested items on desktop */
    ul.shade-black ul > li,
    ul.shade-black ol > li,
    ol.shade-black ul > li,
    ol.shade-black ol > li {
        margin-bottom: 5px;
    }
}

/* ----- Optional: Extra top margin (uncomment if needed) ----- */
/* ul.shade-black,
ol.shade-black {
    margin-top: 30px;
} */

/* ----- PRINT STYLES (kept your variables) ----- */
@media print {
    ul.shade-black,
    ol.shade-black {
        color: var(--ul-print-color);
        font-size: 14pt;
        line-height: 1.2;
    }
    /* Native bullets/numbers inherit colour automatically in print */
}