/* Hide the icon next to the date in article meta - stronger selectors */
.article-coauthors-icon-container,
.article-hero-subtitle .article-coauthors-icon-container,
.article-meta .article-coauthors-icon-container,
div.article-coauthors-icon-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide the entire coauthors container when empty */
.article-coauthors-container:empty,
.article-coauthors-container {
    display: none !important;
}

/* About page avatar styling */
.about-avatar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 3rem !important;
    padding-bottom: 1rem !important;
    text-align: center !important;
}

.about-avatar img {
    display: block !important;
    margin: 0 0 0 0 !important;
}

/* Additional spacing for About page content */
.about-avatar + article {
    margin-top: 2rem !important;
    padding-top: 1rem !important;
}

/* Eliminate spacing between hero image and content */
.article-hero {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.article-hero-heading {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.article-hero-image {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.section.narrow {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Position progress bar to start at hero image level */
#progressBar.aside-container {
    top: 300px !important;
}

/* Pull content up to close gap with hero image */
#articleContent {
    margin-top: 10rem !important;
    padding-top: 0 !important;
}

/* Beautiful typography for homepage intro */
.author-subheading {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    font-size: 1.5rem !important;
    color: #374151 !important;
    letter-spacing: -0.01em !important;
    max-width: 700px !important;
    text-align: center !important;
}

.author-subheading strong {
    font-weight: 600 !important;
    color: #111827 !important;
}

/* Portfolio Tabs Styling */
.portfolio-tabs {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.5rem 0 2rem 0;
    padding: 0.75rem;
    background: var(--inputBackground);
    border-radius: 16px;
    border: 1px solid var(--horizontalRule);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.tab-button {
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--grey);
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tab-button:hover {
    background: var(--card);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-button.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 12px rgba(97, 102, 220, 0.3);
    transform: translateY(-1px);
}

.tab-button.active:hover {
    background: #5159cc;
}

/* Portfolio item transition */
.portfolio-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Responsive tabs */
@media screen and (max-width: 768px) {
    .portfolio-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;
        max-width: 95%;
    }
    
    .tab-button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }
}

/* Portfolio page styling */
.portfolio-grid {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

/* Hide items marked as hidden */
.portfolio-item[data-category="hidden"] {
    display: none !important;
}

.portfolio-item {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--horizontalRule);
    transition: all 0.3s ease;
    position: relative;
    margin-bottom: 1rem;
}

.portfolio-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--horizontalRule) 20%, var(--horizontalRule) 80%, transparent 100%);
    opacity: 0.5;
}

.portfolio-item:nth-child(even) {
    background: white;
}

.portfolio-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.portfolio-header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.portfolio-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.portfolio-info {
    flex: 1;
}

.portfolio-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.portfolio-title a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.portfolio-title a:hover {
    color: var(--accent);
}

.portfolio-description {
    color: var(--grey);
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.portfolio-date {
    font-size: 0.9rem;
    color: var(--grey);
    font-weight: 500;
}

.portfolio-content {
    margin-bottom: 1.5rem;
    color: var(--articleText);
    line-height: 1.6;
}

.portfolio-content ul {
    padding-left: 0;
    list-style: none;
    margin-top: 1rem;
}

.portfolio-content li {
    position: relative;
    padding: 0.75rem 0 0.75rem 1.5rem;
    margin-bottom: 0.5rem;
    background: white;
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    transition: all 0.2s ease;
}

.portfolio-content li:hover {
    background: #f8f9fa;
    transform: translateX(2px);
}

.portfolio-content li::before {
    content: "→";
    position: absolute;
    left: 0.5rem;
    top: 0.75rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
}

/* For direct text contributions (not in list format) */
.portfolio-content p {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(115, 115, 125, 0.1);
}

.portfolio-content p:last-child {
    border-bottom: none;
}

.portfolio-link {
    margin-top: 1rem;
}

.portfolio-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    color: white !important;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.portfolio-button:link,
.portfolio-button:visited,
.portfolio-button:active {
    color: white !important;
}

.portfolio-button:hover {
    background: #5159cc;
    color: white !important;
    transform: translateY(-1px);
}

/* Dark mode: Create a custom override using CSS approach */
.portfolio-button-dark-override {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    border: 1px solid #e1e5e9 !important;
}

.portfolio-button-dark-override:link,
.portfolio-button-dark-override:visited,
.portfolio-button-dark-override:active {
    color: #1a1a1a !important;
}

.portfolio-button-dark-override:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #d1d5da !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Portfolio single page styling */
.portfolio-description-box {
    background: var(--inputBackground);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    border-left: 4px solid var(--accent);
}

.portfolio-description-box p {
    margin: 0;
    color: var(--primary);
    font-size: 1.1rem;
}

.portfolio-link-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--horizontalRule);
    text-align: center;
}

.portfolio-external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    color: white !important;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.portfolio-external-link:link,
.portfolio-external-link:visited,
.portfolio-external-link:active {
    color: white !important;
}

.portfolio-external-link:hover {
    background: #5159cc;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(97, 102, 220, 0.3);
}

/* Dark mode: Create a custom override using CSS approach */
.portfolio-external-link-dark-override {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    border: 1px solid #e1e5e9 !important;
}

.portfolio-external-link-dark-override:link,
.portfolio-external-link-dark-override:visited,
.portfolio-external-link-dark-override:active {
    color: #1a1a1a !important;
}

.portfolio-external-link-dark-override:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #d1d5da !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

/* Article Tags Styling */
.article-tags {
    margin-top: 1rem;
    margin-left: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-tag {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    background: var(--accent);
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: lowercase;
    cursor: default;
}

/* Dark mode tag styling */
body[style*="--accent: #E9DAAC"] .article-tag,
body[style*="--background-color: #111216"] .article-tag {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    border: 1px solid #e1e5e9 !important;
}

/* Tag Filter System */
.tag-filter-container {
    background: var(--card);
    border: 1px solid var(--horizontalRule);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.tag-filter-title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
}

.tag-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--horizontalRule);
    border-radius: 20px;
    background: var(--background-color);
    color: var(--grey);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: lowercase;
    font-family: inherit;
}

.tag-filter-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(97, 102, 220, 0.3);
}

.tag-filter-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(97, 102, 220, 0.3);
}

.tag-filter-btn.active:hover {
    background: #5159cc;
    border-color: #5159cc;
}

/* No results message */
.no-results-message {
    display: none;
    text-align: center;
    padding: 3rem 2rem;
    background: var(--card);
    border: 1px solid var(--horizontalRule);
    border-radius: 12px;
    margin: 2rem 0;
}

.no-results-content h3 {
    margin: 0 0 0.5rem 0;
    color: var(--primary);
    font-size: 1.3rem;
}

.no-results-content p {
    margin: 0;
    color: var(--grey);
    font-size: 1rem;
}

/* Dark mode tag filter styling */
body[style*="--accent: #E9DAAC"] .tag-filter-btn:hover,
body[style*="--background-color: #111216"] .tag-filter-btn:hover {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    border-color: #e1e5e9 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

body[style*="--accent: #E9DAAC"] .tag-filter-btn.active,
body[style*="--background-color: #111216"] .tag-filter-btn.active {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
    border-color: #e1e5e9 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

body[style*="--accent: #E9DAAC"] .tag-filter-btn.active:hover,
body[style*="--background-color: #111216"] .tag-filter-btn.active:hover {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #d1d5da !important;
}

/* Responsive tag filter */
@media screen and (max-width: 768px) {
    .tag-filter-container {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .tag-filter-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .tag-filter-buttons {
        gap: 0.3rem;
    }
    
    .tag-filter-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .no-results-message {
        padding: 2rem 1rem;
    }
}

/* Article List Tags (for posts overview) */
.article-list-tags {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.article-list-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--inputBackground);
    color: var(--grey);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: lowercase;
}

.article-list-tag-more {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: var(--accent);
    color: white;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Dark mode for list tags */
body[style*="--accent: #E9DAAC"] .article-list-tag-more,
body[style*="--background-color: #111216"] .article-list-tag-more {
    background: #f8f9fa !important;
    color: #1a1a1a !important;
}

/* Responsive tags */
@media screen and (max-width: 768px) {
    .article-tags {
        margin-top: 0.75rem;
        margin-left: 1rem;
        gap: 0.4rem;
    }
    
    .article-tag {
        padding: 0.3rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .article-list-tags {
        margin-top: 0.5rem;
        gap: 0.25rem;
    }
    
    .article-list-tag,
    .article-list-tag-more {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
    }
}

/* Responsive portfolio grid */
@media screen and (max-width: 768px) {
    .portfolio-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .portfolio-logo {
        width: 60px;
        height: 60px;
    }
    
    .portfolio-grid {
        gap: 2rem;
    }
    
    .portfolio-item {
        padding: 1.5rem;
    }
}

/* About page section spacing */
.post-content {
    padding-top: 0rem !important;
}

.post-content h2 {
    margin-top: 3rem !important;
    margin-bottom: 1.5rem !important;
    padding-top: 1rem !important;
}

.post-content h3 {
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
}

.post-content hr {
    margin: 2rem 0 !important;
}

.post-content ul {
    margin-top: 1rem !important;
    margin-bottom: 2rem !important;
}

.post-content p {
    margin-bottom: 1.5rem !important;
}

/* Align images in post content to match code snippet alignment (750px max-width, centered) */
.post-content img:not(.article-hero-image img):not(.article-image):not(.author-avatar img):not(.article-author-avatar img),
.post-content p img,
#articleContent img:not(.article-hero-image img):not(.article-image):not(.author-avatar img):not(.article-author-avatar img) {
    max-width: 750px !important;
    margin: 0 auto 35px !important;
    display: block !important;
    width: auto !important;
    text-align: center !important;
}

/* Responsive behavior for smaller screens */
@media screen and (max-width: 750px) {
    .post-content img:not(.article-hero-image img):not(.article-image):not(.author-avatar img):not(.article-author-avatar img),
    .post-content p img,
    #articleContent img:not(.article-hero-image img):not(.article-image):not(.author-avatar img):not(.article-author-avatar img) {
        max-width: calc(100% - 40px) !important;
        margin: 0 auto 35px !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
}