/* buttons */
.btn-login,
.btn-logout {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    border: 2px dashed var(--brand-color-hex);
    color: var(--brand-color);
    background: transparent;
    transition: 0.25s;
}




.btn-login:hover,
.btn-logout:hover {
    opacity: 0.8;
    transform: scale(1.05);
}


/* HEADER + FOOTER DARK MODE FIX */
body.dark-mode .actor-login-nav,
body.dark-mode .brand-text {
    color: #fff;
}

/* responsive layout */
@media (max-width: 730px) {

    .btn-login,
    .btn-logout {
        font-size: 1rem;
    }
}


.login-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}




.actor-login-nav {
    margin-left: auto;
    gap: 1.3rem;
}




/* brand text */
.brand-text {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-color);
    text-decoration: none;
}

/* navigation area */
.actor-login-nav {
    display: flex;
    align-items: right;
    gap: 1.3rem;
    font-size: 1.2rem;
	border: none;
}

/* username display */
.actor-login-nav .user {
    opacity: 0.8;
}




/* responsive layout */
@media (max-width: 730px) {

    .login-header-inner {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        text-align: center;
    }

    .brand-text {
        font-size: 1.7rem;
    }

    .actor-login-nav {
        flex-direction: column;
        gap: 0.8rem;
        font-size: 1.1rem;
		border: none;
    }

}



.login-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Make three equal-width zones */
.header-left,
.header-center,
.header-right {
    flex: 1;
}

/* Align text inside */
.header-left {
    text-align: left;
}

.header-center {
    text-align: center;
}

.header-right {
    text-align: right;
    min-width: max-content;  /* prevent flex from shrinking button */
}

/* Optional: inline alignment fix for inner items */
.actor-login-nav a,
.actor-login-nav span {
    display: inline-block;
    margin: 0 0.5rem;
}