/* ==========================================================================
   BISPL — HEADER LAYOUT REORGANISATION
   --------------------------------------------------------------------------
   Scope: the header only. Nothing here targets page content or the footer.

   Desktop
     top bar right ....... Search · LinkedIn · Contact Us
     main row right ...... Services burger (mega menu) · Nav burger (drawer)

   Mobile / tablet
     ONE burger only — the 3-line nav burger. The Services burger and
     meanmenu's auto-generated burger are both suppressed, so there is
     never a second or third icon.

   The Services mega menu is untouched: .rs-header-hamburger .sidebar-toggle
   keeps its classes and its handler, because the "Services" nav link
   programmatically clicks it.

   All colours come from the existing theme tokens — no hardcoded values
   that would break light/dark.
   ========================================================================== */


/* ==========================================================
   1. TOKENS  (scoped to the header + drawer)
========================================================== */

.rs-header-area,
.bbc-nav-drawer {
  --bh-accent: var(--rs-theme-orange, #EA5F23);
  --bh-text: var(--bbc-text-body, #616161);
  --bh-heading: var(--bbc-text-heading, #1F1F1F);
  --bh-line: var(--bbc-border-strong, rgba(0, 0, 0, .14));
  --bh-surface: var(--bbc-bg-elevated, #ffffff);
  --bh-bg: var(--bbc-bg-body, #ffffff);
  --bh-ease: cubic-bezier(.16, .8, .2, 1);
}


/* ==========================================================
   2. TOP BAR — Search · LinkedIn · Contact Us on the right
========================================================== */

.rs-header-top-three {
  align-items: center;
}

.bbc-top-actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
  margin-inline-start: auto;
}

/* the search trigger, now living in the top bar */
.bbc-top-actions .bbc-search-trigger-wrap {
  display: flex;
  align-items: center;
}

.bbc-top-actions .rs-header-search-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}

.bbc-top-actions .rs-header-search-icon i {
  font-size: 17px;
  line-height: 1;
}

.bbc-top-actions .rs-header-search-icon:hover {
  color: var(--bh-accent);
}

.bbc-top-actions .rs-header-search-icon:focus-visible {
  outline: 2px solid var(--bh-accent);
  outline-offset: 2px;
}

/* keep the existing social markup, just seat it in the row */
.bbc-top-actions .rs-footer-widget-social,
.bbc-top-actions .rs-theme-social {
  padding: 0;
  margin: 0;
}

.bbc-top-actions .rs-theme-social {
  display: flex;
  align-items: center;
}

/* a thin rule separating the icons from the CTA */
.bbc-top-divider {
  width: 1px;
  height: 18px;
  flex: none;
  background: var(--bh-line);
  opacity: .6;
}

/* ---------- Contact Us button ---------- */

.bbc-top-contact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 20px;
  border: 1px solid var(--bh-accent);
  border-radius: 100px;
  background: transparent;
  color: var(--bh-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .28s ease, color .28s ease, transform .28s var(--bh-ease);
}

.bbc-top-contact svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform .28s var(--bh-ease);
}

.bbc-top-contact:hover,
.bbc-top-contact:focus-visible {
  background: var(--bh-accent);
  color: #fff;
  transform: translateY(-1px);
}

.bbc-top-contact:hover svg {
  transform: translate(2px, -2px);
}

.bbc-top-contact:focus-visible {
  outline: 2px solid var(--bh-accent);
  outline-offset: 2px;
}


/* ==========================================================
   3. HEADER RIGHT — the two burgers
========================================================== */

.bbc-burger-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* the existing 4-square icon keeps its markup and handler;
   only its visibility rule changes (desktop only) */
.bbc-burger-group .rs-header-hamburger {
  display: block;
}

.bbc-burger-group .rs-header-hamburger .bar-icon svg path {
  fill: currentColor;
  transition: fill .25s ease;
}

.bbc-burger-group .rs-header-hamburger,
.bbc-nav-toggle {
  color: var(--bh-heading);
}

.bbc-burger-group .rs-header-hamburger:hover {
  color: var(--bh-accent);
}

/* ---------- the 3-line nav burger ---------- */

.bbc-nav-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}

.bbc-nav-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .32s var(--bh-ease), opacity .2s ease, width .32s var(--bh-ease);
}

.bbc-nav-toggle span:nth-child(2) {
  width: 15px;
  margin-inline-end: 6px;
  align-self: center;
}

.bbc-nav-toggle:hover {
  color: var(--bh-accent);
  border-color: var(--bh-line);
}

.bbc-nav-toggle:hover span:nth-child(2) {
  width: 21px;
  margin-inline-end: 0;
}

.bbc-nav-toggle:focus-visible {
  outline: 2px solid var(--bh-accent);
  outline-offset: 2px;
}

/* open state — morph to a cross */
.bbc-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.bbc-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.bbc-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================
   4. NAV DRAWER — the complete header, behind one burger
========================================================== */

.bbc-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000010;
  background: rgba(8, 12, 17, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.bbc-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease, visibility 0s;
}

.bbc-nav-drawer {
  position: fixed;
  z-index: 1000011;
  top: 0;
  inset-inline-end: 0;
  width: min(92vw, 420px);
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bh-bg);
  box-shadow: -30px 0 70px -40px rgba(8, 12, 17, .6);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .42s var(--bh-ease), visibility 0s linear .42s;
}

[dir="rtl"] .bbc-nav-drawer {
  transform: translateX(-102%);
}

.bbc-nav-drawer.is-open {
  transform: none;
  visibility: visible;
  transition: transform .42s var(--bh-ease), visibility 0s;
}

/* ---------- drawer head ---------- */

.bbc-nav-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(20px, 4vw, 30px);
  border-bottom: 1px solid var(--bh-line);
}

/* NOTE: no `display` here on purpose. theme.css swaps the two logo
   images with .bbc-logo-dark { display: none }, and a display value at
   this specificity would override it and show both at once. */
.bbc-nav-drawer-logo img {
  max-height: 40px;
  width: auto;
  vertical-align: middle;
}

.bbc-nav-close {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 1px solid var(--bh-line);
  border-radius: 50%;
  background: transparent;
  color: var(--bh-heading);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .3s var(--bh-ease);
}

.bbc-nav-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.bbc-nav-close:hover {
  background: var(--bh-accent);
  border-color: var(--bh-accent);
  color: #fff;
  transform: rotate(90deg);
}

.bbc-nav-close:focus-visible {
  outline: 2px solid var(--bh-accent);
  outline-offset: 2px;
}

/* ---------- drawer nav ---------- */

.bbc-nav-drawer-body {
  flex: 1 1 auto;
  padding: clamp(14px, 3vw, 24px) clamp(20px, 4vw, 30px);
}

.bbc-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bbc-nav-list>li {
  border-bottom: 1px solid var(--bh-line);
}

.bbc-nav-list>li:last-child {
  border-bottom: 0;
}

.bbc-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bbc-nav-list a {
  flex: 1 1 auto;
  display: block;
  padding: 15px 0;
  color: var(--bh-heading);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color .25s ease, padding-inline-start .25s var(--bh-ease);
}

.bbc-nav-list a:hover,
.bbc-nav-list a:focus-visible {
  color: var(--bh-accent);
  padding-inline-start: 6px;
}

/* sub-level toggle */
.bbc-nav-sub-toggle {
  width: 34px;
  height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--bh-line);
  border-radius: 50%;
  background: transparent;
  color: var(--bh-heading);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .3s var(--bh-ease);
}

.bbc-nav-sub-toggle svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #000;
  stroke-width: 2.2;
}

.bbc-nav-sub-toggle:hover {
  background: var(--bh-accent);
  color: #fff;
}

.bbc-nav-sub-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}

.bbc-nav-sub-toggle:focus-visible {
  outline: 2px solid var(--bh-accent);
  outline-offset: 2px;
}

.bbc-nav-sub {
  margin: 0;
  padding: 0 0 10px 14px;
  list-style: none;
  display: none;
}

.bbc-nav-sub.is-open {
  display: block;
}

.bbc-nav-sub a {
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--bh-text);
}

/* ---------- drawer foot ---------- */

.bbc-nav-drawer-foot {
  padding: clamp(16px, 3vw, 24px) clamp(20px, 4vw, 30px) clamp(24px, 4vw, 34px);
  border-top: 1px solid var(--bh-line);
}

.bbc-nav-drawer-foot .bbc-top-contact {
  width: 100%;
  justify-content: center;
  padding: 15px 20px;
  font-size: 13px;
}

.bbc-nav-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.bbc-nav-tools .bbc-nav-tool {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--bh-line);
  border-radius: 50%;
  background: transparent;
  color: var(--bh-heading);
  font-size: 17px;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}

.bbc-nav-tools .bbc-nav-tool:hover {
  background: var(--bh-accent);
  border-color: var(--bh-accent);
  color: #fff;
}

.bbc-nav-tools .bbc-nav-tool:focus-visible {
  outline: 2px solid var(--bh-accent);
  outline-offset: 2px;
}

.bbc-nav-contactinfo {
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
}

.bbc-nav-contactinfo a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bh-text);
  font-size: 14px;
  text-decoration: none;
  transition: color .25s ease;
}

.bbc-nav-contactinfo a:hover {
  color: var(--bh-accent);
}

.bbc-nav-contactinfo i {
  width: 16px;
  color: var(--bh-accent);
  text-align: center;
}

/* page cannot scroll behind the drawer */
html.bbc-nav-lock,
html.bbc-nav-lock body {
  overflow: hidden !important;
}


/* ==========================================================
   5. SUPPRESS THE DUPLICATE BURGERS
   meanmenu auto-generates its own reveal button below 1199px.
   The drawer replaces it, so it is hidden rather than removed
   (removing the plugin call could disturb other pages).
========================================================== */

.mean-container .meanmenu-reveal,
.mobile-menu .meanmenu-reveal,
.mean-container .mean-bar {
  display: none !important;
}


/* ==========================================================
   6. RESPONSIVE
========================================================== */

/* --- tablet and below: ONE burger only --- */
@media only screen and (max-width: 1199px) {

  /* the Services burger is desktop-only; Services is still reachable
     from the drawer's own nav link, which drives the same mega menu */
  .bbc-burger-group .rs-header-hamburger {
    display: none !important;
  }

  /* the top-bar cluster folds into the drawer */
  .bbc-top-actions {
    display: none;
  }

  .rs-header-top-three {
    justify-content: center;
  }
}

/* --- the top bar itself is already hidden on small screens by the
       theme; make sure the burger group never wraps --- */
@media only screen and (max-width: 991px) {

  .bbc-burger-group {
    gap: 4px;
  }

  .bbc-nav-toggle {
    width: 44px;
    height: 44px;
  }
}

/* --- small phones: the control row has to fit inside 320px ---
   The stock header already overflowed here (33px at 375, 88px at 320);
   these rules bring the row inside the viewport at every width. */
@media only screen and (max-width: 575px) {

  .rs-header-four .rs-header-inner>.bbc-header-toggle-slot,
  .rs-header-four .rs-header-inner>.rs-header-right {
    gap: 4px;
    padding-inline: 6px;
  }

  .bbc-burger-group {
    gap: 2px;
  }

  .bbc-nav-toggle {
    width: 40px;
    height: 40px;
  }

  /* the language pill keeps its globe and code; only the caret goes,
     and only in the header row — the drawer copy is untouched */
  .rs-header-inner .bbc-lang-caret {
    display: none;
  }

  .rs-header-four .rs-header-logo img {
    max-width: 132px;
  }

  .bbc-nav-drawer {
    width: 100vw;
  }

  .bbc-nav-list a {
    font-size: 16px;
  }
}

/* --- 320px exactly: the last two pixels --- */
@media only screen and (max-width: 360px) {

  .rs-header-four .rs-header-inner>.bbc-header-toggle-slot,
  .rs-header-four .rs-header-inner>.rs-header-right {
    padding-inline: 2px;
  }

  .rs-header-four .rs-header-logo img {
    max-width: 118px;
  }
}

/* --- large screens --- */
@media only screen and (min-width: 1600px) {

  .bbc-top-contact {
    padding: 10px 24px;
    font-size: 13px;
  }
}

@media only screen and (min-width: 2400px) {

  .bbc-top-actions {
    gap: 22px;
  }

  .bbc-top-contact {
    padding: 12px 30px;
    font-size: 15px;
  }

  .bbc-nav-toggle {
    width: 50px;
    height: 50px;
  }

  .bbc-nav-toggle span {
    width: 26px;
  }

  .bbc-nav-drawer {
    width: min(92vw, 520px);
  }
  
}


/* ==========================================================
   7. DARK THEME
   Only the few places the inherited tokens cannot reach.
========================================================== */

html[data-theme="dark"] .bbc-nav-overlay {
  background: rgba(0, 0, 0, .68);
}

html[data-theme="dark"] .bbc-nav-drawer {
  box-shadow: -30px 0 70px -40px rgba(0, 0, 0, .9);
}

html[data-theme="dark"] .bbc-top-divider {
  opacity: .35;
}

/* the top bar sits on a dark strip in both themes on some pages —
   keep the icons legible against whatever is behind them */
html[data-theme="dark"] .bbc-burger-group .rs-header-hamburger,
html[data-theme="dark"] .bbc-nav-toggle {
  color: var(--bbc-text-heading, #F2F4F8);
}


/* ==========================================================
   8. REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .bbc-nav-drawer,
  .bbc-nav-overlay,
  .bbc-nav-toggle span,
  .bbc-nav-close,
  .bbc-top-contact {
    transition-duration: .01ms !important;
  }
}


@media (min-width:3001px) and (max-width:6000px) {
.bbc-nav-drawer .bbc-nav-sub li a {
    padding: 15px 12px;
    font-size: 25px;
}
.bbc-nav-tools .bbc-nav-tool {
    width: 60px;
    height: 60px;
    font-size: 22px;
}
.bbc-nav-list a {
    font-size: 25px;
}
.bbc-nav-contactinfo a {
    gap: 20px;
    font-size: 22px;
}
.bbc-top-contact svg {
    width: 22px;
    height: 22px;
}
.bbc-nav-drawer-foot .bbc-top-contact {
    padding: 26px 20px;
    font-size: 22px;
}
.bbc-nav-drawer-logo img {
    max-height: 100px;
}
.bbc-nav-close svg {
    width: 22px;
    height: 22px;
}
.bbc-nav-close {
    width: 52px;
    height: 52px;
}
.bbc-nav-drawer .bbc-nav-sub li a::before {
    content: "";
    inset-inline-start: -2px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4.5px;
    border-radius: 50%;
}
}