/*
 * 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;
  }
}

/*
 * Studio picture alignment: a picture in text is centred or put on the right with the line it sits on
 * (style="text-align: …" on the paragraph). The compiled Tailwind CSS shows every picture as a block, which text
 * alignment does not move, so the margins do it.
 */
:where(p, h2, h3, h4, li, blockquote)[style*='text-align: center'] > img {
  margin-inline: auto;
}
:where(p, h2, h3, h4, li, blockquote)[style*='text-align: right'] > img {
  margin-inline: auto 0;
}

/*
 * 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;
}

/* Menu drop-downs: a list after the item's link, open on hover, on keyboard focus and after a tap (js/site.js). */
[data-nav-sublist] { display: none; }
[data-site-header] [data-nav-item] > [data-nav-sublist]:has(> li) {
  display: block;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 60;
  width: max-content;
  min-width: 14rem;
  max-width: min(24rem, 90vw);
  margin: 0;
  padding: .35rem 0;
  list-style: none;
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 12px 28px -8px rgb(0 0 0 / .5);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  /* The short delay on closing lets the pointer cross small gaps on its way into the list. */
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .18s;
}
[data-site-header] [data-nav-item]:focus-within > [data-nav-sublist]:has(> li),
[data-site-header] [data-nav-item][data-open] > [data-nav-sublist]:has(> li) {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
@media (hover: hover) {
  [data-site-header] [data-nav-item]:hover > [data-nav-sublist]:has(> li) {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-site-header] [data-nav-item] > [data-nav-sublist]:has(> li) { transform: none; transition: none; }
}
.fx-nav-sublink {
  display: block;
  padding: .55rem 1rem;
  font-size: .875rem;
  line-height: 1.3;
  color: inherit;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.fx-nav-sublink:hover, .fx-nav-sublink:focus-visible { background: var(--muted); color: var(--primary); outline: none; }
.fx-sheet-sublist { margin: 0 0 .25rem; padding: 0 0 0 .75rem; list-style: none; }
.fx-sheet-sublink { padding-block: .5rem; font-size: .875rem; font-weight: 400; }

/* Compact language control beside the header utilities; comfortable touch targets on phones. */
[data-site-header] .studio-language-switcher summary {
  box-sizing: border-box;
  min-height: 32px;
  padding: .3rem .5rem;
  font-size: .8125rem;
  line-height: 1.25;
  border-color: #8885;
  border-radius: .375rem;
}
[data-site-header] .studio-language-switcher nav {
  min-width: 5rem;
  padding: .2rem;
  border-radius: .4rem;
}
[data-site-header] .studio-language-switcher nav a {
  min-height: 36px;
  padding: .5rem .65rem;
  font-size: .8125rem;
}
@media (pointer: coarse) {
  [data-site-header] .studio-language-switcher summary,
  [data-site-header] .studio-language-switcher nav a { min-height: 44px; }
}