/* Bio page styles (moved from templates/pages/bio.html) */
/* Never applied on the live site (it sat after a stray duplicate <style> tag, which made it
   invalid). Enabling it makes the bio column full-width with no padding.
   .content.bio-page-content {
   max-width: 100%;
   padding: 0;
   margin: 0;
   display: block;
   } */

/* Layout */
.bio-layout {
    position: relative;
    min-height: calc(100vh / var(--site-zoom, 1));
    width: 100%;
    font-family: 'Inter', sans-serif;
}
.bio-top-banner {
    /* A subtle highlight banner to keep the structure without overwriting the global background */
    background: linear-gradient(to bottom, var(--surface) 0%, transparent 100%);
    height: calc(35vh / var(--site-zoom, 1)); /* 35% of viewport height; .content is zoomed (theme.css) */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.bio-main-content {
    position: relative;
    z-index: 2;
    padding-top: calc(35vh / var(--site-zoom, 1) - 125px); /* center the image on the line */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 100px;
}

.bio-profile-wrapper {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--border); /* Theme purple border */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 25px;
}
.bio-profile-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bio-name-styled {
    font-family: 'Georgia', serif;
    font-size: 3.5rem;
    color: var(--text);
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: normal;
    text-align: center;
}

.bio-role-styled {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--muted);
    margin-bottom: 40px;
    text-align: center;
}

.bio-text-body {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: justify;
}

.bio-text-body p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 20px;
}

/* Keep existing sections styled nicely to match */
.bio-text-body .metrics,
.bio-text-body .cta-row,
.bio-text-body .social-row,
.bio-text-body .section-block {
    max-width: 100%;
    color: var(--text);
    margin-top: 40px;
    opacity: 1;
    transform: none;
    animation: none;
}

.bio-text-body .section-title {
    color: var(--text);
    font-family: 'Georgia', serif;
    font-weight: normal;
    margin-bottom: 20px;
}

.bio-text-body .section-label {
    color: var(--primary);
    margin-bottom: 10px;
}

.bio-text-body .metric {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
}
.bio-text-body .metric .val {
    color: var(--primary);
}
.bio-text-body .metric .lbl {
    color: var(--muted);
}

.bio-text-body .cta-primary {
    background: var(--primary-bg);
    color: var(--on-primary);
    font-weight: 600;
    border: none;
}
.bio-text-body .cta-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.bio-text-body .cta-secondary:hover {
    background: var(--surface);
    color: var(--text);
}

.bio-text-body .strength-item {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
}
.bio-text-body .strength-item .si-title {
    color: var(--text);
}
.bio-text-body .strength-item .si-desc {
    color: var(--muted);
}

.bio-text-body .lang-tag {
    border-color: var(--border);
    color: var(--text);
}
.bio-text-body .lang-tag span {
    color: var(--primary);
}

.bio-text-body .nav-grid-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
}
.bio-text-body .nav-grid-btn:hover {
    background: color-mix(in srgb, var(--primary-bg) 13%, transparent);
}
.bio-text-body .nav-grid-btn .title {
    color: var(--text);
}
.bio-text-body .nav-grid-btn .desc {
    color: var(--muted);
}

/* Decorative bottom lines and icons (like the image) */
.bio-footer-decoration {
    border-top: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    height: 6px;
    margin-top: 60px;
    margin-bottom: 40px;
    position: relative;
}