/* ==========================================================================
   Sign Badgers mega menu
   Tokens live on .sbmm so a child theme can override them in one place.
   ========================================================================== */

.sbmm{
  /* --- Figma: header_desktop 39:211 / header_mobile 39:242 --- */
  --sbmm-green:        #02c671;   /* gradient start */
  --sbmm-green-deep:   #008080;   /* gradient end   */
  --sbmm-grad:         linear-gradient(167.51deg, #02c671 1.77%, #008080 123.61%);
  --sbmm-grad-hover:   linear-gradient(167.51deg, #02d278 1.77%, #008888 123.61%);

  --sbmm-ink:          #002322;   /* nav label colour */
  --sbmm-muted:        #4a5a59;   /* tagline          */
  --sbmm-line:         #e2e7e6;
  --sbmm-hover-bg:     #f0f0f0;
  --sbmm-surface:      #ffffff;

  --sbmm-font:         'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sbmm-nav-size:     17.956px;  /* Lato Bold */
  --sbmm-nav-lh:       26.935px;
  --sbmm-nav-weight:   700;

  --sbmm-gap:          54px;      /* space between top-level items */
  --sbmm-link-h:       85px;      /* hit area height               */
  --sbmm-chev:         22.446px;
  --sbmm-chev-gap:     8px;

  --sbmm-cta-h:        54.756px;
  --sbmm-cta-pad-x:    38px;
  --sbmm-cta-radius:   92px;

  --sbmm-header-h:     99px;
  --sbmm-header-pad-x: 50px;
  --sbmm-header-radius:24px;
  --sbmm-header-shadow:0 4px 2px rgba(0,0,0,.25);
  --sbmm-logo-h:       38.108px;  /* desktop; mobile overrides to 24.256px */

  --sbmm-radius-panel: 24px;
  --sbmm-radius-row:   24px;   /* active row, Figma 32:54 */
  --sbmm-radius-img:   24px;

  --sbmm-open:         #02c671; /* open top-level label, Figma 32:37 */
  --sbmm-row-bg:       #f0f0f0; /* active row + mobile sub-rows          */
  --sbmm-row-border:   #c4c4c4; /* active row + icon ring                */
  --sbmm-hairline:     #efefef; /* mobile row separators                 */
  --sbmm-grad-icon:    linear-gradient(146.27deg, #02c671 1.77%, #008080 123.61%);
  --sbmm-grad-cta-m:   linear-gradient(175.07deg, #02c671 1.77%, #008080 123.61%);

  --sbmm-panel-gap:    8px;     /* bar bottom to panel top */
  --sbmm-panel-shadow: 0 4px 4px rgba(0,0,0,.25);
  --sbmm-preview-pad:  32px;
  --sbmm-list-pad-x:   40px;
  --sbmm-list-pad-y:   32px;
  --sbmm-row-pad:      16px;
  --sbmm-row-gap:      16px;
  --sbmm-ico:          54px;
  --sbmm-ico-pad:      16px;

  --sbmm-panel-w:      760px;
  --sbmm-preview-w:    290px;
  --sbmm-preview-fit:  cover;     /* fill the frame; per-item override available */
  --sbmm-preview-bg:   #ffffff;
  --sbmm-panel-x:      0px;
  --sbmm-drawer-top:   76px;
  --sbmm-speed:        200ms;
  --sbmm-ease:         cubic-bezier(.4,0,.2,1);

  font-family: var(--sbmm-font);
  position: relative;
  font-synthesis-weight: none;
}

.sbmm,
.sbmm *,
.sbmm *::before,
.sbmm *::after{ box-sizing: border-box; }

.sbmm .screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   Top-level bar
   -------------------------------------------------------------------------- */
.sbmm-bar{
  display: flex;
  align-items: center;
  gap: var(--sbmm-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sbmm-top{ position: static; margin: 0; }

.sbmm-trigger,
.sbmm-top-link{
  display: inline-flex;
  align-items: center;
  gap: var(--sbmm-chev-gap);
  padding: 0;
  height: var(--sbmm-link-h);
  border: 0;
  background: none;
  font-family: var(--sbmm-font);
  font-size: var(--sbmm-nav-size);
  font-weight: var(--sbmm-nav-weight);
  line-height: var(--sbmm-nav-lh);
  color: var(--sbmm-ink);
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--sbmm-speed) var(--sbmm-ease);
}

.sbmm-trigger:hover,
.sbmm-top-link:hover,
.sbmm-top.is-current > .sbmm-trigger,
.sbmm-top.is-current > .sbmm-top-link{ color: var(--sbmm-green-deep); }
.sbmm-top.is-open > .sbmm-trigger{ color: var(--sbmm-open); }

.sbmm-chev{
  width: var(--sbmm-chev);
  height: var(--sbmm-chev);
  flex: 0 0 var(--sbmm-chev);
  transition: transform var(--sbmm-speed) var(--sbmm-ease);
}
.sbmm-top.is-open > .sbmm-trigger .sbmm-chev{ transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   Desktop panel
   -------------------------------------------------------------------------- */
.sbmm-panel{
  position: absolute;
  z-index: 60;
  top: calc(100% + var(--sbmm-panel-gap));
  left: 0;
  width: min(var(--sbmm-panel-w), calc(100vw - 32px));
  transform: translate(var(--sbmm-panel-x), -6px);
  background: var(--sbmm-surface);
  border-radius: var(--sbmm-radius-panel);
  box-shadow: var(--sbmm-panel-shadow);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--sbmm-speed) var(--sbmm-ease),
              transform var(--sbmm-speed) var(--sbmm-ease),
              visibility 0s linear var(--sbmm-speed);
}
.sbmm-panel[hidden]{ display: block; }   /* we animate, so keep it in flow */

.sbmm-top.is-open > .sbmm-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(var(--sbmm-panel-x), 0);
  transition-delay: 0s;
}

/* Invisible bridge so the pointer can travel from trigger to panel. */
.sbmm-top.sbmm-has-panel::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: var(--sbmm-panel-gap);
  display: none;
}
.sbmm-top.is-open.sbmm-has-panel::after{ display: block; }

.sbmm-panel-inner{
  display: flex;
  align-items: stretch;
  min-height: 340px;
  background: var(--sbmm-surface);
}

/* Preview column. Figma gives it 410 of the 1370-wide panel, and the panel is
   410 tall there, so at design width it reads as a square. Sized by ratio so it
   holds up at other header widths. */
.sbmm-preview{
  flex: 0 0 clamp(300px, 30%, 410px);
  align-self: stretch;
}
.sbmm-panel--no-media .sbmm-preview{ display: none; }

/* --- preview column --- */
.sbmm-preview{
  position: relative;
  background: var(--sbmm-preview-bg);
}
.sbmm-preview-img{
  /* An absolutely positioned replaced element falls back to its intrinsic
     size when only insets are given, so width and height are explicit. */
  position: absolute;
  top: var(--sbmm-preview-pad);
  left: var(--sbmm-preview-pad);
  width: calc(100% - var(--sbmm-preview-pad) * 2);
  height: calc(100% - var(--sbmm-preview-pad) * 2);
  border-radius: var(--sbmm-radius-img);
  object-fit: var(--sbmm-preview-fit);
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 260ms var(--sbmm-ease), transform 420ms var(--sbmm-ease);
}
.sbmm-preview-img.is-active{ opacity: 1; transform: none; }

/* Per-item overrides. Default is cover. */
.sbmm-preview-img--cover{ object-fit: cover; }
.sbmm-preview-img--contain{ object-fit: contain; }

/* --------------------------------------------------------------------------
   Fitted previews
   Photographs are cropped to fill the frame. Composed artwork carries its own
   shapes and transparent margins, so it is shown whole and floats on the panel
   instead of sitting in a cropping frame: no card, no radius, and a tighter
   inset so it uses more of the column.
   -------------------------------------------------------------------------- */
.sbmm-preview--contain{
  --sbmm-preview-pad: 20px;
  background: transparent;
}
.sbmm-preview--contain .sbmm-preview-img{
  object-fit: contain;
  border-radius: 0;
  object-position: center;
}

/* --- list column --- */
.sbmm-list{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0;
  margin: 0;
  padding: var(--sbmm-list-pad-y) var(--sbmm-list-pad-x);
  list-style: none;
  justify-content: center;
  min-width: 0;
  background: var(--sbmm-surface);
}

.sbmm-link{
  display: flex;
  align-items: flex-start;
  gap: var(--sbmm-row-gap);
  padding: var(--sbmm-row-pad);
  border: 1px solid transparent;
  border-radius: var(--sbmm-radius-row);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--sbmm-speed) var(--sbmm-ease),
              border-color var(--sbmm-speed) var(--sbmm-ease);
}
.sbmm-link:hover,
.sbmm-link:focus-visible,
.sbmm-link.is-active{
  background: var(--sbmm-row-bg);
  border-color: var(--sbmm-row-border);
}
.sbmm-link:focus-visible{ outline: 2px solid var(--sbmm-green-deep); outline-offset: 2px; }

/* icon bubble */
.sbmm-ico{
  flex: 0 0 var(--sbmm-ico);
  width: var(--sbmm-ico);
  height: var(--sbmm-ico);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sbmm-surface);
  border: 1px solid var(--sbmm-row-border);
  box-shadow: 0 4px 2px -2px rgba(0,0,0,.25);
  color: var(--sbmm-ink);
  transition: background var(--sbmm-speed) var(--sbmm-ease),
              border-color var(--sbmm-speed) var(--sbmm-ease),
              color var(--sbmm-speed) var(--sbmm-ease);
}
.sbmm-ico svg,
.sbmm-ico img{
  width: calc(var(--sbmm-ico) - var(--sbmm-ico-pad) * 2);
  height: calc(var(--sbmm-ico) - var(--sbmm-ico-pad) * 2);
  display: block;
  object-fit: contain;
}

.sbmm-link:hover .sbmm-ico,
.sbmm-link:focus-visible .sbmm-ico,
.sbmm-link.is-active .sbmm-ico{
  background: var(--sbmm-grad-icon);
  border-color: var(--sbmm-row-border);
  color: #fff;
}

.sbmm-txt{ display: block; min-width: 0; padding-top: 1px; }

.sbmm-label{
  display: block;
  font-size: var(--sbmm-nav-size);
  font-weight: 700;
  line-height: var(--sbmm-nav-lh);
  color: var(--sbmm-ink);
  font-family: var(--sbmm-font);
}
.sbmm-tagline{
  display: block;
  margin-top: 0;
  font-size: var(--sbmm-nav-size);
  font-weight: 400;
  line-height: var(--sbmm-nav-lh);
  color: var(--sbmm-ink);
  font-family: var(--sbmm-font);
}


/* --------------------------------------------------------------------------
   Drawer header: logo + close. Mobile only, the site header owns the
   desktop logo.
   -------------------------------------------------------------------------- */
.sbmm-drawer-head{ display: none; }

.sbmm-logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  min-width: 0;
}
.sbmm-logo-img{
  display: block;
  width: auto;
  height: var(--sbmm-logo-h, 26px);
  max-width: 190px;
  object-fit: contain;
}

.sbmm-close{
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 10px;
  color: var(--sbmm-ink);
  cursor: pointer;
}
.sbmm-close svg{ width: 22px; height: 22px; }
.sbmm-close:hover{ background: var(--sbmm-hover-bg); }
.sbmm-close:focus-visible{ outline: 2px solid var(--sbmm-green-deep); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Burger, hidden until the mobile breakpoint
   -------------------------------------------------------------------------- */
.sbmm-burger{
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 10px;
  cursor: pointer;
  color: var(--sbmm-ink);
}
.sbmm-burger-box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16.457px;   /* Figma header_mobile 39:270 */
  flex: 0 0 auto;
}
.sbmm-burger-box span{
  display: block;
  flex: 0 0 2.6px;
  height: 2.6px;
  width: 100%;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--sbmm-speed) var(--sbmm-ease),
              opacity var(--sbmm-speed) var(--sbmm-ease);
}
.sbmm[data-open] .sbmm-burger-box span:nth-child(1){ transform: translateY(6.93px) rotate(45deg); }
.sbmm[data-open] .sbmm-burger-box span:nth-child(2){ opacity: 0; }
.sbmm[data-open] .sbmm-burger-box span:nth-child(3){ transform: translateY(-6.93px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobile: accordion
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){

  .sbmm{
    --sbmm-logo-h:       24.256px;
    --sbmm-header-h:     56.256px;
    --sbmm-header-pad-x: 16px;
  }

  .sbmm-burger{ display: inline-flex; }

  /* The drawer is a full-width card under the bar, aligned to it.
     Figma header_mobile_active 32:97. */
  .sbmm-drawer{
    position: fixed;
    z-index: 70;
    top: var(--sbmm-drawer-top);
    left: var(--sbmm-drawer-left, 16px);
    width: var(--sbmm-drawer-w, calc(100vw - 32px));
    max-height: min(78vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sbmm-surface);
    border-radius: 14px;
    box-shadow: var(--sbmm-panel-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--sbmm-speed) var(--sbmm-ease),
                transform var(--sbmm-speed) var(--sbmm-ease),
                visibility 0s linear var(--sbmm-speed);
  }
  .sbmm[data-open] .sbmm-drawer{
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* Rows run edge to edge and the card clips them to its radius. */
  .sbmm-bar{ display: block; padding: 0; gap: 0; overflow: hidden; border-radius: 14px; }
  .sbmm-top{ display: block; }

  .sbmm-trigger,
  .sbmm-top-link{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: var(--sbmm-row-pad);
    border-radius: 0;
    border-bottom: 1px solid var(--sbmm-hairline);
    background: var(--sbmm-surface);
  }

  /* Open section header: flat green, dark label. */
  .sbmm-top.is-open > .sbmm-trigger{
    background: var(--sbmm-open);
    color: var(--sbmm-ink);
  }

  /* Panel becomes an accordion drawer. */
  .sbmm-panel{
    position: static;
    width: auto;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 260ms var(--sbmm-ease);
    margin-top: 0;
  }
  .sbmm-top.is-open > .sbmm-panel{ grid-template-rows: 1fr; }

  .sbmm-panel > .sbmm-panel-inner{
    overflow: hidden;
    min-height: 0;
    display: block;
    padding: 0;
    background: transparent;
  }

  /* No photo column and no taglines on mobile, per the design. */
  .sbmm-preview{ display: none; }
  .sbmm-tagline{ display: none; }

  .sbmm-list{ padding: 0; gap: 0; background: transparent; }

  .sbmm-link{
    padding: var(--sbmm-row-pad);
    gap: var(--sbmm-row-gap);
    align-items: center;
    background: var(--sbmm-row-bg);
    border: 0;
    border-bottom: 1px solid var(--sbmm-hairline);
    border-radius: 0;
  }
  .sbmm-link:hover,
  .sbmm-link:focus-visible,
  .sbmm-link.is-active{ background: var(--sbmm-row-bg); border-color: transparent; }
  .sbmm-link.is-active{ border-bottom-color: var(--sbmm-hairline); }

  /* Sub-item icons are bare glyphs, no bubble. */
  .sbmm-ico{
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .sbmm-ico svg,
  .sbmm-ico img{ width: 24px; height: 24px; }
  .sbmm-link:hover .sbmm-ico,
  .sbmm-link:focus-visible .sbmm-ico,
  .sbmm-link.is-active .sbmm-ico{
    background: none;
    border: 0;
    color: var(--sbmm-ink);
  }

  .sbmm-label{ font-weight: 400; }

  /* Full-width CTA at the foot of the card. */
  .sbmm-top--cta{ padding: var(--sbmm-row-pad); }
  .sbmm-top--cta > .sbmm-top-link{
    justify-content: center;
    width: 100%;
    padding: 8px 16px;
    border: 0;
    border-radius: 50px;
    background: var(--sbmm-grad-cta-m);
    color: #fff;
    font-weight: 700;
  }
}

/* --------------------------------------------------------------------------
   Narrow desktop: shrink the preview before dropping it
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1220px){
  .sbmm{ --sbmm-panel-w: 660px; --sbmm-preview-w: 240px; }
}

@media (prefers-reduced-motion: reduce){
  .sbmm *{ transition-duration: 1ms !important; }
}

/* ==========================================================================
   THEME ARMOR
   Elementor and most themes style every <button> and <a> in the header.
   The menu uses real buttons for accessibility, so those styles land on our
   triggers and turn them into filled pills. This block is deliberately
   heavy-handed: it is the last rule in the file and it wins on purpose.
   ========================================================================== */

.sbmm .sbmm-trigger,
.sbmm .sbmm-burger,
.sbmm .sbmm-close,
.sbmm .sbmm-top-link,
.sbmm .sbmm-logo,
.sbmm .sbmm-link{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  filter: none !important;
  transform: none !important;
}

.sbmm .sbmm-trigger,
.sbmm .sbmm-top-link{
  padding: 0 !important;
  height: var(--sbmm-link-h) !important;
  font-family: var(--sbmm-font) !important;
  font-size: var(--sbmm-nav-size) !important;
  font-weight: var(--sbmm-nav-weight) !important;
  line-height: var(--sbmm-nav-lh) !important;
  color: var(--sbmm-ink) !important;
  text-decoration: none !important;
}

.sbmm .sbmm-link{
  padding: var(--sbmm-row-pad) !important;
  width: 100% !important;
  border-radius: var(--sbmm-radius-row) !important;
}
.sbmm .sbmm-link:hover,
.sbmm .sbmm-link:focus-visible,
.sbmm .sbmm-link.is-active{
  background: var(--sbmm-row-bg) !important;
  border-color: var(--sbmm-row-border) !important;
}

.sbmm .sbmm-trigger:hover,
.sbmm .sbmm-top-link:hover,
.sbmm .sbmm-top.is-current > .sbmm-trigger,
.sbmm .sbmm-top.is-current > .sbmm-top-link{ color: var(--sbmm-green-deep) !important; }
.sbmm .sbmm-top.is-open > .sbmm-trigger{ color: var(--sbmm-open) !important; }

/* Kill inherited focus rings, then put our own back. */
.sbmm .sbmm-trigger:focus,
.sbmm .sbmm-burger:focus,
.sbmm .sbmm-close:focus,
.sbmm .sbmm-top-link:focus,
.sbmm .sbmm-link:focus{ outline: none !important; box-shadow: none !important; }

.sbmm .sbmm-trigger:focus-visible,
.sbmm .sbmm-burger:focus-visible,
.sbmm .sbmm-close:focus-visible,
.sbmm .sbmm-top-link:focus-visible{
  outline: 2px solid var(--sbmm-green-deep) !important;
  outline-offset: 2px !important;
}
.sbmm .sbmm-link:focus-visible{
  outline: 2px solid var(--sbmm-green-deep) !important;
  outline-offset: -2px !important;
}

/* The drawer logo is a bare link, never a themed button. */
.sbmm .sbmm-logo{
  padding: 0 !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
}
.sbmm .sbmm-logo:hover{ background: transparent !important; }
.sbmm .sbmm-logo-img{
  height: var(--sbmm-logo-h, 26px) !important;
  width: auto !important;
  max-width: 190px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Burger and close stay square icon buttons. */
.sbmm .sbmm-burger{
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  color: var(--sbmm-ink) !important;
}
.sbmm .sbmm-close{
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  color: var(--sbmm-ink) !important;
}
.sbmm .sbmm-close:hover{ background: var(--sbmm-hover-bg) !important; }

/* Icon bubbles keep their own fills. */
.sbmm .sbmm-ico{
  width: var(--sbmm-ico) !important;
  height: var(--sbmm-ico) !important;
  min-width: 0 !important;
  background: var(--sbmm-surface) !important;
  border: 1px solid var(--sbmm-row-border) !important;
  border-radius: 50% !important;
}
.sbmm .sbmm-link:hover .sbmm-ico,
.sbmm .sbmm-link:focus-visible .sbmm-ico,
.sbmm .sbmm-link.is-active .sbmm-ico{
  background: var(--sbmm-grad-icon) !important;
  border-color: var(--sbmm-row-border) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Call-to-action item (Contact Us): the one pill we DO want
   -------------------------------------------------------------------------- */
.sbmm .sbmm-top--cta > .sbmm-top-link,
.sbmm .sbmm-top--cta > .sbmm-trigger{
  background: var(--sbmm-grad) !important;
  color: #fff !important;
  height: var(--sbmm-cta-h) !important;
  padding: 0 var(--sbmm-cta-pad-x) !important;
  border-radius: var(--sbmm-cta-radius) !important;
  font-weight: 700 !important;
  margin-left: 0 !important;
  justify-content: center !important;
  transition: background var(--sbmm-speed) var(--sbmm-ease) !important;
}
.sbmm .sbmm-top--cta > .sbmm-top-link:hover,
.sbmm .sbmm-top--cta > .sbmm-trigger:hover{
  background: var(--sbmm-grad-hover) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Mobile overrides, after the armor so they win
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){

  .sbmm .sbmm-trigger,
  .sbmm .sbmm-top-link{
    width: 100% !important;
    height: auto !important;
    justify-content: space-between !important;
    padding: var(--sbmm-row-pad) !important;
    border-radius: 0 !important;
    line-height: var(--sbmm-nav-lh) !important;
  }
  /* The base armor clears backgrounds and borders; the mobile card needs
     them back. */
  .sbmm .sbmm-trigger,
  .sbmm .sbmm-top-link{
    background: var(--sbmm-surface) !important;
    border-bottom: 1px solid var(--sbmm-hairline) !important;
  }
  .sbmm .sbmm-top.is-open > .sbmm-trigger{
    background: var(--sbmm-open) !important;
    color: var(--sbmm-ink) !important;
  }
  .sbmm .sbmm-link,
  .sbmm .sbmm-link:hover,
  .sbmm .sbmm-link:focus-visible,
  .sbmm .sbmm-link.is-active{
    border: 0 !important;
    border-bottom: 1px solid var(--sbmm-hairline) !important;
  }
  .sbmm .sbmm-top--cta > .sbmm-top-link{
    border-bottom: 0 !important;
  }
  .sbmm .sbmm-top--cta > .sbmm-top-link{
    height: auto !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    background: var(--sbmm-grad-cta-m) !important;
    color: #fff !important;
    justify-content: center !important;
  }
  .sbmm .sbmm-link{
    padding: var(--sbmm-row-pad) !important;
    border-radius: 0 !important;
    background: var(--sbmm-row-bg) !important;
  }
  .sbmm .sbmm-ico{
    width: 24px !important;
    height: 24px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .sbmm .sbmm-link:hover .sbmm-ico,
  .sbmm .sbmm-link.is-active .sbmm-ico{
    background: none !important;
    color: var(--sbmm-ink) !important;
  }


  .sbmm .sbmm-top--cta{ padding: 6px 8px 10px; }
  .sbmm .sbmm-top--cta > .sbmm-top-link{
    justify-content: center !important;
    margin-left: 0 !important;
  }


}


/* ==========================================================================
   OPTIONAL header bar
   Add the CSS class `sbmm-header` to the Elementor container that holds the
   logo and this menu to reproduce the Figma header frame exactly.
   Values from header_desktop 39:211 and header_mobile 39:242.
   ========================================================================== */
.sbmm-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 99px;
  padding-inline: 50px;
  background: #fff;
  border-radius: 24px;
  /* box-shadow, not filter: drop-shadow. A filter makes the element a
     containing block for fixed-position descendants, which would drag the
     mobile drawer out of the viewport. Same visual on a rounded rectangle. */
  box-shadow: 0 4px 2px rgba(0,0,0,.25);
}
.sbmm-header img.sbmm-header-logo{ height: 38.108px; width: auto; }

@media (max-width: 1024px){
  .sbmm-header{
    min-height: 56.256px;
    padding-inline: 16px;
    border-radius: 16px;
  }
  .sbmm-header img.sbmm-header-logo{ height: 24.256px; }
}


/* ==========================================================================
   BAR MODE
   The plugin renders the whole header bar: logo left, menu right. Elementor
   headers frequently contain nothing but this shortcode, so the bar cannot
   assume the theme supplies a logo. Disable with [sb_mega_menu bar="0"].
   Geometry from Figma header_desktop 39:211 / header_mobile 39:242.
   ========================================================================== */
.sbmm.sbmm--bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-height: var(--sbmm-header-h);
  padding-inline: var(--sbmm-header-pad-x);
  background: var(--sbmm-surface);
  border-radius: var(--sbmm-header-radius);
  /* box-shadow, not filter: drop-shadow. A filter would make this element the
     containing block for the fixed-position mobile drawer. */
  box-shadow: var(--sbmm-header-shadow);
}

.sbmm-brand{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  line-height: 0;
}
.sbmm-brand-img{
  display: block;
  width: auto;
  height: var(--sbmm-logo-h);
  max-width: 60vw;
  object-fit: contain;
}

/* On desktop the drawer is just the row that holds the items. */
.sbmm.sbmm--bar > .sbmm-drawer{
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 1024px){
  .sbmm.sbmm--bar{
    min-height: var(--sbmm-header-h);
    padding-inline: var(--sbmm-header-pad-x);
    border-radius: 16px;
    gap: 12px;
  }
  /* The drawer becomes the overlay again, so it must not sit in the row. */
  .sbmm.sbmm--bar > .sbmm-drawer{ display: block; }
}

/* Armor: the brand link is a bare link, never a themed button. */
.sbmm .sbmm-brand{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 0 !important;
  width: auto !important;
}
.sbmm .sbmm-brand:hover{ background: transparent !important; }
.sbmm .sbmm-brand-img{
  height: var(--sbmm-logo-h) !important;
  width: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sbmm .sbmm-brand:focus-visible{
  outline: 2px solid var(--sbmm-green-deep) !important;
  outline-offset: 4px !important;
}


/* ==========================================================================
   ARMOR: images and the burger glyph
   Elementor ships `.elementor img { height:auto; border-radius:0 }`, which is
   more specific than our single-class rules. That collapsed the preview to
   zero height and squared its corners.
   ========================================================================== */
.sbmm .sbmm-preview-img{
  position: absolute !important;
  top: var(--sbmm-preview-pad) !important;
  left: var(--sbmm-preview-pad) !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% - var(--sbmm-preview-pad) * 2) !important;
  height: calc(100% - var(--sbmm-preview-pad) * 2) !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: var(--sbmm-radius-img) !important;
  object-fit: var(--sbmm-preview-fit) !important;
  box-shadow: none !important;
}
.sbmm .sbmm-preview-img--cover{ object-fit: cover !important; }
.sbmm .sbmm-preview-img--contain{ object-fit: contain !important; }

/* The preview column fills the panel height. */
.sbmm .sbmm-preview{
  align-self: stretch !important;
  height: auto !important;
  min-height: 0 !important;
}

.sbmm .sbmm-burger-box{
  width: 24px !important;
  height: 16.457px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: visible !important;
}
.sbmm .sbmm-burger-box span{
  height: 2.6px !important;
  min-height: 2.6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: currentColor !important;
  border: 0 !important;
}

.sbmm .sbmm-preview--contain .sbmm-preview-img{
  object-fit: contain !important;
  border-radius: 0 !important;
}
.sbmm .sbmm-preview--contain{ background: transparent !important; }