/* Logo link */
.logo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

/* Wrap icon + text in one row */
.logo-text {
    display: flex;
    align-items: center;
    gap: 0;

    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: rgb(15 23 42); /* slate-900 */
}

/* Logo image container */
.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo image itself */
.logo-icon img {
    height: 1.8rem;
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}

/* Hover effect */
.logo-link:hover .logo-icon img {
    transform: scale(1.05);
}

/* Brand highlight */
.logo-highlight {
    color: var(--color-logo);
}

/* Dark mode */
.dark .logo-text {
    color: white;
}

.dark .logo-highlight {
    color: var(--color-brand-100);
}

/* Optional suffix */
.logo-suffix {
    color: rgb(148 163 184);
    font-weight: 400;
    font-size: 1rem;
    margin-left: 0.25rem;
}

.dark .logo-suffix {
    color: rgb(100 116 139);
}

/* Navigation */
.nav {
    display: none;
}


@media (min-width: 768px) {
    .nav {
        display: flex;
        align-items: center;
        gap: 2rem;
    }
}

/* Nav base text */
.nav {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(71 85 105); /* slate-600 */
}

/* Dark nav */
.dark .nav {
    color: rgb(203, 213, 225); /* slate-300 */
}

/* Nav links */
.nav-link {
    transition: color 0.2s;
}

/* Hover */
.nav-link:hover {
    color: rgb(59, 130, 246); /* brand-500 */
}

/* Dark hover */
.dark .nav-link:hover {
    color: rgb(96, 165, 250); /* brand-400 */
}

.nav-link--active {
    color: var(--color-brand-500);
    font-weight: 600;
}

.dark .nav-link--active {
    color: #93c5fd; /* brand-300 equivalent */
}