/* ==========================================================================
   WBI Dark Mode

   The mode is Bricks' own: <html data-brx-theme="light|dark">, set in <head>
   before the first paint from localStorage.brx_mode or the default mode of
   the site (Bricks Setup::set_project_default_mode). Every state below reads
   that attribute, so the right name, icon and switch position show before
   any script runs, and they follow any other toggle of the page (the Bricks
   "Toggle - Mode" element included).

   Tokens live in :where() (zero specificity): the colors and distances saved
   in Bricks > Dark Mode print right after this sheet with a class selector
   and win. Sizes in px, never rem: Bricks sets the root font size to 10px.

   Default values reproduce the design at 1440px.
   ========================================================================== */

:where(.wbi-dm, .wbi-dm-switch) {
  /* Colors per mode (Bricks > Dark Mode > Colors). */
  --wbi-dm-button-bg-light: #0D1115;
  --wbi-dm-button-bg-dark: #FFFFFF;
  --wbi-dm-button-text-light: #FFFFFF;
  --wbi-dm-button-text-dark: #3A3A3A;
  --wbi-dm-track-light: #CBD1DB;
  --wbi-dm-track-dark: #0D1115;
  --wbi-dm-switch-icon-light: #535353;
  --wbi-dm-switch-icon-dark: #FFFFFF;
  --wbi-dm-knob-light: #FFFFFF;
  --wbi-dm-knob-dark: #FFFFFF;

  --wbi-dm-focus: #3E94B9;
  --wbi-dm-duration: 240ms;
  --wbi-dm-ease: cubic-bezier(0.22, 1, 0.36, 1); /* quick start, soft landing */

  /* "Icon, text on hover": opens at once, closes faster after a short grace
     so that leaving it for an instant does not make it flicker. */
  --wbi-dm-open-duration: 320ms;
  --wbi-dm-close-duration: 240ms;
  --wbi-dm-close-delay: 120ms;
  --wbi-dm-close-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* What the button animates besides its width. */
  --wbi-dm-button-transition:
    background-color var(--wbi-dm-duration) var(--wbi-dm-ease),
    color var(--wbi-dm-duration) var(--wbi-dm-ease),
    box-shadow var(--wbi-dm-duration) var(--wbi-dm-ease),
    transform 160ms var(--wbi-dm-ease);

  /* Button: 56px tall; the pill has 20px before the text, 8px after it and
     the icon centered in a 56px square at the end. Icon only = the square. */
  --wbi-dm-size: 56px;
  --wbi-dm-icon-size: 28px;
  --wbi-dm-pad: 20px;
  --wbi-dm-gap: 8px;
  --wbi-dm-font-size: 16px;
  --wbi-dm-font-weight: 400;
  --wbi-dm-shadow: 0 16px 40px rgba(13, 17, 21, 0.18);
  --wbi-dm-shadow-hover: 0 20px 48px rgba(13, 17, 21, 0.24);
  --wbi-dm-z: 998;
  --wbi-dm-offset-side: 32px;
  --wbi-dm-offset-bottom: 32px;

  /* Switch: 20px icons 8px away from a 36 x 20 track. */
  --wbi-dm-switch-icon-size: 20px;
  --wbi-dm-switch-gap: 8px;
  --wbi-dm-track-width: 36px;
  --wbi-dm-track-height: 20px;

  /* The pair in use: light, unless the page is dark. */
  --wbi-dm-button-bg: var(--wbi-dm-button-bg-light);
  --wbi-dm-button-text: var(--wbi-dm-button-text-light);
  --wbi-dm-track: var(--wbi-dm-track-light);
  --wbi-dm-knob: var(--wbi-dm-knob-light);
  --wbi-dm-switch-icon: var(--wbi-dm-switch-icon-light);
}

:where(:root[data-brx-theme="dark"]) :where(.wbi-dm, .wbi-dm-switch) {
  --wbi-dm-button-bg: var(--wbi-dm-button-bg-dark);
  --wbi-dm-button-text: var(--wbi-dm-button-text-dark);
  --wbi-dm-track: var(--wbi-dm-track-dark);
  --wbi-dm-knob: var(--wbi-dm-knob-dark);
  --wbi-dm-switch-icon: var(--wbi-dm-switch-icon-dark);
  --wbi-dm-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  --wbi-dm-shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.4);
}

/* --- Button: the name and icon of the mode it switches to ---------------- */

.wbi-dm {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--wbi-dm-gap);
  height: var(--wbi-dm-size);
  margin: 0;
  padding: 0 0 0 var(--wbi-dm-pad);
  border: 0;
  border-radius: 999px;
  background: var(--wbi-dm-button-bg);
  box-shadow: var(--wbi-dm-shadow);
  color: var(--wbi-dm-button-text);
  font: inherit;
  /* The font of the WBI elements (Theme Styles > WBI Elements > Font) when the
     page has one of them, the site's font otherwise. */
  font-family: var(--wbi-dm-font, var(--wbi-font, inherit));
  font-size: var(--wbi-dm-font-size);
  font-weight: var(--wbi-dm-font-weight);
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: var(--wbi-dm-button-transition);
}

.wbi-dm:focus-visible {
  outline: 2px solid var(--wbi-dm-focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  .wbi-dm:hover {
    box-shadow: var(--wbi-dm-shadow-hover);
    transform: translateY(-1px);
  }
}

.wbi-dm:active {
  transform: scale(0.97);
}

/* Both names share one cell: the button keeps the width of the longer one. */
.wbi-dm__text {
  display: grid;
}

.wbi-dm__label {
  grid-area: 1 / 1;
  white-space: nowrap;
  transition:
    opacity var(--wbi-dm-duration) var(--wbi-dm-ease),
    visibility var(--wbi-dm-duration);
}

.wbi-dm__slot {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--wbi-dm-size);
  height: var(--wbi-dm-size);
}

.wbi-dm__icon {
  display: flex;
  grid-area: 1 / 1;
  width: var(--wbi-dm-icon-size);
  height: var(--wbi-dm-icon-size);
  transition:
    opacity var(--wbi-dm-duration) var(--wbi-dm-ease),
    transform var(--wbi-dm-duration) var(--wbi-dm-ease),
    visibility var(--wbi-dm-duration);
}

.wbi-dm__icon > svg,
.wbi-dm__icon > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Light (and before Bricks sets the attribute): offer dark. A name hidden
   with visibility also leaves the accessible name of the button. */
.wbi-dm .wbi-dm__to-light {
  visibility: hidden;
  opacity: 0;
}

.wbi-dm .wbi-dm__icon.wbi-dm__to-light {
  transform: rotate(-90deg) scale(0.5);
}

/* Dark: offer light. */
:root[data-brx-theme="dark"] .wbi-dm .wbi-dm__to-light {
  visibility: visible;
  opacity: 1;
  transform: none;
}

:root[data-brx-theme="dark"] .wbi-dm .wbi-dm__to-dark {
  visibility: hidden;
  opacity: 0;
}

:root[data-brx-theme="dark"] .wbi-dm .wbi-dm__icon.wbi-dm__to-dark {
  transform: rotate(90deg) scale(0.5);
}

/* Icon only: a circle; the name stays for screen readers. */
.wbi-dm--icon {
  gap: 0;
  padding: 0;
}

.wbi-dm--icon .wbi-dm__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icon, text on hover (the floating button only): the circle opens into the
   pill while pointed at or focused with the keyboard, and the icon stays in
   its corner. The text column grows from 0fr to 1fr, so any name fits
   without measuring it; the button is fixed, so only its own box is laid
   out again. Screens without hover keep the circle, and a tap switches the
   mode. Collapsed, the name stays in the accessible name. */
.wbi-dm--hover {
  --wbi-dm-text-column: 0fr;
  display: inline-grid;
  grid-template-columns: var(--wbi-dm-text-column) var(--wbi-dm-size);
  /* Halfway, an fr below 1 leaves part of the width unassigned: it goes on
     the outer side, so the icon never moves. */
  justify-content: end;
  gap: 0;
  padding: 0;
  transition:
    grid-template-columns var(--wbi-dm-close-duration) var(--wbi-dm-close-ease) var(--wbi-dm-close-delay),
    var(--wbi-dm-button-transition);
}

.wbi-dm--hover .wbi-dm__text {
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity 120ms ease-in var(--wbi-dm-close-delay),
    transform var(--wbi-dm-close-duration) var(--wbi-dm-close-ease) var(--wbi-dm-close-delay);
}

.wbi-dm--hover .wbi-dm__label {
  padding: 0 var(--wbi-dm-gap) 0 var(--wbi-dm-pad);
}

/* Bottom left: icon first, the text opens to its right. */
.wbi-dm--hover.wbi-dm--left {
  grid-template-columns: var(--wbi-dm-size) var(--wbi-dm-text-column);
  justify-content: start;
}

.wbi-dm--hover.wbi-dm--left .wbi-dm__slot {
  order: -1;
}

.wbi-dm--hover.wbi-dm--left .wbi-dm__text {
  transform: translateX(-8px);
}

.wbi-dm--hover.wbi-dm--left .wbi-dm__label {
  padding: 0 var(--wbi-dm-pad) 0 var(--wbi-dm-gap);
}

/* Open: the same rules for the keyboard and, where it exists, the pointer. */
.wbi-dm--hover:focus-visible {
  --wbi-dm-text-column: 1fr;
  transition:
    grid-template-columns var(--wbi-dm-open-duration) var(--wbi-dm-ease),
    var(--wbi-dm-button-transition);
}

.wbi-dm--hover:focus-visible .wbi-dm__text {
  opacity: 1;
  transform: none;
  transition:
    opacity 200ms ease-out 80ms,
    transform var(--wbi-dm-open-duration) var(--wbi-dm-ease);
}

@media (hover: hover) {
  .wbi-dm--hover:hover {
    --wbi-dm-text-column: 1fr;
    transition:
      grid-template-columns var(--wbi-dm-open-duration) var(--wbi-dm-ease),
      var(--wbi-dm-button-transition);
  }

  .wbi-dm--hover:hover .wbi-dm__text {
    opacity: 1;
    transform: none;
    transition:
      opacity 200ms ease-out 80ms,
      transform var(--wbi-dm-open-duration) var(--wbi-dm-ease);
  }
}

/* Floating, in a bottom corner. The width it hides at is a setting: its
   media query prints right after this sheet. */
.wbi-dm--float {
  position: fixed;
  z-index: var(--wbi-dm-z);
  right: var(--wbi-dm-offset-side);
  bottom: calc(var(--wbi-dm-offset-bottom) + env(safe-area-inset-bottom, 0px));
}

.wbi-dm--float.wbi-dm--left {
  right: auto;
  left: var(--wbi-dm-offset-side);
}

/* --- Switch: light icon, track, dark icon. On means dark. ---------------
   The color goes on the icons, not on the button: menus reset their buttons
   with one class of specificity (WBI Nav Menu: `color: inherit`), and which
   sheet loads last would decide otherwise. */

.wbi-dm-switch {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--wbi-dm-switch-gap);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit; /* not the browser's button text: currentColor is the menu's */
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* A 44px touch target around the 20px row, without taking room: the menu
   keeps the spacing of the design. */
.wbi-dm-switch::before {
  content: "";
  position: absolute;
  inset: -12px -4px;
}

.wbi-dm-switch:focus-visible {
  outline: 2px solid var(--wbi-dm-focus);
  outline-offset: 2px;
}

.wbi-dm-switch__icon {
  display: flex;
  flex: none;
  width: var(--wbi-dm-switch-icon-size);
  height: var(--wbi-dm-switch-icon-size);
  color: var(--wbi-dm-switch-icon);
  transition: color var(--wbi-dm-duration) var(--wbi-dm-ease);
}

.wbi-dm-switch__icon > svg,
.wbi-dm-switch__icon > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wbi-dm-switch__track {
  position: relative;
  flex: none;
  width: var(--wbi-dm-track-width);
  height: var(--wbi-dm-track-height);
  border-radius: 999px;
  background: var(--wbi-dm-track);
  transition: background-color var(--wbi-dm-duration) var(--wbi-dm-ease);
}

.wbi-dm-switch__knob {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(var(--wbi-dm-track-height) - 2px);
  height: calc(var(--wbi-dm-track-height) - 2px);
  border-radius: 50%;
  background: var(--wbi-dm-knob);
  box-shadow: 0 1px 3px rgba(13, 17, 21, 0.3), 0 1px 1px rgba(13, 17, 21, 0.1);
  transition: transform var(--wbi-dm-duration) var(--wbi-dm-ease);
}

:root[data-brx-theme="dark"] .wbi-dm-switch__knob {
  transform: translateX(calc(var(--wbi-dm-track-width) - var(--wbi-dm-track-height)));
}

/* --- In the menus --------------------------------------------------------- */

/* WBI Nav Menu: bottom of the mobile panel (its slot already pads it). */
.wbi-dm-menu {
  display: flex;
}

/* Bricks Nav Menu: first item of the mobile menu, inset like its links
   (padding 0 30px on 60px rows). That menu is dark by default, so the icons
   take the color of its links unless Bricks > Dark Mode sets one. */
.wbi-dm-menu-item {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 0 30px;
}

:where(.wbi-dm-menu-item) .wbi-dm-switch {
  --wbi-dm-switch-icon-light: currentColor;
  --wbi-dm-switch-icon-dark: currentColor;
}

/* --- Preferences ---------------------------------------------------------- */

@media print {
  .wbi-dm--float {
    display: none;
  }
}

@media (forced-colors: active) {
  .wbi-dm {
    outline: 1px solid ButtonText;
  }

  .wbi-dm-switch__track {
    outline: 1px solid ButtonText;
  }

  .wbi-dm-switch__knob {
    background: ButtonText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wbi-dm,
  .wbi-dm *,
  .wbi-dm-switch,
  .wbi-dm-switch * {
    transition: none !important;
  }

  .wbi-dm:hover,
  .wbi-dm:active {
    transform: none;
  }
}