/* Portfolio Website Styles */
/* This file will contain all the styling for the portfolio website */

/* Reset and base styles */
html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', Arial, sans-serif;
    background: #fff;
    color: #000;
    scroll-behavior: smooth;
}

.container {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    margin: 48px 0 32px 0;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 32px;
    color: #000;
    text-transform: uppercase;
    padding-left: 0;
    border: none;
}

/* Hero/Profile */
.hero {
    padding-top: 32px;
    padding-bottom: 24px;
    background: #fff;
    border-bottom: 2px solid #000;
    text-align: center;
}
.profile {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profile-image {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #000;
    margin-bottom: 18px;
}
.name {
    font-size: 2.4rem;
    font-weight: 900;
    margin: 0 0 8px 0;
    color: #000;
}
.title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
    margin: 0 0 12px 0;
    letter-spacing: 1px;
}
.bio {
    font-size: 1.1rem;
    font-weight: 400;
    color: #000;
    margin-bottom: 18px;
    max-width: 500px;
}
.social-links {
    display: flex;
    gap: 24px;
    margin-top: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #000;
    font-weight: 900;
    text-decoration: none;
    transition: none;
    padding: 0;
    margin: 0 6px 6px 0;
    line-height: 1.2;
}
.social-links a:hover {
    text-decoration: underline;
    color: #000;
}
.social-links svg {
    display: inline-block;
    vertical-align: middle;
    width: 28px;
    height: 28px;
    margin: 0;
}
.social-links span {
    font-weight: 900;
    font-size: 1.08rem;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}

/* Projects */
.projects-grid, .posts-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.project-card, .post-card, .entry-card {
    background: #fff;
    border-radius: 0;
    border: 2px solid #000;
    padding: 24px 18px 16px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: none;
    margin-bottom: 16px;
    position: relative;
}
.project-title, .post-title, .entry-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #000;
    margin: 0 0 8px 0;
    text-transform: uppercase;
}
.project-description, .post-excerpt, .entry-excerpt {
    font-size: 1.08rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}
.entry-content {
    font-size: 1.08rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
}
.project-tech, .entry-tech {
    margin-bottom: 8px;
}
.tech-tag {
    display: inline-block;
    background: #fff;
    color: #000;
    font-size: 0.95rem;
    font-weight: 900;
    border-radius: 0;
    border: 1px solid #000;
    padding: 2px 10px;
    margin-right: 6px;
    margin-bottom: 3px;
}
.project-links, .post-meta, .entry-meta {
    margin-top: 6px;
    font-size: 0.97rem;
    color: #000;
    margin-bottom: 4px;
}
.entry-date, .entry-read-time {
    font-weight: 700;
    margin-right: 16px;
}
.entry-links {
    margin-top: 6px;
}
.project-link, .post-link {
    color: #000;
    font-weight: 900;
    text-decoration: underline;
    margin-right: 16px;
    transition: none;
}
.project-link:hover, .post-link:hover {
    color: #000;
}
.post-meta {
    font-size: 0.97rem;
    color: #000;
    margin-bottom: 4px;
}

/* Resume Form */
.form-container {
    background: #fff;
    padding: 18px 12px 32px 12px;
    border-radius: 0;
    border: 2px solid #000;
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}
.form-container input[type="email"], .form-container input[type="text"] {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #000;
    border-radius: 0;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: #000;
    font-weight: 700;
}
.form-container button {
    background: #000;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: none;
}
.form-container button:hover {
    background: #222;
}
.message {
    margin-top: 12px;
    padding: 8px;
    border-radius: 0;
    font-weight: 900;
    color: #000;
    background: #fff;
    border: 2px solid #000;
}
.success {
    background: #fff;
    color: #000;
}
.error {
    background: #fff;
    color: #000;
}

/* Fixed Navigation */
.fixed-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-top: 2px solid #000;
    z-index: 100;
    padding: 0.5rem 0;
}
.fixed-nav .container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-links {
    display: flex;
    gap: 32px;
}
.nav-link {
    color: #000;
    font-weight: 900;
    text-decoration: underline;
    font-size: 1.08rem;
    letter-spacing: 1px;
    padding: 8px 0;
    transition: none;
}
.nav-link:hover {
    color: #000;
    background: #000;
    color: #fff;
}
.nav-link.top-link {
    border: 2px solid #000;
    background: #fff;
    color: #000;
    padding: 8px 18px;
    border-radius: 0;
    font-weight: 900;
    text-transform: uppercase;
}
.nav-link.top-link:hover {
    background: #000;
    color: #fff;
}
.fixed-nav.scrolled {
    border-top: 4px solid #000;
}

/* Responsive */
@media (max-width: 600px) {
    .container {
        padding: 0 0.5rem;
    }
    .section-title {
        font-size: 1.3rem;
        padding-left: 8px;
    }
    .profile-image {
        width: 90px;
        height: 90px;
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
    .form-container input[type="email"] {
        width: 100%;
    }
}

.share-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: #000;
    cursor: pointer;
    z-index: 2;
    transition: background 0.1s;
    outline: none;
}
.share-btn:hover, .share-btn:focus {
    background: #000;
    color: #fff;
}
.share-menu {
    position: absolute !important;
    background: #fff;
    border: 2px solid #000;
    padding: 8px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 4px;
    right: 12px;
    top: 48px;
    min-width: 120px;
}
.share-menu button {
    background: #fff;
    color: #000;
    border: none;
    font-weight: 700;
    text-align: left;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 0;
    font-size: 1rem;
    transition: background 0.1s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.share-menu button:hover, .share-menu button:focus {
    background: #000;
    color: #fff;
}
.share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: 0;
}

.section#resume {
    padding-bottom: 80px;
}

/* Markdown Content Styling */
.bio, .entry-excerpt, .entry-content {
    line-height: 1.6;
}

.bio p, .entry-excerpt p, .entry-content p {
    margin-bottom: 12px;
    margin-top: 0;
}

.bio h1, .bio h2, .bio h3, .bio h4, .bio h5, .bio h6,
.entry-excerpt h1, .entry-excerpt h2, .entry-excerpt h3, .entry-excerpt h4, .entry-excerpt h5, .entry-excerpt h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    font-weight: 900;
    margin-top: 24px;
    margin-bottom: 12px;
    color: #000;
}

.bio h1, .entry-excerpt h1, .entry-content h1 { font-size: 1.8rem; }
.bio h2, .entry-excerpt h2, .entry-content h2 { font-size: 1.6rem; }
.bio h3, .entry-excerpt h3, .entry-content h3 { font-size: 1.4rem; }
.bio h4, .entry-excerpt h4, .entry-content h4 { font-size: 1.2rem; }
.bio h5, .entry-excerpt h5, .entry-content h5 { font-size: 1.1rem; }
.bio h6, .entry-excerpt h6, .entry-content h6 { font-size: 1rem; }

.bio code, .entry-excerpt code, .entry-content code {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    font-weight: 700;
}

.bio pre, .entry-excerpt pre, .entry-content pre {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
    overflow-x: auto;
    margin: 16px 0;
}

.bio pre code, .entry-excerpt pre code, .entry-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9em;
    line-height: 1.4;
}

.bio a, .entry-excerpt a, .entry-content a {
    color: #000;
    text-decoration: underline;
    font-weight: 700;
}

.bio a:hover, .entry-excerpt a:hover, .entry-content a:hover {
    color: #000;
    text-decoration: none;
}

.bio ul, .bio ol, .entry-excerpt ul, .entry-excerpt ol, .entry-content ul, .entry-content ol {
    margin: 12px 0;
    padding-left: 24px;
}

.bio li, .entry-excerpt li, .entry-content li {
    margin-bottom: 6px;
    font-weight: 700;
}

.bio blockquote, .entry-excerpt blockquote, .entry-content blockquote {
    border-left: 4px solid #000;
    margin: 16px 0;
    padding-left: 16px;
    font-style: italic;
    font-weight: 700;
}

.bio strong, .entry-excerpt strong, .entry-content strong {
    font-weight: 900;
}

.bio em, .entry-excerpt em, .entry-content em {
    font-style: italic;
    font-weight: 700;
}

.bio del, .entry-excerpt del, .entry-content del,
.bio s, .entry-excerpt s, .entry-content s {
    text-decoration: line-through;
    font-weight: 700;
}

.bio u, .entry-excerpt u, .entry-content u {
    text-decoration: underline;
    font-weight: 700;
}

.bio mark, .entry-excerpt mark, .entry-content mark {
    background-color: #ffff00;
    font-weight: 700;
}

.bio table, .entry-excerpt table, .entry-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 16px 0;
}

.bio th, .entry-excerpt th, .entry-content th,
.bio td, .entry-excerpt td, .entry-content td {
    border: 1px solid #000;
    padding: 8px 12px;
    text-align: left;
    font-weight: 700;
}

.bio th, .entry-excerpt th, .entry-content th {
    background: #000;
    color: #fff;
    font-weight: 900;
}