/**
 * @file
 * Search and language controls for header and sidebar regions.
 */

/* Component palette: each theme retains its own colors. */
:is(.block-search, .header-search, .language-selector) {
  --control-icon: var(--abc-primary, #000);
  --control-icon-hover: var(--abc-primary-hover, #555);
  --control-page: #fff;
  --control-text: #333;
  --control-hover-surface: #eee;
  --control-border: #ccc;
  --control-shadow: #0002;
}

/* Keep ordinary Top-region User links inline, with a compact icon layout when enabled. */
.region-topreg .menu--account ul.menu {
  margin: 0;
  padding: 0;
}

.pi .region-topreg .menu--account ul.menu:has(.account-icon-only) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.pi .region-topreg .menu--account ul.menu:has(.account-icon-only) > li {
  margin: 0;
  padding: 0;
  border: 0;
}

.pi .region-topreg .menu--account a.account-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0.5rem;
  line-height: 1;
  text-decoration: none;
  border-bottom: 0;
}

.pi .region-topreg .account-icon-only .page-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

/* Ordinary search blocks remain usable without JavaScript. */
.block-search input:not([type="submit"], [type="hidden"]) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.block-search .pure-form input:is([type="search"], [type="text"]):focus {
  border-color: var(--control-border);
}

.block-search button.search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  cursor: pointer;
  color: var(--control-icon);
  border: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
}

.block-search button.search-submit:is(:hover, :focus-visible) {
  color: var(--control-icon-hover);
  background: transparent;
  background-image: none;
}

.block-search button.search-submit:focus-visible,
.search-toggle:focus-visible,
.language-selector > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.search-glyph {
  display: block;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  fill: currentColor;
}

/* The header form is moved, never duplicated. */
.header-search {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--control-icon);
  border: 0;
  background: transparent;
}

.search-toggle:is(:hover, :focus-visible) {
  color: var(--control-icon-hover);
}

.search-toggle .search-glyph {
  width: 1.25rem;
  height: 1.25rem;
}

.header-search > form {
  position: absolute;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: start;
  top: 100%;
  inset-inline-end: 0;
  box-sizing: border-box;
  width: min(20rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.75rem;
  color: var(--control-text);
  border: 1px solid var(--control-border);
  background: var(--control-page);
  box-shadow: 0 0.2rem 0.5rem var(--control-shadow);
}

.header-search > form > .form-item {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.header-search > form > .form-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.header-search > form input:is([type="search"], [type="text"]) {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.header-search > form[hidden] {
  display: none;
}

.region-topreg .block-search .block-content {
  line-height: 1;
}

/* Language selection is a simple popup, not a primary-menu dropdown. */
.language-selector {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: start;
  vertical-align: middle;
  color: var(--control-icon);
  border: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
}

.language-selector > summary {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  cursor: pointer;
  color: inherit;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 0.45rem;
}

.language-selector > summary:is(:hover, :focus-visible) {
  color: var(--control-icon-hover);
}

.language-selector > summary::-webkit-details-marker {
  display: none;
}

.language-selector > summary::after {
  width: 0.35rem;
  height: 0.35rem;
  margin-inline-start: 0.15rem;
  content: "";
  transform: rotate(45deg);
  border-inline-end: 1px solid;
  border-bottom: 1px solid;
}

.language-selector .language-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.language-selector > ul {
  position: absolute;
  z-index: 30;
  inset-inline-end: 0;
  overflow: auto;
  box-sizing: border-box;
  min-width: 10rem;
  max-width: min(20rem, calc(100vw - 1rem));
  max-height: 60vh;
  margin: 0.25rem 0 0;
  padding: 0.4rem;
  list-style: none;
  color: var(--control-text);
  border: 1px solid var(--control-border);
  background: var(--control-page);
  box-shadow: 0 0.3rem 1rem var(--control-shadow);
}

.language-selector > ul > li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: normal;
  border: 0;
}

.language-selector > ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  text-align: start;
  text-decoration: none;
  color: var(--control-text);
  border: 0;
  background: transparent;
  gap: 1rem;
}

.language-selector > ul a:is(:hover, :focus-visible) {
  color: var(--control-text);
  background: var(--control-hover-surface);
}

.language-selector > ul a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.language-selector > ul a:is(.is-active, [aria-current="page"]) {
  color: var(--control-text);
  background: transparent;
}

.language-selector > ul a:is(.is-active, [aria-current="page"])::after {
  flex: 0 0 auto;
  width: 0.35rem;
  height: 0.65rem;
  content: "";
  transform: rotate(45deg);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.rnd .header-search > form,
.rnd .language-selector > ul {
  border-radius: 5px;
}