/* MF Top Bar — Off‑Canvas */

:root{
  --mftop-accent: #7bd61a;
  --mftop-bg: #000000;
  --mftop-fg: #ffffff;
  --mftop-overlay: rgba(0,0,0,0.45);
  --mftop-shadow: 0 12px 34px rgba(0,0,0,0.35);

  --mftop-toggle-bg: #000000;
  --mftop-toggle-fg: #ffffff;
}

/* Toggle */
.mftop-toggle {
  position: fixed; top: 12px; right: 12px; z-index: 100001;
  display: none; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--mftop-toggle-bg); color: var(--mftop-toggle-fg);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  box-shadow: var(--mftop-shadow); cursor: pointer;
}
.mftop-toggle .mftop-toggle__label { font-weight: 600; font-size: 14px; color: var(--mftop-toggle-fg); }
.mftop-burger, .mftop-burger::before, .mftop-burger::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--mftop-toggle-fg);
  transition: transform .25s ease, opacity .2s ease;
}
.mftop-burger::before { transform: translateY(-6px); }
.mftop-burger::after  { transform: translateY(4px); }
.mftop-toggle[aria-expanded="true"] .mftop-burger { transform: rotate(45deg); }
.mftop-toggle[aria-expanded="true"] .mftop-burger::before { opacity: 0; }
.mftop-toggle[aria-expanded="true"] .mftop-burger::after { transform: rotate(-90deg) translateX(2px); }

/* Overlay */
.mftop-overlay { position: fixed; inset: 0; background: var(--mftop-overlay);
  z-index: 100000; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.mftop-overlay.is-open { opacity: 1; pointer-events: auto; }

/* Panel */
.mftop-panel {
  position: fixed; top: 0; bottom: 0; width: 320px; max-width: 90vw;
  background: var(--mftop-bg); color: var(--mftop-fg);
  z-index: 100002; box-shadow: var(--mftop-shadow);
  transform: translateX(100%); transition: transform .25s ease; will-change: transform;
}
.mftop-panel.mftop-side-left { left:0; transform: translateX(-100%); }
.mftop-panel.mftop-side-right { right:0; }
.mftop-panel.is-open.mftop-side-left, .mftop-panel.is-open.mftop-side-right { transform: translateX(0); }

.mftop-panel__inner { height:100%; overflow: auto; padding: 12px 16px; }

/* Mobile menu list */
.mftop-mobile, .mftop-mobile ul { list-style:none; margin:0; padding:0; }
.mftop-mobile li { border-bottom: 1px solid rgba(255,255,255,0.14); }
.mftop-mobile a {
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 8px; text-decoration:none; color: var(--mftop-fg) !important; font-size:16px;
}
.mftop-mobile a:hover { color: var(--mftop-accent) !important; }

/* Submenu toggle */
.mftop-subtoggle { background:none; border:0; font-size:14px; padding:10px; color: var(--mftop-fg) !important; cursor:pointer; }
.mftop-subtoggle .chev { display:inline-block; transition: transform .2s ease; }
.mftop-mobile .sub-menu { display:none; padding-left: 12px; }
.mftop-mobile .sub-menu.is-open { display:block; }
.mftop-mobile .sub-menu a { font-size:15px; opacity:.95; }


/* --- Submenu & Typography Enhancements (v1.1.1) --- */
.mftop-mobile, .mftop-mobile * { box-sizing: border-box; }
.mftop-mobile, .mftop-mobile ul { list-style: none; margin: 0; padding: 0; }
.mftop-mobile a, .mftop-subtoggle {
  font-family: "Oswald", Arial, sans-serif !important;
  color: var(--mftop-fg) !important;
}
.mftop-mobile a { text-transform: uppercase; letter-spacing: .02em; font-size: 16px; }
.mftop-mobile li { border-bottom: 1px solid rgba(255,255,255,0.14); }
.mftop-mobile li > a { display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 14px 8px; text-decoration:none; }
.mftop-mobile li > a:hover { color: var(--mftop-accent) !important; }

/* Toggle caret */
.mftop-subtoggle{ background:none; border:0; padding: 10px; margin-left: 6px; cursor:pointer; line-height:1; }
.mftop-subtoggle .chev{ display:inline-block; transition: transform .2s ease; }

/* Submenu container */
.mftop-mobile .sub-menu{ display:none; padding-left: 14px; }
.mftop-mobile .sub-menu.is-open{ display:block; }
.mftop-mobile .sub-menu a{ font-size: 15px; opacity: .95; }

/* Focus states for accessibility */
.mftop-mobile a:focus, .mftop-subtoggle:focus { outline: 2px solid var(--mftop-accent); outline-offset: 2px; border-radius: 6px; }

/* ---- v1.2.0 vertical row layout ---- */
.mftop-mobile li { position: relative; }
.mftop-mobile li .mftop-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 8px;
}
/* When we wrap link into .mftop-row, remove duplicate padding from link */
.mftop-mobile li .mftop-row > a { padding: 0 !important; flex: 1 1 auto; }
.mftop-mobile li > a { padding: 14px 8px; } /* for leaf items without row */

/* Make caret consistent and aligned */
.mftop-subtoggle { min-width: 28px; text-align: center; }
.mftop-subtoggle .chev { font-size: 16px; line-height: 1; transform-origin: 50% 50%; }

/* Hide accidental <hr> or theme arrows inside cloned markup */
.mftop-mobile hr, .mftop-mobile .dropdown-toggle, .mftop-mobile .oceanwp-dropdown-toggle,
.mftop-mobile .nav-arrow, .mftop-mobile i[class*="icon"], .mftop-mobile svg { display: none !important; }

/* Ensure list items stack vertically with clear separators */
.mftop-mobile li + li { border-top: 1px solid rgba(255,255,255,0.06); }

/* ---- v1.3.0 force vertical stack & reset layout leakage ---- */
.mftop-mobile, .mftop-mobile ul { display: block !important; flex-direction: column !important; margin:0; padding:0; }
.mftop-mobile li { display: block !important; float: none !important; clear: both !important; }
.mftop-mobile li .mftop-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 8px; }
.mftop-mobile li .mftop-row > a { display:block; padding:0 !important; flex:1 1 auto; }
.mftop-mobile li > a { display:block; padding:14px 8px; }

/* tighten HR/ornaments removal just in case */
.mftop-mobile hr, .mftop-mobile .dropdown-toggle, .mftop-mobile .oceanwp-dropdown-toggle,
.mftop-mobile .nav-arrow, .mftop-mobile i[class*="icon"], .mftop-mobile svg,
.mftop-mobile .oceanwp-dropdown { display: none !important; }

/* ---- v1.4.0: submenus closed by default ---- */
.mftop-mobile ul.sub-menu { display: none !important; }
.mftop-mobile ul.sub-menu.is-open { display: block !important; }

/* ---- v1.4.2: square hamburger + single caret ---- */

/* Square toggle (touch-friendly) */
.mftop-toggle{
  width: 44px; height: 44px; padding: 0 !important; justify-content: center;
  border-radius: 0 !important;
}
/* Hide label to keep perfect square */
.mftop-toggle .mftop-toggle__label{ display: none !important; }

/* Kill any theme-provided carets/pseudo-elements inside links to avoid double arrows */
.mftop-mobile .menu-item-has-children > a::after,
.mftop-mobile .menu-item-has-children > a::before,
.mftop-mobile a::after,
.mftop-mobile a::before,
.mftop-mobile .menu-item-has-children > a .caret,
.mftop-mobile .menu-item-has-children > a .arrow,
.mftop-mobile .menu-item-has-children > a i,
.mftop-mobile .menu-item-has-children > a svg { content: none !important; display: none !important; }

/* ---- v1.4.3: enforce single caret ---- */
.mftop-mobile a::before,
.mftop-mobile a::after { content: none !important; display: none !important; }
.mftop-mobile .arrow, .mftop-mobile .caret, .mftop-mobile .toggle,
.mftop-mobile .dropdown-toggle, .mftop-mobile .sub-arrow { display:none !important; }

/* ---- v1.4.5: ensure single visible caret per item ---- */
.mftop-row .mftop-subtoggle:not(:last-of-type){ display:none !important; }