/* =========================================
   Cormens Language Switch
   Desktop + Mobile
   =========================================
   Desktop: rendered inside .cormens-header-bar between branding and claim
            (via menu-full-screen.php template part).
   Mobile:  rendered inside .wpbf-menu-toggle-container before the burger
            (via wpbf_before_mobile_toggle action hook).

   Colors inherit from the header's currentColor — works on white AND blue
   headers (team pages, "worüber wir nachdenken") without extra rules.
*/

/* =========================================
   Header layout fix (DESKTOP) — only when switch is present
   =========================================
   The theme's default layout uses `.cormens-branding { width: 100% }` as a
   spacer to push the claim to the right. That works with 3 items, but with
   4 items the claim overflows the viewport on narrower desktops.
   Fix: When the switch is in the DOM, make branding hug its content and use
   `margin-left: auto` on the switch to push switch+claim to the right edge.
*/
.cormens-header-bar:has(.cormens-langswitch) .cormens-branding,
#cormens #header .cormens-header-bar:has(.cormens-langswitch) .cormens-branding {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

.cormens-header-bar:has(.cormens-langswitch) .cormens-langswitch {
  margin-left: auto;
}

/* =========================================
   Claim figure: hide the invisible color variant (DESKTOP, when switch is present)
   =========================================
   The theme renders BOTH blue and white SVGs side-by-side in `.claim-dual` and
   relies on color/background contrast to make the "wrong" one invisible. This
   means the figure is always ~2× as wide as the actually-visible image, leaving
   empty space next to it.

   With the switch taking space now, that gap becomes visually noticeable.
   Fix: on pages with a light header (default), hide the white variant; on pages
   with a dark header (team, "worüber wir nachdenken"), hide the blue one.

   If new dark-header pages are added later, extend the selector list below.
*/

/* Default (light header / blue claim): hide white variant */
.cormens-header-bar:has(.cormens-langswitch) .cormens-claim .claim--white {
  display: none;
}

/* Dark-header pages: show white, hide blue */
body.single-team .cormens-header-bar:has(.cormens-langswitch) .cormens-claim .claim--blue,
body.post-type-archive-team .cormens-header-bar:has(.cormens-langswitch) .cormens-claim .claim--blue,
body.worueber-wir-nachdenken .cormens-header-bar:has(.cormens-langswitch) .cormens-claim .claim--blue {
  display: none;
}
body.single-team .cormens-header-bar:has(.cormens-langswitch) .cormens-claim .claim--white,
body.post-type-archive-team .cormens-header-bar:has(.cormens-langswitch) .cormens-claim .claim--white,
body.worueber-wir-nachdenken .cormens-header-bar:has(.cormens-langswitch) .cormens-claim .claim--white {
  display: block;
}

/* =========================================
   Mobile header layout — switch + burger on the right
   =========================================
   The WPBF mobile toggle container holds the burger. We inject our switch
   right before it, so both sit at the right edge of the mobile header.
   Make that container into a flex row so the two children align nicely.
*/
.wpbf-mobile-menu-hamburger .wpbf-menu-toggle-container:has(.cormens-langswitch) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}

/* Override theme's absolute positioning on the burger when our switch is
   present — absolute positioning pulls the burger out of the flex flow and
   causes it to overlap the switch. Forcing static lets flex layout the
   burger naturally to the right of the switch. */
.wpbf-mobile-menu-hamburger .wpbf-menu-toggle-container:has(.cormens-langswitch) #wpbf-mobile-menu-toggle {
  position: static;
  float: none;
  top: auto;
  right: auto;
  left: auto;
  transform: none;
}

/* Switch color matches the mobile header text color (Cormens blue on white) */
.wpbf-mobile-menu-hamburger .cormens-langswitch {
  color: var(--cormens-blue, #0000fa);
}

/* =========================================
   Switch itself (shared desktop + mobile)
   ========================================= */
.cormens-langswitch {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  line-height: 1;
  color: currentColor;
}

/* Desktop-only: add gap toward the claim */
.cormens-header-bar .cormens-langswitch {
  margin-right: 1.25rem;
}

/* List */
.cormens-langswitch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Reset theme's default li padding/margin — theme sets padding-bottom: 1rem
   which makes the switch container too tall and pushes text off-center. */
.cormens-langswitch__list .cormens-langswitch__item {
  padding: 0;
  margin: 0;
}

/* Reset theme's default blue dot on <li>::before for our items.
   NOTE: no !important here — we WANT the non-first ::before to win later. */
.cormens-langswitch__list .cormens-langswitch__item::before {
  content: none;
  display: none;
  width: 0;
  height: 0;
  background: transparent;
  position: static;
}

/* Items */
.cormens-langswitch__item {
  font-family: "Basier Circle", "Verdana", "Trebuchet MS", sans-serif;
  font-size: 1.081rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  position: relative;
}

/* Separator between items: CSS ::before on non-first item.
   This rule comes AFTER the reset above, so it wins at equal specificity. */
.cormens-langswitch__list .cormens-langswitch__item + .cormens-langswitch__item::before {
  content: "|";
  display: inline-block;
  padding: 0 0.4rem;
  opacity: 0.5;
  font-weight: 400;
  color: currentColor;
  background: transparent;
  width: auto;
  height: auto;
  position: static;
}

/* Link + active span: identical base style */
.cormens-langswitch__item > a,
.cormens-langswitch__item > span {
  color: currentColor;
  text-decoration: none;
  padding: 0;
  display: inline-block;
  transition: opacity 0.15s ease;
}

/* Inactive language: link state */
.cormens-langswitch__item > a {
  opacity: 0.55;
}
.cormens-langswitch__item > a:hover,
.cormens-langswitch__item > a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1.5px;
}

/* Active language: bold underline */
.cormens-langswitch__item.is-current > span {
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1.5px;
  cursor: default;
}

/* Focus (A11y) — matches theme pattern from .cormens-overlay */
.cormens-langswitch a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================
   Responsive breakpoints
   =========================================
   Hide the DESKTOP switch on mobile (it's inside .cormens-header-bar, which
   is already hidden by .wpbf-visible-large — but we hide the switch itself
   too for belt-and-braces).
   The MOBILE switch (inside .wpbf-menu-toggle-container) stays visible.
   Breakpoint 64em (~1024px) matches the theme's desktop/mobile split.
*/
@media (max-width: 63.938em) {
  .cormens-header-bar .cormens-langswitch {
    display: none;
  }
}

/* Slightly larger gap on wide screens so the switch doesn't crowd the claim */
@media (min-width: 90em) {
  .cormens-header-bar .cormens-langswitch {
    margin-right: 2rem;
  }
}