/*
 * The header controls - language, theme, accessibility, search, burger - are
 * all 24px icons in a row, spaced by one gap. The accessibility button comes
 * from the ms-accessibility plugin as a 40px box (its 24px icon plus an 8px
 * padding that its round hover highlight needs); the negative margin takes
 * that padding back out of the row, so its icon lines up at the same gap.
 */
.header__buttons {
  --header-btn-gap: 1.5rem;

  display: flex;
  align-items: center;
  gap: var(--header-btn-gap);
  margin-left: 20px;
}

.header__buttons #accessibility-toggle-btn.header-style {
  margin: 0 -8px;
}

/*
 * The theme's lighter icon for the button (filters.php) is drawn with lines;
 * the plugin paints its own glyph with fill, which would flood the ring.
 */
.header__buttons #accessibility-toggle-btn.header-style .header-a11y-icon {
  fill: none;
}


/*
 * The language flag keeps its 8px padding as a touch area (pagination.css),
 * and the negative margin takes that padding back out of the row, so the
 * flag itself lines up at the same gap as the icons. The current language
 * sits on the bar with no plate of its own; only the dropdown gets one.
 */
.header__buttons .menu__lang {
  margin: 0 -8px;
}

.header__buttons .menu__lang .current-lang {
  background-color: transparent;
}

.header__buttons .menu__lang .lang-item:not(.current-lang) {
  background-color: var(--color-surface-card);
}

@media (min-width: 1200px) {
  .header__buttons {
    justify-content: space-between;
    margin-left: var(--header-btn-gap);
  }

  /*
   * On desktop the top menu links sit right before the controls; a short
   * hairline, spaced like the icons, keeps the two groups apart. Phones have
   * no top menu, so no line either.
   */
  .header__buttons::before {
    content: "";
    flex: 0 0 auto;
    width: 1px;
    height: 1.25rem;
    background-color: var(--color-border);
  }
}
@media (max-width: 1199px) {
  .header__buttons {
    justify-content: flex-end;
  }
}

.header__btn__search {
  display: flex;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  padding: 0;
  background-color: transparent;
  color: var(--color-text-primary);
  justify-content: center;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.header__btn__search svg {
  width: 100%;
  height: auto;
}

.header__btn__search svg path,
.header__btn__search svg circle {
  transition: stroke 0.3s ease;
}

html:not(.v-mobile) .header__btn__search:hover svg > * {
  stroke: var(--color-accent);
}
html:not(.v-mobile) .header__btn__search:hover {
  transform: scale(1.08);
}

.menu-burger {
  position: relative;
  display: block;

  flex: 0 0 1.5625rem;
  width: 1.5625rem;

  height: 1.125rem;
  border: unset;
  padding: unset;
  background-color: transparent;
  transition: transform 0.3s ease;

  min-width: 1.5625rem;
}

.menu-burger._opened {
  transform: rotate(225deg);
}

.menu-burger::before,
.menu-burger::after,
.menu-burger span {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 0.125rem;
  background-color: var(--color-text-primary);
}

.menu-burger span {
  top: 50%;
  transition:
    color 0.3s ease,
    transform 0.3s;
}
.menu-burger._opened span {
  transform: scale(0);
}

.menu-burger::before {
  top: 0;
  transition:
    color 0.3s ease,
    transform 0.2s;
}
.menu-burger._opened::before {
  transform: translate(0, 9px);
}

.menu-burger::after {
  top: 100%;
  transition:
    color 0.3s ease,
    transform 0.2s;
}
.menu-burger._opened::after {
  transform: translate(0, -9px) rotate(90deg);
}

.menu-burger:focus-visible::before,
.menu-burger:focus-visible::after,
.menu-burger:focus-visible span {
  background-color: var(--color-accent);
}

html:not(.v-mobile) .menu-burger:hover span,
html:not(.v-mobile) .menu-burger:hover::before,
html:not(.v-mobile) .menu-burger:hover::after {
  background-color: var(--color-accent);
}

@media (min-width: 1200px) {
  .menu-burger {
    display: none;
  }
}

.menu__lang {
  position: relative;
}

.menu__lang ul {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  padding-top: 0.3125rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.menu__lang:hover ul,
.menu__lang:focus-visible ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.menu__lang .lang-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 0.9375rem;
  color: var(--color-text-secondary);
  filter: brightness(1.1);
}

.menu__lang .lang-item > * + * {
  margin-left: 0.5em;
}

.menu__lang .lang-item a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu__lang .lang-item a img {
  width: 100%;
  height: auto;
}

.menu__lang .lang-item svg {
  width: 0.375rem;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.menu__lang:hover svg,
.menu__lang:focus-visible svg {
  transform: rotate(180deg);
}

.menu__lang .lang-item-current img {
  max-width: 1.4375rem;
  width: 100%;
  height: auto;
}


/* Light / dark switch; markup in template-parts/ui/controls/theme-toggle.php. */
.theme-toggle {
  display: flex;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  padding: 0;
  background-color: transparent;
  color: var(--color-text-primary);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.theme-toggle__icon {
  width: 100%;
  height: auto;
  overflow: visible;
}

/*
 * The icon shows the theme the button switches to, as on YouTube and GitHub:
 * a moon on the light theme, a sun on the dark one. On a switch one fades
 * out while the other fades in with a slight turn and scale - quiet, in step
 * with the page's cross-fade.
 */
.theme-toggle__moon,
.theme-toggle__sun {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.35s cubic-bezier(0.42, 0, 0.58, 1),
    transform 0.35s cubic-bezier(0.42, 0, 0.58, 1);
}

.theme-toggle__sun {
  opacity: 0;
  transform: rotate(-30deg) scale(0.8);
}

html[data-theme="dark"] .theme-toggle__moon {
  opacity: 0;
  transform: rotate(30deg) scale(0.8);
}

html[data-theme="dark"] .theme-toggle__sun {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__icon * {
    transition: none !important;
  }
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Only where there is a pointer to hover with: a tap on a phone would leave it stuck blue. */
@media (hover: hover) {
  html:not(.v-mobile) .theme-toggle:hover {
    transform: scale(1.08);
  }
}

/*
 * Phones. Beside a 40px shield the desktop icons read heavy: 24px with a 2px
 * line and a thick burger. Here the icons are 22px drawn with a 1.5px line
 * and the burger's bars thin to match, so the row reads as one quiet set.
 * The gap stays the desktop 24px: it is also the width of each icon's touch
 * area (below), and a narrower one made a finger land on the wrong icon.
 */
@media (max-width: 767px) {
  .theme-toggle,
  .header__btn__search {
    width: 22px;
    height: 22px;
  }

  .theme-toggle__icon,
  .header__btn__search svg {
    stroke-width: 1.4;
  }

  /* The plugin's 40px box shrinks with its icon, so its 8px margin still evens out. */
  .header__buttons #accessibility-toggle-btn.header-style {
    width: 38px;
    height: 38px;
  }

  .header__buttons #accessibility-toggle-btn.header-style svg {
    width: 22px;
    height: 22px;
  }

  .menu-burger {
    flex-basis: 22px;
    width: 22px;
    min-width: 22px;
  }

  .menu-burger::before,
  .menu-burger::after,
  .menu-burger span {
    height: 1.5px;
  }
}

/*
 * Touch screens. The icons are 24px, well under the 44px a finger needs, so
 * each control gets an invisible touch area around it: 44px tall, and as wide
 * as the middle of the gap on either side, so neighbours never overlap. The
 * icons themselves do not move. The burger draws its lines with ::before and
 * ::after, so it grows by a transparent border instead, which its negative
 * margin takes back out of the row; the border is even on both sides so the
 * burger still turns into a cross around its own centre.
 */
@media (pointer: coarse) {
  .header__buttons #accessibility-toggle-btn.header-style,
  .header__buttons .theme-toggle,
  .header__buttons .header__btn__search,
  .header__buttons .menu__lang .current-lang > a {
    position: relative;
  }

  .header__buttons #accessibility-toggle-btn.header-style::after,
  .header__buttons .theme-toggle::after,
  .header__buttons .header__btn__search::after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: calc(var(--header-btn-gap) / -2);
    right: calc(var(--header-btn-gap) / -2);
  }

  .header__buttons .menu__lang .current-lang > a::after {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    right: 0;
  }

  .header__buttons .menu-burger {
    box-sizing: content-box;
    border: solid transparent;
    border-width: 13px calc(var(--header-btn-gap) / 2);
    margin: -13px calc(var(--header-btn-gap) / -2);
    background-clip: padding-box;
  }
}