/* ==========================================================
   layout.css
   Core layout primitives: container, section spacing,
   and footer. Grid/flex patterns live in components.css.
   Part of: Mohammed Shehzad Khan Portfolio v2.0
========================================================== */

/* ── Root scroll behaviour ─────────────────────────── */
/* Smooth scrolling for in-page anchor navigation.
   Disabled under prefers-reduced-motion for accessibility. */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ── Container ───────────────────────────────────────── */

.container {
    width: min(100% - 48px, var(--container));
    margin-inline: auto;
}

/* ── Section spacing ─────────────────────────────────── */
/* scroll-margin-top accounts for the 72px sticky header so
   anchored jumps land the heading below the header, not
   hidden behind it. */

section {
    padding: var(--section-py) 0;
    scroll-margin-top: var(--header-height);
}

.bg-surface { background: var(--bg-surface); }
.bg-alt { background: var(--bg-alt); }

/* ── Footer ──────────────────────────────────────────── */

footer {
    padding: 64px 0;
    border-top: 1px solid var(--accent);
    background: #0F172A;
    color: var(--text-muted);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem 2rem;
}

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

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
}

/* Dark-section override: global `p` colour (#374151) fails contrast on #0F172A. */
footer p { color: rgba(255,255,255,0.7); }

.footer-nav a {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    transition: color var(--transition);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
    color: white;
    text-decoration: underline;
}

.footer-social {
    display: flex;
    gap: 1.25rem;
}

.footer-social a {
    color: rgba(255,255,255,0.9);
    font-size: 0.9rem;
    font-weight: 600;
    transition: opacity var(--transition);
}

.footer-social a:hover,
.footer-social a:focus-visible {
    opacity: 0.75;
    outline-offset: 4px;
    text-decoration: underline;
}