@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

// =============================================================
// Header
// =============================================================

.site-header {
    border-bottom: 1px solid $color-border-light;
    padding: $spacing-md 0;
    margin-bottom: $spacing-xl;
}

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

.site-header__logo {
    margin: 0;
}

// Lien englobant le titre du blog — élément BEM dédié plutôt qu'un sélecteur descendant sur <a>
.site-header__logo-link {
    text-decoration: none;
    color: inherit;
}

.site-header__nav {
    display: flex;
    align-items: center;
}

// Nom d'utilisateur connecté dans le header
.site-header__user {
    margin-right: $spacing-md;
}

// Élément d'action cliquable dans le header (lien ou bouton)
.site-header__action {
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: $color-primary;
    font-family: inherit;
    font-size: inherit;
    margin-right: $spacing-md;

    &:hover {
        text-decoration: none;
    }
}

@include mobile {
    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .site-header__nav {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: $spacing-sm;
    }

    .site-header__action {
        margin-right: 0;
    }

    // Supprimer les marges droites — remplacées par le gap de la nav
    .site-header__user {
        margin-right: 0;
    }
}