/* ========================================
   HEADER
   ======================================== */

.site-header {
    width: 100%;
}

.site-header__container {
    min-height: 60px;

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


/* ========================================
   BRAND
   ======================================== */

.site-header__brand {
    display: flex;
    align-items: center;

    gap: var(--spacing-3);
}


/* ========================================
   LOGO
   ======================================== */

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

.site-header__logo-image {
    display: block;

    width: auto;
    height: 40px;
    max-width: 160px;

    object-fit: contain;
}


/* ========================================
   BEDRIJFSNAAM
   ======================================== */

.site-header__name {
    color: var(--color-text);

    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);

    text-decoration: none;
}


/* ========================================
   ACTIONS
   ======================================== */

.site-header__actions {
    display: flex;
    align-items: center;

    gap: var(--spacing-6);
}


/* Contact */

.site-header__contact,
.site-header__account {
    color: var(--color-text);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    text-decoration: none;

    transition:
        color var(--transition-normal);
}

.site-header__contact:hover,
.site-header__account:hover {
    color: var(--color-primary);
}

.site-header__logo-text {
    color: var(--color-text);

    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);

    text-decoration: none;
}

/* ========================================
   Account activation
   ======================================== */

   #account-navigation {
    display: flex;
    align-items: center;
    gap: var(--spacing-5);
}