/* Frontend styles for WP Admin Style Menu */
.wpasm-menu {
  --wpasm-bg: #f7f7f7;
  --wpasm-border: #e5e7eb;
  --wpasm-link: #1f2937;
  --wpasm-hover: #eef2ff;
  --wpasm-active: #e0e7ff;
  --wpasm-radius: 12px;
  --wpasm-shadow: 0 1px 2px rgba(0,0,0,0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.wpasm-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpasm-menu li { margin: 0; }

.wpasm-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--wpasm-link);
  border-radius: var(--wpasm-radius);
}

.wpasm-menu a:hover {
  background: var(--wpasm-hover);
}

.wpasm-menu .dashicons,
.wpasm-menu i.fa,
.wpasm-menu i.fas,
.wpasm-menu i.far,
.wpasm-menu i.fab,
.wpasm-menu i.fa-solid {
  font-size: 18px;
  width: 18px;
  min-width: 18px;
  text-align: center;
}

.wpasm-side {
  background: var(--wpasm-bg);
  border: 1px solid var(--wpasm-border);
  border-radius: var(--wpasm-radius);
  box-shadow: var(--wpasm-shadow);
  padding: 8px;
  max-width: 280px;
}

.wpasm-top {
  background: var(--wpasm-bg);
  border: 1px solid var(--wpasm-border);
  border-radius: var(--wpasm-radius);
  box-shadow: var(--wpasm-shadow);
  padding: 4px;
}

.wpasm-top ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wpasm-top li { display: inline-flex; }

.wpasm-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--wpasm-border);
  border-radius: var(--wpasm-radius);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .wpasm-side .wpasm-toggle { display: inline-flex; }
  .wpasm-side ul { display: none; }
  .wpasm-side[aria-expanded="true"] ul,
  .wpasm-side .wpasm-toggle[aria-expanded="true"] + ul { display: block; }
  .wpasm-side { max-width: 100%; }
}