/* --- Core Styles --- */
body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: background-color 0.8s ease-in-out;
    color: #0f172a;
    margin: 0;
}

html, body {
    height: 100%;
}

/* --- Shared Layout Logic (The "Grid") --- */

.container-padding {
    /* We use !important to ensure this always wins over Tailwind shorthand like p-8 */
    padding-left: 1.5rem !important; 
    padding-right: 1.5rem !important;
}

@media (min-width: 768px) {
    .container-padding {
        padding-left: 6rem !important;
    }
}

@media (min-width: 1024px) {
    .container-padding {
        padding-left: 12rem !important;
    }
}

/* --- Component Styles --- */

.site-header {
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.site-footer {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.nav-list {
    display: flex;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .nav-list {
        gap: 2.5rem;
    }
}

.nav-link-first {
    padding-left: 0 !important;
}

.profile-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

::selection {
    background-color: #e2e8f0;
}