/* Language and dark-mode buttons stacked above the Theme Composer button,
   with a scroll-down disc underneath it.
   From 768px up the Theme Composer (.fab-root) sits fixed bottom-right, so the
   two nav discs are lifted out of the header and pinned in a column above it.
   Below 768px the Theme Composer is hidden and they stay in the header.
   (.nav__row raises specificity above the <style> lang-toggle.js injects.) */

/* The scroll-down disc replaces the triangle arrow in the hero. */
.hero .hero__scroll {
  display: none;
}

.float-down {
  display: none;
}

/* Contact for work sits on its own to the right of the nav pill, a little
   shorter than it and centred beside it. The phone menu has its own copy,
   so this one is desktop only. */
.nav__row > .nav__contact {
  flex: none;
  align-self: center;
  height: 56px;
}

@media (max-width: 767px) {
  .nav__row > .nav__contact {
    display: none;
  }
}

@media (min-width: 768px) {
  .nav__row > .nav__satellite,
  .nav__row > .nav__lang,
  .float-down {
    position: fixed;
    right: var(--space-5);
    width: var(--disc-size-base);
    height: var(--disc-size-base);
    z-index: var(--z-overlay);
    transition: opacity var(--duration-fast, .2s) var(--ease-out, ease);
  }

  .float-down {
    bottom: var(--space-5);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border-radius: var(--radius-full, 50%);
    background: var(--glass-tint-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    cursor: pointer;
  }

  .float-down:hover {
    color: var(--text-primary);
  }

  .float-down svg {
    width: 22px;
    height: 22px;
  }

  .float-down.is-end {
    opacity: 0;
    pointer-events: none;
  }

  .fab-root {
    bottom: calc(var(--space-5) + var(--disc-size-base) + var(--space-3));
  }

  .nav__row > .nav__satellite {
    bottom: calc(var(--space-5) + (var(--disc-size-base) + var(--space-3)) * 2);
  }

  .nav__row > .nav__lang {
    bottom: calc(var(--space-5) + (var(--disc-size-base) + var(--space-3)) * 3);
  }

  .nav__row > .nav__satellite .nav__mode {
    width: 100%;
    height: 100%;
  }

  /* The FAB is inline-block, so its baseline added a 6px gap under it;
     aligning it to the top keeps the three gaps even. */
  .fab-root .fab {
    vertical-align: top;
  }

  /* A clear shadow so the white discs stand out on white sections. */
  .nav__row > .nav__satellite,
  .nav__row > .nav__lang,
  .fab-root .fab,
  .float-down {
    box-shadow: 0 6px 20px oklch(0% 0 0 / .16), 0 1px 4px oklch(0% 0 0 / .1), var(--glass-inner);
  }

  /* The Theme Composer menu opens upward over the same spot. */
  html:has(.fab[aria-expanded="true"]) .nav__row > .nav__satellite,
  html:has(.fab[aria-expanded="true"]) .nav__row > .nav__lang {
    opacity: 0;
    pointer-events: none;
  }
}