/* MoneyMastermind — merged-topbar styling
 *
 * Twee onderdelen:
 *  1. LAYOUT-overrides voor de merged-bar HTML-structuur (3 secties: logo /
 *     menu / rechts) — geldt voor IEDEREEN (logged-in + guest) omdat de
 *     base theme.css de oude 2-section layout assumeert die in deze HTML
 *     mismaakt rendert (justify-content: center clustert alles in midden,
 *     absolute search-loupe overlapt, etc.).
 *  2. GUEST-only overrides voor positie/hoogte van de bar — logged-in
 *     blijft op de originele top:50px met 50px hoogte zodat de stories-
 *     bar daaronder niet overlapt.
 *
 * KRITISCHE BASE-RULE: `.topbar { height: 50px }` pint de bar op exact
 * 50px. Voor gasten overschrijven we dat naar 80px zodat items niet over
 * de onderrand van de witte achtergrond vallen.
 */

/* ═══════════════════════════════════════════════════════════════════
 * #1 — LAYOUT (iedereen): 3-section flex met logo-left / menu-center /
 * rechtersectie-right.
 * ═══════════════════════════════════════════════════════════════════ */

#topbar-second.mm-merged-bar > .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 1rem !important;
}

#topbar-second.mm-merged-bar .mm-bar-section {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#topbar-second.mm-merged-bar .mm-bar-left {
    flex: 0 0 auto !important;
}

#topbar-second.mm-merged-bar .mm-bar-center {
    flex: 1 1 auto !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
}

#topbar-second.mm-merged-bar .mm-bar-right {
    flex: 0 0 auto !important;
    gap: 0.5rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Logo max-height — base `#topbar-first .navbar-brand img { max-height: 36px }`
 * past niet op onze `.mm-bar-left .navbar-brand img` */
#topbar-second.mm-merged-bar .topbar-brand .navbar-brand img,
#topbar-second.mm-merged-bar .topbar-brand .navbar-brand svg {
    max-height: 36px !important;
    width: auto !important;
}

/* Zoek-loupe inline (was absolute right:16px in base) */
#topbar-second.mm-merged-bar #search-menu-nav {
    position: relative !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    float: none !important;
}

/* Lege notifications-div bij gasten neemt geen ruimte */
#topbar-second.mm-merged-bar .notifications:empty {
    display: none !important;
}

/* Logged-in only: 8px extra verticale ruimte tussen icoon en label in
 * top-menu items. Gescoped op :not(.mm-guest) zodat gasten ongemoeid
 * blijven. */
body.mm-topbar-merged:not(.mm-guest) #topbar-second.mm-merged-bar #top-menu-nav .nav-link i {
    display: block !important;
    margin-bottom: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * #2 — GUEST-only: bar positie & hoogte
 * ═══════════════════════════════════════════════════════════════════ */

/* Geen 50px lege ruimte boven de bar voor gasten */
body.mm-guest #topbar-second.mm-merged-bar {
    top: 0 !important;
    /* Override base `.topbar { height: 50px }` — anders vallen items met
     * align-items:center half over de onderrand omdat .container groter is
     * dan de bar zelf. */
    height: 80px !important;
}

/* Body padding-top matchen aan de nieuwe bar-hoogte. Logged-in blijft
 * op de HumHub-default (100px = ruimte voor 2 originele balken). */
body.mm-guest.mm-topbar-merged {
    padding-top: 80px !important;
}

/* Container ook 80px hoog + full-width (geen Bootstrap max-width:1240px) */
body.mm-guest #topbar-second.mm-merged-bar > .container {
    min-height: 80px !important;
    height: 80px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Menu items voor gasten — base font-size:10px is te klein. Iets groter
 * zodat de items leesbaar zijn in de bredere 80px-bar. */
body.mm-guest #topbar-second.mm-merged-bar #top-menu-nav .nav-link {
    font-size: 12px !important;
    padding: 8px 14px 0 !important;
    text-align: center !important;
}

/* Icon op block-niveau + text-align center zorgt dat het FA-glyph
 * gecentreerd boven de tekst staat (zonder text-align zou block-i
 * z'n inhoud links-alignen). */
body.mm-guest #topbar-second.mm-merged-bar #top-menu-nav .nav-link i {
    font-size: 18px !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* HumHub voegt na elke icon een <br>. Die elementen vallen out-of-flow
 * met display:none anders blijven ze een lege regel produceren naast
 * de margin-bottom van de block-icon. */
body.mm-guest #topbar-second.mm-merged-bar #top-menu-nav .nav-link br {
    display: none !important;
}

/* Voorkom dat HumHub's overflow-JS (humhub.ui.topNavigation.js) alle
 * items naar het verborgen #top-menu-sub-dropdown gooit. Force ze
 * zichtbaar. */
body.mm-guest #topbar-second.mm-merged-bar #top-menu-nav > .top-menu-item {
    display: list-item !important;
}

body.mm-guest #topbar-second.mm-merged-bar #top-menu-sub {
    display: none !important;
}

/* Guest action buttons */
body.mm-guest #topbar-second.mm-merged-bar .mm-account-guest-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
}

body.mm-guest #topbar-second.mm-merged-bar .mm-account-guest-actions .btn-enter,
body.mm-guest #topbar-second.mm-merged-bar .mm-account-guest-actions .btn-primary {
    background-color: var(--bs-primary, #1e293b) !important;
    border-color: var(--bs-primary, #1e293b) !important;
    color: #ffffff !important;
}

body.mm-guest #topbar-second.mm-merged-bar .mm-account-guest-actions .btn-enter:hover,
body.mm-guest #topbar-second.mm-merged-bar .mm-account-guest-actions .btn-primary:hover {
    background-color: var(--bs-primary-text-emphasis, #0c1018) !important;
    border-color: var(--bs-primary-text-emphasis, #0c1018) !important;
}