/*
 * bc-navbar.css — Phase 5 scoped main-navigation styling (replaces the #navbar /
 * .navbaritem / .ddmenucont rules of css/nav.css for the header.php bar)
 *
 * Styles the Bootstrap 5 nav + dropdown markup emitted by header.php (and the
 * Setup header, include/main_header.php) to look exactly like the retired YUI
 * MenuBar bar, WITHOUT loading bootstrap.css (that arrives sitewide in Phase 8,
 * at which point this file shrinks to a few overrides or goes away). Everything
 * is scoped under .bc-navbar so no other page element is touched.
 *
 * Colours and the tab sprites are per theme: see the ".bc-navbar" block at the
 * end of each css/branding/*.css. The old #navbar rules in css/nav.css and in the
 * themes are left in place for the bccommon mgmt pages / bookmembers header that
 * still render the legacy markup; they are pruned in Phase 8.
 *
 * Behaviour: HOVER-open by pure CSS (the :hover / :focus-within rules below). No JS and no
 * Bootstrap Dropdown plugin: that keeps each section label a real link to its landing
 * page, as the YUI bar had it. Click-to-open (Bootstrap Dropdown data-API, Popper) was
 * tried on 2026-10-07 and rejected for exactly that reason; to revisit, import
 * bootstrap/js/src/dropdown.js in the sync core and add data-bs-toggle="dropdown" to the
 * labels — the markup and the .show rule below already fit.
 */

/* ── Bar ───────────────────────────────────────────────────────────────── */
.bc-navbar {
    float: left;                       /* #searchbar + #sysdatebox float beside it, as before */
    margin: 0;
    padding: 0;
}

.bc-navbar .nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bc-navbar .nav-item {
    position: relative;                /* anchor for the dropdown */
    list-style: none;
    margin: 0;
    padding: 0 0 0 10px;               /* nav.css: li.navbaritem padding — shows the sprite's left edge */
}

.bc-navbar .nav-link {
    display: block;
    padding: 0 10px 0 0;               /* nav.css: the sprite's right cap sits in this padding */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    font-weight: bold;
    line-height: 32px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* No caret: the legacy bar had none and the label is a link, not a toggle (Bootstrap's
   .dropdown-toggle::after caret arrives with bootstrap.css in Phase 8 — suppress it then). */
.bc-navbar .dropdown-toggle::after {
    content: none;
}

/* ── Dropdown menu ─────────────────────────────────────────────────────── */
.bc-navbar .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 10px;                        /* align with the tab body (li padding-left) */
    z-index: 1000;
    min-width: 130px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
}

.bc-navbar .dropdown-menu.show {
    display: block;
}

/* Hover-open (mouse) and keyboard (Tab into the label or an item) — the menu is a child of
   the <li> and starts at its bottom edge, so moving the pointer down into it stays "hovered". */
.bc-navbar .nav-item.dropdown:hover > .dropdown-menu,
.bc-navbar .nav-item.dropdown:focus-within > .dropdown-menu {
    display: block;
}

.bc-navbar .dropdown-menu > li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bc-navbar .dropdown-item {
    display: block;
    padding: 2px 8px;
    line-height: 1.5em;
    font-weight: 100;                  /* nav.css: dropdown links are not bold */
    text-decoration: none;
    white-space: nowrap;
    background-image: none;
}

/* nav.css widths per menu (#ddfrontdeskcont 130px, #ddbookingscont 150px) */
#ddbookings { min-width: 150px; }

/* ── Setup header variant (include/main_header.php) ────────────────────── */
/* Centred, no floats, FontAwesome 4 icons in the labels (nav_setup.css section.bc_menu) */
.bc-navbar.bc-navbar-setup {
    float: none;
}
.bc-navbar.bc-navbar-setup .nav {
    justify-content: center;
}