/* =========================================================================
   Mega Menu — header shell
   Paste into: Appearance > Editor > Styles > (pencil) > Additional CSS,
   or the BuddyBoss Website theme stylesheet.

   Works without JavaScript. The drawer and panel toggles are progressive
   enhancement: if mega-menu-header.js does not load, the nav degrades to a
   stacked, fully expanded menu rather than disappearing.
   ========================================================================= */

/* ---- icon rendering -----------------------------------------------------
   icons/upload strips fill="none" and every stroke-* attribute on save, so
   registered icons are bare <path d="..."/> and would render as solid blobs.
   -------------------------------------------------------------------------- */
.bbn svg,.bbn-mm svg{display:block;width:100%;height:100%}
.bbn-caret svg path,
.bbn-mm-i svg path,
.bbn-mm-hi svg path,
.bbn-mm-arrow svg path{
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.bbn-caret svg path{stroke-width:1.5}

/* ---- bar ---------------------------------------------------------------- */
.bbn{position:sticky;top:0;z-index:9000;width:100%}
.bbn *,.bbn *::before,.bbn *::after{box-sizing:border-box;}
.bbn-bar{
  min-height:var(--bbn-h);
  max-width:1328px;margin-inline:auto;gap:24px;
}
.bbn-logo{margin:0;flex:0 0 auto}
.bbn-logo img{display:block;height:clamp(26px,2.4vw,33px);width:auto}
.bbn-nav{flex:1 1 auto;min-width:0;gap:clamp(20px,3vw,40px)}
.bbn-items{gap:clamp(14px,1.8vw,24px)}

/* If the header is placed inside a width-constrained container instead of
   being set to Align: Full, uncomment this to break it out.
.bbn{margin-inline:calc(50% - 50vw);width:100vw}
*/

/* ---- top-level items ---------------------------------------------------- */
.bbn-item.bbn-has{position:relative}
.bbn-top{gap:4px;padding:8px 0;cursor:pointer}
.bbn-top .bbn-top-t{margin:0;line-height:24px;white-space:nowrap}
.bbn-top a{text-decoration:none;color:inherit}
.bbn-caret{width:16px;height:16px;flex:0 0 16px;color:var(--wp--preset--color--icon-muted);transition:transform .18s ease}
.bbn-item.is-open .bbn-top-t a,
.bbn-item.is-open .bbn-caret{color:var(--wp--preset--color--contrast)}
.bbn-item.is-open .bbn-caret{transform:rotate(180deg)}
@media (min-width:1081px){
  .bbn .bbn-items{gap:0}
  .bbn .bbn-top{padding:9px clamp(10px,1.1vw,16px)}
}
.bbn-top:focus-visible{outline:2px solid var(--wp--preset--color--primary);outline-offset:3px}

/* ---- panels ------------------------------------------------------------- */
.bbn-panel{
  position:absolute;left:0;right:auto;top:100%;margin-top:var(--bbn-gap);
  width:max-content;
  max-height:calc(100dvh - var(--bbn-h) - var(--bbn-gap) - 24px);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  z-index:10000;
  padding-top: 10px;
}
.bbn-item.is-open>.bbn-panel,
.bbn-item:focus-within>.bbn-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
.bbn-panel::before{content:"";position:absolute;left:0;right:0;
  top:calc(var(--bbn-gap) * -1);height:var(--bbn-gap)}
.bbn-panel .bbn-mm{box-shadow:0 24px 60px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.04)}

/* Hover-open only on real pointers. On touch, :hover fires on tap and fights
   the JS toggle, leaving panels stuck open. */
@media (hover:hover) and (pointer:fine){
  .bbn-item:hover>.bbn-panel{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
  }
  .bbn-item:hover .bbn-top-t a,
  .bbn-item:hover .bbn-caret{color:var(--wp--preset--color--contrast)}
}

/* ---- panel internals ---------------------------------------------------- */
.bbn-mm{max-width:100%}
.bbn-mm .wp-block-columns{gap:clamp(20px,2.6vw,40px);align-items:stretch;flex-wrap:nowrap}
.bbn-mm .wp-block-column{min-width:186px}
.bbn-mm .bbn-mm-promo-col,
.bbn-mm .bbn-mm-case-col,
.bbn-mm .bbn-mm-art-col{flex:0 0 clamp(240px,22vw,300px);min-width:0}

.bbn-mm-head{gap:7px;margin-bottom:16px}
.bbn-mm .bbn-mm-h{margin:0;font-size:13px;line-height:18px;white-space:nowrap}
.bbn-mm-hi{width:18px;height:18px;flex:0 0 18px;color:var(--wp--preset--color--primary)}

.bbn-mm-list{display:flex;flex-direction:column;gap:2px}
.bbn-mm-row:hover .bbn-mm-t,.bbn-mm-row:hover .bbn-mm-i{color:var(--wp--preset--color--primary) !important}
.bbn-mm-i{width:16px;height:16px;flex:0 0 16px;color:var(--wp--preset--color--text-secondary);
  transition:color .12s ease}
.bbn-mm .bbn-mm-t{margin:0;font-size:15px;line-height:21px;white-space:nowrap}
.bbn-mm-row a,.bbn-mm-logo-row a,.bbn-mm-more-t a,.bbn-mm-all-t a{
  text-decoration:none;color:inherit}

.bbn-mm-logos{display:flex;flex-direction:column;gap:4px}
.bbn-mm-logo-row{gap:12px;}
.bbn-mm-brand{gap:1px;min-width:0}
.bbn-mm .bbn-mm-brand-n,.bbn-mm .bbn-mm-brand-c{margin:0;line-height:1.35}

.bbn-mm-promo,.bbn-mm-case{display:flex;flex-direction:column;gap:10px;height:100%}
.bbn-mm-promo-cta{margin-top:auto}
.bbn-mm-promo-cta .wp-block-button,
.bbn-mm-promo-cta .wp-block-button__link{width:100%;justify-content:center}
.bbn-mm .bbn-mm-promo-h,.bbn-mm .bbn-mm-case-h,.bbn-mm .bbn-mm-art-t{margin:0;line-height:1.25}
.bbn-mm .bbn-mm-badge{margin:0;display:inline-block;width:fit-content}
.bbn-mm .bbn-mm-pair,.bbn-mm .bbn-mm-case-k,.bbn-mm .bbn-mm-case-q,
.bbn-mm .bbn-mm-case-w,.bbn-mm .bbn-mm-art-k{margin:0}
.bbn-mm-case-by{gap:10px;margin-top:2px}
.bbn-mm-more,.bbn-mm-all{gap:7px;margin-top:4px}
.bbn-mm-arrow{width:14px;height:14px;flex:0 0 14px;transition:transform .12s ease}
.bbn-mm-more:hover .bbn-mm-arrow,.bbn-mm-all:hover .bbn-mm-arrow{transform:translateX(3px)}
.bbn-mm-art{gap:0;overflow:hidden}
.bbn-mm-art-img{margin:0;align-self:stretch}
.bbn-mm-art-img img{height:100%;object-fit:cover}
.bbn-mm-promo-img,.bbn-mm-av,.bbn-mm-chip{margin:0}
.bbn-mm-av img,.bbn-mm-chip img{object-fit:cover}

/* ---- actions ------------------------------------------------------------ */
.bbn-actions{flex:0 0 auto;align-items:center;flex-wrap:nowrap}

/* ---- scrim -------------------------------------------------------------- */
.bbn-scrim{position:fixed;inset:var(--bbn-h,72px) 0 0;background:rgba(0,0,0,.18);
  opacity:0;visibility:hidden;transition:opacity .18s ease;z-index:8999}

/* ---- burger ------------------------------------------------------------- */
.bbn-burger{
  display:none;
  align-items:center;
  justify-content: end;
  width:44px;
  height:44px;
  flex:0 0 44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  border-radius:8px
  }
.bbn-burger span{display:block;width:18px;height:1.6px;position:relative;
  background:var(--wp--preset--color--contrast)}
.bbn-burger span::before,.bbn-burger span::after{content:"";position:absolute;left:0;
  width:18px;height:1.6px;background:var(--wp--preset--color--contrast);
  transition:transform .2s ease,top .2s ease}
.bbn-burger span::before{top:-6px}
.bbn-burger span::after{top:6px}
.bbn-burger[aria-expanded="true"] span{background:transparent}
.bbn-burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.bbn-burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---- tablet: full-width panels ------------------------------------------
   Content-width panels cannot fit here. Anchor them to the bar instead of the
   trigger, so they span the viewport and never overflow.
   -------------------------------------------------------------------------- */
@media (max-width:1280px){
  .bbn-item.bbn-has{position:static}
  .bbn-panel{left:var(--bbn-edge);right:var(--bbn-edge);width:auto}
  .bbn-mm .wp-block-column{min-width:168px}
}
@media (max-width:1160px){
  .bbn-mm .wp-block-columns{flex-wrap:wrap;gap:20px 24px}
  .bbn-mm .wp-block-column{flex:1 1 200px;min-width:0}
}

/* ---- drawer -------------------------------------------------------------
   Below 1080 the bar cannot hold logo, five items and two buttons.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   mega-menu-header.css — responsive layout only

   No padding, margin, gap or row-gap. All spacing comes from block
   attributes in the editor. This file only handles what block settings
   cannot express: stacking direction, source order, show/hide state,
   and the mobile drawer overlay.

   HOW TO APPLY
   1. Delete the six dead rules in section A.
   2. Replace the whole @media (max-width:1080px){...} block with section B.
   3. Leave every other rule alone.
   ========================================================================== */


/* --------------------------------------------------------------------------
   SECTION A — delete. All match 0 elements in the DOM.

     .bbn-logo { ... }
     .bbn-logo img { ... }
     .bbn-nav { ... }
     .bbn-mm-art-img { ... }
     .bbn-mm-art-img img { ... }

   And from the @media (max-width:480px) block:

     .bbn-mm-art-img, .bbn-mm-art-img img { ... }

   Keep .bbn-mm-art — that one matches.

   Do NOT delete rules using .is-open, :focus-visible or .bbn-scrim.is-open.
   They score 0 only because those classes are added by JS at runtime.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   SECTION B — replaces @media (max-width:1080px)

   Every selector is prefixed with .bbn to beat WordPress's
   .wp-block-group.is-layout-flex (0,2,0). A bare .bbn-items (0,1,0) loses,
   which is why the drawer previously would not hide.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {

  /* --- bar becomes the drawer shell ---
     There is no .bbn-nav wrapper in the markup, and .bbn-items and
     .bbn-actions have no common parent, so children are sequenced with
     flex order rather than by nesting. */
  .bbn .bbn-bar {
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .bbn .bbn-bar > :first-child { order: 1; flex: 0 0 auto; }   /* logo */
  .bbn .bbn-burger  { order: 2; display: inline-flex; margin-left: auto; }
  .bbn .bbn-items   { order: 3; }
  .bbn .bbn-actions { order: 4; }

  /* --- closed --- */
  .bbn .bbn-items,
  .bbn .bbn-actions { display: none; }

  /* --- open ---
     Header grows to viewport height and scrolls internally. This covers the
     page without position:fixed, so it cannot fight the sticky header. */
  .bbn.is-nav-open {
    min-height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .bbn.is-nav-open .bbn-bar { min-height: 100dvh; }

  .bbn.is-nav-open .bbn-items,
  .bbn.is-nav-open .bbn-actions {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* --- rows --- */
  .bbn .bbn-item.bbn-has { position: static; }
  .bbn .bbn-top {
    width: 100%;
    justify-content: space-between;
  }

  /* --- panels: accordion, .is-open only ---
     Hover and :focus-within must not trigger these on touch. */
  .bbn .bbn-panel {
    display: none;
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .bbn .bbn-item.is-open > .bbn-panel { display: block; }
  .bbn .bbn-panel::before { display: none; }
  .bbn .bbn-panel .bbn-mm {box-shadow: none;}

  /* --- panel contents stack --- */
  .bbn .bbn-mm .wp-block-columns { flex-wrap: wrap; }
  .bbn .bbn-mm .wp-block-column,
  .bbn .bbn-mm .bbn-mm-promo-col,
  .bbn .bbn-mm .bbn-mm-case-col,
  .bbn .bbn-mm .bbn-mm-art-col { flex: 1 1 100%; min-width: 0; }

  .bbn .bbn-mm .bbn-mm-t,
  .bbn .bbn-mm .bbn-mm-h,
  .bbn .bbn-mm .bbn-mm-brand-n,
  .bbn .bbn-mm .bbn-mm-brand-c { white-space: normal; }

  .bbn .bbn-actions .wp-block-button,
  .bbn .bbn-actions .wp-block-button__link {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .bbn .bbn-scrim { display: none; }
}

/* ---- small phones ------------------------------------------------------- */
@media (max-width:480px){
  .bbn-bar{gap:12px}
  .bbn.is-nav-open .bbn-nav{padding-inline:16px}
  .bbn-mm-art{flex-wrap:wrap}
  .bbn-mm-art-img,.bbn-mm-art-img img{width:100%;height:auto;border-radius:0}
}

/* ---- short viewports ---------------------------------------------------- */
@media (max-height:700px) and (min-width:1081px){
  .bbn-panel{max-height:calc(100dvh - var(--bbn-h) - 32px)}
}

@media (prefers-reduced-motion:reduce){
  .bbn-panel,.bbn-caret,.bbn-scrim,.bbn-mm-arrow,
  .bbn-burger span,.bbn-burger span::before,.bbn-burger span::after{transition:none}
}

/* =========================================================================
   Mega menu panels v2 (.bbn-mm2) — Figma 5401:92979, 5401:93518,
   5403:95195, 5404:95828.

   Layout, colors, type, spacing, borders, shadow and widths are all block
   attributes. Only what blocks cannot express lives here.
   ========================================================================= */

/* The legacy .bbn-panel rules cap width (alignwide) and clip overflow, which
   would cut the panel and its shadow. The 16px side padding keeps the shadow;
   left:-16px pulls the card back to the menu item's left edge (margin can't:
   core's constrained layout forces margin-left:auto !important). */
.bbn-panel:has(.bbn-mm2){max-width:none;padding-inline:16px;padding-bottom:32px;left:-16px}

/* Row hover. The outline is an inset shadow so it takes no space, like
   Figma's inside stroke. */
.bbn-mm2-item:hover{
  background-color:var(--wp--preset--color--surface);
  box-shadow:inset 0 0 0 .5px var(--wp--preset--color--orange-200);
}

/* Whole row is the link target. */
.bbn-mm2-item{position:relative}
.bbn-mm2-item a::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* Responsive: block layout has no breakpoints. Wrap once panels are pinned
   to the viewport edges, and let fixed-width columns shrink in the drawer. */
@media (max-width:1280px){
  .bbn .bbn-panel:has(.bbn-mm2){left:var(--bbn-edge);padding-inline:0}
  .bbn .bbn-mm2,.bbn .bbn-mm2-int-grid{flex-wrap:wrap}
}
@media (max-width:1080px){
  .bbn .bbn-panel:has(.bbn-mm2){padding:0}
  .bbn .bbn-mm2 > *,.bbn .bbn-mm2-int-col{max-width:100%;flex-shrink:1}
}