/* ============================================
   AIVIXA — Master Stylesheet
   ============================================ */

@import url('variables.css');
@import url('utilities.css');
@import url('animations.css');
@import url('responsive.css');

/* ─── Base Resets ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── Material Symbols Config ─── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── Smooth Scrolling ─── */
html {
    scroll-behavior: smooth;
}

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

/* ─── Selection Color ─── */
::selection {
    background-color: var(--color-secondary-fixed);
    color: var(--color-on-secondary-fixed);
}

/* ─── Focus Visible ─── */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ─── Body Scroll Lock (when mobile menu is open) ─── */
body.menu-open {
    overflow: hidden;
}

/* ─── Consistent Image Rendering ─── */
img {
    display: block;
    max-width: 100%;
}

/* ─── Skip to Content Link ─── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.skip-link:focus {
    top: 1rem;
}
/* ============================================ */
.side-nav-link{
    color: inherit;
    transition: color .25s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.side-nav-link:hover{
    color: var(--color-primary);
}

.side-nav-link.active{
    color: var(--color-primary);
    font-weight: 700;
}

.side-nav-link.active::before{
    content: "•";
    color: var(--color-secondary-fixed);
    margin-right: .5rem;
}