/* ==========================================================================
   Custom Styles for Portfolio Website
   ========================================================================== */

/* ===== Global Typography ===== */
body {
    font-family: 'Montserrat', sans-serif !important;
}

.prose {
    font-size: 1.0625rem;
    /* 17px */
}

/* ==========================================================================
   Portfolio Post Pages (scoped to single article pages)
   ========================================================================== */

/* Layout - Center content by controlling the flex parent */
article:has(#single_header) section.flex.flex-col {
    align-items: center;
}

article:has(#single_header) section.flex.flex-col>.min-w-0.max-w-fit {
    margin-left: auto;
    margin-right: auto;
}

/* Text centering within prose blocks */
article:has(#single_header) .prose {
    text-align: center;
    max-width: 90%;
    margin-inline: auto;
}

/* Center the header/title */
article:has(#single_header) #single_header {
    margin-inline: auto;
    text-align: center;
}

/* Lists - left align while keeping centered */
article:has(#single_header) .prose ul,
article:has(#single_header) .prose ol {
    text-align: left;
    display: inline-block;
    margin-inline: auto;
}

article:has(#single_header) .prose li {
    text-align: left;
}

/* Tables - center alignment */
article:has(#single_header) .prose table {
    margin-left: auto;
    margin-right: auto;
    display: table;
}

article:has(#single_header) .prose th,
article:has(#single_header) .prose td {
    text-align: center;
}

/* ===== Images ===== */
article:has(#single_header) .prose img {
    margin: 0 auto !important;
    display: block;
    width: 100%;
    height: auto;
}

article:has(#single_header) .prose figure {
    margin: 0 auto !important;
}

/* Image container paragraphs - flexbox for consistent spacing */
article:has(#single_header) .prose p:has(figure) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
}

/* Limit image width on desktop */
@media (min-width: 768px) {
    article:has(#single_header) .prose figure {
        max-width: 600px;
        width: 100%;
    }
}

/* ===== Spacing ===== */
article:has(#single_header) .prose p {
    margin-top: 8px !important;
    margin-bottom: 20px !important;
}

article:has(#single_header) .prose p:has(figure)+p {
    margin-top: 12px !important;
}

/* ===== Section Dividers ===== */
article:has(#single_header) .prose h2,
article:has(#single_header) .prose h3 {
    border-top: 1px solid rgb(229 231 235);
    padding-top: 2rem;
    margin-top: 2rem;
    width: 100%;
}

:root.dark article:has(#single_header) .prose h2,
:root.dark article:has(#single_header) .prose h3 {
    border-top-color: rgb(55 65 81);
}

/* ===== Article Pagination ===== */
article:has(#single_header) .pt-8 {
    max-width: 90%;
    margin-inline: auto;
}

/* ===== Tags on Post Pages ===== */
article:has(#single_header) #single_header .flex.flex-wrap {
    justify-content: center;
}

/* ===== Tags on Homepage Cards ===== */
/* article.relative .text-sm .flex.flex-wrap {
    justify-content: center;
} */

/* ===== Resume Page ===== */
article.max-w-full>header>h1 {
    text-align: center;
}