/* ==========================================================================
   chrome.css
   Site header, primary navigation, footer.
   All values reference tokens.css. Nothing is hardcoded.
   Load order is base -> chrome -> components -> responsive and must not
   change: responsive.css contains the overrides that depend on coming last.
   ========================================================================== */

/* ---------- Header / nav ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface);
    border-bottom: var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 64px;
}

.monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    text-decoration: none;
}

.monogram__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: 1.05rem;
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
    background: var(--color-surface-raised);
    border: var(--border-width) solid var(--color-text-primary);
    border-radius: var(--radius-xs);
    transition: var(--transition-interactive);
}

.monogram:hover .monogram__mark {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.site-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list a {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-brand);
}

.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
    color: var(--color-text-primary);
}

.site-nav__list a[aria-current="page"] {
    text-decoration: underline;
    text-underline-offset: 0.4em;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--color-accent);
}

/* Toggle buttons (nav + theme) share a compact icon-button look */
.nav-toggle,
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--color-text-secondary);
    background: transparent;
    border: var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-brand),
        border-color var(--dur-fast) var(--ease-brand);
}

.theme-toggle { margin-left: var(--space-md); }

.nav-toggle:hover,
.theme-toggle:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.nav-toggle .icon,
.theme-toggle .icon {
    width: 20px;
    height: 20px;
}

.nav-toggle {
    display: none; /* mobile only */
}

/* nav-toggle icon swap */
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* theme-toggle icon swap: light shows moon (go dark), dark shows sun */
.theme-toggle__sun { display: none; }
html[data-theme="dark"] .theme-toggle__moon { display: none; }
html[data-theme="dark"] .theme-toggle__sun { display: block; }

/* ---------- Footer ---------- */
.site-footer {
    flex-shrink: 0;
    margin-top: var(--space-section);
    background: var(--color-surface);
    border-top: var(--border);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-xl);
}

.site-footer__identity {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--fs-small);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    font-size: var(--fs-small);
}

.site-footer__legal a {
    color: var(--color-text-secondary);
}

.site-footer__legal a:hover {
    color: var(--color-accent);
}

.social {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: color var(--dur-fast) var(--ease-brand);
}

.social__link .icon {
    width: 20px;
    height: 20px;
}

.social__link:hover {
    color: var(--color-accent);
}