/* FTR Off-Canvas Menu — front-end styles.
   Widths/colors are driven by Elementor controls via CSS variables. */

.ftr-menu{
  --ftr-collapsed:76px;
  --ftr-expanded:264px;
  --ftr-icon:22px;
  --ftr-ind-color:#b58e5a;
  --ftr-ind-width:3px;
  position:fixed;
  top:0;
  height:100vh;
  height:100dvh;
  width:var(--ftr-collapsed);
  background:#5a2c08;
  display:flex;
  box-sizing:border-box;
  transition:width .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1);
  will-change:width,transform;
  z-index:1000;
}
.ftr-menu.ftr-side-left{left:0}
.ftr-menu.ftr-side-right{right:0}
.ftr-menu *{box-sizing:border-box}

.ftr-menu__inner{
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
}

/* ---- expanded / hover-expand ---- */
.ftr-menu.is-expanded{width:var(--ftr-expanded)}
.ftr-menu.ftr-hover-expand:not(.ftr-is-mobile):hover{width:var(--ftr-expanded)}

/* ---- logo ---- */
.ftr-menu__logo{display:flex;align-items:center;flex:0 0 auto}
.ftr-menu__logo-link{display:inline-flex;align-items:center;line-height:0}
.ftr-menu__logo img{display:block;height:auto;max-width:100%}
.ftr-menu__logo--full{display:none}
.ftr-menu__logo--mark{display:block}
.ftr-menu.is-expanded .ftr-menu__logo--full,
.ftr-menu.ftr-hover-expand:not(.ftr-is-mobile):hover .ftr-menu__logo--full{display:block}
.ftr-menu.is-expanded .ftr-menu__logo--mark,
.ftr-menu.ftr-hover-expand:not(.ftr-is-mobile):hover .ftr-menu__logo--mark{display:none}

/* ---- collapse/expand toggle ---- */
.ftr-menu__toggle-wrap{display:flex;padding:2px 10px 8px}
.ftr-menu__toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:0;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.08);color:#e8d6bb;font-size:16px;line-height:1;
}
.ftr-menu__toggle svg{width:1em;height:1em}
.ftr-menu__toggle-close{display:none}
.ftr-menu.is-expanded .ftr-menu__toggle-open{display:none}
.ftr-menu.is-expanded .ftr-menu__toggle-close{display:inline-flex}

/* ---- nav + items ---- */
.ftr-menu__nav{display:flex;flex-direction:column;margin-top:6px}
.ftr-menu__item{
  position:relative;
  display:flex;align-items:center;gap:14px;
  padding:12px 24px 12px 26px;
  color:#fff;text-decoration:none;
  white-space:nowrap;overflow:hidden;
  transition:background-color .18s ease,color .18s ease;
}
.ftr-menu__item::before{
  content:"";position:absolute;top:0;bottom:0;left:0;
  width:var(--ftr-ind-width);
  background:var(--ftr-ind-color);
  transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.ftr-menu.ftr-side-right .ftr-menu__item::before{left:auto;right:0;transform-origin:right}
.ftr-menu__item:hover::before,
.ftr-menu__item.is-active::before{transform:scaleX(1)}

.ftr-menu__icon{
  flex:0 0 auto;
  width:var(--ftr-icon);height:var(--ftr-icon);
  font-size:var(--ftr-icon);
  display:inline-flex;align-items:center;justify-content:center;
  color:#e8d6bb;
}
.ftr-menu__icon svg,.ftr-menu__icon img{width:100%;height:100%;object-fit:contain}
.ftr-menu__icon i{font-size:var(--ftr-icon);line-height:1}

/* labels: hidden when collapsed, revealed when expanded / hovered */
.ftr-menu__label{
  opacity:0;
  max-width:0;
  transition:opacity .2s ease,max-width .28s ease;
}
.ftr-menu.is-expanded .ftr-menu__label,
.ftr-menu.ftr-hover-expand:not(.ftr-is-mobile):hover .ftr-menu__label{opacity:1;max-width:200px}

/* ---- mobile open button + backdrop ---- */
.ftr-menu__mobtoggle{
  position:fixed;top:16px;left:16px;
  display:none;align-items:center;justify-content:center;
  width:46px;height:46px;border:0;border-radius:12px;cursor:pointer;
  background:#5a2c08;color:#fff;font-size:20px;line-height:1;
  box-shadow:0 8px 24px rgba(40,28,16,.28);z-index:1000;
}
.ftr-menu__mobtoggle svg{width:1em;height:1em}
.ftr-menu__backdrop{
  position:fixed;inset:0;background:rgba(40,28,16,.55);
  opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:-1;
}

/* =====================================================================
   MOBILE / OFF-CANVAS  (class applied by JS below the breakpoint)
   ===================================================================== */
.ftr-menu.ftr-is-mobile.ftr-offcanvas{
  width:var(--ftr-expanded);
  transform:translateX(-100%);
  box-shadow:0 0 40px rgba(40,28,16,.35);
}
.ftr-menu.ftr-is-mobile.ftr-offcanvas.ftr-side-right{transform:translateX(100%)}
.ftr-menu.ftr-is-mobile.ftr-offcanvas.is-open{transform:translateX(0)}

/* in the drawer everything is in its expanded form */
.ftr-menu.ftr-is-mobile .ftr-menu__label{opacity:1;max-width:200px}
.ftr-menu.ftr-is-mobile .ftr-menu__logo--full{display:block}
.ftr-menu.ftr-is-mobile .ftr-menu__logo--mark{display:none}
.ftr-menu.ftr-is-mobile .ftr-menu__toggle-wrap{display:none}

.ftr-menu.ftr-is-mobile.ftr-offcanvas .ftr-menu__backdrop{
  position:fixed;inset:0;z-index:-1;
}
.ftr-menu.ftr-is-mobile.ftr-offcanvas.is-open .ftr-menu__backdrop{opacity:1;pointer-events:auto}

/* the mobile open button is shown by JS below the breakpoint */
.ftr-menu__mobtoggle.ftr-show{display:inline-flex}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ftr-menu,.ftr-menu__item::before,.ftr-menu__label,.ftr-menu__backdrop{transition:none}
}