/* Index Page Template Styles */
/* Used for pages with category navigation and entry listings */

.content {
    flex: 1;
    padding: var(--space-l) var(--space-m) var(--space-xl);
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .content {
        padding: var(--space-l) var(--space-l) var(--space-xl);
    }
}

@media (min-width: 1024px) {
    .content {
        padding: var(--space-l) var(--space-l) var(--space-xl);
        max-width: var(--max-width-content);
    }
}

.index-container {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-l) 0;
}

/* Category Navigation */
.category-nav {
    font-variant: small-caps;
    position: fixed;
    top: 7em;
    right: calc(50% + 400px); 
    width: auto;
    min-width: 5em;
    padding: 0.5em 1em;
    font-size: var(--text-sm);
    z-index: 1;
    background-color: rgba(10, 10, 10, 0.95);
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,.15);
    backdrop-filter: blur(10px);
    clip-path: inset(-10px 0px -10px -10px);
    transition: right 1s;
    white-space: nowrap;
    color: var(--color-accent);
}

@media (max-width: 80em) {
    .category-nav {
        right: calc(100% + 10em); 
        transition: right 1s;
    }
}

.category-nav a {
    display: block;
    margin: 0.3em 0;
    color: var(--color-text-dim);
    text-decoration: none;
    transition: color var(--transition-base);
}

.category-nav a:hover,
.category-nav a.active {
    color: var(--color-accent);
}

/* Category Sections */
.category-section {
    margin-bottom: var(--space-xl);
}

.category-header {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-l);
    padding-bottom: var(--space-s);
}

/* Entries */
.entry {
    margin-bottom: var(--space-l);
    line-height: var(--line-height);
}

.entry a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: var(--border-width);
    text-underline-offset: calc(var(--border-width) * 2);
    transition: color var(--transition-base), text-decoration-thickness var(--transition-fast);
}

.entry a:hover {
    color: var(--color-accent-hover);
    text-decoration-thickness: calc(var(--border-width) * 3);
}

.entry-description {
    color: var(--color-text-dim);
    font-style: italic;
    font-family: var(--font-italic);
}

/* Video Embeds for index pages */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: var(--space-m) 0;
    border-radius: var(--border-radius-md);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--border-radius-md);
}

/* Collapsible category headers (H2 level) */
.category-details {
    margin-bottom: var(--space-xl);
}

.category-details > summary.category-header {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    cursor: pointer;
    list-style: revert;
}

/* Collapsible subcategory headers (H3 level) */
.subcategory-details {
    margin-top: var(--space-l);
    margin-left: var(--space-m);
    padding-left: var(--space-m);
    border-left: 2px solid var(--color-accent);
}

.subcategory-details > summary.subcategory-header {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    cursor: pointer;
    list-style: revert;
}

/* Course-level nesting - further indent with left border */
.subcategory-details > details {
    margin-top: var(--space-m);
    margin-left: var(--space-m);
    padding-left: var(--space-m);
    border-left: 2px solid var(--color-border);
}