/**
 * XWK Theme Switch — structural styles.
 * Also contains shared .xwk-control and .xwk-dropdown base styles
 * used by both theme-switch and speech-mode widgets.
 *
 * Colors come from your site's existing CSS custom properties.
 *
 * @package XWK_Access_Suite
 */

/* ── Screen-reader-only utility ──────────────────────────────────────────── */
.xwk-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Control wrapper ─────────────────────────────────────────────────────── */
.xwk-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  font-family: inherit;
  font-size: inherit;
}

.xwk-control__label {
  font-size: 0.875em;
  color: var(--text-secondary, inherit);
  white-space: nowrap;
}

/* ── Shared dropdown base ─────────────────────────────────────────────────── */
.xwk-dropdown {
  position: relative;
}

.xwk-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border-default, currentColor);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-secondary, transparent);
  color: var(--text-primary, inherit);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  white-space: nowrap;
}

.xwk-dropdown__trigger:hover {
  background: var(--bg-hover, rgba(0, 0, 0, 0.06));
}

.xwk-dropdown__trigger:focus-visible {
  outline: 2px solid var(--focus-ring, Highlight);
  outline-offset: 2px;
}

.xwk-dropdown__caret {
  font-size: 0.7em;
  opacity: 0.7;
  pointer-events: none;
}

.xwk-dropdown__trigger[aria-expanded="true"] .xwk-dropdown__caret {
  transform: rotate(180deg);
}

.xwk-dropdown__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9999;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-default, #ccc);
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.xwk-dropdown__option {
  display: block;
  padding: 0.5rem 1rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--text-primary, inherit);
  font-size: 0.9em;
}

.xwk-dropdown__option:hover,
.xwk-dropdown__option:focus {
  background: var(--bg-hover, rgba(0, 0, 0, 0.06));
  outline: none;
}

.xwk-dropdown__option[aria-selected="true"] {
  font-weight: 600;
  color: var(--fg-accent, var(--text-primary, inherit));
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .xwk-dropdown__caret {
    transition: none;
  }
}