/* ============================================================
   HEADER & NAVIGATION
   File: layout-header.css
============================================================ */

/* ------------------------------
   HEADER WRAPPER
------------------------------ */
.connect-header {
    background: var(--connect-blue);   /* Default header colour */
    padding: 15px 0;
    color: #fff;
}

/* ------------------------------
   INNER FLEX CONTAINER
------------------------------ */
.connect-header__inner {
    display: flex;
    align-items: center;
}

/* ------------------------------
   LOGO
------------------------------ */
.connect-logo {
    margin-right: auto;
}

.connect-logo img {
    height: 50px;
    width: auto;
    display: block;
}

/* ------------------------------
   NAVIGATION MENU
------------------------------ */
.connect-nav__menu {
    list-style: none;
    display: flex;
    gap: 25px;
}

.connect-nav__menu a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

/* ------------------------------
   LOGIN BUTTON
------------------------------ */
.connect-login__button {
    background: #fff;
    color: var(--connect-blue);
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-left: 20px;
}

/* ------------------------------
   OPTIONAL: ENTRY-TYPE HEADER COLOURS
   (If you want header to match entry type)
------------------------------ */
.entry-business .connect-header {
    background: var(--connect-blue);
}

.entry-community .connect-header {
    background: var(--connect-green);
}

.entry-eachother .connect-header {
    background: var(--connect-orange);
}

.entry-community .connect-login__button {
    color: var(--connect-green);
}

.entry-eachother .connect-login__button {
    color: var(--connect-orange);
}