/**
 * Starter Blocks — Enhanced List Frontend Styles
 */

.sb-enhanced-list {
    --sb-el-primary: #0073aa;
    --sb-el-text: #1e1e1e;
    --sb-el-muted: #757575;
    --sb-el-border: #ddd;
    --sb-el-bg: #f7f7f7;
    --sb-el-link: #0073aa;
    --sb-el-link-hover: #005177;
    --sb-el-nav-bg: #fff;
    --sb-el-nav-active: #e7f3ff;
    --sb-el-heading-border: #0073aa;
    --sb-el-sm: 8px;
    --sb-el-md: 16px;
    --sb-el-lg: 24px;
    --sb-el-xl: 32px;
    --sb-el-d0: #0073aa;
    --sb-el-d1: #00a32a;
    --sb-el-d2: #dba617;
    --sb-el-d3: #d63638;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.6;
    color: var(--sb-el-text);
}

/* Header */
.sb-el-header { margin-bottom: var(--sb-el-lg); padding-bottom: var(--sb-el-md); border-bottom: 2px solid var(--sb-el-heading-border); }
.sb-el-header-title { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--sb-el-text); }
.sb-el-header-link { color: var(--sb-el-link); text-decoration: none; transition: color 0.2s ease; }
.sb-el-header-link:hover, .sb-el-header-link:focus { color: var(--sb-el-link-hover); text-decoration: underline; }
.sb-el-header-description { margin: var(--sb-el-sm) 0 0 0; font-size: 0.9375rem; color: var(--sb-el-muted); }

/* Item Count */
.sb-el-item-count { font-size: 0.875rem; color: var(--sb-el-muted); margin: 0 0 var(--sb-el-md) 0; padding: var(--sb-el-sm) var(--sb-el-md); background: var(--sb-el-bg); border-radius: 4px; display: inline-block; }

/* Alphabet Nav */
.sb-el-alphabet-nav { margin-bottom: var(--sb-el-lg); padding: var(--sb-el-md); background: var(--sb-el-nav-bg); border: 1px solid var(--sb-el-border); border-radius: 8px; }
.sb-el-sticky-nav .sb-el-alphabet-nav { position: sticky; top: var(--sb-el-md); z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.admin-bar .sb-el-sticky-nav .sb-el-alphabet-nav { top: calc(32px + var(--sb-el-md)); }
@media screen and (max-width: 782px) { .admin-bar .sb-el-sticky-nav .sb-el-alphabet-nav { top: calc(46px + var(--sb-el-md)); } }

.sb-el-alphabet-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; justify-content: center; }
.sb-el-alphabet-list li { margin: 0; }
.sb-el-letter-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; font-size: 0.8125rem; font-weight: 600; color: var(--sb-el-primary); background: var(--sb-el-nav-active); border: 1px solid transparent; border-radius: 6px; text-decoration: none; transition: all 0.2s ease; }
.sb-el-letter-link:hover, .sb-el-letter-link:focus { background: var(--sb-el-primary); color: #fff; text-decoration: none; outline: none; }
.sb-el-letter-link:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sb-el-primary); }
.sb-el-letter-link.sb-el-letter-disabled { color: #ccc; background: #f5f5f5; cursor: default; pointer-events: none; }

/* List Content */
.sb-el-list-content { width: 100%; }

/* Columns — grouped lists: on content wrapper */
.sb-el-grouped.sb-el-columns-2:not(.sb-el-hierarchical) .sb-el-list-content { column-count: 2; column-gap: var(--sb-el-xl); }
.sb-el-grouped.sb-el-columns-3:not(.sb-el-hierarchical) .sb-el-list-content { column-count: 3; column-gap: var(--sb-el-xl); }
.sb-el-grouped.sb-el-columns-4:not(.sb-el-hierarchical) .sb-el-list-content { column-count: 4; column-gap: var(--sb-el-xl); }

/* Columns — flat lists: on list element */
.sb-el-columns-2:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list { column-count: 2; column-gap: var(--sb-el-xl); }
.sb-el-columns-3:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list { column-count: 3; column-gap: var(--sb-el-xl); }
.sb-el-columns-4:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list { column-count: 4; column-gap: var(--sb-el-xl); }

/* Letter Groups */
.sb-el-letter-group { break-inside: avoid; page-break-inside: avoid; margin-bottom: var(--sb-el-lg); padding-bottom: var(--sb-el-md); }
.sb-el-letter-heading { font-size: 1.25rem; font-weight: 700; color: var(--sb-el-text); margin: 0 0 var(--sb-el-sm) 0; padding: var(--sb-el-sm) 0; border-bottom: 3px solid var(--sb-el-heading-border); scroll-margin-top: 100px; }
.sb-el-sticky-nav .sb-el-letter-heading { scroll-margin-top: 120px; }

/* List Styles */
.sb-el-list { margin: 0; padding: 0 0 0 1.25em; list-style-position: outside; }
.sb-el-style-bullet .sb-el-list { list-style-type: disc; }
.sb-el-style-numbered .sb-el-list { list-style-type: decimal; }
.sb-el-style-none .sb-el-list { list-style-type: none; padding-left: 0; }

.sb-el-list-item { margin-bottom: var(--sb-el-sm); break-inside: avoid; page-break-inside: avoid; line-height: 1.5; }
.sb-el-item-link { color: var(--sb-el-link); text-decoration: none; border-bottom: 1px solid transparent; transition: all 0.2s ease; }
.sb-el-item-link:hover, .sb-el-item-link:focus { color: var(--sb-el-link-hover); border-bottom-color: var(--sb-el-link-hover); outline: none; }
.sb-el-item-link:focus { background: var(--sb-el-nav-active); padding: 2px 4px; margin: -2px -4px; border-radius: 2px; }
.sb-el-item-text { color: var(--sb-el-text); }

/* Hierarchical */
.sb-el-hierarchical .sb-el-list { list-style-type: none; padding-left: 0; }
.sb-el-hierarchical .sb-el-list .sb-el-list { padding-left: 1.5em; margin-top: var(--sb-el-sm); border-left: 2px solid var(--sb-el-border); margin-left: 0.5em; }
.sb-el-hierarchical .sb-el-depth-0 > .sb-el-list-item { padding-left: 12px; border-left: 3px solid var(--sb-el-d0); margin-bottom: var(--sb-el-md); }
.sb-el-hierarchical .sb-el-depth-1 { border-left-color: var(--sb-el-d1); }
.sb-el-hierarchical .sb-el-depth-2 { border-left-color: var(--sb-el-d2); }
.sb-el-hierarchical .sb-el-depth-3 { border-left-color: var(--sb-el-d3); }
.sb-el-hierarchical .sb-el-has-children > .sb-el-item-link,
.sb-el-hierarchical .sb-el-has-children > .sb-el-item-text { font-weight: 600; }

/* Responsive */
@media screen and (max-width: 900px) {
    .sb-el-grouped.sb-el-columns-4:not(.sb-el-hierarchical) .sb-el-list-content,
    .sb-el-columns-4:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list { column-count: 3; }
    .sb-el-letter-link { min-width: 28px; height: 28px; font-size: 0.75rem; }
}
@media screen and (max-width: 768px) {
    .sb-el-grouped.sb-el-columns-3:not(.sb-el-hierarchical) .sb-el-list-content,
    .sb-el-grouped.sb-el-columns-4:not(.sb-el-hierarchical) .sb-el-list-content,
    .sb-el-columns-3:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list,
    .sb-el-columns-4:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list { column-count: 2; }
    .sb-el-alphabet-nav { padding: var(--sb-el-sm); }
    .sb-el-alphabet-list { gap: 4px; }
    .sb-el-letter-link { min-width: 26px; height: 26px; font-size: 0.6875rem; padding: 0 4px; }
    .sb-el-letter-heading { font-size: 1.125rem; }
    .sb-el-header-title { font-size: 1.25rem; }
}
@media screen and (max-width: 480px) {
    .sb-el-grouped.sb-el-columns-2:not(.sb-el-hierarchical) .sb-el-list-content,
    .sb-el-grouped.sb-el-columns-3:not(.sb-el-hierarchical) .sb-el-list-content,
    .sb-el-grouped.sb-el-columns-4:not(.sb-el-hierarchical) .sb-el-list-content,
    .sb-el-columns-2:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list,
    .sb-el-columns-3:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list,
    .sb-el-columns-4:not(.sb-el-grouped):not(.sb-el-hierarchical) .sb-el-list { column-count: 1; }
    .sb-el-sticky-nav .sb-el-alphabet-nav { position: relative; top: 0; box-shadow: none; }
    .sb-el-letter-link { min-width: 24px; height: 24px; font-size: 0.625rem; border-radius: 4px; }
    .sb-el-hierarchical .sb-el-list .sb-el-list { padding-left: 1em; }
}

/* Accessibility */
@media (prefers-contrast: high) {
    .sb-el-letter-link { border: 2px solid currentColor; }
    .sb-el-letter-link:focus { outline: 3px solid; outline-offset: 2px; }
    .sb-el-item-link:focus { outline: 2px solid; outline-offset: 2px; }
    .sb-el-letter-heading { border-bottom-width: 4px; }
    .sb-el-hierarchical .sb-el-depth-0 > .sb-el-list-item { border-left-width: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-el-letter-link, .sb-el-item-link { transition: none; }
    html { scroll-behavior: auto; }
}
.sb-el-letter-link:focus:not(:focus-visible) { box-shadow: none; }
.sb-el-letter-link:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sb-el-primary); }
.sb-el-item-link:focus:not(:focus-visible) { background: transparent; padding: 0; margin: 0; }
.sb-el-item-link:focus-visible { background: var(--sb-el-nav-active); padding: 2px 4px; margin: -2px -4px; }

/* Print */
@media print {
    .sb-el-alphabet-nav { display: none; }
    .sb-el-letter-group { break-inside: avoid; }
    .sb-el-item-link { color: inherit; text-decoration: underline; }
    .sb-el-item-link::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
    .sb-el-hierarchical .sb-el-depth-0 > .sb-el-list-item { border-left-color: #000; }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .sb-enhanced-list {
        --sb-el-text: #e0e0e0; --sb-el-muted: #999; --sb-el-border: #444;
        --sb-el-bg: #2a2a2a; --sb-el-nav-bg: #1e1e1e; --sb-el-nav-active: #1a3a50;
    }
    .sb-el-letter-link.sb-el-letter-disabled { color: #555; background: #2a2a2a; }
}

@supports (scroll-behavior: smooth) { html:not([data-reduced-motion]) { scroll-behavior: smooth; } }