/*
 * Small additions to the compiled CSS (root.css, dynamic-zone.css, site-header.css), LiveLaps layer.
 * Loaded last. Everything here supports behaviour implemented in js/site.js and js/livelaps.js.
 */

/* Scroll reveal: content is hidden only once the script runs (html.js); a failsafe shows it after 3s. */
html.js [data-reveal]:not([data-reveal-ready]) {
  opacity: 0;
  animation: reveal-failsafe 0s linear 3s forwards;
}
@keyframes reveal-failsafe {
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Accordion chevrons follow aria-expanded (the original rotated them in React). */
[data-rules-trigger][aria-expanded='true'] > [data-chevron] {
  transform: rotate(180deg);
}

/*
 * Support chat widget (Chatwoot): same rules as the original site. The widget stays hidden while
 * html[data-chatwoot-pending] is set by js/site.js (until the widget reports ready).
 */
html #cw-widget-holder:not(.woot--hide),
html .woot-widget-bubble:not(.woot--close) {
  z-index: 40 !important;
}
html[data-chatwoot-pending] #cw-widget-holder,
html[data-chatwoot-pending] .woot--bubble-holder {
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * Studio size controls: the studio stores the desktop size as inline width / height / max-width and the mobile
 * size as the custom properties --w-m / --h-m / --mw-m in the same style attribute. Below the md breakpoint
 * the mobile value overrides the inline desktop size. The compiled Tailwind CSS starts md at (min-width: 48rem),
 * so this is its exact complement ("not all and (min-width: 48rem)"): no gap and no overlap at any width.
 */
@media not all and (min-width: 48rem) {
  [style*='--w-m:'] {
    width: var(--w-m) !important;
  }
  [style*='--h-m:'] {
    height: var(--h-m) !important;
  }
  [style*='--mw-m:'] {
    max-width: var(--mw-m) !important;
  }
}

/*
 * Events carousel rendered by js/livelaps.js (data-livelaps="upcoming-events"). The original used a carousel library;
 * here the viewport scrolls natively (touch, trackpad, the previous/next buttons and the arrow keys), with the
 * scrollbar hidden and the cards snapping to the start, so the look is the same.
 */
[data-livelaps] [data-slot="carousel-content"] {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
[data-livelaps] [data-slot="carousel-content"]::-webkit-scrollbar {
  display: none;
}
/* Snap the card, not its padding box: the item has the card gap as left padding, so the card sits flush. */
[data-livelaps] [data-slot="carousel-item"] > * {
  scroll-snap-align: start;
}

/*
 * Honeypot of the contact form (index.html, input name="__livelaps_hp"; read by js/site.js, sent by js/livelaps.js).
 * People never see or reach it; a bot that fills every input fills it too. Off-screen and out of the flow (no
 * layout shift, no focus: tabindex="-1"), not display:none or visibility:hidden, which some bots skip.
 */
.livelaps-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}

/*
 * Pages that open on a full-screen hero running up under the header (the home page): the header is half
 * see-through and blurred over it, and its links drop their own boxes so the bar reads as one surface. A smaller
 * hero keeps the solid header, so it never covers the hero's text. Once the page scrolls (data-scrolled,
 * js/site.js) the header is solid again.
 */
html:has(main > section[class*="-mt-(--site-header-height)"][class*="min-h-svh"]:first-of-type):not([data-scrolled]) [data-site-header] {
  background-color: color-mix(in srgb, var(--background) 50%, transparent);
  border-color: transparent;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
html:has(main > section[class*="-mt-(--site-header-height)"][class*="min-h-svh"]:first-of-type):not([data-scrolled]) [data-site-header] :is([data-slot="navigation-menu-link"], [data-slot="navigation-menu-trigger"], [data-header-nav] .bg-background):not(:hover):not(:focus-visible):not([data-popup-open]) {
  background-color: transparent;
}
[data-site-header] {
  transition: background-color .25s ease;
}

/*
 * A hero whose image is a plain block (not a full-screen cover) with its text laid over it: on narrow screens the
 * text is taller than the image. The image and its overlays share one grid cell, so the hero grows to fit the
 * text and the image crops to fill it.
 */
main > section:first-of-type > .relative.w-full:first-child:has(> img:first-child) {
  display: grid;
}
main > section:first-of-type > .relative.w-full:first-child:has(> img:first-child) > * {
  grid-area: 1 / 1;
}
main > section:first-of-type > .relative.w-full:first-child:has(> img:first-child) > img {
  height: 100%;
  object-fit: cover;
}
main > section:first-of-type > .relative.w-full:first-child:has(> img:first-child) > .absolute.inset-0 {
  position: relative;
  inset: auto;
}
main > section:first-of-type > .relative.w-full:first-child:has(> img:first-child) > .absolute.inset-0.flex {
  padding-block: 2.5rem;
}