/* ==========================================================================
   Monal Group — Header widget
   Converted from the static build (assets/css/style.css). Values are the
   original Figma-derived numbers: 1 unit of --monal-u == 1 Figma px / 10.
   ========================================================================== */

/* ==========================================================================
   HEADER  (Figma 1:848 bar 1830×80 @45,45 · radius 18 · white 10% + blur 54)
   ========================================================================== */
.monal-site-header {
  position: fixed; z-index: 100; top: calc(var(--monal-u) * 2.3 + var(--monal-admin-bar)); left: calc(var(--monal-u) * 2.1); right: calc(var(--monal-u) * 2.1);
  transition: top .5s var(--monal-ease-out), left .5s var(--monal-ease-out), right .5s var(--monal-ease-out);
}
.monal-site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--monal-u) * 5.6); padding: 0 calc(var(--monal-u) * 1.2) 0 calc(var(--monal-u) * 2.2);
  border-radius: calc(var(--monal-u) * 1.2);
  background: var(--monal-header-bar, rgba(255, 255, 255, .1));
  border: 1px solid var(--monal-header-border, rgba(255, 255, 255, .1));
  -webkit-backdrop-filter: blur(27px); backdrop-filter: blur(27px);
  color: #fff;
  transition: background-color .5s var(--monal-ease-out), border-color .5s;
}
.monal-site-header.monal-is-scrolled .monal-site-header__bar { background: var(--monal-header-bar-scrolled, rgba(30, 25, 22, .78)); border-color: rgba(255, 255, 255, .08); }
.monal-site-header.monal-is-hidden { transform: translateY(-140%); }
.monal-site-header { transition: transform .5s var(--monal-ease-out), top .5s var(--monal-ease-out), left .5s var(--monal-ease-out), right .5s var(--monal-ease-out); }
.monal-site-header__logo img { width: calc(var(--monal-u) * 20.5); height: auto; }

.monal-site-nav { display: none; }
.monal-site-nav__list { display: flex; align-items: center; gap: calc(var(--monal-u) * 3); }
.monal-site-nav__list > li > a, .monal-site-nav__trigger {
  position: relative; display: inline-flex; align-items: center; gap: calc(var(--monal-u) * .6);
  font-size: max(calc(var(--monal-u) * 1.6), 13px); line-height: calc(var(--monal-u) * 2.4); font-weight: 300; white-space: nowrap;
  transition: opacity .25s;
}
.monal-site-nav__list > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--monal-u) * -.4); height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--monal-ease-out);
}
.monal-site-nav__list > li > a:hover::after { transform: scaleX(1); transform-origin: left; }
/* Only the item WordPress marks as current is emphasised. The trigger was in
   this rule because Figma shows the dropdown open, which made "Collaborate"
   read as the active page on every screen. */
.monal-site-nav__list a.monal-is-active,
.monal-site-nav__trigger.monal-is-active,
.monal-site-nav__dropdown.monal-is-open .monal-site-nav__trigger { font-weight: 500; }

.monal-chevron {
  width: calc(var(--monal-u) * .75); height: calc(var(--monal-u) * .75); margin-top: calc(var(--monal-u) * -.4);
  background: url(../../assets/monal/icons/chevron.svg) center / contain no-repeat;
  transform: rotate(45deg); transition: transform .3s var(--monal-ease-out), margin .3s;
}
.monal-site-nav__dropdown { position: relative; }
.monal-site-nav__dropdown.monal-is-open .monal-chevron { transform: rotate(-135deg); margin-top: calc(var(--monal-u) * .3); }

.monal-dropdown {
  position: absolute; left: calc(var(--monal-u) * -.5); top: calc(100% + calc(var(--monal-u) * 3.6));   /* Figma 1:1679: body 1341,125 220×136 */
  min-width: calc(var(--monal-u) * 22); padding: calc(var(--monal-u) * 2) calc(var(--monal-u) * 2.3) calc(var(--monal-u) * 1.3);
  background: var(--monal-dropdown-bg, #fff); color: var(--monal-dropdown-color, var(--monal-c-black)); border-radius: calc(var(--monal-u) * 1.6);
  box-shadow: 0 calc(var(--monal-u) * 2.4) calc(var(--monal-u) * 4.4) rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; transform: translateY(calc(var(--monal-u) * -.8));
  transition: opacity .3s var(--monal-ease-out), transform .3s var(--monal-ease-out), visibility .3s;
}
.monal-dropdown::before { /* notch pointing at the trigger */
  content: ""; position: absolute; top: calc(var(--monal-u) * -.9); left: calc(var(--monal-u) * 4.6); width: calc(var(--monal-u) * 2); height: calc(var(--monal-u) * 2);
  background: #fff; border-radius: calc(var(--monal-u) * .4) 0 0 0; transform: rotate(45deg);
}
.monal-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--monal-u) * -3.8); height: calc(var(--monal-u) * 3.8); } /* hover bridge */
.monal-site-nav__dropdown.monal-is-open .monal-dropdown { opacity: 1; visibility: visible; transform: none; }
.monal-dropdown a {
  display: block; font-size: max(calc(var(--monal-u) * 1.6), 13px); line-height: calc(var(--monal-u) * 3.4); font-weight: 300; white-space: nowrap;
  transition: color .2s, transform .3s var(--monal-ease-out);
}
.monal-dropdown a:hover { color: var(--monal-c-orange); transform: translateX(calc(var(--monal-u) * .4)); }

.monal-menu-btn {
  position: relative; display: grid; place-content: center; gap: calc(var(--monal-u) * .6);
  width: calc(var(--monal-u) * 3.6); height: calc(var(--monal-u) * 3.6); border-radius: calc(var(--monal-u) * .9); border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; transition: background-color .3s;
}
.monal-menu-btn span { display: block; height: 1.3px; width: calc(var(--monal-u) * 1.46); background: currentColor; border-radius: 2px; transition: transform .4s var(--monal-ease-out), width .4s var(--monal-ease-out); }
.monal-menu-btn span:last-child { width: calc(var(--monal-u) * .73); }
.monal-menu-btn:hover { background: rgba(255, 255, 255, .1); }
.monal-menu-btn:hover span:last-child { width: calc(var(--monal-u) * 1.46); }
.monal-menu-btn--close span { width: calc(var(--monal-u) * 1.6) !important; }
.monal-menu-btn--close span:first-child { transform: translateY(calc(var(--monal-u) * .38)) rotate(45deg); }
.monal-menu-btn--close span:last-child { transform: translateY(calc(var(--monal-u) * -.38)) rotate(-45deg); }

@media (min-width: 1200px) {
  .monal-site-header { top: calc(var(--monal-u) * 4.5 + var(--monal-admin-bar)); left: calc(var(--monal-u) * 4.5); right: calc(var(--monal-u) * 4.5); }
  .monal-site-header.monal-is-scrolled { top: calc(var(--monal-u) * 1.5 + var(--monal-admin-bar)); }
  .monal-site-header__bar { height: calc(var(--monal-u) * 8); padding: 0 calc(var(--monal-u) * 1.6) 0 calc(var(--monal-u) * 3.9); border-radius: calc(var(--monal-u) * 1.8); }
  .monal-site-header__logo img { width: calc(var(--monal-u) * 32.8); }
  .monal-site-nav { display: block; margin-left: auto; margin-right: calc(var(--monal-u) * 7.8); }
  .monal-menu-btn { width: calc(var(--monal-u) * 4.9); height: calc(var(--monal-u) * 4.9); border-radius: calc(var(--monal-u) * 1.2); gap: calc(var(--monal-u) * .7); }
  .monal-menu-btn span { width: calc(var(--monal-u) * 2); height: 1.56px; }
  .monal-menu-btn span:last-child { width: calc(var(--monal-u) * 1); }
  .monal-menu-btn:hover span:last-child { width: calc(var(--monal-u) * 2); }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .monal-site-nav__list { gap: calc(var(--monal-u) * 2.2); }
  .monal-site-nav { margin-right: calc(var(--monal-u) * 3); }
}

/* Drawer */
.monal-drawer {
  position: fixed; inset: var(--monal-admin-bar) 0 0; z-index: 150; background: rgba(15, 12, 10, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.monal-drawer[hidden] { display: none; }
.monal-drawer__panel {
  position: absolute; inset: calc(var(--monal-u) * 1.1); overflow: auto;
  background: var(--monal-drawer-bg, var(--monal-c-ink)); color: var(--monal-drawer-color, #fff); border-radius: calc(var(--monal-u) * 2.2); padding: calc(var(--monal-u) * 1.4) calc(var(--monal-u) * 2.2) calc(var(--monal-u) * 4);
}
.monal-drawer__top { display: flex; align-items: center; justify-content: space-between; height: calc(var(--monal-u) * 5.6); margin-bottom: calc(var(--monal-u) * 3); }
.monal-drawer__top img { width: calc(var(--monal-u) * 20.5); height: auto; }
.monal-drawer__list > li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.monal-drawer__list a, .monal-drawer__group > span {
  display: block; padding: calc(var(--monal-u) * 1.4) 0; font-family: var(--monal-f-display); font-size: calc(var(--monal-u) * 2.8); line-height: 1.1; letter-spacing: -.02em;
}
.monal-drawer__list a:hover { color: var(--monal-c-orange); }
.monal-drawer__group ul { padding: 0 0 calc(var(--monal-u) * 1.4) calc(var(--monal-u) * 1.6); }
.monal-drawer__group ul a { font-family: var(--monal-f-sans); font-size: calc(var(--monal-u) * 1.6); font-weight: 300; padding: calc(var(--monal-u) * .6) 0; opacity: .8; }
@media (min-width: 1200px) {
  .monal-drawer__panel { left: auto; width: calc(var(--monal-u) * 52); inset-block: calc(var(--monal-u) * 1.5); right: calc(var(--monal-u) * 1.5); border-radius: calc(var(--monal-u) * 3); padding: calc(var(--monal-u) * 2.8) calc(var(--monal-u) * 4) calc(var(--monal-u) * 5); }
  .monal-drawer__top img { width: calc(var(--monal-u) * 26); }
  .monal-drawer__list a, .monal-drawer__group > span { font-size: calc(var(--monal-u) * 3.6); }
  .monal-drawer__group ul a { font-size: calc(var(--monal-u) * 1.8); }
}

/* --------------------------------------------------------------------------
   Widget addition — the drawer panel scrolls independently of the page
   -------------------------------------------------------------------------- */
.monal-drawer__panel { overscroll-behavior: contain; }

/* The bar is positioned against the viewport, which grows by the scrollbar
   width while the drawer holds the page locked — hold it in place. */
body.monal-is-locked .monal-site-header { right: calc(var(--monal-u) * 2.1 + var(--monal-scrollbar, 0px)); }
@media (min-width: 1200px) {
  body.monal-is-locked .monal-site-header { right: calc(var(--monal-u) * 4.5 + var(--monal-scrollbar, 0px)); }
}

/* --------------------------------------------------------------------------
   Elementor editor. A fixed bar makes the header widget a zero-height element
   in the editor's flow: it cannot be selected or dragged, and it floats over
   whatever widget follows it. Inside the preview iframe the bar is laid out in
   place instead, so the widget behaves like every other one while editing.
   The frontend is untouched.
   -------------------------------------------------------------------------- */
body.elementor-editor-active .monal-header {
  position: relative;
  min-height: calc(var(--monal-u) * 10.2);
}
body.elementor-editor-active .monal-site-header {
  position: absolute;
  top: calc(var(--monal-u) * 2.3);
}
@media (min-width: 1200px) {
  body.elementor-editor-active .monal-header { min-height: calc(var(--monal-u) * 17); }
  body.elementor-editor-active .monal-site-header { top: calc(var(--monal-u) * 4.5); }
}
body.elementor-editor-active .monal-drawer { position: absolute; }

/* Editor hint when no menu has been chosen yet. */
.monal-site-nav__empty { font-size: calc(var(--monal-u) * 1.4); opacity: .7; margin: 0; }