/* Bio Theme Styles - Adaptive Glassmorphism */

/* Font Family */
.font-en {
    font-family: 'Josefin Sans', sans-serif;
}

/* Base Bio Panel - Structure & Transitions */
.bio-panel {
    border-radius: 24px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* Light Mode (Default) - Light Glass */
.bio-panel {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    /* Highlight on top */
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    /* Highlight on left */
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    color: #1a202c;
    /* Text Dark */
}

/* Dark Mode - Dark Glass (Matches Stats Analysis) */
html.dark .bio-panel {
    background: rgba(255, 255, 255, 0.03);
    /* Exact match to stats.html */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    color: #E2E8F0;
    /* Text Light */
}

/* Force Header Title White in Dark Mode */
html.dark .bio-panel h1 {
    color: #FFFFFF !important;
}

/* Divider Adaptation */
.bio-divider {
    width: 1px;
    height: 32px;
    /* h-8 = 2rem = 32px */
    background-color: rgba(0, 0, 0, 0.1);
    margin: 0 0.5rem;
    /* mx-2 = 0.5rem = 8px */
}

html.dark .bio-divider {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Header Component Spacing Enforcement (To match Stats) */
.bio-header-spacing {
    margin: 1rem;
    /* m-4 = 16px */
    padding: 0.75rem 1.5rem;
    /* py-3 (12px) px-6 (24px) */
    /* width: auto; handled by main.css width rules or flex context */
}

/* Strict Sizing for Perfect Match */
.bio-logo {
    height: 40px !important;
    /* h-10 = 2.5rem = 40px */
    width: auto !important;
}

/* Inner Gap Helper - Matches Stats 'gap-4' (1rem) */
.bio-gap-4 {
    gap: 1rem;
    /* 16px */
}

/* Inner Gap Helper - Matches Stats Right Side 'gap-3' (0.75rem) */
.bio-gap-3 {
    gap: 0.75rem;
    /* 12px */
}

/* Adaptive Button Styles for Header */
.bio-header-btn {
    padding: 0.5rem;
    /* p-2 / p-md equivalent */
    border-radius: 9999px;
    /* rounded-full */
    color: #4A5568;
    /* Gray 600 */
    transition: all 0.2s ease;
}

.bio-header-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #1A202C;
    /* Gray 900 */
}

html.dark .bio-header-btn {
    color: #CBD5E0;
    /* Gray 300 */
}

html.dark .bio-header-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
}

/* New Global Header Style - Flat & Full Width (Replacing Island Style) */
.bio-navbar {
    width: 100%;
    margin: 0;
    padding: 0.5rem 1.5rem;
    /* Slightly reduced vertical padding for sleek look */
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    /* Light border */
    background: rgba(255, 255, 255, 0.95);
    /* High opacity for legibility */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

html.dark .bio-navbar {
    background: rgba(17, 24, 39, 0.95);
    /* Tailwind Gray 900 equivalent */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Subtle border */
    color: #E2E8F0;
}