@use "../core/variables" as *;
@use "../core/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;

    @include interactive-transition;

    &:hover {
        color: $color-primary;
    }

    &:focus-visible {
        @include focus-ring;
        border-radius: $radius-sm;
    }
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: $spacing-md;
}

// Nom d'utilisateur connecté dans le header
.site-header__user {
    color: $color-text-muted;
}

// É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: inherit;

    @include interactive-transition;

    &:hover {
        text-decoration: none;
    }

    &:focus-visible {
        outline: 2px solid $focus-ring-color;
        outline-offset: 2px;
        border-radius: $radius-sm;
    }
}

@include mobile {
    .site-header__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: $spacing-md;
    }

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