/* Custom CSS to fix list formatting issues on Hugo site */

/* Reset and fix unordered list alignment */
.nested-copy-line-height ul,
.content ul,
.post-content ul {
    margin-left: 0;
    padding-left: 1.5rem;
    list-style-position: outside;
    list-style-type: disc;
    text-align: left !important;
}

/* Ensure consistent spacing between list items */
.nested-copy-line-height ul li,
.content ul li,
.post-content ul li {
    margin-bottom: 0.75rem;
    padding-left: 0;
    text-align: left;
    display: list-item;
    line-height: 1.6;
}

/* Fix nested lists alignment */
.nested-copy-line-height ul ul,
.content ul ul,
.post-content ul ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

/* Ensure bold text in lists doesn't break alignment */
.nested-copy-line-height ul li strong,
.content ul li strong,
.post-content ul li strong {
    font-weight: 700;
    display: inline;
}

/* Override any flex or grid layouts that might interfere */
.nested-copy-line-height ul li,
.content ul li,
.post-content ul li {
    display: list-item !important;
    flex-direction: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
}

/* Fix any potential CSS Grid or Flexbox interference */
.nested-copy-line-height ul,
.content ul,
.post-content ul {
    display: block !important;
}

/* Ensure proper bullet visibility */
.nested-copy-line-height ul li::marker,
.content ul li::marker,
.post-content ul li::marker {
    content: "• ";
    color: inherit;
}

/* Fix spacing around the entire list */
.nested-copy-line-height ul,
.content ul,
.post-content ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Specific fixes for projects page content */
.projects ul,
#projects ul {
    margin-left: 0;
    padding-left: 1.5rem;
    list-style-type: disc;
    list-style-position: outside;
}

.projects ul li,
#projects ul li {
    margin-bottom: 0.75rem;
    text-align: left;
    display: list-item;
}

/* Fix pagination display to show horizontally instead of vertically */
.pagination.pagination-default {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
    padding: 0 !important;
}

.pagination.pagination-default .page-item {
    margin-bottom: 0 !important;
    margin-right: 0.5rem !important;
    list-style: none !important;
    display: inline-block !important;
}

.pagination.pagination-default .page-item:last-child {
    margin-right: 0 !important;
}

.pagination.pagination-default .page-link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    color: #333;
}

.pagination.pagination-default .page-item.active .page-link {
    background-color: #ddd;
    color: #333;
}

/* Reduce header height by overriding Tachyons padding classes */

/* Override large bottom padding on header div - reduce from pb6-l (64px) to pb3-l (16px) */
header > div.pb6-l {
    padding-bottom: 1rem !important;
}

/* Override medium screen bottom padding - reduce from pb3-m (16px) to pb2-m (8px) */
header > div.pb3-m {
    padding-bottom: 0.5rem !important;
}

/* Reduce navigation padding - change from pv3 (16px top/bottom) to pv2 (8px top/bottom) */
header nav.pv3 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Reduce header content area padding - change from pv3 to pv2 */
header div.pv3:not(nav) {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Add white separator line below navigation */
header nav {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Reduce top margin of h1 in header by ~50% */
header h1 {
    margin-top: 1.7rem !important;
    margin-block-start: 1.7rem !important;
}

/* Add subtle texture background to header */
body header div.bg-black.pb3-m.pb6-l {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/header-texture.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;
}