/* ==========================================================================
   Main-site page-specific styles: nav, footer, and the per-section rules for
   About/Résumé/Projects/Bookshelf/Contact. Depends on tokens.css for design
   tokens and shared object classes (.btn, .card, .tag, .banner, .cluster).
   ========================================================================== */

/* MARK: Nav */

#site-wrapper { width: 100% }

#nav-container { position: sticky; top: var(--space-sm); z-index: 100 }
#nav-logo-container { height: 48px }
#nav-logo-container:hover { filter: brightness(1.1); transform: rotate(-6deg) }
#nav-logo-container:active { filter: brightness(.9); transform: rotate(13deg) }
#nav-logo-text {
    font-weight: 700;
    padding: .375rem;
    background:
        radial-gradient(circle, rgba(255, 113, 18, 0.5) 0%, rgba(255, 69, 0, 0.5) 100%),
        linear-gradient(to bottom right, rgb(255, 122, 55), rgb(255, 197, 7));
}

.nav-button-container .btn {
    padding: var(--space-xs-sm) var(--space-md);
    background-color: var(--bg-app);
    color: var(--color-primary-text);
    font-family: var(--ff-mono);
    font-size: var(--space-md);
    height: 2.25rem;
    border: 1px solid var(--color-primary-text);
}

.nav-button-container .btn:hover {
    background-color: var(--action-hover);
    box-shadow: 0px 4px var(--action-brand);
    transform: translateY(-2px);
}

.nav-button-container .btn:active {
    color: var(--action-brand);
    box-shadow:
        inset 0px 2px 4px rgba(0, 0, 0, 0.35),
        0px 1px 1px rgba(153, 153, 153, 0.1);
    transform: translateY(0px) scale(.98);
    background-color: var(--action-active);
    filter: brightness(.95);
}

.nav-button-container a.selected {
    color: var(--action-brand);
    border-width: var(--border-w-1);
    border-color: var(--action-brand);
    border-bottom-width: var(--border-w-4);
}

.nav-external-button.btn:hover {
    --action-hover: var(--color-blue-200);
    --action-brand: var(--text-link);
}

/* Prevents unwanted shift when hovering on the current tab */
.nav-button-container a.selected:hover { box-shadow: none; transform: none }

@media (max-width: 920px) {
    .nav-button-container {
        gap: var(--space-sm);
    }
    .nav-button-container .btn {
        font-size: var(--fs-slightly-smaller);
        padding: var(--space-sm);
    }
}

/* Mobile menu toggle button — hidden by default */
#nav-menu-btn {
    display: none;
    background-color: var(--bg-app);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary-text);
    padding: 0;
    height: 2.25rem;
    min-height: 32px;
    width: 2.25rem;
    min-width: 32px;
    align-items: center;
    justify-content: center;
}

@media (max-width: 720px) {
    #nav-menu-btn {
        display: flex;
    }

    .nav-button-container {
        display: none;
    }

    .nav-button-container.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100% + var(--space-sm));
        right: var(--space-md);
        background-color: var(--bg-app);
        border: 1px solid var(--color-primary-border);
        border-radius: var(--radius-md);
        box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
        padding: var(--space-sm);
        gap: var(--space-sm);
        z-index: 200;
        min-width: 160px;
    }

    .nav-button-container.open .cluster {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-button-container.open .cluster .btn {
        width: 100%;
        text-align: left;
        padding-left: var(--space-lg);
    }
}

.back-link {
    font-size: var(--fs-slightly-smaller);
    color: var(--text-link);
    text-decoration: none;
}

/* MARK: Footer */

.footer-bg {
    min-height: 356px;
    aspect-ratio: 5;

    background-image:
    url('/assets/cascade-lines.svg'),
    linear-gradient(
        to bottom,
        oklab(100% 0 -0.00011 / 0) 13%,
        oklab(100% 0 -0.00011 / .35) 36%,
        oklab(75.765% -0.0188 -0.03844 / 0.4) 50%,
        oklab(51.658% -0.01814 -0.03656 / 0.75) 75%,
        oklab(34.623% -0.01041 -0.02669 / 0.95) 100%
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;
}

.footer-content-bg {
    background-image:
        linear-gradient(
            to bottom,
            oklab(34.623% -0.01041 -0.02669 / 0.95) 0%,
            oklab(34.623% -0.01041 -0.02669 / 0.95) 49%,
            oklab(34.623% -0.01041 -0.02669) 100%
        );
}

/* MARK: About */

.text-hero {
    font-size: 3rem;
    max-width: 8ch;
    color: var(--border-brand);
    line-height: 1;
    -webkit-text-stroke: 2px var(--color-hero-text-accent);
}

.text-hero-body { max-width: 40ch }

#what-am-i {
    display: inline-block;
    white-space: nowrap;
    line-height: normal;
    min-height: 1lh;
}

.written {
  font-family: "Covered By Your Grace", cursive;
  font-weight: 400;
  font-style: normal;
}

#typed-text {
    display: inline-block;
    width: fit-content;
    border-radius: .25rem;
    white-space: nowrap;
    justify-self: start;
    line-height: normal;
    min-height: 1lh;
}

.hero-photo { 
    max-width: 360px; 
    max-height: 360px;
    filter: grayscale(1);
}

.hero-photo:hover { filter: none; }

.open-to-work {
    border: 2px solid lab(70.0044% -64.3167 25.1545);
    border-radius: 1.5rem;
    background-color: var(--bg-work-status);
    text-align: center;
}

.open-to-work p {
    color: lab(70.0044% -64.3167 25.1545);
    font-size: 1.25rem;
    padding: .5rem 1.5rem;
}

.open-border { border-color: lab(70.0044% -64.3167 25.1545) }

.section--surface-alt {
    background-color: var(--color-mist-900);
}

/* Lets the My Story prose be written as plain markdown paragraphs while
   still getting the intended look, without per-paragraph classes. */
#my-story-content p {
    font-size: var(--fs-h5);
    line-height: var(--line-height-base);
    font-family: var(--ff-mono);
    width: 100%;
}

/* MARK: Résumé */

#resume-container .material-symbols-heading {
    font-size: 18px;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    text-decoration: none;
}

.changelog-items {
    list-style: none;
    padding-left: 0;
}

.changelog-items li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-0.14em);
    color: var(--border-accent);
    font-size: 1.75rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* MARK: Projects & Bookshelf (shared card-grid pattern) */

.project-grid,
.book-grid {
    display: grid;
    gap: var(--space-md);
}

.project-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.book-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.project-card {
    padding: var(--space-lg);
    color: inherit;
    align-items: flex-start;
}

.project-card:hover {
    background-color: var(--card-hover);
}

.project-icon {
    font-size: 2rem;
    color: var(--color-primary-text);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    border: 2px solid var(--color-primary-text);
    background-color: var(--border-subtle);
    line-height: normal;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

.book-card {
    overflow: hidden;
    color: inherit;
}

.book-image {
    display: block;
    width: 100%;
    height: 300px;
    aspect-ratio: 2 / 3;
    object-fit: contain;
}

#book-header .book-image {
    width: 200px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .project-card {
        padding: 1.25rem;
        gap: 0.75rem;
    }
}

/* MARK: Project detail view */

.project-column {
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: var(--space-md);
}

@media (max-width: 600px) {
    .project-header-row {
        flex-direction: column;
        gap: var(--space-md);
    }
}

/* Restore vertical rhythm to the markdown body (global resets zero out
   heading/paragraph margins). */
.project-body > * + * {
    margin-top: var(--space-md);
}

.project-body > :first-child {
    margin-top: 0;
}

.project-body h2,
.project-body h3 {
    font-family: var(--ff-mono);
    font-weight: 700;
}

.project-body h2 {
    margin-top: var(--space-2xl);
    font-size: var(--fs-h4);
}

.project-body h3 {
    margin-top: var(--space-xl);
    font-size: var(--fs-h5);
}

.project-body p,
.project-body li {
    font-size: var(--fs-base);
    line-height: var(--line-height-base);
}

/* MARK: Contact */

.avatar { max-width: 128px; aspect-ratio: 1/1; }

.contact-card-stack {
    position: relative;
    max-width: min(69ch, 100%);
}

.contact-card { transition: transform .7s ease, box-shadow .5s ease }

.contact-card:hover {
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .contact-card {
        padding: 1.5rem;
        row-gap: 1rem;
    }
}

@media (max-width: 480px) {
    .contact-card {
        padding: 1rem;
    }
}

.connect-btn {
    background-color: #0072b1;
    color: var(--text-on-brand);
    box-shadow: var(--shadow-sm);
    border-radius: var(--space-xl);
}

.connect-btn:hover {
    background-color: hsl(210, 90%, 50%);
    text-decoration: none;
}

.connect-btn--github {
    background-color: #24292f;
}

.connect-btn--github img {
    filter: invert(1);
}

.connect-btn--github:hover {
    background-color: #3a4149;
}

.paper {
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(
        168deg,
        rgb(252, 252, 250) 0%,
        rgb(235, 234, 232) 50%,
        rgb(247, 246, 244) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    transition: transform .3s ease-in;
}

.contact-card-stack .paper[data-paper="1"]  { z-index: -1;  transform: rotate(1.5deg)   translate(.5rem, 1rem); }
.contact-card-stack .paper[data-paper="2"]  { z-index: -2;  transform: rotate(2.2deg)  translate(.8rem, 1.2rem); }
.contact-card-stack .paper[data-paper="3"]  { z-index: -3;  transform: rotate(2.6deg)   translate(1.25rem, 1.5rem); }
.contact-card-stack .paper[data-paper="4"]  { z-index: -4;  transform: rotate(-2.4deg)  translate(1.2rem, 1.7rem); }
.contact-card-stack .paper[data-paper="5"]  { z-index: -5;  transform: rotate(3.3deg)  translate(.8rem, 1.89rem); }
.contact-card-stack .paper[data-paper="6"]  { z-index: -6;  transform: rotate(-2.5deg) translate(1.5rem, 1.7rem); }
.contact-card-stack .paper[data-paper="7"]  { z-index: -7;  transform: rotate(4.1deg)  translate(1.5rem, 2.2rem); }
.contact-card-stack .paper[data-paper="8"]  { z-index: -8;  transform: rotate(2.2deg) translate(1.8rem, 2.1rem); }
.contact-card-stack .paper[data-paper="9"]  { z-index: -9;  transform: rotate(3.4deg)  translate(2.1rem, 2.3rem); }
.contact-card-stack .paper[data-paper="10"] { z-index: -10; transform: rotate(-3.6deg) translate(2.3rem, 2.2rem); }

.contact-card:hover ~ .paper {
    transform: rotate(0deg);
    box-shadow: none;
}

.contact-card:hover ~ .paper[data-paper="1"]  { z-index: -1; transform: translate(var(--card-offset), var(--card-offset)) }
.contact-card:hover ~ .paper[data-paper="2"]  { z-index: -2; transform: translate(calc(var(--card-offset) * 2), calc(var(--card-offset) * 1.5)) }
.contact-card:hover ~ .paper[data-paper="3"]  { z-index: -3; transform: translate(calc(var(--card-offset) * 2.5), calc(var(--card-offset) * 2.75)) }
.contact-card:hover ~ .paper[data-paper="4"]  { z-index: -4; transform: translate(calc(var(--card-offset) * 3.5), calc(var(--card-offset) * 3)) }
.contact-card:hover ~ .paper[data-paper="5"]  { z-index: -5; transform: translate(calc(var(--card-offset) * 5), calc(var(--card-offset) * 4)) }
.contact-card:hover ~ .paper[data-paper="6"]  { z-index: -6; transform: translate(calc(var(--card-offset) * 6), calc(var(--card-offset) * 5)) }
.contact-card:hover ~ .paper[data-paper="7"]  { z-index: -7; transform: translate(calc(var(--card-offset) * 6.5), calc(var(--card-offset) * 5.5)) }
.contact-card:hover ~ .paper[data-paper="8"]  { z-index: -8; transform: translate(calc(var(--card-offset) * 7), calc(var(--card-offset) * 6)) }
.contact-card:hover ~ .paper[data-paper="9"]  { z-index: -9; transform: translate(calc(var(--card-offset) * 7.5), calc(var(--card-offset) * 6.5)) }
.contact-card:hover ~ .paper[data-paper="10"] { z-index: -10; transform: translate(calc(var(--card-offset) * 8), calc(var(--card-offset) * 7.5)) }

@media (max-width: 480px) {
    .paper { display: none }
}