/* Mega Menu — CSS-only dropdown (hover on desktop, tap on touch) */
.mm-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mm-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary, #64748b);
  text-decoration: none;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.mm-link:hover { color: var(--theme-primary, var(--gold, #4f46e5)); background: var(--bg-card-hover, rgba(0,0,0,.04)); }
.mm-caret { font-size: 10px; transition: transform .2s; }

.mm-item { position: relative; }
.mm-item:hover .mm-caret,
.mm-item:focus-within .mm-caret { transform: rotate(180deg); }

.mm-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  display: none;
  gap: 24px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  padding: 22px;
  min-width: 560px;
  margin-top: 6px;
}
.mm-item:hover .mm-panel,
.mm-item:focus-within .mm-panel { display: flex; }

.mm-col { flex: 1; min-width: 0; }
.mm-col h5 {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 12px;
}
.mm-col--sub { display: flex; flex-direction: column; gap: 8px; }
.mm-sub-link { font-size: 13.5px; color: var(--text-primary, #1e293b); text-decoration: none; }
.mm-sub-link:hover { color: var(--theme-primary, var(--gold, #4f46e5)); }

.mm-col--recent { display: flex; flex-direction: column; gap: 10px; }
.mm-recent-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary, #1e293b); }
.mm-recent-item img { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.mm-recent-item span { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.mm-recent-item:hover span { color: var(--theme-primary, var(--gold, #4f46e5)); }

.mm-col--featured { flex: 1.1; }
.mm-featured { display: block; text-decoration: none; border-radius: 10px; overflow: hidden; position: relative; min-height: 140px; }
.mm-featured img { width: 100%; height: 140px; object-fit: cover; display: block; }
.mm-featured-body { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; }
.mm-featured-badge { background: var(--theme-primary, var(--gold, #4f46e5)); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 99px; align-self: flex-start; }
.mm-featured-body h4 { color: #fff; font-size: 14px; margin: 8px 0 0; line-height: 1.4; }

@media (max-width: 991.98px) {
  .mm-panel { position: static; min-width: auto; box-shadow: none; margin-top: 0; flex-direction: column; }
  .mm-bar { flex-direction: column; align-items: stretch; }
}