/* Shared geometry for the template mastheads and the React About header. */
:root {
  --rui-mobile-header-height: 96px;
  --rui-mobile-header-inset: 20px;
  /* A darker rose derived from the existing palette for text on white. */
  --rui-nav-current-color: color-mix(in srgb, var(--palette-rose, #e39fa9) 65%, var(--palette-blue-deep, #204a63));
  /* Leave a 44px button and 12px gap on both sides of the centered name. */
  --rui-mobile-wordmark-size: min(22vw, calc((100vw - 152px) / 2.8), 86px);
}

@media (max-width: 991px) {
  /* Own mobile entry in CSS from first paint. Webflow initializes its navbar
     transform/opacity after loading; leaving it in charge causes a flash. */
  [data-rui-nav="true"].navbar {
    transform: none !important;
    opacity: 1 !important;
  }

  [data-rui-nav="true"] .menu-button,
  [data-rui-menu-enter] {
    /* Source slideInTop: -100px, 600ms delay, 1000ms quartic ease-out. */
    animation: rui-menu-enter 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 600ms backwards;
  }

  /* Completion persists across focus transfers and repeated menu toggles. */
  [data-rui-nav="true"] .menu-button[data-rui-menu-enter="complete"],
  [data-rui-menu-enter="complete"] {
    animation: none;
  }

  [data-rui-nav="true"] .nav-menu a[aria-current="page"],
  [data-rui-mobile-menu] a[aria-current="page"] {
    color: var(--rui-nav-current-color);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.12em;
  }

  [data-rui-nav="true"] .nav-menu a[aria-current="page"] .navlink-text {
    color: var(--rui-nav-current-color) !important;
  }

  .hero-display-wrappar:has(> [data-rui-nav="true"]) {
    position: relative;
    box-sizing: border-box;
    height: var(--rui-mobile-header-height);
    padding: 0;
    justify-content: center;
  }

  .hero-display-wrappar > .wrap-heading-3d .display-1 {
    font-size: var(--rui-mobile-wordmark-size);
    white-space: nowrap;
  }

  .hero-display-wrappar > [data-rui-nav="true"].navbar {
    position: absolute;
    inset: 0 0 auto;
    height: var(--rui-mobile-header-height);
    padding: 0;
    display: flex;
    align-items: center;
    z-index: 20;
  }

  .hero-display-wrappar > [data-rui-nav="true"] .menu-button-wrap {
    padding-inline: var(--rui-mobile-header-inset);
  }

  /* Webflow places its open-menu overlay after the header, below the name. */
  .hero-display-wrappar > [data-rui-nav="true"] .w-nav-overlay {
    top: var(--rui-mobile-header-height);
  }
}

@keyframes rui-menu-enter {
  from { opacity: 0; transform: translateY(-100px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-rui-nav="true"] .menu-button,
  [data-rui-menu-enter] {
    animation: none;
  }
}