@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Inter:wght@400;700&display=swap');

/* Responsive, mobile-first CSS for personal-website */
:root {
    --bg: #181a1b;
    --header-offset: 56px;
    --panel: #1D2022;
    --accent: #1d4ed8;
    --text: #c9c9c9;
    --muted: #7f8c8d;
    --border: 4px solid var(--text);
    --gap: 20px;

    /* Modern, material-ish nav link styles */
    --nav-accent: #1d4ed8;
    /* accent color (blue) */
    --nav-accent-strong: #0f4bd8;
    --nav-accent-glow: rgba(29, 78, 216, 0.18);
    --nav-ghost: rgba(255, 255, 255, 0.03);
    /* color used when a nav link is pressed */
    --nav-pressed: #60a5fa;
    --nav-border: rgba(255, 255, 255, 0.12);
    /* increased contrast */
    --nav-text-strong: #f6f7f9;
    /* brighter link text */

    /* Scrollbar colors (theme-aware) */
    --scroll-track: rgba(255, 255, 255, 0.02);
    --scroll-thumb: rgba(255, 255, 255, 0.06);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.12);
    /* nav reveal timing */
    --nav-rect-dur: 750ms;
    /* Symmetric easing so open and close match visually */
    --nav-rect-ease: cubic-bezier(0.00, 0.00, 0.22, 1);
    /* skill card sizing and responsive gap */
    --skill-card-min: 1000px;
    --skill-card-max: 1200px;
    /* preferred uses vw so cards scale on very wide screens; min enforced at smaller widths */
    --skill-card-clamp: clamp(var(--skill-card-min), 28vw, var(--skill-card-max));
    /* gap will shrink earlier (priority) while card width holds to min until narrower breakpoints */
    --skills-gap-large: 36px;
}

/* Smooth scrolling for in-page navigation and touch devices */
html {
    scroll-behavior: smooth;
    /* account for fixed header when jumping to anchors */
    scroll-padding-top: var(--header-offset, 80px);
    -webkit-overflow-scrolling: touch;
}

/* Custom scrollbar: WebKit/Blink and Firefox support */
/* WebKit/Blink (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.45;
}

/* fluid type */
h1 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 3.5rem);
    margin: 0;
}

h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.125rem, 2.5vw, 1.75rem);
    margin: 0;
}

h3 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    margin: 0;
}

p {
    margin: 0 0 1rem 0;
    color: var(--text);
}

a {
    color: var(--nav-pressed);
    text-decoration: none;
    transition: color 180ms ease;
    font-weight: 800;
}

/* Header / Nav */
.banner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg);
    padding: 10px 16px;
    color: var(--text);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 40;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.logo {
    width: 48px;
    height: 48px;
    border: 3px solid var(--text);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    margin-left: 0;
    padding: 0;
    /* ensure no internal spacing */
    line-height: 1;
    /* avoid baseline offset */
}

.logo p {
    margin: 0;
    /* remove default p margins */
    line-height: 1;
    /* keep text vertically centered */
    display: block;
}

/* Remove underline from logo link and ensure no text decoration */
.logo-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
}

/* Nav links container */
.nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* list layout */
.nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0 6px;
    display: flex;
    gap: 8px;
    /* tightened spacing between header links */
    align-items: center;
    flex-wrap: wrap;
}

/* pill style links (desktop) */
.nav-links li {
    list-style: none;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    /* slightly narrower so links sit closer */
    color: var(--nav-text-strong);
    background: transparent;
    border-radius: 8px;
    /* less pill-like, more rectangular */
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    /* remove visible border for a cleaner look */
    border: none;
    /* include transform so press animation animates smoothly */
    transition: background 220ms cubic-bezier(.22, .9, .28, 1), color 180ms, transform 120ms ease;
    box-shadow: none;
    -webkit-font-smoothing: antialiased;
}

/* hover: subtle glow + lift with clearer contrast */
.nav-links a:hover {
    background: linear-gradient(180deg, var(--nav-ghost), rgba(255, 255, 255, 0.04));
    /* keep header stable on hover */
    transform: none;
    box-shadow: none;
    /* remove drop shadow */
    color: #ffffff;
}

/* pressed state */
.nav-links a:active {
    /* press effect: move down slightly while pressed, then transition back */
    transform: translateY(2px);
}

/* active / current page indicator - stronger accent */
.nav-links a[aria-current="page"],
.nav-links a.active {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(29, 78, 216, 0.22), rgba(99, 102, 241, 0.08));
    box-shadow: none;
    /* remove drop shadow for active/current */
}

/* focus styles for keyboard users */
.switch input:focus+.slider {
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.45),
        0 0 0 5px rgba(99, 102, 241, 0.10);
}

/* keyboard accessibility */
.nav-links a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 5px rgba(29, 78, 216, 0.14);
    border-radius: 12px;
}

/* small icon support (if you add icons inside links) */
.nav-links a .nav-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
}

/* ensure the switch doesn't look like a nav button */
.nav-links li .switch {
    margin-left: 4px;
    margin-right: 4px;
}

.nav-links li .switch .slider {
    border-radius: 999px;
}

/* Switch */
/* Improved, higher-contrast theme toggle switch */
.switch {
    --w: 56px;
    --h: 30px;
    display: inline-block;
    position: relative;
    width: var(--w);
    height: var(--h);
    vertical-align: middle;
    margin-left: 8px;
    -webkit-tap-highlight-color: transparent;
}

/* hide the native checkbox but keep it accessible */
.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* track - stronger border + shadow so it stands out on dark bg */
.switch .slider {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.10));
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    /* visible edge */
    transition: background 360ms cubic-bezier(.22, .9, .28, 1), box-shadow 260ms;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.55),
        /* deeper drop shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(4px);
}

/* knob - bigger shadow and slight highlight for depth */
.switch .slider::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    width: calc(var(--h) - 8px);
    height: calc(var(--h) - 8px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.12));
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.02) inset;
    transition: transform 360ms cubic-bezier(.22, .9, .28, 1), background 360ms, box-shadow 260ms;
    transform: translateX(0);
    will-change: transform, background, box-shadow;
}

/* icon (sun / moon) - larger, brighter with subtle glow */
.switch .slider::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    transition: transform 360ms cubic-bezier(.22, .9, .28, 1), filter 220ms;
    /* filled white crescent (solid) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M21.752 15.002A9 9 0 1 1 12 3a7 7 0 0 0 9.752 12.002z'/></svg>");
}

/* checked = light mode -> filled sun (solid, warm color) */
.switch input:checked+.slider::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f59e0b' d='M6.76 4.84 5 3.07 3.07 5 4.84 6.76 6.76 4.84zM1 11h3v2H1v-2zm10-9h2v3h-2V2zm7.24 2.84 1.79-1.79L20.07 3l-1.79 1.79 1.79 1.79zM20 11v2h3v-2h-3zM12 6a6 6 0 100 12 6 6 0 000-12z'/></svg>");
}

/* slightly reduce icon opacity in dark (unchecked) for contrast but keep visible */
.switch input:not(:checked)+.slider::after {
    color: rgba(255, 255, 255, 0.92);
}

/* Layout spacing to account for fixed header */
main,
.hero,
.subpage-hero,
.wid,
#tech-stack,
section,
footer {
    width: 100%;
}

/* Hero */
.hero {
    background-image: url('../assets/banners/Banner-large.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 100px 16px 40px;
    /* top padding leaves room for fixed header */
    margin-top: var(--header-offset, 56px);
    text-align: center;
}

.hero h1 {
    line-height: 1.05;
    /* subtle dark text shadow for improved legibility */
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Subpage hero (smaller banner for inner pages) */
.subpage-hero {
    background-image: url('../assets/banners/Banner-medium.png');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 16px;
    margin-top: var(--header-offset, 56px);
    /* leave space for fixed header */
    text-align: center;
    color: var(--text);
}

/* Qualifications page: alternate background for each main section
   Start with the first section (resume) using the panel background, then alternate. */
#qualifications-main>section {
    padding: 28px;
}

#qualifications-main>section:nth-of-type(odd) {
    background: var(--panel);
}

#qualifications-main>section:nth-of-type(even) {
    background: transparent;
}

/* Resume embed & header centering for qualifications page */
#qualifications-main .resume-section .resume-container {
    text-align: center;
    padding: 24px 12px;
}

#qualifications-main .resume-section .resume-container h1 {
    text-align: center;
    margin-bottom: 12px;
}

#qualifications-main .resume-section .resume-embed {
    display: flex;
    justify-content: center;
    margin: 12px 0 8px;
}

#qualifications-main .resume-section .resume-embed iframe {
    width: 100%;
    max-width: 1100px;
    height: 800px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

/* smaller screens: reduce iframe height */
@media (max-width: 700px) {
    #qualifications-main .resume-section .resume-embed iframe {
        height: 520px;
    }
}

.subpage-hero h1 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.25rem, 3.0vw, 2.25rem);
    /* gentle dark text shadow for subpage headings */
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.hero-pfp {
    width: clamp(96px, 20vw, 200px);
    height: auto;
    border: 2px solid var(--text);
    border-radius: 50%;
    object-fit: cover;
}

/* WID: full-width panel with centered inner content and consistent layout
   Consolidated single definition to avoid duplicate rules. */
.wid {
    width: 100%;
    background-color: var(--panel);
    /* panel spans the full page width */
    padding: 28px 0;
    /* vertical padding for the full-width band */
    box-sizing: border-box;
    color: var(--text);
}

/* Project-specific container that mirrors .wid but uses the page's default background */
.project-info {
    width: 100%;
    background-color: transparent;
    padding: 28px 0;
    box-sizing: border-box;
    color: var(--text);
}

/* centered constrained container inside the full-width panel */
.wid-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    /* horizontal gutter */
    display: flex;
    gap: 18px;
    align-items: stretch;
    /* allow children to stretch to same height */
    box-sizing: border-box;
}

/* image / text sizing inside the centered container */
.wid-image {
    flex: 0 0 40%;
    /* occupy ~40% of the row on wide screens */
    width: 40%;
    height: 100%;
    /* match the height of the .wid-inner container */
    max-height: 80vh;
    /* cap so it doesn't grow beyond viewport too much */
    border-radius: 12px;
    object-fit: cover;
    display: block;
}

.wid-text {
    flex: 1 1 auto;
    min-width: 0;
    /* prevents overflow of long text */
    display: flex;
    align-items: stretch;
    /* make inner card stretch to full height */
}

/* ensure the card inside .wid-text fills the available height so both columns match */
.wid-text .text-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* text-card stays full width inside the wid-text */
.text-card {
    background: transparent;
    /* card uses the panel background already provided by .wid */
    border-radius: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    width: 100%;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
}

/* divider: almost full-width within the card, centered with equal side gaps */
.text-card .card-divider {
    width: calc(100% - 40px);
    /* leaves ~20px gap on each side inside the card */
    height: 4px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-strong));
    margin: 8px 20px 12px;
}

/* Tech stack - visual grid of badges */
#tech-stack {
    padding: 28px 16px;
}

#tech-stack .section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 12px;
    text-align: center;
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    /* center rows including partial last row */
    margin-top: 18px;
}

/* Portfolio grid and cards */
.portfolio-controls {
    width: 100%;
    background: transparent;
    padding: 18px 12px;
}

.controls-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

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

.filter-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
}

.filter-btn.active {
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-strong));
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}

.controls-actions .add-project {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}

.portfolio-grid {
    max-width: 1100px;
    margin: 12px auto 60px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    padding: 0 12px;
}

.project-card {
    display: flex;
    gap: 12px;
    align-items: stretch;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.00));
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 12px;
    border-radius: 12px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.project-thumb {
    flex: 0 0 160px;
    width: 160px;
    height: 110px;
    overflow: hidden;
    border-radius: 8px;
}

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

.project-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-meta h3 {
    margin: 0 0 6px 0;
    font-size: 1.125rem;
}

.project-meta p {
    margin: 0 0 8px 0;
    color: var(--muted);
}

.project-tag {
    align-self: flex-start;
    padding: 6px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.8rem;
}

.project-tag.academic {
    background: rgba(29, 78, 216, 0.12);
    color: var(--nav-text-strong);
}

.project-tag.personal {
    background: rgba(99, 102, 241, 0.10);
    color: var(--nav-text-strong);
}

@media (min-width:700px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width:1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(28px, 4.5vw, 72px);
        max-width: 1260px;
        /* allow extra breathing room so columns don't shrink */
    }

    .project-card {
        flex-direction: column;
    }

    .project-thumb {
        width: 100%;
        height: 160px;
    }
}

/* Project detail TOC */
.project-toc {
    /* wrapper only — allow the inner .text-card to provide the visual card */
    max-width: 1100px;
    margin: 12px auto;
    width: calc(100% - 32px);
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* more space between Contents and Quick Info */
}

/* For project pages: left-align the TOC wrapper and constrain the inner card width
   so the TOC starts at the same vertical position as the other .text-card blocks */
#project-page .project-toc {
    margin: 12px 0;
    width: auto;
}

#project-page .project-toc .text-card {
    max-width: 100%;
    margin: 0 0 18px 0;
}

.project-toc h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: var(--text);
}

.project-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.project-toc a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
    padding: 6px 8px;
    display: block;
    border-radius: 6px;
}

.project-toc a.active,
.project-toc a:hover {
    color: #ffffff;
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-strong));
}

/* Only switch TOC spacing when the layout stacks (match the stacking breakpoint at 999px) */
@media (max-width:999px) {

    /* keep TOC as a column flex so `gap` controls spacing when stacked */
    .project-toc {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* avoid double-spacing from bottom margins on the inner cards when stacked */
    .project-toc .text-card {
        margin-bottom: 0;
    }
}

/* Make each .text-card visually distinct on project page */
#project-page .text-card {
    margin-bottom: 18px;
    background: var(--panel);
}

/* Default: stack blocks vertically for project page */
#project-page .wid-inner {
    display: block;
}

#project-page .wid-text {
    display: block;
}

#project-page .wid-text .text-card {
    height: auto;
}

/* On narrow screens: make the container a column-flex so we can place the TOC above content */
@media (max-width: 999px) {
    #project-page .wid-inner {
        display: flex;
        flex-direction: column;
    }

    /* put the TOC first visually */
    #project-page .project-toc {
        order: -1;
        width: 100%;
        margin-bottom: 18px;
    }

    /* match the default .text-card max-width so the TOC matches other cards */
    #project-page .project-toc .text-card {
        max-width: 900px;
        margin: 0 auto 18px;
    }
}

/* On larger screens, lay out content + TOC side-by-side, TOC on the right */
@media (min-width: 1000px) {
    #project-page .wid-inner {
        display: flex;
        align-items: flex-start;
        gap: 80px;
        /* increased space between content and aside */
        max-width: 1260px;
        /* allow extra breathing room so columns don't shrink */
    }

    /* main content grows */
    #project-page .wid-text {
        flex: 1 1 auto;
    }

    /* TOC sits to the right with fixed width (wider for breathing room) */
    /* make aside width responsive so it shrinks smoothly with viewport */
    #project-page .project-toc {
        flex: 0 0 clamp(280px, 24vw, 480px);
        width: clamp(280px, 24vw, 480px);
        margin: 0;
    }

    #project-page .project-toc .text-card {
        max-width: 100%;
        margin: 0;
    }
}

/* On small screens, allow the TOC card to be wider to avoid overlapping content */
@media (max-width: 560px) {
    #project-page .project-toc {
        width: 100%;
    }

    #project-page .project-toc .text-card {
        max-width: 900px;
        margin: 12px auto 18px;
    }
}

/* quick-info: ensure action links inside the quick-info card size to content only */
#project-page #quick-info a,
.text-card #quick-info a {
    display: inline-block;
    width: auto;
    padding: 6px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    margin-right: 8px;
}

/* quick-info color variants */
#project-page #quick-info a.repo {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

#project-page #quick-info a.demo {
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-strong));
    color: #fff;
    border: none;
}

/* Back-to-top floating button (dark theme) */
.scroll-top {
    position: fixed;
    right: 20px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--nav-accent), var(--nav-accent-strong));
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity 200ms ease, transform 180ms cubic-bezier(.22, .9, .28, 1);
    z-index: 60;
    cursor: pointer;
}

.scroll-top svg {
    display: block;
    fill: currentColor;
}

.scroll-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.scroll-top:focus {
    outline: none;
    box-shadow: 0 0 0 6px rgba(29, 78, 216, 0.12);
}

.tech-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.00));
    border-radius: 12px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    transition: transform 240ms cubic-bezier(.22, .9, .28, 1), box-shadow 240ms;
}

.tech-item {
    flex: 0 0 140px;
}

.tech-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55);
}

.tech-logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: white;
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) inset;
}

/* image logos inside the badge */
.tech-logo-img {
    width: 64%;
    height: 64%;
    object-fit: contain;
    display: block;
}

.tech-label {
    font-weight: 700;
    color: var(--text);
    font-size: 0.95rem;
    text-align: center;
}

/* individual brand-ish colors */
.tech-python .tech-logo {
    background: linear-gradient(135deg, #306998, #ffd43b);
    color: #111;
}

.tech-cpp .tech-logo {
    background: linear-gradient(135deg, #00599C, #2a2d8f);
}

.tech-java .tech-logo {
    background: linear-gradient(135deg, #5382a1, #f8981d);
}

.tech-js .tech-logo {
    background: linear-gradient(135deg, #f0db4f, #f7df1e);
    color: #111;
}

.tech-web .tech-logo {
    background: linear-gradient(135deg, #e34f26, #264de4);
}

.tech-psql .tech-logo {
    background: linear-gradient(135deg, #336791, #2ecc71);
}

.tech-git .tech-logo {
    background: linear-gradient(135deg, #f05032, #e84d31);
}

.tech-linux .tech-logo {
    background: linear-gradient(135deg, #333333, #00aaff);
}

.tech-rails .tech-logo {
    background: linear-gradient(135deg, #cc0000, #8b0000);
}

.tech-jira .tech-logo {
    background: linear-gradient(135deg, #0052cc, #2684ff);
}

@media (max-width:700px) {

    /* responsive: allow items to shrink and fill available space on small screens */
    .tech-grid {
        justify-content: center;
    }

    .tech-item {
        flex: 1 1 110px;
        min-width: 110px;
    }

    .tech-logo {
        width: 48px;
        height: 48px;
    }
}

.portfolio-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: var(--border);
}

.portfolio-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
}

.portfolio-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Buttons */
.repo-button,
.resume-button {
    padding: 6px 10px;
    border: 2px outset var(--text);
    width: auto;
    height: auto;
    display: inline-flex;
    justify-content: center;
    font-weight: 700;
    align-items: center;
    border-radius: 6px;
    color: var(--text);
    background-color: var(--accent);
    text-decoration: none;
    transition: transform 0.2s;
}

.repo-button:hover,
.resume-button:hover {
    transform: scale(1.03);
}

/* Skills and interests */
.technical-skills {
    text-align: left;
    padding: 18px;
}

.skills-container {
    display: grid;
    /* span the full content width; use symmetric page padding so right column can sit at the page edge */
    width: 100%;
    padding: 0 32px;
    /* use two equal flexible columns; columns shrink equally as viewport narrows
         column gap is prioritized to reduce first, then columns/cards will shrink */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* column gap prioritized to reduce as viewport shrinks, then card width will clamp down */
    column-gap: clamp(16px, 2.5vw, var(--skills-gap-large));
    /* allow container to grow so cards can reach max on wide screens, but keep sensible cap */
    max-width: calc(2 * var(--skill-card-max) + var(--skills-gap-large) + 64px);
    margin: 0 auto;
    row-gap: 40px;
    align-items: stretch;
    /* ensure each row's height is determined by its tallest card */
    grid-auto-rows: auto;
}

.skill {
    background: var(--panel);
    padding: 22px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
    /* let the row determine the height so items in the same row match each other
         but different rows can have different heights (no forced min-height) */
    /* fluid card width: up to the clamp value, otherwise fill available column
         this makes both cards shrink equally once space is constrained */
    width: min(var(--skill-card-clamp), 100%);
}

/* Header (h3) at top of each card with a divider below */
.skill h3 {
    margin: 0;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.skill h3::after {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    margin: 8px 0 0 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-strong));
}

.skill p {
    margin: 0;
    color: var(--text);
    line-height: 1.5;
}

/* Align left-column cards to the start and right-column cards to the end */
.skills-container>.skill:nth-child(odd) {
    justify-self: start;
}

.skills-container>.skill:nth-child(even) {
    justify-self: end;
}

/* Reduce the column gap progressively on smaller viewports */


@media (max-width: 1000px) {

    /* single column on small screens */
    .skills-container {
        max-width: none;
        grid-template-columns: 1fr;
        column-gap: 12px;
        margin: 0 auto;
        padding: 0;
    }

    .skills-container>.skill:nth-child(odd),
    .skills-container>.skill:nth-child(even) {
        justify-self: stretch;
        width: 100%;
    }

    .technical-skills>h2 {
        margin-left: 0;
    }
}

/* Align the heading with the left column and give it extra left margin */
.technical-skills>h2 {
    margin-left: 36px;
    margin-bottom: 14px;
}

/* Make skills stack to a single column on narrow screens and reset alignment */
@media (max-width: 1000px) {
    .skills-container {
        max-width: none;
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0;
        margin: 0 auto;
    }

    .skill {
        min-height: auto;
        padding: 18px;
    }

    .technical-skills>h2 {
        margin-left: 0;
    }
}


.interests-section {
    /* match technical-skills spacing */
    padding: 18px;
}

/* Make interests match the margins/padding of the technical skills section
   and format text as cards with responsive images that fit the layout. */
.interests-section .section-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 32px;
}

.interests-section>h2 {
    margin-left: 32px;
    margin-bottom: 14px;
}

.interests-section .interest-row {
    display: flex;
    gap: 18px;
    align-items: stretch;
    margin: 0 auto 18px;
    box-sizing: border-box;
    padding: 0 36px;
}

/* Text area: styled as a card similar to .text-card/.skill */
.interests-section .interest-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--panel);
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    color: var(--text);
}

.interests-section .interest-text h3 {
    font-size: 1rem;
    margin: 0 0 8px 0;
    font-family: 'Inter', sans-serif;
}

.interests-section .interest-text h3::after {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    margin: 8px 0 0 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-strong));
}

.interests-section .interest-text p {
    margin: 0;
    line-height: 1.5;
    color: var(--text);
}

/* Images sized responsively to fit beside the card on wide screens and
   fill the width on small screens. Use object-fit so they crop cleanly. */
.interests-section .interest-image {
    flex: 0 0 clamp(220px, 36%, 420px);
    width: clamp(220px, 36%, 420px);
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    border: solid 1px rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* Specific game dev block: allow image first then text — keep natural order */
#interest-game-dev {
    display: flex;
    gap: 18px;
    align-items: stretch;
    padding: 0 36px;
    margin: 38px auto;
}

/* Stack on narrow screens like other responsive blocks */
@media (max-width:1000px) {
    .interests-section>h2 {
        margin-left: 0;
    }

    .interests-section .interest-row {
        flex-direction: column;
        gap: 14px;
        padding: 0;
        margin: 0 auto 24px;
    }

    /* For the game-dev block, show text above the image on narrow screens */
    #interest-game-dev {
        flex-direction: column-reverse;
        gap: 14px;
        padding: 0;
        margin: 38px auto;
    }

    .interests-section .interest-image {
        width: 100%;
        flex: none;
    }

    .interests-section .interest-text {
        padding: 14px;
    }
}


.interest-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.interest-image,
.teaso-image,
.nhs-image,
#game-dev-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: solid 1px rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* Footer */
#contact-footer {
    background-color: var(--panel);
    text-align: center;
    padding: 20px 12px;
    margin: 0;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    /* stack socials above copy */
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.footer-socials {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    transition: transform 220ms cubic-bezier(.22, .9, .28, 1), box-shadow 220ms, background 220ms;
    background: transparent;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    /* subtle border so icons pop */
}

.social-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.12);
    border-radius: 999px;
}

.social-icon {
    width: 28px;
    height: 28px;
    display: block;
    border-radius: 4px;
    mix-blend-mode: normal;
}

.social-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.social-link:hover .social-icon {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

.footer-copy {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

/* Force inline SVGs to inherit color; set instagram to white */
.social-link svg {
    width: 28px;
    height: 28px;
    display: block;
    fill: currentColor;
}

#instagram {
    color: #ffffff;
}

/* Render only the tech-stack GitHub logo as solid black */
.tech-item.tech-git .tech-logo-img {
    filter: grayscale(1) brightness(0) !important;
}

/* Hamburger button (hidden on wide screens) */
.hamburger {
    display: none;
    background: transparent;
    border: none;
    padding: 6px;
    margin-left: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.hamburger:focus {
    outline: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
}

.hamburger-box {
    display: inline-block;
    width: 28px;
    height: 20px;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: var(--text);
    transition: transform .25s ease, opacity .2s ease;
    left: 0;
}

.hamburger-inner {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-inner::before {
    content: "";
    top: -8px;
}

.hamburger-inner::after {
    content: "";
    top: 8px;
}

/* when nav open, animate hamburger to X */
.hamburger.open .hamburger-inner {
    transform: rotate(45deg);
}

.hamburger.open .hamburger-inner::before {
    transform: rotate(90deg) translateX(0);
    top: 0;
    opacity: 0;
}

.hamburger.open .hamburger-inner::after {
    transform: rotate(-90deg);
    top: 0;
}

/* Mobile nav dropdown (hidden by default) */
/* Mobile behaviour and smoother animated dropdown */
@media (max-width: 700px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--bg);
        overflow: hidden;
        /* nav grows downward; a pseudo-element will provide the same-colored rectangle */
        max-height: 0;
        padding: 0 12px;
        transition: max-height var(--nav-rect-dur) var(--nav-rect-ease), padding 360ms ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        z-index: 39;
        display: block;
        will-change: max-height;
    }

    .nav-links ul {
        position: relative;
        z-index: 2;
        /* links sit under the masks but above other content */
        flex-direction: column;
        gap: 6px;
        align-items: stretch;
        padding: 8px 0;
    }

    .nav-links a {
        display: block;
        padding: 10px 12px;
        border-radius: 8px;
        opacity: 1;
        /* keep fully rendered; visibility controlled by overlay */
        transform: translateY(0);
        transition: opacity 260ms ease, transform 320ms cubic-bezier(.22, .9, .28, 1);
        transition-delay: 0ms;
        /* will be overridden per-item */
    }

    /* open state: expand the nav (rectangle appears) then reveal links with a staggered timing */
    .nav-links.open {
        max-height: 520px;
        /* enough space for the menu; tweak if needed */
    }

    .banner {
        z-index: 40;
    }

    .hero {
        padding-top: 120px;
        margin-top: var(--header-offset, 56px);
    }
}

/* Larger screens adjustments */
@media (min-width: 700px) {
    .banner {
        padding: 12px 28px;
    }

    .nav-links ul {
        gap: 12px;
        /* slightly tighter on wide screens */
    }

    .hero {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: 110px 40px;
        margin-top: var(--header-offset, 56px);
    }

    .hero h1 {
        max-width: 60%;
        margin-left: 20px;
    }

    .hero-pfp {
        margin-right: 20px;
    }

    .wid {
        flex-direction: row;
        align-items: center;
        gap: 40px;
        padding: 50px 40px;
        text-align: left;
    }

    /* project-info mirrors these wide-screen layout tweaks */
    .project-info {
        flex-direction: row;
        align-items: center;
        gap: 40px;
        padding: 50px 40px;
        text-align: left;
    }

    .wid-image {
        max-width: 600px;
        margin: 0;
    }

    .wid-text {
        margin: 0;
    }

    .portfolio-container {
        flex-direction: row;
        gap: 24px;
        padding: 20px;
    }

    .portfolio-image {
        width: 425px;
        height: 400px;
    }

    .portfolio-content {
        width: calc(100% - 425px - 24px);
    }

    .interest-row {
        flex-direction: row;
        align-items: center;
        gap: 28px;
    }

    .interest-image {
        width: 40%;
        margin-right: 0;
    }

    .teaso-service,
    .nhs-service,
    .ta-service {
        padding: 20px 40px;
    }
}

/* Extracurricular: card-style text and responsive images stacked below text */
.teaso-service,
.nhs-service {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    padding: 18px 0;
    margin: 0 auto 18px;
    box-sizing: border-box;
}

.teaso-text,
.nhs-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--panel);
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    color: var(--text);
}

.teaso-image,
.nhs-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    display: block;
    border: solid 1px rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

/* Extracurricular grid: three-card single row, spaced like technical-skills */
.extracurricular-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(16px, 2.5vw, var(--skills-gap-large));
    max-width: calc(3 * var(--skill-card-max) + 2 * var(--skills-gap-large) + 64px);
    margin: 0 auto 24px;
    padding: 0 32px;
    align-items: start;
    box-sizing: border-box;
}

.extracurricular-grid>section {
    width: min(var(--skill-card-clamp), 100%);
    box-sizing: border-box;
}

/* position first/second/third like skills: left, center, right */
.extracurricular-grid>section:nth-child(1) {
    justify-self: start;
}

.extracurricular-grid>section:nth-child(2) {
    justify-self: center;
}

.extracurricular-grid>section:nth-child(3) {
    justify-self: end;
}

.extracurricular-section h2 {
    margin-left: 32px;
    margin-bottom: 14px;
}

.extracurricular-section h3 {
    font-size: 1rem;
    margin: 0 0 8px 0;
    font-family: 'Inter', sans-serif;
}

.extracurricular-section h3::after {
    content: "";
    display: block;
    height: 4px;
    width: 100%;
    margin: 8px 0 0 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-strong));
}

@media (max-width: 1000px) {
    .extracurricular-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0;
        margin: 0;
    }

    .extracurricular-grid>section {
        justify-self: stretch;
        width: 100%;
    }

    .extracurricular-section>h2 {
        margin-left: 0;
    }
}

/* Further tighten spacing for stacked extracurricular cards */
@media (max-width: 1000px) {
    .teaso-service,
    .nhs-service {
        margin: 0;
        padding: 0;
        gap: 8px;
    }

    .teaso-text,
    .nhs-text {
        padding: 12px;
    }

    /* remove any extra bottom spacing on individual sections */
    .extracurricular-grid > section {
        margin: 0;
        padding-bottom: 0;
    }
}


/* Extra large screens */
@media (min-width: 1200px) {
    .hero {
        padding: 140px 80px;
    }

    .wid {
        padding: 60px 80px;
    }

    .project-info {
        padding: 60px 80px;
    }

    .portfolio-container {
        padding: 28px;
    }
}

/* Small tweaks for very small screens */
@media (max-width: 420px) {
    .logo {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .nav-links ul {
        gap: 8px;
        font-size: 0.95rem;
    }

    .hero {
        padding-top: 90px;
    }

    .social-icon {
        width: 22px;
        height: 22px;
    }

    .social-link {
        width: 48px;
        height: 48px;
    }

    .footer-inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .footer-socials {
        order: 1;
    }

    .footer-copy {
        order: 2;
        font-size: 0.9rem;
    }
}

/* simple card for paragraph blocks inside sections (heading + underline + content) */
.text-card {
    background: var(--panel);
    border-radius: 12px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    max-width: 900px;
    color: var(--text);
    line-height: 1.6;
}

/* heading inside the card */
.text-card .card-heading {
    margin: 0 0 8px 0;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.125rem, 2.4vw, 1.6rem);
    font-weight: 700;
    color: var(--text);
}

/* thin accent divider under heading */
.text-card .card-divider {
    width: calc(100% - 8px);
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--nav-accent), var(--nav-accent-strong));
    margin: 8px 0 12px 0;
}

/* paragraphs spacing */
.text-card p {
    margin: 0 0 12px 0;
    color: var(--text);
}

/* layout tweak: ensure card fits inside wid layout */
.wid {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 28px 16px;
}

.project-info {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 28px 16px;
}

.wid-image {
    flex: 0 0 400px;
    max-width: 40%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    border: solid 1px rgba(255, 255, 255, 0.04);
}

.wid-text {
    flex: 1 1 auto;
}


/* responsive: stack on small screens */
@media (max-width:700px) {

    /* Keep the full-width panel but stack the inner container's children */
    .wid {
        padding: 20px 12px;
    }

    /* if using the centered container, force it to stack vertically */
    .wid-inner {
        flex-direction: column;
        padding: 0;
        gap: 14px;
        align-items: stretch;
    }

    /* make image full-width above the text */
    .wid-image {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    .wid-text {
        width: 100%;
    }

    .text-card {
        padding: 14px;
    }

    .text-card .card-divider {
        width: calc(100% - 8px);
        height: 3px;
        margin: 8px 0 12px 0;
    }
}