/*
 * Site header component
 *
 * Wordmark and nav styling. Header shell positioning lives in layout.css.
 */

.wordmark {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    letter-spacing: 0.005em;
}

.wordmark:hover {
    color: var(--color-primary-hover);
}

.site-nav {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.site-nav a {
    color: var(--color-ink-muted);
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.site-nav a:hover {
    color: var(--color-primary);
}

/* On mobile, stretch the nav to full width so the text links sit on the
   left and the icon buttons (theme, settings) are pushed to the right. */
@media (max-width: 720px) {
    .site-nav {
        width: 100%;
    }

    .site-nav .theme-toggle {
        margin-left: auto;
    }
}