/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
    /* Colors */
    --color-bg: hsl(36 26% 96%);
    --color-text: #1f1f1f;
    --color-text: rgb(53, 52, 49);
    --color-text-muted: #6b7280;
    --color-text-subtle: #9ca3af;
    --color-text-muted-hover: rgba(1, 1, 1, .7);
    --color-link: #111827;

    --surface-card-bg: transparent;
    --surface-card-bg-subtle: rgba(0, 0, 0, .01);
    --color-border-subtle: rgba(0, 0, 0, 0.08);
    --surface-hover: rgb(0 0 0 / 0.04);
    --surface-chip: rgb(0 0 0 / 0.06);
    /* --focus-ring-color: rgb(0 0 0 / 0.08); */
    --focus-ring-color: rgba(20, 142, 18, 0.56);

    /* Radius */
    --radius-md: 12px;
    --radius-pill: 999px;

    /* Spacing */
    --space-2xs: 6px;
    --space-xs: 8px;
    --space-sm: 10px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 18px;
    --space-2xl: 22px;
    --space-3xl: 24px;

    /* Layout */
    --container-max-w: 720px;
    --grid-gap: var(--space-lg);

    /* Motion */
    --easing-standard: ease;
    --transition-fast: 160ms var(--easing-standard);
    --transition-medium: 220ms var(--easing-standard);
    --transition-slow: 480ms var(--easing-standard);

    /* Typography */
    --font-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --lh-base: 1.45;
    --fs-hero: clamp(2.6rem, 5vw, 3rem);
    --fs-subtitle: clamp(1rem, 2.4vw, 1.2rem);
    --fs-link-label: 0.95rem;
    --fs-chip: 0.92rem;
    --fs-small: 0.9rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0a0a0a;
        --color-text: #e5e7eb;
        --color-text-muted: #a3a3a3;
        --color-text-subtle: #808080;
        --color-link: #ffffff;
        --color-text-muted-hover: rgba(255, 255, 255, 1);
        
        --surface-card-bg: transparent;
        --surface-card-bg-subtle: rgba(255, 255, 255, .03);
        --color-border-subtle: rgb(255 255 255 / 0.08);
        --surface-hover: rgb(255 255 255 / 0.06);
        --surface-chip: rgb(255 255 255 / 0.06);
        /* --focus-ring-color: rgb(255 255 255 / 0.08); */
        --focus-ring-color: rgba(20, 142, 18, 0.56);
    }
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: var(--lh-base);
}

img {
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.site-main {
    min-height: 100svh;
    padding: var(--space-3xl);
    padding-block-start: 17svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    @media (min-width: 500px) {
        & {
            padding-block-start: 24svh;
        }
    }
}

.profile-card {
    width: 100%;
    max-width: var(--container-max-w);
    background: var(--surface-card-bg);
    border-radius: var(--radius-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    /* @media (min-width: 500px) {
        & {
            gap: 1rem;
            gap: .61rem;
        }
    } */
}

.profile-header {
    h1 {
        font-weight: 400;
        font-size: var(--fs-hero);
        letter-spacing: -0.01em;
        margin: 0.25rem 0;
        line-height: 1;
    }
}

.profile-subtitle {
    font-size: var(--fs-subtitle);
    color: var(--color-text-muted);
    margin: 0 0 10px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);

    .separator {
        background: currentColor;
        opacity: 0.5;
        inline-size: 2px;
        block-size: 2ch;
        display: none;
        /* toggle if needed */
    }
}

/* ==========================================================================
   Primary Nav (links grid)
   ========================================================================== */
.primary-nav {
    display: grid;
    grid-template-columns: 1fr;
    padding-block: 0.8rem;
    gap: var(--grid-gap);

    @media (min-width: 570px) {
        & {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (min-width: 300px) and (max-width: 569px) {
        & {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: contents;
        /* children participate in grid */
    }

    .nav-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2xs);
        padding: var(--space-xl);
        text-decoration: none;
        color: var(--color-text);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        transition:
            transform var(--transition-fast),
            background var(--transition-fast),
            border-color var(--transition-fast);
        outline: 0;
        font-size: 2.1rem;

        &:hover {
            background: var(--surface-hover);
            transform: translateY(-3px);
        }

        &:focus-visible {
            box-shadow: 0 0 0 6px var(--focus-ring-color);
        }

        svg,
        i {
            inline-size: 32px;
            block-size: 32px;
            color: var(--color-text-muted);
        }

        &:hover,
        &:hover svg,
        &:hover i {
            color: var(--color-text-muted-hover);
        }

        span {
            font-size: var(--fs-link-label);
            font-weight: 600;
            letter-spacing: 0.01em;
        }
    }
}

/* ==========================================================================
   Projects (Accordion)
   ========================================================================== */
.accordion {

    /* Hide default marker but keep semantics */
    summary::-webkit-details-marker {
        display: none;
    }

    summary::marker {
        content: "";
    }

    /* container section styling */
    &.projects {
        margin-top: var(--space-2xl);
        padding-top: var(--space-xl);
        border-top: 1px solid var(--color-border-subtle);
        text-align: left;
    }

    summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        inline-size: 100%;
        padding: 0.75rem 1rem;
        cursor: pointer;
        user-select: none;
        color: var(--color-text-muted);
        border-radius: 8px;
        list-style: none;
        transition: background var(--transition-fast), color var(--transition-fast);
        outline: 0;
        border: 1px solid var(--color-border-subtle);

        &:hover {
            background: var(--surface-hover);
            color: var(--color-link);
        }

        &:focus-visible {
            box-shadow: 0 0 0 6px var(--focus-ring-color);
        }
    }

    .accordion-title {
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .chevron {
        transition: transform 0.25s ease;
    }

    &[open] {
        summary {
            background: var(--surface-hover);
        }

        .chevron {
            transform: rotate(180deg);
        }

        .accordion-panel {
            grid-template-rows: 1fr;
        }
    }

    /* Animated reveal with grid rows (no layout jump) */
    .accordion-panel {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows var(--transition-medium);

        >* {
            min-height: 0;
        }
    }
}

/* Chips */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md) 0 0;
    padding: var(--space-md);
    border-bottom-left-radius: var(--radius-md);
    border-bottom-right-radius: var(--radius-md);
    background-color: var(--surface-card-bg-subtle);

    .chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-pill);
        background: var(--surface-chip);
        color: var(--color-text);
        text-decoration: none;
        border: 1px solid var(--color-border-subtle);
        font-size: var(--fs-chip);
        outline: 0;

        transition:
            background var(--transition-fast),
            border-color var(--transition-fast),
            transform var(--transition-slow);

        &:hover {
            background: var(--surface-hover);
            border-color: var(--color-link);
            transform: translateY(-1px);
        }

        &:focus-visible {
            box-shadow: 0 0 0 6px var(--focus-ring-color);
        }
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    margin-top: var(--space-xl);
    color: var(--color-text-subtle);
    font-size: var(--fs-small);
    text-align: center;
}

/* ==========================================================================
   Accessibility / Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   Temporary / Misc
   ========================================================================== */

.projects {
    display: none;
}

.site-main {
    @media (min-width: 500px) {
        & {
            padding-block-start: 28svh;
        }
    }
}


@media (max-height: 450px) {
    .site-main {
        padding: 15px;
        padding-bottom: 0;
        justify-content: center;
    }
    .profile-card {
        gap: 0;
    }
}