/* ============================================================
   BSN — Brilliant Staff Nav (standalone navigation component) v2
   ------------------------------------------------------------
   Every rule is scoped under .bsn- — no bare element selectors —
   so this cannot conflict with any other stylesheet on the page.

   Structure:
     .bsn-topbar   — one-line strip: pills+phone (left), tagline
                     (center), email+socials+CTA (right). On
                     mobile, only phone + CTA remain, still one line.
     .bsn-navbar   — 3-column grid (left / logo / right) so the
                     logo is always mathematically centered, no
                     matter how many items are on either side.
                     On mobile the same grid shows toggle (left)
                     and phone (right) instead.
   ============================================================ */

.bsn-root, .bsn-root * {
    box-sizing: border-box;
}
.bsn-root {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    --bsn-bg-dark: #0a0a0b;
    --bsn-bg-black: #000000;
    --bsn-bg-panel: #1b1b1d;
    --bsn-text: #f4f4f3;
    --bsn-text-muted: #9a9a9e;
    --bsn-accent: #d4a941;
    --bsn-accent-hover: #e6bd57;
    --bsn-border: rgba(255,255,255,0.10);
}

.bsn-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================================
   TOP BAR — always exactly one line, at every screen size
   ============================================================ */
.bsn-topbar {
    background: var(--bsn-bg-black);
    border-bottom: 1px solid var(--bsn-border);
    font-size: 13px;
}
.bsn-topbar .bsn-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 9px;
    padding-bottom: 9px;
    white-space: nowrap;
    overflow: hidden;
}
.bsn-topbar-left, .bsn-topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    min-width: 0;
}
.bsn-topbar-center {
    flex: 1;
    text-align: center;
    color: var(--bsn-text-muted);
    font-weight: 500;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.bsn-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--bsn-bg-panel);
    color: var(--bsn-text-muted);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease;
}
.bsn-pill:hover { color: var(--bsn-text); background: #242427; }

.bsn-phone-top, .bsn-email-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bsn-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.bsn-phone-top { color: var(--bsn-text); font-weight: 600; }
.bsn-phone-top:hover, .bsn-email-top:hover { color: var(--bsn-accent); }
.bsn-phone-top svg, .bsn-email-top svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; }

.bsn-socials {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.bsn-socials a { display: inline-flex; text-decoration: none; }
.bsn-socials svg { width: 15px; height: 15px; fill: var(--bsn-text-muted); transition: fill 0.2s ease; }
.bsn-socials a:hover svg { fill: var(--bsn-accent); }

.bsn-btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 999px;
    background: var(--bsn-accent);
    color: #1a1408;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.15s ease;
}
.bsn-btn-accent:hover { background: var(--bsn-accent-hover); transform: translateY(-1px); }

/* Progressively drop elements so the bar never wraps to 2 lines.
   The phone number (.bsn-phone-top) and the CTA button are the
   last two things to go — phone never disappears. */
@media (max-width: 900px) {
    .bsn-topbar-center { display: none; }
}
@media (max-width: 640px) {
    .bsn-pill { display: none; }
    .bsn-email-top, .bsn-socials { display: none; }
}
@media (max-width: 360px) {
    .bsn-btn-accent { display: none; }
}

/* ============================================================
   MAIN NAV — 3-column grid: left / logo / right.
   Because both side columns are `1fr`, the center column is
   mathematically centered regardless of how much content sits
   in either side — this is what makes the logo "perfectly
   aligned" rather than just eyeballed.
   ============================================================ */
.bsn-navbar {
    background: var(--bsn-bg-dark);
    border-bottom: 1px solid var(--bsn-border);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    transition: box-shadow 0.25s ease;
}
.bsn-navbar.bsn-scrolled {
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.bsn-navbar-inner {
    max-width: 1380px;
    margin: 0 auto;
    padding: 14px 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left logo right";
    align-items: center;
    column-gap: 16px;
}

.bsn-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.bsn-menu li { list-style: none; margin: 0; padding: 0; }
.bsn-menu a {
    display: inline-block;
    position: relative;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--bsn-text);
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.2s ease;
}
.bsn-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background: var(--bsn-accent);
    transition: width 0.25s ease;
}
.bsn-menu a:hover::after { width: 100%; }
.bsn-menu a:hover { color: var(--bsn-accent); }

.bsn-menu-left { grid-area: left; justify-self: start; }

.bsn-navbar-right { grid-area: right; justify-self: end; display: flex; align-items: center; gap: 26px; }

.bsn-phone-nav {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--bsn-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.bsn-phone-nav svg { width: 14px; height: 14px; fill: var(--bsn-accent); flex-shrink: 0; }
.bsn-phone-nav:hover { color: var(--bsn-accent); }

.bsn-logo {
    grid-area: logo;
    justify-self: center;
    font-weight: 800;
    font-size: 21px;
    letter-spacing: 0.02em;
    color: var(--bsn-text);
    text-decoration: none;
    white-space: nowrap;
}
.bsn-logo span { color: var(--bsn-accent); }

/* ---------- Dropdown ---------- */
.bsn-dropdown-item { position: relative; }
.bsn-dropdown-item > a::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-right: 6px;
    transition: transform 0.2s ease;
}
.bsn-dropdown-item:hover > a::before,
.bsn-dropdown-item.bsn-open > a::before { transform: rotate(225deg); }

/* Invisible padding bridges the gap between the link and the
   dropdown so moving the mouse down to it never loses hover. */
.bsn-dropdown-item {
    padding-bottom: 16px;
    margin-bottom: -16px;
}
.bsn-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 16px;
    background: var(--bsn-bg-panel);
    border: 1px solid var(--bsn-border);
    border-radius: 10px;
    min-width: 200px;
    padding: 8px;
    box-shadow: 0 14px 36px rgba(0,0,0,0.45);
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}
.bsn-dropdown-item:hover .bsn-dropdown-menu,
.bsn-dropdown-item.bsn-open .bsn-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.bsn-dropdown-menu li { list-style: none; margin: 0; padding: 0; }
.bsn-dropdown-menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}
.bsn-dropdown-menu a:hover { background: rgba(212,169,65,0.14); color: var(--bsn-accent); }

/* ---------- Mobile toggle (animated hamburger -> X) ---------- */
.bsn-toggle {
    grid-area: left;
    justify-self: start;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.bsn-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--bsn-text);
    transition: transform 0.28s ease, opacity 0.2s ease;
}
.bsn-toggle[aria-expanded="true"] .bsn-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bsn-toggle[aria-expanded="true"] .bsn-toggle-bar:nth-child(2) { opacity: 0; }
.bsn-toggle[aria-expanded="true"] .bsn-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile phone shortcut on the opposite side of the toggle */
.bsn-phone-mobile {
    grid-area: right;
    justify-self: end;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--bsn-bg-panel);
    color: var(--bsn-accent);
    text-decoration: none;
    transition: background 0.2s ease;
}
.bsn-phone-mobile svg { width: 16px; height: 16px; fill: currentColor; }
.bsn-phone-mobile:hover { background: #242427; }

/* ---------- Mobile dropdown-style menu panel ---------- */
.bsn-mobile-panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bsn-bg-panel);
    border-top: 1px solid var(--bsn-border);
    list-style: none;
    margin: 0;
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.32s ease, opacity 0.25s ease, padding 0.32s ease;
}
.bsn-mobile-panel.bsn-open {
    max-height: 640px;
    opacity: 1;
    padding: 10px 20px 16px;
}
.bsn-mobile-panel li { list-style: none; margin: 0; padding: 0; }
.bsn-mobile-panel a {
    display: block;
    padding: 13px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    color: var(--bsn-text);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.bsn-mobile-panel a:hover,
.bsn-mobile-panel a:active { background: rgba(255,255,255,0.06); color: var(--bsn-accent); }
.bsn-mobile-panel > li:not(:last-child) > a {
    border-bottom: 1px solid var(--bsn-border);
    border-radius: 8px 8px 0 0;
}
.bsn-mobile-panel .bsn-dropdown-menu {
    display: block;
    position: static;
    border: none;
    background: none;
    margin: 0 0 0 12px;
    padding: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.bsn-mobile-panel .bsn-dropdown-item.bsn-open .bsn-dropdown-menu {
    max-height: 300px;
}

/* ============================================================
   RESPONSIVE SWITCH — desktop menus <-> mobile toggle/phone
   ============================================================ */
@media (max-width: 1023px) {
    .bsn-menu-left, .bsn-navbar-right { display: none; }
    .bsn-toggle, .bsn-phone-mobile { display: flex; }
}
@media (min-width: 1024px) {
    .bsn-mobile-panel { display: none !important; }
}