/* =========================
   Two Panel Mega Menu (TPMM) — LIGHT THEME
   ========================= */

/* Theme tokens */
:root{
  --hm-accent-20: #111111;                 /* main text */
  --hm-accent-21: #666666;                 /* muted text */
  --hm-accent-23: #F4F5F7;                 /* soft bg */
  --hm-accent-24: #E6E7EA;                 /* borders / trigger bg */
  --hm-accent-25: #FFFFFF;                 /* surface */
}

/* Base wrapper variables */
.tpmm{
  --tpmm-panel-w: 1180px; 
  --tpmm-panel-h: 720px;
  --tpmm-panel-min-h: 880px;
  --tpmm-left-w: 300px;
  --tpmm-cols: 4;
  --tpmm-gap: 22px;

  --tpmm-icon-size: 64px;
  --tpmm-icon-color: #111;                 /* icon color (light) */
  --tpmm-icon-bg: rgba(0,0,0,.04);
  --tpmm-icon-border: rgba(0,0,0,.08);

  --tpmm-anim-ms: 200ms;
  --tpmm-badge: #EEF0F2;                   /* light badge bg */

  position: relative;
  display: inline-block;
  font-family: inherit;
}

/* Responsive left sidebar width (desktop) */
.tpmm{
  --tpmm-left-w: clamp(200px, 20vw, 270px) !important;
}

/* =================
   Trigger
   ================= */
.tpmm__trigger{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;


  cursor:pointer;
  border:1px solid rgba(0,0,0,.12);
  background: var(--hm-accent-24)!important;

  color: var(--hm-accent-20);
  margin-bottom: 0px;
  padding:10px 14px;
  width: var(--tpmm-left-w) !important;/* Trigger matches left column width */
  max-width: 270px !important;

}
.tpmm__trigger:focus{
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}
.tpmm__trigger-caret{ margin-left:4px; opacity:.75;}


/* =================
   Panel (desktop)
   ================= */
.tpmm__panel{
  position:absolute;
  left:0;
  top:100%;

  width: min(var(--tpmm-panel-w), calc(100vw - 4px)); /*-40*/
  height: min(96vh, max(var(--tpmm-panel-h), var(--tpmm-panel-min-h)));

  background: var(--hm-accent-25);
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
  overflow:hidden;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform-origin: top left;
  z-index: 99999;

  display:flex;
  flex-direction:column;
}

/* Flex scroll-safety */
.tpmm__panel,
.tpmm__body,
.tpmm__left,
.tpmm__right,
.tpmm__right-inner,
.tpmm__grid{
  min-height:0;
}

.tpmm__body{
  display:flex;
  flex: 1 1 auto;
}

/* =================
   Search
   ================= */
.tpmm__search{
  padding:12px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: var(--hm-accent-23);
}
.tpmm__search-input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111;
}
.tpmm__search-input::placeholder{ color: rgba(0,0,0,.45); }

/* =================
   Left column
   ================= */
.tpmm__left{
  width: var(--tpmm-left-w) !important;
  max-width: 270px !important;

  height:100%;
  background: var(--hm-accent-23);
  overflow:auto;
}
.tpmm__left-list{ list-style:none; margin:0; padding:0; }

/* divider between items */
.tpmm__left-li{ border-bottom: 1px solid rgba(0,0,0,.06); }

.tpmm__left-item{
  width:100%;
  background:transparent;
  border:0;
  color: var(--hm-accent-20);
  text-align:left;

  display:flex;
  gap:10px;
  cursor:pointer;
  position:relative;

  padding: 9px 12px !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;

  align-items: flex-start;
}
.tpmm__left-li.is-active > .tpmm__left-item,
.tpmm__left-li:hover > .tpmm__left-item{
  background: rgba(0,0,0,.04);
}

/* Make the text area flexible/wrappable, keep the caret on the right */
.tpmm__left-item > :not(.tpmm__left-caret){
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.tpmm__left-caret{
  flex: 0 0 auto;
  margin-left:auto;
  align-self:center;
  opacity:.7;
  color: rgba(0,0,0,.65);
}

/* =================
   Right column
   ================= */
.tpmm__right{
  width: calc(100% - var(--tpmm-left-w)) !important;
  height:100%;
  background:#fff;
  position:relative;

  display:flex;
  flex-direction:column;
}
.tpmm__right-inner{
  flex: 1 1 auto;
  position:relative;
}

/* Right grid */
.tpmm__grid{
  display:none;
  height:100%;
  padding:22px;

  overflow-y:auto;
  overflow-x:hidden;

  gap: var(--tpmm-gap);
  align-content:start;
  grid-template-columns: repeat(var(--tpmm-cols), minmax(150px, 1fr));
}
.tpmm__grid.is-active{ display:grid; }

/* =================
   Tile
   ================= */
.tpmm__tile{
  text-decoration:none;
  color: var(--hm-accent-20);

  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 8px;
  border-radius:10px;
  position:relative;
}
.tpmm__tile:hover{ background: rgba(0,0,0,.03); }

.tpmm__tile-text{
  display:flex;
  flex-direction:column;
  gap:6px;
  justify-content:center;
}
.tpmm__tile-title{
	font-size:13px;
	line-height:1.2;
	color: rgba(0,0,0,.90); 
}
.tpmm__tile-desc{ font-size:12px; opacity:.75; color: rgba(0,0,0,.65); }

.tpmm__tile-caret{
  position:absolute;
  right:10px;
  top:12px;
  opacity:.6;
  color: rgba(0,0,0,.65);
}

/* Icon circle */
.tpmm__icon{
  width: var(--tpmm-icon-size);
  height: var(--tpmm-icon-size);
  border-radius: 50%;
  background: var(--tpmm-icon-bg);
  border: 1px solid var(--tpmm-icon-border);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  overflow:hidden;
}
.tpmm__icon i{
  color: var(--tpmm-icon-color);
  font-size: calc(var(--tpmm-icon-size) * 0.52);
  line-height:1;
  display:block;
}
.tpmm__icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding: calc(var(--tpmm-icon-size) * 0.22);
}

/* Hide empty placeholders so text lines up */
.tpmm .tpmm__icon--empty{ display:none !important; }

/* Badge */
.tpmm__badge{
  margin-left:8px;
  font-size:10px;
  padding:3px 7px;
  border-radius:999px;
  background: var(--tpmm-badge);
  color: rgba(0,0,0,.75);
  vertical-align: middle;
}
.tpmm__badge[style]{ background: var(--tpmm-badge); color: rgba(0,0,0,.75); }

/* =================
   Flyout (3rd level)
   ================= */
.tpmm__tile.has-children{ padding-right:24px; }

.tpmm__flyout{
  position:absolute;
  left: calc(100% - 10px);
  top:0;

  min-width:260px;
  max-width:360px;

  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px;

  display:none;
  z-index: 999999;
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.tpmm__tile.has-children:hover .tpmm__flyout{ display:block; }

.tpmm__flyout-link{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  text-decoration:none;
  color: var(--hm-accent-20);
}
.tpmm__flyout-link:hover{ background: rgba(0,0,0,.04); }

/* =================
   RIGHT-only footer
   ================= */
.tpmm__right-footer{
  flex: 0 0 auto;
  border-top: 1px solid rgba(0,0,0,.08);
  background: var(--hm-accent-23);
}
.tpmm__viewall{
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  padding:16px 18px;

  color: var(--hm-accent-20);
  text-decoration:none;
  font-weight:800;
  letter-spacing:.35px;
  text-transform:uppercase;
  position:relative;
}
.tpmm__viewall:hover{ background: rgba(0,0,0,.03); }
.tpmm__viewall-text{ text-align:center; padding:0 44px; }
.tpmm__viewall-arrow{
  position:absolute;
  right:18px;
  top:50%;
  transform: translateY(-50%);
  font-size:22px;
  opacity:.75;
  color: rgba(0,0,0,.75);
}

/* =================
   Overlay
   ================= */
.tpmm__overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.22);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  z-index: 99998;
}

/* =================
   Open state
   ================= */
.tpmm.is-open .tpmm__panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Left-only mode */
.tpmm.tpmm--left-only .tpmm__right,
.tpmm.tpmm--left-only .tpmm__right-footer{
  display:none !important;
}
.tpmm.tpmm--left-only .tpmm__left{ width:100% !important; }
.tpmm.tpmm--left-only .tpmm__panel{ width: var(--tpmm-left-w) !important; }

/* =================
   Animations
   ================= */
.tpmm[data-anim="fade"] .tpmm__panel{
  transition: opacity var(--tpmm-anim-ms) ease, visibility var(--tpmm-anim-ms) ease;
}
.tpmm[data-anim="slide"] .tpmm__panel{
  transform: translateY(10px);
  transition: opacity var(--tpmm-anim-ms) ease, transform var(--tpmm-anim-ms) ease, visibility var(--tpmm-anim-ms) ease;
}
.tpmm.is-open[data-anim="slide"] .tpmm__panel{ transform: translateY(0); }

.tpmm[data-anim="zoom"] .tpmm__panel{
  transform: scale(.98);
  transition: opacity var(--tpmm-anim-ms) ease, transform var(--tpmm-anim-ms) ease, visibility var(--tpmm-anim-ms) ease;
}
.tpmm.is-open[data-anim="zoom"] .tpmm__panel{ transform: scale(1); }

@media (prefers-reduced-motion: reduce){
  .tpmm__panel{ transition:none !important; }
}

/* =================
   Mobile (base)
   ================= */

/* MOBILE container hidden on desktop by default */
.tpmm__mobile{ display:none; }

/* Desktop-only safety */
.tpmm.tpmm--mobile .tpmm__panel,
.tpmm.tpmm--mobile .tpmm__trigger{ display:none !important; }
.tpmm.tpmm--mobile .tpmm__mobile{ display:block !important; }

/* Mobile toggle full viewport width */
.tpmm.tpmm--mobile .tpmm__mobile-toggle{
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  box-sizing:border-box;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  color: rgba(0,0,0,.85);
  padding: 14px 16px;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius: 0;
}
.tpmm.tpmm--mobile .tpmm__mobile-toggle-icon{
  position:absolute;
  left:16px;
  display:inline-flex;
  color: rgba(0,0,0,.75);
}

.tpmm.tpmm--mobile .tpmm__mobile-toggle::after{
  content:"▾";
  position:absolute;
  right:16px;
  top:50%;
  transform: translateY(-50%);
  opacity:.8;
  transition: transform var(--tpmm-anim-ms) ease;
  color: rgba(0,0,0,.75);
}
.tpmm.tpmm--mobile.is-mobile-open .tpmm__mobile-toggle::after{
  transform: translateY(-50%) rotate(180deg);
}

/* MOBILE PANEL base (offcanvas default) */
.tpmm__mobile-panel{
  position:fixed;
  top:0;
  bottom:0;
  left:0;

  width:min(88vw, 420px);
  background:#fff;
  border-right:1px solid rgba(0,0,0,.10);

  transform: translateX(-100%);
  transition: transform var(--tpmm-anim-ms) ease;

  z-index:99999;
  overflow:auto;
}
.tpmm.is-mobile-open .tpmm__mobile-panel{ transform: translateX(0); }
.tpmm.is-mobile-open .tpmm__overlay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.tpmm__mobile-head{
  display:flex;
  justify-content:flex-end;
  padding:10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background: var(--hm-accent-23);
}
.tpmm__mobile-close{
  border:0;
  background:transparent;
  color: rgba(0,0,0,.85);
  font-size:22px;
  cursor:pointer;
}

/* Inline mobile dropdown mode */
.tpmm.tpmm--mobile.tpmm--mobile-inline .tpmm__mobile-panel{
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing: border-box !important;

  overflow-x: hidden !important;

  transform: none !important;
  transition: none !important;
  border-right:0 !important;
}
.tpmm.tpmm--mobile.tpmm--mobile-inline .tpmm__mobile-head{ display:none !important; }
.tpmm.tpmm--mobile.tpmm--mobile-inline .tpmm__overlay{ display:none !important; }
.tpmm.tpmm--mobile.tpmm--mobile-inline .tpmm__mobile-panel{ display:none; }
.tpmm.tpmm--mobile.tpmm--mobile-inline.is-mobile-open .tpmm__mobile-panel{ display:block; }

/* Mobile lists */
.tpmm .tpmm__m-list{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
}
.tpmm__m-item{ border-bottom:1px solid rgba(0,0,0,.06); }
.tpmm__m-row{
  display:flex;
  align-items:center;
  width:100%;
  box-sizing: border-box;
  padding-right: 8px;
}
.tpmm__m-link{
  flex:1;
  padding:14px 16px;
  color: rgba(0,0,0,.90);
  text-decoration:none;
}
.tpmm__m-exp{
  width:44px;
  height:44px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04) !important;
  color: rgba(0,0,0,.85);
  font-size:18px;
  cursor:pointer;
  border-radius: 10px;
  padding-top: 5px;
  padding-left: 14px;
}
.tpmm__m-exp:hover{ background: rgba(0,0,0,.07) !important; }
.tpmm__m-sub{ padding-left:10px; }

/* Hide scrollbars (still scrollable) — keep as you had */
.tpmm__left,
.tpmm__grid,
.tpmm__mobile-panel{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tpmm__left::-webkit-scrollbar,
.tpmm__grid::-webkit-scrollbar,
.tpmm__mobile-panel::-webkit-scrollbar{
  width:0;
  height:0;
}

/* =========================
   No internal scroll mode
   ========================= */
.tpmm.tpmm--no-scroll .tpmm__panel{
  height:auto !important;
  max-height:none !important;
}
.tpmm.tpmm--no-scroll .tpmm__body{ height:auto !important; }
.tpmm.tpmm--no-scroll .tpmm__left{ overflow: visible !important; }
.tpmm.tpmm--no-scroll .tpmm__grid{ height:auto !important; overflow: visible !important; }
.tpmm.tpmm--no-scroll .tpmm__right{ height:auto !important; }

/* =========================
   Elementor editor handling
   ========================= */
.tpmm.tpmm--edit .tpmm__panel{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.tpmm.tpmm--edit.is-open .tpmm__panel{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.tpmm.tpmm--edit .tpmm__overlay{ display:none !important; }

/* =========================
   Home: keep menu open, left-only; expand on hover
   (adjusted to light hover colors)
   ========================= */
/* Home: keep menu open ONLY when sticky is NOT active */
.home:not(.has-sticky-header) .tpmm:not(.tpmm--mobile) .tpmm__panel{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  width: var(--tpmm-left-w) !important;
}

.home:not(.has-sticky-header) .tpmm:not(.tpmm--mobile) .tpmm__right,
.home:not(.has-sticky-header) .tpmm:not(.tpmm--mobile) .tpmm__right-footer{
  display:none !important;
}

.home:not(.has-sticky-header) .tpmm:not(.tpmm--mobile) .tpmm__panel:hover{
  width: min(var(--tpmm-panel-w), calc(100vw - 40px)) !important;
}

.home:not(.has-sticky-header) .tpmm:not(.tpmm--mobile) .tpmm__panel:hover .tpmm__right{
  display:flex !important;
  flex-direction:column !important;
  min-height:0;
}

.home:not(.has-sticky-header) .tpmm:not(.tpmm--mobile) .tpmm__panel:hover .tpmm__right-footer{
  display:block !important;
  margin-top:auto;
}

.home:not(.has-sticky-header) .tpmm:not(.tpmm--mobile) .tpmm__panel:hover .tpmm__left{
  width: var(--tpmm-left-w) !important;
}

/* Home: don't show active highlight until user hovers/expands the panel */
.home .tpmm:not(.tpmm--mobile) .tpmm__left-li.is-active > .tpmm__left-item{
  background: transparent !important;
}
.home .tpmm:not(.tpmm--mobile) .tpmm__panel:hover .tpmm__left-li.is-active > .tpmm__left-item{
  background: rgba(0,0,0,.04) !important;
}

/* Stop theme "active/focus" coloring on left menu buttons */
.tpmm .tpmm__left-item:focus,
.tpmm .tpmm__left-item:focus-visible,
.tpmm .tpmm__left-item:active{
  background: transparent !important;
  color: var(--hm-accent-20) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =========================
   FIX: Elementor + inline mobile mode (full width, no overflow)
   ========================= */
@media (max-width:1024px){

  .elementor-hidden-desktop .tpmm.tpmm--mobile{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }

  .elementor-hidden-desktop .elementor-widget-tpmm_two_panel_mega_menu,
  .elementor-hidden-desktop .elementor-widget-tpmm_two_panel_mega_menu .elementor-widget-container{
    width:100% !important;
  }

  .elementor-hidden-desktop .tpmm.tpmm--mobile.tpmm--mobile-inline .tpmm__mobile,
  .elementor-hidden-desktop .tpmm.tpmm--mobile.tpmm--mobile-inline .tpmm__mobile-toggle,
  .elementor-hidden-desktop .tpmm.tpmm--mobile.tpmm--mobile-inline.is-mobile-open .tpmm__mobile-panel{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  .elementor-hidden-desktop .tpmm.tpmm--mobile .tpmm__mobile-toggle{
    left:auto !important;
    transform:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}