/* ===== Brand + tokens (tweak these to fine tune) ===== */
.nav {
  --brand: #FFC107;            /* yellow bar */
  --text-on-brand: #ffffff;    /* main link color */
  --muted-on-brand: rgba(255,255,255,.85);
  --submenu-bg: #ffffff;       /* dropdown bg */
  --submenu-fg: #3d4b5a;       /* dropdown text */
  --submenu-hover: #f3f5f7;    /* dropdown hover bg */
  --shadow: 0 16px 36px rgba(17, 24, 39, .18);
  --radius-lg: 16px;
  --gap: 1.75rem;
}

/* ===== Bar ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--brand);
  color: var(--text-on-brand);
  border: 0;
z-index: 1000; 
}
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  min-height: 64px; /* taller bar like screenshot */
}

.nav__inner {
  display: flex;
  align-items: center;
}

/* Logo sticks left */
.nav__brand {
  margin-right: 2rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0; /* Remove line-height to prevent extra space below image */
  vertical-align: middle;
}

.nav__logo img,
.nav__logo .bb-logo {
  display: block;
  vertical-align: middle;
  max-height: 25.6px; /* Reduced by 20% from 32px */
  width: auto;
  margin: 0;
  padding: 0;
  transform: translateY(-6px); /* Adjust upward to align with menu text baseline */
}

/* Main nav grows in middle */
.nav__list {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* Extras lock to the right */
.nav__extras {
  margin-left: auto;             /* 👈 this pushes it to the right edge */
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav__item--auth {
  display: flex;
  align-items: center;
}

.nav__item--login {
  margin-left: auto;
}

.nav__item--logout {
  margin-left: 0;
}


/* ===== Mobile toggle (kept minimal) ===== */
.nav__toggle { display:none; background:none; border:0; padding:.75rem; margin-right:.25rem; }
.nav__toggle-bar { display:block; width:24px; height:2px; background:var(--text-on-brand); margin:4px 0; }
.nav__sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ===== Primary list ===== */
.nav__list {
  display: flex;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item { 
  position: relative;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

/* Ensure no bullets appear from ::before pseudo-elements */
.nav__list li::before,
.nav__item::before {
  content: none !important;
  display: none !important;
}

.nav__link,
.nav__link:visited {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .75rem .25rem;
  padding-bottom: .75rem; /* Ensure consistent bottom padding */
  text-decoration: none;
  color: var(--text-on-brand);
  font-weight: 700; /* Changed from 400 to 700 (bold) */
  letter-spacing: .2px;
  line-height: 1;
  font-size: 1rem; /* ~18px */
  text-transform: uppercase;
}

/* Position submenu relative to the link for dropdown items */
.nav__item--has-dropdown > .nav__link {
  position: relative;
}
.nav__link--button {
  background: none;
  border: 0;
  color: var(--text-on-brand);
  cursor: pointer;
  font: inherit;
  padding: 0;
  white-space: nowrap;
  font-size: 1rem; /* Match other menu items */
  text-transform: uppercase; /* Match other menu items */
  font-weight: 700 !important; /* Match other top-level nav items (bold) */
}
.nav__link:hover,
.nav__link:focus-visible {
  opacity: .92;
  text-decoration: none;
}

/* White chevron like screenshot */
.nav__item--has-dropdown > .nav__link::after,
.nav__item--has-dropdown > .nav__link.nav__link--button::after {
  content: "▾";
  font-size: .9em;
  margin-left: .15rem;
  color: var(--muted-on-brand);
  transform: translateY(-1px);
}

/* ===== Dropdown ===== */

.nav__submenu::before {
  content: "";
  position: absolute;
  top: -10px;          /* extends upward to bridge gap and maintain hover */
  left: 0;
  right: 0;
  height: 10px;
  background: transparent; /* Make it part of the hover area */
  pointer-events: auto; /* Ensure it captures hover events */
}

.nav__submenu {
  position: absolute;
  top: calc(100% - 6px) !important; /* Pull submenu up to eliminate gap */
  left: 50%;
  transform: translateX(-50%);   /* stays centered always */
  margin-top: 0 !important; /* Ensure no margin gap */
  min-width: 320px;
  background: var(--submenu-bg);
  color: var(--submenu-fg);
  border-radius: 0 !important; /* Remove border radius */
  padding: 10px;
  padding-top: 16px !important; /* Compensate for the negative top */
  display: none;
  box-shadow: var(--shadow);
  border: 0;
  z-index: 999; 
  animation: navDrop .14s ease-out;
}

@keyframes navDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nav__submenu-item { 
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__submenu-link {
  display: block;
  padding: 6px 18px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--submenu-fg);
  font-weight: 300;
  font-size: 1rem;              /* Changed from .875rem to 1rem */
  line-height: 1rem;
}
.nav__submenu-link:hover,
.nav__submenu-link:focus-visible {
  background: var(--submenu-hover);
  text-decoration: none;
}

/* Non-clickable submenu headline/divider */
.nav__submenu-headline {
  display: block;
  padding: 8px 18px 4px;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--submenu-fg);
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

/* Style button elements in submenu (like Change Text Size) */
.nav__submenu-link[type="button"] {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem; /* Changed from .875rem to 1rem to match other submenu items */
  font-weight: 300; /* Match other submenu items */
  line-height: 1rem; /* Match other submenu items */
  color: inherit;
}

/* Open states */
.nav__item--open > .nav__submenu,
.nav__item:focus-within > .nav__submenu { display: block; }

/* Hover open on desktops */
@media (hover:hover) {
  .nav__item--has-dropdown:hover > .nav__submenu,
  .nav__item--has-dropdown > .nav__submenu:hover { 
    display: block; 
  }
}

/* ===== Mobile layout ===== */
@media (max-width: 900px) {
  .nav__inner {
    flex-wrap: wrap;
    align-items: center;
  }
  .nav__brand {
    order: 1;
    margin-right: 0;
  }
  .nav__toggle {
    order: 2;
    display:block;
    margin-left: auto;
  }
  .nav__list {
    flex: 0 0 100%;
    order: 3;
    display: none;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: .25rem 0 1rem;
  }
  .nav__list.nav__list--open { display: flex; }
  .nav__link { padding: .9rem 0; }
  .nav__item--has-dropdown > .nav__submenu {
    position: static;
    top: auto; left: auto;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border-radius: 0 !important; /* Remove border radius on mobile too */
    padding: 6px;
    margin: 4px 0 10px;
  }
  .nav__submenu-link { padding: 10px 14px; font-size: 1rem; }
  .nav__item--auth {
    margin-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    padding-top: .75rem;
  }
  .nav__item--auth + .nav__item--auth {
    border-top: 0;
    margin-top: .35rem;
    padding-top: 0;
  }
  .nav__item--login {
    margin-left: 0;
    margin-top: auto;
  }
}

/* Reduce nav height and logo size in landscape orientation on small screens */
@media (max-height: 500px) and (orientation: landscape) {
  .nav__inner {
    min-height: 48px; /* Reduced from 64px */
  }
  
  .nav__logo img,
  .nav__logo .bb-logo {
    max-height: 24px; /* Reduced from 32px */
    width: auto;
  }
  
  .nav__brand {
    margin-right: 1rem; /* Reduced spacing */
  }
}

.breadcrumb-wrap {
    padding: 1rem 0;
    background-color: #f5f5f5;
    color: #757575
}