/* ============================================ */
/* COMPONENTS.CSS - КНОПКИ, НАВИГАЦИЯ, ОБЩИЕ КОМПОНЕНТЫ */
/* ============================================ */

/* ============================================ */
/* NAVIGATION - REFINED CONSISTENCY */
/* ============================================ */
.nav {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-bg-tertiary);
    padding: var(--space-4) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-title {
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
}

.nav-signature {
    font-family: var(--font-signature);
    color: var(--color-accent-purple);
    font-weight: 600;
    font-style: italic;
}

.nav-links {
    display: flex;
    gap: var(--space-6);
}

.nav-links a {
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--color-accent-purple);
}

.logout-form {
    display: inline-flex;
    margin: 0;
}

.logout-btn {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.logout-btn:hover {
    color: var(--color-accent-purple);
}

/* ============================================ */
/* BUTTONS - CONSISTENT SYSTEM */
/* ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid;
    transition: all 0.2s ease;
    cursor: pointer;
    margin: var(--space-1);
}

.btn-primary {
    background: var(--color-accent-purple);
    color: var(--color-text-primary);
    border-color: var(--color-accent-purple);
}

.btn-primary:hover {
    background: var(--color-accent-purple-dark);
    border-color: var(--color-accent-purple-dark);
    transform: translateY(-1px);
    color: var(--color-text-primary);
}

.btn-secondary {
    background: transparent;
    color: var(--color-accent-purple);
    border-color: var(--color-accent-purple);
}

.btn-secondary:hover {
    border-color: var(--color-accent-purple-dark);
    background: var(--color-accent-purple-dark);
    color: var(--color-text-primary);
}

.btn-pricing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4) var(--space-6);
    background: var(--color-accent-purple);
    color: var(--color-text-primary);
    border: 2px solid var(--color-accent-purple);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: var(--text-base);
    transition: all 0.2s ease;
    width: 100%;
    text-align: center;
}

.btn-pricing:hover {
    background: var(--color-accent-purple-dark);
    border-color: var(--color-accent-purple-dark);
    transform: translateY(-1px);
    color: var(--color-text-primary);
}

/* ============================================ */
/* CONTAINER SYSTEM */
/* ============================================ */
.container {
    max-width: var(--container-standard);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-tight {
    max-width: var(--container-tight);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ============================================ */
/* MICRO ACCENTS */
/* ============================================ */
.micro-accent {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 var(--space-1);
}

.micro-accent-purple {
    background: var(--color-bright-purple);
}

.micro-accent-cyan {
    background: var(--color-bright-cyan);
}

.micro-accent-green {
    background: var(--color-bright-green);
}

.micro-accent-pink {
    background: var(--color-bright-pink);
}

.micro-accent-orange {
    background: var(--color-bright-orange);
}

/* ============================================ */
/* UTILITY CLASSES */
/* ============================================ */
.py-4 {
    padding: var(--space-16) 0;
}

/* ============================================ */
/* MOBILE NAVIGATION - LOGICAL BEHAVIOR */
/* ============================================ */
@media (max-width: 768px) {
    .nav-links {
        display: flex;
        gap: var(--space-3);
    }

    /* Hide ALL navigation links by default on mobile */
    .nav-links a {
        display: none;
    }

    /* ALWAYS show essential auth links */
    .nav-links a[href*="login"],
    .nav-links a[href*="dashboard"] {
        display: inline-flex;
        font-size: var(--text-sm);
    }

    /* Show links back to homepage (from other pages like /about) */
    .nav-links a[href="/"],
    .nav-links a[href=""] {
        display: inline-flex;
        font-size: var(--text-sm);
    }

    /* HIDE anchor links within the same page (like #course-topics, #pricing) */
    /* These are not needed since user can scroll on the same page */
    .nav-links a[href^="#"] {
        display: none !important;
    }

    /* Keep logout form visible for authenticated users */
    .logout-form {
        display: inline-flex;
    }

    .logout-btn {
        font-size: var(--text-sm);
    }

    .nav-title {
        font-size: var(--text-lg);
    }

    .nav-signature {
        font-size: var(--text-base);
    }
}