/* Custom styles for dark mode and layout adjustments */

/* ========================================
   ACCESSIBILITY FIXES
   ======================================== */

/* Fix link color contrast - darken orange for better readability */
a,
.resume-section-title,
.text-link {
    color: #b84d00 !important; /* Darker orange (4.59:1 contrast) */
}

a:hover,
.text-link:hover {
    color: #933d00 !important; /* Even darker on hover */
}

/* Fix social link contrast on orange background */
.resume-header {
    background-color: #c75400 !important; /* Slightly lighter base */
}

.resume-header .text-link {
    color: #ffffff !important; /* Pure white (4.51:1 contrast) */
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for readability */
}

/* Improve color contrast for better readability */
.text-muted,
.resume-position-time,
.project-meta {
    color: #5a5a5a !important; /* Darker gray for better contrast (4.54:1) */
}

.resume-award-desc {
    color: #4a4a4a !important; /* Even darker for small text (5.74:1) */
}

@media (prefers-color-scheme: dark) {
    /* Keep original orange in dark mode (good contrast on dark bg) */
    a,
    .resume-section-title,
    .text-link {
        color: #ff8c42 !important; /* Original bright orange */
    }
    
    .resume-header {
        background-color: #db6109 !important;
    }
    
    .resume-header .text-link {
        color: #ffffff !important;
    }
    
    .text-muted,
    .resume-position-time,
    .project-meta {
        color: #b0b0b0 !important; /* Lighter in dark mode (8.59:1) */
    }
    
    .resume-award-desc {
        color: #c0c0c0 !important; /* Even lighter for readability (10.05:1) */
    }
}

/* ========================================
   DARK MODE
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #1a1a1a;
        --bg-card: #2d2d2d;
        --text-primary: #e4e4e4;
        --text-secondary: #b4b4b4;
        --text-muted: #888;
        --border-color: #444;
        --link-color: #ff8c42;
        --link-hover: #ffa666;
        --header-bg: #242424;
        --badge-bg: #3d3d3d;
        --badge-text: #e4e4e4;
    }

    body {
        background-color: var(--bg-main);
        color: var(--text-primary);
    }

    .resume-wrapper-inner {
        background-color: var(--bg-card) !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5) !important;
    }

    .resume-header {
        background-color: var(--header-bg) !important;
    }

    .resume-section-title {
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    .resume-section-content,
    .resume-timeline-item-desc,
    .resume-award-desc {
        color: var(--text-secondary) !important;
    }

    .text-muted,
    .resume-position-time {
        color: var(--text-muted) !important;
    }

    a {
        color: var(--link-color) !important;
    }

    a:hover {
        color: var(--link-hover) !important;
    }

    .tabs {
        border-bottom-color: var(--border-color);
    }

    .tab > label {
        background: var(--bg-card);
        border-color: var(--border-color);
        color: var(--text-secondary);
    }

    .tab:hover label {
        border-top-color: var(--link-color);
        color: var(--link-color);
    }

    .tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
    .tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label {
        border-bottom-color: var(--bg-card);
        border-top-color: var(--link-color);
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .badge {
        background-color: var(--badge-bg) !important;
        color: var(--badge-text) !important;
    }

    .resume-social .text-link,
    .secondary-info .text-link {
        color: var(--text-secondary) !important;
    }

    .resume-social .text-link:hover,
    .secondary-info .text-link:hover {
        color: var(--link-hover) !important;
    }

    .footer {
        background-color: var(--header-bg);
        color: var(--text-muted);
    }

    .tabbed {
        border-bottom-color: var(--border-color);
    }
}

/* ========================================
   PROJECT CARDS (remove timeline look)
   ======================================== */

.projects-grid {
    display: grid;
    gap: 1.5rem;
    /* Single column on mobile, 2 columns on desktop */
    grid-template-columns: 1fr;
}

@media (min-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.project-card {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.25rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

@media (prefers-color-scheme: dark) {
    .project-card {
        background: rgba(255, 255, 255, 0.03);
        border-color: var(--border-color);
    }
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
    .project-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

.project-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.project-meta {
    font-size: 0.875rem;
    color: #666;
    font-weight: 500;
}

@media (prefers-color-scheme: dark) {
    .project-meta {
        color: var(--text-muted);
    }
}

.project-description {
    margin-bottom: 0.75rem;
}

.project-links {
    margin-top: 0.5rem;
}

.project-links ul {
    margin-bottom: 0;
}

.project-tech {
    margin-top: 0.75rem;
}

.project-tech .badge {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Remove old timeline styles */
.resume-timeline {
    border-left: none;
}

.resume-timeline-item {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
}

.resume-timeline-item::before {
    display: none;
}

/* ========================================
   MOBILE LAYOUT - Blog before Projects
   ======================================== */

@media (max-width: 991.98px) {
    /* On mobile, we'll reorder using flexbox */
    .content-wrapper {
        display: flex;
        flex-direction: column;
    }
    
    .col-lg-9.projects-section {
        order: 2; /* Projects second */
    }
    
    .col-lg-3.sidebar-section {
        order: 1; /* Blog first */
        margin-bottom: 2rem;
    }
    
    .favorites-sidebar {
        order: 3; /* Favorites after projects on mobile */
    }
    
    /* Social links 2 columns on mobile */
    .resume-social {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    /* Project card header stack on mobile */
    .project-card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
    
    /* Center name and title on mobile */
    .resume-header .primary-info {
        text-align: center !important;
    }
    
    /* Reduce mobile side padding (60% of default) */
    .resume-body {
        padding-left: 1.875rem !important; /* 60% of 3rem (p-5) */
        padding-right: 1.875rem !important;
    }
}

@media (min-width: 992px) {
    /* Desktop keeps original order (projects left, blog right sidebar) */
    .content-wrapper {
        display: flex;
        flex-direction: row;
    }
    
    /* Limit about-me width on desktop so blog sidebar can come up */
    .summary-section {
        max-width: 100%;
    }
}