:root {
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    --accent-color: #0077cc;
    --accent-hover: #005fa3;
    --text-color: #222;

    --button-color: #333;

    --font-size-adjust-body: 0.52;
    --font-size-adjust-heading: 0.54;

    --header-footer-color: #f8f8f8;
    --body-background-color: #f0f0f0;
}

/* Simple reset */
body, h1, h2, h3, ul {
    margin: 0;
    padding: 0;
}

header {
    /* border: 2px solid red; */
    border-bottom: 2px solid gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--header-footer-color, white);
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    font-size: clamp(1rem, 1.5vw, 1.45rem);
    z-index: 1000;
    
    nav {
        ul {
            display: flex;
            gap: 2rem;
            list-style: none;
        }
    
        a {
            text-decoration: none;
            color: var(--text-color, #0077cc);
            font-weight: 500;
            transition: color 0.3s ease;
            position: relative; 

            &::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -3px;
                width: 0%;
                height: 2px;
                background-color: var(--accent-color);
                transition: width 0.3s ease, opacity 0.3s ease;
                opacity: 0;
            }

            &:hover {
                color: var(--accent-hover, darkblue);

                &::after {
                    width: 100%;
                    opacity: 1;
                }
            }

            &.active::after {
                width: 100%;
                opacity: 1;
            }
        }
    }
}


footer {
    /* border: 2px solid red; */
    border-top: 2px solid gray;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--header-footer-color, white);
    padding: 1rem 2rem;
    margin-top: 2rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;

    nav ul {
        display: flex;
        gap: 1rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: transparent;
        transition: background-color 0.2s ease;
    }


    img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        display: block;
        filter: grayscale(30%) brightness(0.9);
        transition: filter 0.2s ease;
    }

    a:hover {
        background-color: #0077cc15;
    }

    a:hover img {
        filter: none;
    }

    p {
        font-size: 0.9rem;
        color: var(--text-color, #222);
        margin: 0;
    }
}

html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    font-size-adjust: var(--font-size-adjust-body, 0.5); /* baseline 2024 feature*/
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--body-background-color, #f1f1f1);
    margin: 0;

    min-height: 100dvh;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: var(--font-weight-bold, 700);
    font-style: normal;
    font-size-adjust: var(--font-size-adjust-heading, 0.5); /* baseline 2024 feature*/
}

header > span {
    font-weight: 900;
    letter-spacing: 0.02em;
}

em, i {
    font-style: italic;
}

main {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas:
        "intro visual"
        "quick quick";
    gap: 1.25rem 2rem;
    align-items: start;
    /* padding: 1rem 2rem; */
    padding: 2dvh 4dvw;
    min-height: 80dvh;
    max-width: 1200px;
    margin: 1rem auto 0 auto;
    flex: 1 1 auto;
    padding-bottom: clamp(48px, 6vh, 96px);
}

profile-card {
    grid-area: intro;
    display: block;
    place-self: center;
}

#profile-photo {
    grid-area: visual;
    place-self: center;
    text-align: center;
    animation: fadeInUp 1.2s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;

    .spin-trigger svg {
        width: min(42vw, 420px);
        height: auto;
        display: block;
        transition: transform 0.3s ease;
        cursor: pointer;
        transform-origin: center;
    }

    .click-hint {
        display: block;
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: #555;
        font-style: italic;
        opacity: 0.8;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    &:hover .click-hint {
        opacity: 1;
        transform: translateY(-2px);
    }
}

#spin-toggle:checked + .spin-trigger svg {
    animation: profile-photo-spin 1.2s ease-in-out;
}

@keyframes profile-photo-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@scope (#quick-links) {
        grid-area: quick;
        margin-top: 0.5rem;
        padding: 0.75rem 1rem;
        background: color(display-p3 0.9 0.9 0.9);
        border-radius: 6px;

        h2 {
            font-weight: 700;
            margin-bottom: 0.5rem;
        }

        ol {
            margin: 0;
            padding-left: 1.5rem;
        }

        a {
            color: var(--accent-color);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s ease, text-decoration 0.2s ease;

            &:hover {
                color: var(--accent-hover);
                text-decoration: underline;
            }

            &:visited {
                color: var(--accent-color);
            }
        }
}

#intro {
    display: grid;
    grid-template-areas:
        "title"
        "copy"
        "actions";
    row-gap: 0.9rem;

    & > h1 {
        grid-area: title;
        margin: 0;
        max-width: 22ch;

        font-size: clamp(2.5rem, 5vw, 3.5rem);

        animation: fadeInUp 1.2s ease-out forwards;
        animation-delay: 0.2s;
        opacity: 0;
    }

    & > p {
        grid-area: copy;
        margin: 0;
        max-width: 42ch;
        font-size: clamp(1rem, 1.5vw, 1.45rem);
        line-height: 1.7;

        animation: fadeInUp 1.6s ease-out forwards;
        animation-delay: 0.6s;
        opacity: 0;
    }

    & > button-container {
        grid-area: actions;

        display: flex;
        gap: 1rem;
        flex-wrap: wrap;

        animation: fadeInUp 1.8s ease-out forwards;
        animation-delay: 1s;
        opacity: 0;
    }

    button, .btn {
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        font-size: 1rem;
        letter-spacing: 0.02em;

        padding: 0.6em 1.2em;
        border: 2px solid var(--button-color, --text-color);
        border-radius: 6px;
        background-color: transparent;
        color: var(--button-color, --text-color);

        text-decoration: none;
        display: inline-block;

        cursor: pointer;
        transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;

        &:hover {
            background-color: var(--button-color);
            color: #fff;
            transform: translateY(-2px);
        }

        &:active {
            transform: translateY(0);
            background-color: #555;
        }
    }
}

/* Phones */
@media (max-width: 600px) {
    main {
    grid-template-columns: 1fr;
    grid-template-areas:
        "visual"
        "intro"
        "quick";
    text-align: center;
    }

    header nav ul {
        flex-direction: column;
        gap: 1rem;
    }

    #profile-photo svg {
        width: 60dvw;
    }

    button-container {
        justify-content: center;
    }
} 

/* Desktops */
@media (min-width: 1025px) {
    main {
        grid-template-columns: 1.2fr 1fr;
    }
}

/* Tablets/Laptops */
@media (min-width: 601px) and (max-width: 1024px) {
    main {
        grid-template-columns: 1fr 1fr;
    }
}

/* Mobile */
@media (max-width: 600px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;


        nav ul {
            flex-direction: column;
            gap: 0.6rem;
            width: 100%;

            a {
                font-size: 1.05rem;
                display: block;
            
                &.active::after {
                    width: 55%;
                    opacity: 1;
                }
            }
        }
    }

    main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "visual"
            "intro"
            "quick";
        text-align: center;
        gap: 1.8rem;
        padding: 2rem 1rem 5rem;
        min-height: auto;
    }

    #profile-photo .spin-trigger svg {
        width: 60vw;
        max-width: 260px;
    }
}

/* No Animation Responsiveness */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}