/* ============================================
   Google Fonts Import
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

/**
 * Personal Website Styles - Dark Monokai Theme
 *
 * Color Palette (Authentic Monokai from Sublime Text):
 * - Red #F92672 - Keywords, high-impact items
 * - Yellow #E7DB74 - Strings, featured content
 * - Orange #FD9621 - Functions, medium-high impact
 * - Green #A6E22C - Classes, success states
 * - Blue/Cyan #67D8EF - Links, parameters
 * - Purple #AC80FF - Constants, special accents
 * - Brown #75715E - Comments, secondary text
 * - Background: #191A16 (dark black)
 * - Foreground: #F8F8F2 (off-white)
 *
 * Typography:
 * - Inter: Modern sans-serif for body text and headings
 * - JetBrains Mono: Developer-focused monospace for code and technical content
 */

/* ============================================
   CSS Custom Properties (Monokai Palette)
   ============================================ */
:root {
    /* Authentic Monokai accent colors */
    --color-red: #F92672;              /* Keywords, high-impact */
    --color-yellow: #E7DB74;           /* Strings, featured */
    --color-orange: #FD9621;           /* Functions, medium-high */
    --color-green: #A6E22C;            /* Classes, success */
    --color-cyan: #67D8EF;             /* Links, parameters */
    --color-purple: #AC80FF;           /* Constants, special */
    --color-brown: #75715E;            /* Comments, secondary */

    --color-primary: var(--color-orange);  /* Main accent */

    /* Background colors - Dark Monokai */
    --color-bg: #191A16;               /* Main dark background */
    --color-bg-lighter: #272822;       /* Slightly lighter bg */
    --color-bg-light: #2E2F2A;         /* Light sections */
    --color-bg-highlight: #3E3D32;     /* Highlighted areas */
    --color-bg-selection: #49483E;     /* Selection/hover */

    /* Text colors */
    --color-text: #F8F8F2;             /* Primary text (off-white) */
    --color-text-dim: #CFCFC2;         /* Dimmed text */
    --color-text-muted: #75715E;       /* Muted/comments */
    --color-text-dark: #464741;        /* Very dim text */

    /* Border colors */
    --color-border: #3E3D32;
    --color-border-medium: #49483E;
    --color-border-light: #5A5A50;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;

    /* Font sizes - Standardized for readability */
    --font-size-base: 12pt;     /* ~16px - standard web size */
    --font-size-small: 11pt;    /* ~14.5px */
    --font-size-tiny: 10pt;     /* ~13px */
    --font-size-h1: 20pt;       /* ~27px */
    --font-size-h2: 15pt;       /* ~20px */
    --font-size-h3: 13pt;       /* ~17px */

    /* Spacing */
    --border-radius: 3px;
}

/* ============================================
   Base Styles
   ============================================ */
body {
    margin: 0;
    padding: 20px;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    max-width: 850px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   Typography
   ============================================ */
h1 {
    font-size: var(--font-size-h1);
    font-weight: normal;
    margin: 20px 0;
    font-family: var(--font-primary);
    color: var(--color-green);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: normal;
    margin-top: 40px;
    margin-bottom: 15px;
    font-family: var(--font-primary);
    color: var(--color-yellow);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: normal;
    margin-top: 25px;
    margin-bottom: 10px;
    font-family: var(--font-primary);
    color: var(--color-cyan);
}

/* ============================================
   Links
   ============================================ */
a {
    color: var(--color-cyan);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: var(--color-purple);
}

a:visited {
    color: var(--color-purple);
}

/* ============================================
   Navigation Box
   ============================================ */
.nav-box {
    background: var(--color-bg-lighter);
    border: 2px solid var(--color-orange);
    border-radius: var(--border-radius);
    padding: 15px;
    margin-bottom: 30px;
    font-family: var(--font-mono);
}

.nav-box-header {
    color: var(--color-red);
    font-weight: bold;
    margin-bottom: 10px;
    font-size: var(--font-size-base);
    text-transform: uppercase;
}

.nav-box-links {
    font-size: var(--font-size-small);
    line-height: 1.8;
}

.nav-box-links a {
    color: var(--color-yellow);
    text-decoration: none;
    font-weight: bold;
}

.nav-box-links a:hover {
    text-decoration: underline;
    color: var(--color-orange);
}

.nav-box-social {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-small);
}

.nav-box-social a {
    color: var(--color-cyan);
}

.nav-box-social a:hover {
    color: var(--color-purple);
}

/* ============================================
   Header & Profile
   ============================================ */
.header {
    margin-bottom: 40px;
}

.headshot {
    width: 120px;
    height: 120px;
    border-radius: 0;
    object-fit: cover;
    margin: 0 0 20px 0;
    display: block;
    border: 2px solid var(--color-orange);
}

.credentials {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    margin: 5px 0;
    line-height: 1.5;
}

.tagline {
    font-size: var(--font-size-base);
    margin: 15px 0;
    color: var(--color-text);
    line-height: 1.5;
}

/* ============================================
   Content Sections
   ============================================ */
.section {
    margin: 30px 0;
}

.main-content {
    max-width: 850px;
    margin: 0 auto;
}

/* ============================================
   Content Boxes
   ============================================ */
.content-box {
    background: var(--color-bg-lighter);
    border-left: 3px solid var(--color-green);
    padding: 20px;
    margin: 20px 0;
    border-radius: var(--border-radius);
}

.content-box p {
    margin: 0;
}

.featured-box {
    background: var(--color-bg-lighter);
    border: 2px solid var(--color-purple);
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 20px 0;
}

.featured-box h3 {
    margin-top: 0;
    color: var(--color-purple);
    font-size: var(--font-size-h2);
}

.teaser-box {
    background: var(--color-bg-lighter);
    border: 2px solid var(--color-orange);
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 20px 0;
}

.teaser-box h3 {
    margin-top: 0;
    color: var(--color-orange);
    font-size: var(--font-size-h2);
}

.teaser-content {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 15px 0;
}

.teaser-link {
    margin-top: 15px;
}

.teaser-link a {
    color: var(--color-cyan);
    font-weight: bold;
    text-decoration: none;
}

.teaser-link a:hover {
    color: var(--color-purple);
}

.featured-menu {
    background-color: var(--color-bg-light);
    padding: 15px;
    border-left: 4px solid var(--color-yellow);
    margin-bottom: 25px;
    border-radius: var(--border-radius);
}

.featured-menu p {
    margin: 0;
    font-size: var(--font-size-base);
}

/* ============================================
   Publications
   ============================================ */
.publication-item {
    margin-bottom: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    line-height: 1.6;
}

.publication-item:hover {
    background-color: var(--color-bg-highlight);
}

.publication-item:last-child {
    border-bottom: none;
}

.publication-item p {
    margin: 8px 0;
    line-height: 1.5;
}

.publication-featured {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-medium);
}

.publication-featured:last-child {
    border-bottom: none;
}

.publication-title {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    line-height: 1.6;
    font-weight: bold;
    color: var(--color-text);
    margin: 0 0 4px 0;
}

.publication-title a {
    color: var(--color-green);
    font-weight: bold;
}

.publication-title a:hover {
    color: var(--color-yellow);
}

.publication-authors {
    font-family: var(--font-mono);
    font-size: var(--font-size-tiny);
    color: var(--color-text-muted);
    margin: 0 0 4px 0;
    line-height: 1.6;
}

.publication-meta {
    font-family: var(--font-mono);
    font-size: var(--font-size-tiny);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.publication-venue {
    color: var(--color-cyan);
    font-weight: normal;
}

.publication-year {
    color: var(--color-text-muted);
    font-weight: normal;
}

.publication-citation {
    font-family: var(--font-mono);
    font-size: var(--font-size-tiny);
}

/* Citation badges with vibrant Monokai colors based on impact */
.citation-badge {
    font-weight: bold;
}

.citation-very-high {
    color: var(--color-red);  /* Red for very high impact */
}

.citation-high {
    color: var(--color-orange);  /* Orange for high impact */
}

.citation-good {
    color: var(--color-yellow);  /* Yellow for good impact */
}

.citation-medium {
    color: var(--color-cyan);  /* Cyan for medium impact */
}

.citation-low-medium {
    color: var(--color-purple);  /* Purple for low-medium impact */
}

.citation-low {
    color: var(--color-text-muted);  /* Brown for low impact */
}

/* ============================================
   Filters & Controls
   ============================================ */
.filter-controls {
    background: var(--color-bg-lighter);
    padding: 15px;
    margin: 20px 0;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-medium);
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-bottom: 10px;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: var(--font-size-small);
    color: var(--color-purple);
    white-space: nowrap;
    font-weight: bold;
}

.filter-group select,
.filter-group input {
    padding: 4px 8px;
    font-size: var(--font-size-small);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
    font-family: var(--font-primary);
    background: var(--color-bg);
    color: var(--color-text);
}

.filter-group button {
    padding: 4px 12px;
    font-size: var(--font-size-small);
    border: 1px solid var(--color-orange);
    background: var(--color-bg);
    color: var(--color-orange);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: bold;
}

.filter-group button:hover {
    background: var(--color-orange);
    color: var(--color-bg);
}

/* ============================================
   Statistics & Metrics
   ============================================ */
.stats-summary {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    margin: 20px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border-medium);
}

.stats {
    background-color: var(--color-bg-lighter);
    padding: 20px;
    border-radius: 5px;
    margin: 30px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
}

@media (max-width: 650px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Explore Sidebar Layout
   ============================================ */
.explore-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 768px) {
    .explore-sidebar {
        grid-template-columns: 1fr;
    }
}

.stats-col h3 {
    font-size: var(--font-size-h3);
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--color-cyan);
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-small);
}

.stats-table th {
    text-align: left;
    padding: 5px 10px;
    background-color: var(--color-bg-highlight);
    font-weight: normal;
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-yellow);
}

.stats-table td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--color-border);
}

.stats-table tr:last-child td {
    border-bottom: none;
}

.top-paper {
    margin: 10px 0;
    font-size: var(--font-size-small);
    line-height: 1.4;
}

.top-paper strong {
    color: var(--color-green);
}

.stats-text {
    font-size: var(--font-size-base);
    margin: 20px 0;
    color: var(--color-text-dim);
}

.metric-box {
    background: var(--color-bg-lighter);
    border: 1px solid var(--color-border-light);
    padding: 15px;
    margin: 15px 0;
    border-radius: var(--border-radius);
}

.metric-box h3 {
    margin-top: 0;
    color: var(--color-orange);
}

/* ============================================
   ASCII Art & Monospace Content
   ============================================ */
pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-tiny);
    line-height: 1.5;
    margin: 10px 0;
    background: var(--color-bg-lighter);
    padding: 10px;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius);
    overflow-x: auto;
    color: var(--color-green);
}

.ascii-header {
    font-family: var(--font-mono);
    color: var(--color-red);
    font-weight: bold;
    margin-bottom: 10px;
    font-size: var(--font-size-base);
}

.ascii-section-header,
.ascii-section-header-first,
.ascii-section-header-spaced {
    font-family: var(--font-mono);
    color: var(--color-purple);
    font-weight: normal;
    margin: 5px 0;
    font-size: var(--font-size-small);
}

.ascii-section-header-spaced {
    margin-top: 30px;
}

/* ============================================
   Timeline
   ============================================ */
.timeline-item {
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: var(--font-size-tiny);
}

.timeline-year {
    color: var(--color-cyan);
}

.timeline-event {
    padding-left: 20px;
    color: var(--color-text);
    font-size: var(--font-size-small);
}

.timeline-note {
    color: var(--color-text-muted);
    font-style: italic;
}

/* ============================================
   Coauthors
   ============================================ */
.coauthor-list {
    column-count: 3;
    column-gap: 30px;
    margin: 20px 0;
}

@media (max-width: 650px) {
    .coauthor-list {
        column-count: 1;
    }
}

.coauthor-item {
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 5px 0;
    font-size: var(--font-size-small);
    line-height: 1.6;
}

.coauthor-name {
    font-weight: normal;
    color: var(--color-green);
}

.collab-count {
    color: var(--color-yellow);
    font-weight: bold;
}

/* ============================================
   Menu Structure
   ============================================ */
.menu-section {
    margin: 30px 0;
}

.menu-group {
    margin: 20px 0;
}

.menu-group h3 {
    font-size: var(--font-size-h3);
    font-weight: normal;
    margin: 0 0 10px 0;
    color: var(--color-red);
}

.menu-group p {
    margin: 5px 0;
    line-height: 1.6;
}

.menu-link {
    display: inline;
}

/* ============================================
   Resources
   ============================================ */
.resource-list {
    margin: 15px 0;
}

.resource-item {
    margin: 8px 0;
    line-height: 1.6;
}

/* ============================================
   Positions & Bio
   ============================================ */
.bio {
    line-height: 1.5;
    margin: 15px 0;
    font-size: var(--font-size-base);
}

/* Bio selector buttons */
.bio-selector-btn {
    padding: 6px 14px;
    font-size: var(--font-size-small);
    border: 2px solid var(--color-border-light);
    background: var(--color-bg);
    color: var(--color-cyan);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: 600;
    transition: all 0.2s ease;
}

.bio-selector-btn:hover {
    background: var(--color-bg-highlight);
    border-color: var(--color-cyan);
}

.bio-selector-btn.active {
    background: var(--color-cyan);
    color: var(--color-bg);
    border-color: var(--color-cyan);
}

/* Bio content visibility */
.bio-content {
    display: none;
}

.bio-content.active {
    display: block;
}

/* Explore box styling */
.explore-sidebar .content-box {
    font-family: var(--font-mono);
    padding: 15px;
}

.explore-box-title {
    font-size: var(--font-size-h3);
    color: var(--color-green);
    margin: 0 0 5px 0;
    font-weight: normal;
}

.explore-box-separator {
    margin: 0 0 10px 0;
    line-height: 1.6;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--font-size-small);
}

.explore-box-content {
    line-height: 1.8;
    font-size: var(--font-size-small);
}

.explore-box-content p {
    margin: 5px 0;
}

.explore-box-content .stat-highlight {
    margin: 10px 0;
}

.explore-box-content .stat-detail {
    margin: 10px 0 5px 0;
    font-size: var(--font-size-tiny);
    color: var(--color-text-muted);
}

.explore-box-content .chart-pre {
    margin: 10px 0;
    background: none;
    border: none;
    padding: 0;
    line-height: 1.5;
    font-size: var(--font-size-tiny);
}

.positions {
    margin: 20px 0;
    line-height: 1.5;
    font-size: var(--font-size-base);
}

.positions strong {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    color: var(--color-yellow);
}

.compact-info {
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    line-height: 1.8;
}

.inline-link {
    color: var(--color-purple);
    font-weight: bold;
}

/* ============================================
   Contact & Footer
   ============================================ */
.contact {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border-medium);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: center;
}

.back-link {
    margin: 30px 0;
    color: var(--color-cyan);
}

/* ============================================
   Utility Classes
   ============================================ */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--color-text-muted);
}

.mb-10 {
    margin-bottom: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

/* Section-specific heading styles */
.section-heading {
    margin-top: 50px;
    margin-bottom: 20px;
    color: var(--color-red);
}

/* ============================================
   Special Highlights
   ============================================ */
strong {
    color: var(--color-orange);
}

em {
    color: var(--color-purple);
    font-style: italic;
}

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 650px) {
    body {
        padding: 15px;
    }

    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select,
    .filter-group input {
        flex: 1;
    }
}