/**
 * @file
 * Search, language and appearance controls in header menu regions.
 */

/* Shared icon targets; glyph sizing never changes adjacent text. */

:is(.region-toplinks, .region-primary-menu, .region-secondary-menu) :is(.search-toggle, .language-selector > summary, .appearance-selector > summary, .account-icon-only, a.sociallinks) {
  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;
  text-decoration: none;
  border: 0;
  background: transparent;
  line-height: 1;
}

#toplinks .menu--account ul.menu,
#toplinks .social-media-menu__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--menu-align, flex-end);
  gap: 0.25rem;
}

#toplinks .menu--account a.account-icon-only {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
}

.account-icon-only .page-icon {
  margin: 0;
}

#toplinks :is(.page-icon, .social-media-menu__icon, .search-glyph, .language-icon, .appearance-icon) {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

:is(.search-toggle, .language-selector > summary, .appearance-selector > summary) {
  color: var(--page-icon-color, var(--primary));
}

:is(.search-toggle, .language-selector > summary, .appearance-selector > summary):is(:hover, :focus-visible) {
  color: var(--page-icon-hover, var(--primary-hover));
}

:is(.search-toggle, .language-selector > summary, .appearance-selector > summary, .account-icon-only):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Ordinary search blocks remain ordinary forms outside the header menus. */

:is(#sidebar-left, #sidebar-right) input.form-text,
.block-search input:not([type="submit"], [type="hidden"]) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.block-search .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(--page-icon-color, var(--primary));
  border: 0;
  background: transparent;
  box-shadow: none;
}

.block-search .search-submit:is(:hover, :focus-visible) {
  color: var(--page-icon-hover, var(--primary-hover));
  background: transparent;
}

.block-search .search-submit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Outside header menus, the submit setting controls the button display. */
.search-submit-label {
  display: none;
}

form[data-search-style="0"]:not(:is(
  .region-toplinks form,
  .region-primary-menu form,
  .region-secondary-menu form
)) .search-submit {
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0.2rem;
  padding: 0.5em 1em;
  color: light-dark(#222, #c8cbce);
  background-color: light-dark(#e6e6e6, #303438);
}

form[data-search-style="0"]:not(:is(
  .region-toplinks form,
  .region-primary-menu form,
  .region-secondary-menu form
)) .search-submit:is(:hover, :focus-visible) {
  color: light-dark(#222, #c8cbce);
  background-color: light-dark(#d4d4d4, #43494e);
  background-image: none;
}

form[data-search-style="0"]:not(:is(
  .region-toplinks form,
  .region-primary-menu form,
  .region-secondary-menu form
)) .search-submit .search-glyph {
  display: none;
}

form[data-search-style="0"]:not(:is(
  .region-toplinks form,
  .region-primary-menu form,
  .region-secondary-menu form
)) .search-submit-label {
  display: inline;
}

form[data-search-style="2"]:not(:is(
  .region-toplinks form,
  .region-primary-menu form,
  .region-secondary-menu form
)) .search-submit {
  display: none;
}

.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. No-JS keeps the normal form. */

.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;
  border: 0;
  background: transparent;
}

/* Match ABC's compact header search dropdown controls. */
.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;
  border: 1px solid var(--border);
  background: var(--page-background);
  box-shadow: 0 0.2rem 0.5rem #0002;
}

.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;
}

/* Language and appearance share one dropdown presentation. */

.language-selector,
.appearance-selector {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-align: start;
  vertical-align: middle;
  border: 0;
  font: inherit;
}

.appearance-selector[hidden] {
  display: none;
}

:is(.language-selector, .appearance-selector) > summary {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  list-style: none;
  cursor: pointer;
  gap: 0.45rem;
}

:is(.language-selector, .appearance-selector) > summary::-webkit-details-marker {
  display: none;
}

:is(.language-selector, .appearance-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-icon,
.appearance-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

:is(.language-selector, .appearance-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;
  border: 1px solid var(--border);
  background: var(--page-background);
  box-shadow: 0 0.3rem 1rem #0002;
}

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

:is(.language-selector, .appearance-selector) > ul :is(a, button) {
  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;
  cursor: pointer;
  text-align: start;
  text-decoration: none;
  color: var(--menu-text);
  border: 0;
  background: transparent;
  font: inherit;
  gap: 1rem;
}

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

:is(.language-selector, .appearance-selector) > ul :is(a, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Selected choices remain legible without borrowing ordinary active-link colors. */

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

.language-selector > ul a:is(.is-active, [aria-current="page"])::after,
.appearance-selector > ul button[aria-pressed="true"]::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 :is(.language-selector, .appearance-selector) > ul,
.rnd .appearance-selector button {
  border-radius: var(--control-radius);
}