/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * component: header-menu · genre: modern-minimal · theme: existing Cobalt-influenced tokens
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass (text >= 4.5:1; focus >= 3:1)
 * responsive: pass (320/375/414/768px; light/dark; ja/en/ko)
 */

.header-menu-toggle {
  min-width: 44px;
  justify-content: center;
  transition: transform var(--dur-micro) var(--ease-out);
}

.header-menu-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.header-menu-panel {
  position: fixed;
  z-index: var(--z-sticky);
  inset: auto;
  top: var(--menu-top, var(--space-2xl));
  left: var(--menu-left, var(--space-sm));
  width: min(18rem, calc(100% - var(--space-lg)));
  max-height: calc(100dvh - var(--space-lg));
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--space-xs);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-medium);
  color: var(--text);
  background: var(--surface-raised);
  box-shadow: var(--shadow-small);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
}

.header-menu-profile {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.header-menu-item,
.header-menu-language > label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text);
  font-weight: 650;
  text-align: start;
}

.header-menu-item {
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-small);
  background: transparent;
  font: inherit;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out);
}

.header-menu-item svg,
.header-menu-language svg {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.header-menu-detail {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

.header-menu-language {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-block: 1px solid var(--border);
  margin-block: var(--space-2xs);
}

.header-menu-language select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-small);
  color: var(--text);
  background: var(--surface);
  font: inherit;
  cursor: pointer;
}

.header-menu-item:focus-visible,
.header-menu-language select:focus-visible,
.header-menu-toggle:focus-visible,
.header-menu-item.is-focus,
.header-menu-toggle.is-focus {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.header-menu-item:active:not(:disabled):not([aria-disabled="true"]),
.header-menu-item.is-active,
.header-menu-toggle.is-active {
  transform: translateY(1px);
}

.header-menu-item:disabled,
.header-menu-item[aria-disabled="true"],
.header-menu-language select:disabled,
.header-menu-toggle:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (hover: hover) {
  .header-menu-item:hover:not(:disabled):not([aria-disabled="true"]),
  .header-menu-language select:hover:not(:disabled),
  .header-menu-toggle:hover:not(:disabled) {
    color: var(--text);
    background: var(--surface-subtle);
  }
}

.header-menu-item.is-hover,
.header-menu-toggle.is-hover {
  color: var(--text);
  background: var(--surface-subtle);
}

.header-menu-status {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: var(--space-xs) var(--space-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.header-menu-panel[data-state="error"] .header-menu-status,
.header-menu-toggle[data-state="error"] {
  color: var(--danger);
}

.header-menu-panel[data-state="error"] .header-menu-status::before,
.header-menu-toggle[data-state="error"]::after {
  content: "!";
  font-weight: 800;
}

.header-menu-panel[data-state="success"] .header-menu-status,
.header-menu-toggle[data-state="success"] {
  color: var(--success);
}

.header-menu-panel[data-state="success"] .header-menu-status::before,
.header-menu-toggle[data-state="success"]::after {
  content: "✓";
}

.header-menu-panel[data-state="loading"] .header-menu-status::before,
.header-menu-toggle[data-state="loading"]::after {
  content: "";
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  margin-top: 0.2em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: header-menu-loading 1s linear infinite;
}

@keyframes header-menu-loading {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .header-menu-item,
  .header-menu-toggle {
    transition: none;
    transform: none !important;
  }
  .header-menu-panel[data-state="loading"] .header-menu-status::before,
  .header-menu-toggle[data-state="loading"]::after {
    animation: none;
  }
}