/* Put this at the very top of the CSS file */
@charset "UTF-8";

/* --- Arrow glyph using Unicode escape to avoid encoding issues --- */
.mm-has-sub > .mm-arrow::before{
  content: "\25BE"; /* ▾ */
  font-size: 14px;
}

/* Hide the arrow button on desktop; show only on mobile */
.mm-has-sub > .mm-arrow{ display: none; }

@media (max-width: 900px){
  .mm-has-sub > .mm-arrow{ display: block; }
}



/* ===== Core layout ===== */
:root{
  --grad-top:#ffa64d;
  --grad-mid:#ff8c1f;
  --grad-bot:#ff6a00;
  --text:#ffffff;
  --text-active:#1768ff;
  --ink:#0f172a;
  --muted:#64748b;
  --panel:#ffffff;
  --border:#e5e7eb;
  --radius:10px;
  --submenu-radius:10px;
  --shadow-bar:0 10px 18px rgba(0,0,0,.18);
  --shadow-tab:0 6px 12px rgba(0,0,0,.18);
}

.mm-header{
  position:sticky; top:0; z-index:1000; background:#fff;
}
.mm-container{
  max-width:1200px; margin:0 auto; padding:.5rem 1rem;
  display:flex; align-items:center; gap:1rem;
}
.mm-logo img{ height:auto; width:auto; display:block; }

/* ===== Bar ===== */
.mm-nav{
  margin-left:auto; position:relative; isolation:isolate;
  background:linear-gradient(#ffb462, var(--grad-top) 25%, var(--grad-mid), var(--grad-bot));
  border-radius: var(--radius);
  box-shadow: var(--shadow-bar);
}
.mm-menu{
  list-style:none; margin:0; padding:0 .5rem;
  display:flex; align-items:center; gap:.25rem;
  height:56px; line-height:56px;
  position:relative;
}
.mm-menu>li{ position:relative; }
.mm-menu>li>a{
  display:inline-block; padding:0 34px; color:var(--text);
  text-decoration:none; font-weight:700; font-size:18px;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  border-radius:8px; transition:transform .15s ease, color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mm-menu>li>a:hover,
.mm-menu>li>a:focus-visible{ color:#f2f6ff; outline:none; }

/* Active/current tab (set server-side on the <li>) */
.mm-menu>li.current>a{
  color:var(--text-active);
  background:linear-gradient(#ffbb73, var(--grad-top) 45%, #ff7f1a);
  transform: translateY(-6px);
  box-shadow: var(--shadow-tab);
}

/* tiny ribbon “ears” at bar ends (purely decorative) */
.mm-menu::before, .mm-menu::after{
  content:""; position:absolute; bottom:-6px; width:0; height:0;
  border-style:solid; border-width:6px 6px 0 6px; border-color:#c25700 transparent transparent transparent;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.25));
}
.mm-menu::before{ left:18px; }
.mm-menu::after{ right:18px; }

/* ===== Submenus ===== */
.mm-has-sub > .mm-arrow{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border:0; background:transparent; cursor:pointer;
}
.mm-has-sub > .mm-arrow::before{
  content:"▾"; color:var(--text); font-size:14px; line-height:1;
}

.mm-submenu{
  position:absolute; left:0; top:calc(100% - 6px);
  min-width:270px; list-style:none; margin:0; padding:.35rem 0;
  background:var(--panel); border:1px solid var(--border);
  border-radius:0 0 var(--submenu-radius) var(--submenu-radius);
  box-shadow:0 12px 22px rgba(0,0,0,.12);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index:1000;
}
.mm-submenu li+li{ border-top:1px solid var(--border); }
.mm-submenu a{
  display:block; padding:.7rem 1rem; color:#495057; text-decoration:none; font-weight:600;
}
.mm-submenu a:hover,
.mm-submenu a:focus-visible{ background:#f8f9fa; color:#111; outline:none; }

/* open state (desktop hover & JS toggles) */
.mm-has-sub.open>.mm-submenu{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }

/* hover bridge */
.mm-has-sub::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; }

/* ===== Mobile ===== */
.mm-toggle{
  display:none; margin-left:auto; width:42px; height:42px;
  border:1px solid rgba(0,0,0,.15); border-radius:8px;
  background:linear-gradient(#ffb462, var(--grad-top) 25%, var(--grad-bot));
  color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.mm-burger, .mm-burger::before, .mm-burger::after{
  display:block; width:40px; height:2px; background:#fff; border-radius:1px; margin:0 auto; position:relative;
}
.mm-burger::before, .mm-burger::after{ content:""; position:absolute; left:0; }
.mm-burger::before{ top:-6px; } .mm-burger::after{ top:6px; }

@media (max-width: 900px){
  .mm-toggle{ display:inline-block; }
  .mm-nav{ margin-left:0; width:100%; }
  .mm-menu{
    display:none; flex-direction:column; align-items:stretch; gap:0;
    height:auto; line-height:1.2;
    padding:.5rem 0;
  }
  .mm-nav.open .mm-menu{ display:flex; }
  .mm-menu>li>a{
    color:#fff; padding:.85rem 1rem; border-radius:0;
  }
  .mm-has-sub > .mm-arrow{ right:12px; color:#fff; }
  .mm-submenu{
    position:static; opacity:1 !important; visibility:visible !important; pointer-events:auto;
    transform:none; box-shadow:none; border:0; border-radius:0;
  }
}

/* accessibility tweaks */
.mm-menu a, .mm-arrow, .mm-toggle{ -webkit-tap-highlight-color: transparent; }
