/* ===== Base ===== */
html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden; /* guard against any horizontal overflow shifting the fixed navbar */
}

/* Tighter, more confident display headings */
h1, h2, h3, .display-3, .display-4 {
    letter-spacing: -0.02em;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Custom overrides to make Bootstrap pop */
.bg-primary {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
}

.btn-light {
    font-weight: 700;
    transition: transform 0.2s;
}

    .btn-light:hover {
        transform: translateY(-2px);
    }

/* --- Custom Color Palette --- */

/* 1. Brand Colors */
:root {
    --color-physics: #D35400;
    --color-code: #2980B9;
    --color-brand: #2C3E50;
    --color-brand-dark: #0b1120;
    --color-bg-light: #F8F9FA;
}

/* 2. Text Overrides */
.text-physics {
    color: var(--color-physics) !important;
    font-weight: 700;
}

.text-code {
    color: var(--color-code) !important;
    font-weight: 700;
}

.text-brand-dark {
    color: var(--color-brand);
}

/* 3. Button Overrides */
.btn-brand {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: white;
    transition: all 0.3s ease;
}

    .btn-brand:hover {
        background-color: #1a252f;
        border-color: #1a252f;
        transform: translateY(-2px);
    }

.btn-outline-brand {
    color: var(--color-brand);
    border-color: var(--color-brand);
    transition: all 0.3s ease;
}

    .btn-outline-brand:hover {
        background-color: var(--color-brand);
        color: white;
    }

.btn-dark-custom {
    background-color: #212529;
    color: white;
    border: 1px solid #212529;
}

    .btn-dark-custom:hover {
        background-color: black;
        border-color: black;
    }

.btn-outline-dark-custom {
    color: #212529;
    border-color: #212529;
}

    .btn-outline-dark-custom:hover {
        background-color: #212529;
        color: white;
    }

/* 4. Backgrounds */
.bg-hero-custom {
    background: radial-gradient(circle at top right, #eef2f3 0%, #dae2f8 100%);
}

.bg-light-custom {
    background-color: #fcfcfc;
}

.bg-dark-custom {
    background-color: var(--color-brand);
}

.blob-bg {
    background-color: var(--color-code);
}

/* 5. Icons Custom Colors */
.icon-bg-code {
    background-color: var(--color-code);
}

.icon-bg-cooling {
    background-color: #3498DB;
}

.icon-bg-heat {
    background-color: var(--color-physics);
}

.icon-bg-model {
    background-color: #8E44AD;
}

/* 6. Animations */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .hover-lift:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    }

/* ===== Home / Hero (from Home.razor.css) ===== */
.bg-hero-mountains {
    background-image: url('../images/PXL_20240225_083021535.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

    .bg-hero-mountains::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.85);
        z-index: -1;
    }

.text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ===== Redesign: shared tokens ===== */
:root {
    --grad-brand: linear-gradient(135deg, #0f2027 0%, #203a43 55%, #2c5364 100%);
    --grad-accent: linear-gradient(135deg, var(--color-code) 0%, var(--color-physics) 100%);
    --ring-soft: 0 .75rem 2rem rgba(15, 32, 39, .12);
}

.text-gradient {
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 700;
    font-size: .8rem;
    color: var(--color-code);
}

/* ===== Hero ===== */
.hero-redesign {
    background: var(--grad-brand);
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .hero-redesign::after {
        /* subtle mountain texture, low opacity, sits behind content */
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('../images/PXL_20240225_083021535.webp');
        background-size: cover;
        background-position: center;
        opacity: .10;
        z-index: 0;
    }

    .hero-redesign > * {
        position: relative;
        z-index: 1;
    }

    /* Keep the big headline inside the viewport on phones */
    .hero-redesign .display-3 {
        font-size: clamp(1.75rem, 7.5vw, 3.5rem);
    }

.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .4rem 1rem;
    border-radius: 50rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: .85rem;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .hero-pill {
        font-size: .76rem;
    }
}

/* On phones, tame the large g-5 horizontal gutter. A 3rem gutter on a row
   directly inside a .container overflows the viewport by ~12px each side,
   pushing copy off-screen / clipping it. Columns stack on mobile, so the
   horizontal gutter is invisible here anyway. Vertical gutter is untouched. */
@media (max-width: 991.98px) {
    .row.g-5 {
        --bs-gutter-x: 1.5rem;
    }
}

.hero-headshot {
    width: 300px;
    height: 300px;
    max-width: 70vw;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, .9);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
}

.hero-ring {
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: var(--grad-accent);
    filter: blur(26px);
    opacity: .55;
    z-index: -1;
}

.hero-float-badge {
    position: absolute;
    background: #fff;
    color: var(--color-brand);
    border-radius: 1rem;
    padding: .55rem .9rem;
    font-weight: 700;
    font-size: .85rem;
    box-shadow: var(--ring-soft);
    line-height: 1.1;
}

/* ===== Stat strip ===== */
.stat-band {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .05);
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.stat-value {
    font-size: clamp(1.45rem, 5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.05;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: .85rem;
    color: #6c757d;
    font-weight: 600;
}

/* ===== Experience section tint (makes the work card pop) ===== */
.bg-experience {
    background: linear-gradient(180deg, #f4f7fb 0%, #eaeff6 100%);
}

/* ===== Featured "Where I Work" card ===== */
.work-card {
    background: #fff;
    border: 1px solid rgba(41, 128, 185, .18);
    border-top: 4px solid var(--color-code);
    box-shadow: 0 1rem 2.5rem rgba(41, 128, 185, .15);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .work-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 1.4rem 3rem rgba(41, 128, 185, .22);
    }

.badge-current {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(41, 128, 185, .1);
    color: var(--color-code);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .35rem .85rem;
    border-radius: 50rem;
}

    .badge-current::before {
        content: "";
        width: .5rem;
        height: .5rem;
        border-radius: 50%;
        background: #22b24c;
        box-shadow: 0 0 0 .2rem rgba(34, 178, 76, .2);
    }

/* ===== Tool tags (subtle, understated) ===== */
.tool-tag {
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: 50rem;
    background: rgba(44, 62, 80, .06);
    color: #5b6b7b;
    font-size: .82rem;
    font-weight: 600;
}

/* ===== Project cards ===== */
.project-thumb {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--grad-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .85);
    font-size: 3rem;
    position: relative;
    overflow: hidden;
}

    .project-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .project-thumb::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--grad-accent);
        opacity: .18;
    }

.project-tag {
    font-size: .72rem;
    font-weight: 600;
    color: var(--color-code);
    background: rgba(41, 128, 185, .1);
    padding: .2rem .6rem;
    border-radius: 50rem;
}

/* ===== Experience timeline ===== */
.timeline {
    position: relative;
    padding-left: 2rem;
    margin: 0;
    list-style: none;
}

    .timeline::before {
        content: "";
        position: absolute;
        left: .45rem;
        top: .3rem;
        bottom: .3rem;
        width: 2px;
        background: linear-gradient(var(--color-code), var(--color-physics));
    }

.timeline-item {
    position: relative;
    padding-bottom: 1.75rem;
}

    .timeline-item:last-child {
        padding-bottom: 0;
    }

    .timeline-item::before {
        content: "";
        position: absolute;
        left: -1.62rem;
        top: .35rem;
        width: .85rem;
        height: .85rem;
        border-radius: 50%;
        background: #fff;
        border: 3px solid var(--color-code);
    }

.timeline-date {
    font-size: .8rem;
    font-weight: 700;
    color: var(--color-physics);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ===== Dual full-stack panel ===== */
.fullstack-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: var(--ring-soft);
}

.stack-head {
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .6rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.stack-layer {
    border-radius: .6rem;
    padding: .55rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: .5rem;
    color: var(--color-brand);
}

    .stack-layer:last-child {
        margin-bottom: 0;
    }

.stack-soft .stack-head {
    color: var(--color-code);
}

.stack-soft .stack-layer {
    background: rgba(41, 128, 185, .08);
    border: 1px solid rgba(41, 128, 185, .16);
}

.stack-eng .stack-head {
    color: var(--color-physics);
}

.stack-eng .stack-layer {
    background: rgba(211, 84, 0, .07);
    border: 1px solid rgba(211, 84, 0, .16);
}