/* ============================================================
   Personal Site — GitHub Home Page Clone
   GitHub dark theme styles
   ============================================================ */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* GitHub dark color palette */
    --bg-canvas:        #0d1117;
    --bg-overlay:       #161b22;
    --bg-inset:         #010409;
    --bg-subtle:        #161b22;
    --border-default:   #3d444d;
    --border-muted:     #3d444d;
    --fg-default:       #f0f6fc;
    --fg-muted:         #c9d1d9;
    --fg-subtle:        #8b949e;
    --accent-fg:        #58a6ff;
    --accent-emphasis:  #1f6feb;
    --success-fg:       #3fb950;
    --attention-fg:     #d29922;
    --danger-fg:        #f85149;
    --done-fg:          #a371f7;
    --pink-fg:          #db61a2;
    --btn-bg:           #21262d;
    --btn-hover-bg:     #30363d;
    --color-calendar-graph-day-bg: #161b22;
    --color-calendar-graph-day-L1-bg: #0e4429;
    --color-calendar-graph-day-L2-bg: #006d32;
    --color-calendar-graph-day-L3-bg: #26a641;
    --color-calendar-graph-day-L4-bg: #39d353;
}

html { -webkit-text-size-adjust: 100%; }

body {
    background-color: var(--bg-canvas);
    color: var(--fg-muted);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent-fg); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ============================================================
   TOP NAVIGATION
   ============================================================ */
.topnav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: var(--bg-inset);
    border-bottom: 1px solid var(--border-default);
}

.topnav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background-color 0.15s;
}
.icon-btn:hover { background-color: var(--bg-overlay); }
.icon-btn:focus-visible { outline: 2px solid var(--accent-emphasis); outline-offset: -2px; }

.hamburger { display: none; }

.logo { padding: 6px; }

.search-wrap {
    position: relative;
    flex: 1;
    max-width: 320px;
    display: none;
}
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
}
.search-input {
    width: 100%;
    height: 32px;
    padding: 0 12px 0 36px;
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    color: var(--fg-muted);
    font-size: 14px;
    font-family: inherit;
}
.search-input::placeholder { color: #6e7681; }
.search-input:focus {
    outline: none;
    border-color: var(--accent-emphasis);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.3);
}

.nav-links {
    display: none;
    align-items: center;
    gap: 4px;
}
.nav-links a {
    padding: 6px 10px;
    color: var(--fg-muted);
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.nav-links a:hover { color: var(--accent-fg); text-decoration: none; }

.topnav-spacer { flex: 1; }

.topnav-right {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.plus-btn { padding: 6px 8px; }

.bell { position: relative; }
.bell-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: var(--accent-emphasis);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-inset);
}

.avatar-link {
    margin-left: 4px;
    border: 2px solid var(--border-default);
    border-radius: 50%;
    overflow: hidden;
    transition: border-color 0.15s;
    display: block;
}
.avatar-link:hover { border-color: var(--accent-fg); text-decoration: none; }
.topnav-avatar {
    width: 28px;
    height: 28px;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
}

/* ============================================================
   PROFILE TABS
   ============================================================ */
.profile-tabs {
    border-bottom: 1px solid var(--border-default);
    background-color: var(--bg-canvas);
}
.profile-tabs-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
}
.tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: var(--fg-subtle);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--fg-muted); border-bottom-color: var(--border-default); text-decoration: none; }
.tab.active {
    color: var(--fg-default);
    font-weight: 600;
    border-bottom-color: #fd8c73;
}
.tab-count {
    padding: 1px 6px;
    font-size: 12px;
    border-radius: 20px;
    background-color: var(--bg-overlay);
    color: var(--fg-subtle);
    border: 1px solid var(--border-default);
}

/* ============================================================
   MAIN CONTAINER & GRID
   ============================================================ */
.container {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px;
}
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

/* ============================================================
   LEFT SIDEBAR
   ============================================================ */
.sidebar {
    position: relative;
}
@media (min-width: 1024px) {
    .sidebar {
        position: sticky;
        top: 88px;
        align-self: start;
    }
}

.avatar-wrap {
    position: relative;
    display: inline-block;
}
.profile-avatar {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05) brightness(1.02);
}
.status-emoji {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.profile-name {
    margin-top: 16px;
    color: var(--fg-default);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}
.profile-handle {
    color: var(--fg-muted);
    font-size: 20px;
    font-weight: 300;
    line-height: 1.25;
}
.profile-bio {
    margin-top: 12px;
    color: var(--fg-muted);
    font-size: 14px;
    line-height: 1.5;
}

.follow-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 6px 12px;
    background-color: var(--btn-bg);
    color: var(--fg-muted);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s;
}
.follow-btn:hover { background-color: var(--btn-hover-bg); text-decoration: none; }

.follow-stats {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    flex-wrap: wrap;
}
.follow-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-muted);
    text-decoration: none;
}
.follow-stat:hover { text-decoration: none; }
.follow-stat:hover strong { color: var(--accent-fg); }
.follow-stat strong { color: var(--fg-muted); font-weight: 600; }
.muted { color: var(--fg-subtle); }

.profile-meta {
    list-style: none;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: var(--fg-muted);
}
.profile-meta li {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-meta a { color: var(--accent-fg); word-break: break-all; }

.achievements {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-default);
}
.achievements h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.achievement-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.achievement {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.badge-purple { background: linear-gradient(135deg, #9b59b6, #3498db); }
.badge-orange { background: linear-gradient(135deg, #f39c12, #e74c3c); }
.badge-green  { background: linear-gradient(135deg, #27ae60, #16a085); }

/* ============================================================
   RIGHT COLUMN
   ============================================================ */
.right-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

/* ---------- Generic card ---------- */
.card {
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow: hidden;
}
.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-default);
    background-color: var(--bg-overlay);
}
.card-title { font-size: 14px; font-weight: 600; color: var(--fg-muted); }
.edit-link {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent-fg);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   README CARD
   ============================================================ */
.readme-body { padding: 24px; }

.hero-title {
    color: var(--fg-default);
    font-size: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wave {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
    transform-origin: 70% 70%;
}
@keyframes wave {
    0%, 60%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(14deg); }
    20% { transform: rotate(-8deg); }
    30% { transform: rotate(14deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(10deg); }
}
.hero-sub { margin-top: 12px; color: var(--fg-muted); font-size: 16px; }
.hero-text { margin-top: 8px; color: var(--fg-subtle); font-size: 14px; line-height: 1.6; }

.readme-body hr {
    border: none;
    border-top: 1px solid var(--border-default);
    margin: 20px 0;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-muted);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.readme-body p {
    color: var(--fg-muted);
    font-size: 14px;
    line-height: 1.7;
}
.readme-body .mb-3 { margin-bottom: 12px; }

.subsection-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--fg-subtle);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    margin-top: 16px;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.tech-grid.three-col { grid-template-columns: repeat(3, 1fr); }

.tech-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    color: var(--fg-muted);
    font-size: 14px;
}

.projects-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    color: var(--fg-muted);
    font-size: 14px;
}
.projects-list li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.projects-list .arrow { color: var(--success-fg); }

.italic-note {
    margin-top: 12px;
    color: var(--fg-subtle);
    font-style: italic;
    font-size: 13px;
}

.connect-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.connect-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: var(--bg-overlay);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    color: var(--fg-muted);
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.15s;
}
.connect-pill:hover { border-color: var(--accent-fg); text-decoration: none; }

.footer-quote {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-subtle);
    font-size: 14px;
    font-style: italic;
}

/* ============================================================
   PINNED REPOSITORIES
   ============================================================ */
.pinned-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.pinned-header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-muted);
    font-size: 16px;
    font-weight: 600;
}
.customize-link { font-size: 12px; color: var(--accent-fg); }

.repos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.repo-card {
    padding: 16px;
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s;
}
.repo-card:hover { border-color: #6e7681; }

.repo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}
.repo-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-fg);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
}
.repo-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.repo-link:hover { text-decoration: underline; }

.repo-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 20px;
    border: 1px solid var(--border-default);
    color: var(--fg-subtle);
    flex-shrink: 0;
}

.repo-desc {
    margin-top: 8px;
    font-size: 12px;
    color: var(--fg-subtle);
    line-height: 1.6;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.repo-footer {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    color: var(--fg-subtle);
}
.repo-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lang-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}
.repo-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fg-subtle);
    text-decoration: none;
}
.repo-stat:hover { color: var(--accent-fg); text-decoration: none; }

/* ============================================================
   CONTRIBUTION HEATMAP
   ============================================================ */
.contrib-title {
    color: var(--fg-muted);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

.contrib-graph-wrap {
    padding: 16px;
    background-color: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    overflow-x: auto;
}

.contrib-grid {
    display: flex;
    gap: 4px;
    min-width: max-content;
}

.day-labels {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 18px;
    margin-right: 4px;
    width: 32px;
}
.day-label {
    height: 11px;
    line-height: 11px;
    font-size: 10px;
    color: var(--fg-subtle);
}

.weeks-wrap { display: flex; flex-direction: column; }

.month-labels {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
    height: 14px;
}
.month-cell {
    width: 11px;
    font-size: 10px;
    color: var(--fg-subtle);
    white-space: nowrap;
}

.weeks {
    display: flex;
    gap: 3px;
}
.week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.contrib-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    transition: box-shadow 0.1s;
}
.contrib-cell:hover {
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.5);
    cursor: pointer;
}

.contrib-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    font-size: 10px;
    color: var(--fg-subtle);
}
.legend-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
}

.contrib-summary {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    font-size: 12px;
}
@media (min-width: 640px) {
    .contrib-summary { grid-template-columns: repeat(3, 1fr); }
}
.contrib-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fg-subtle);
}
.contrib-stat strong { color: var(--fg-muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    margin-top: 48px;
    padding-top: 24px;
    padding-bottom: 32px;
    border-top: 1px solid var(--border-default);
    background-color: var(--bg-canvas);
}
.footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
    color: var(--fg-subtle);
}
@media (min-width: 640px) {
    .footer-inner { flex-direction: row; }
}
.footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.footer-links a {
    color: var(--fg-subtle);
    text-decoration: none;
}
.footer-links a:hover { color: var(--accent-fg); }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet & up — show search */
@media (min-width: 640px) {
    .search-wrap { display: block; }
}

/* Desktop — two-column layout, show nav links */
@media (min-width: 1024px) {
    .grid { grid-template-columns: 296px 1fr; }
    .nav-links { display: flex; }
    .repos-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile only — show hamburger */
@media (max-width: 1023px) {
    .hamburger { display: inline-flex; }
    .nav-links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: var(--bg-inset);
        border-bottom: 1px solid var(--border-default);
        padding: 8px 16px;
        z-index: 40;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 12px 8px; border-bottom: 1px solid var(--border-muted); }
    .nav-links a:last-child { border-bottom: none; }
}

/* Small phones — make some grids single column */
@media (max-width: 480px) {
    .tech-grid,
    .tech-grid.three-col,
    .connect-grid { grid-template-columns: 1fr; }
    .projects-list { grid-template-columns: 1fr; }
}

/* ---------- Custom scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-canvas); }
::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 5px;
    border: 2px solid var(--bg-canvas);
}
::-webkit-scrollbar-thumb:hover { background: #6e7681; }

/* ---------- Print friendly ---------- */
@media print {
    .topnav, .profile-tabs, .footer { display: none; }
    body { background: white; color: black; }
}