/**
 * Animworks Bookings: brand skin.
 *
 * Fonts are served from this host rather than anim.works so there is no
 * cross origin font request to go wrong.
 *
 * LEMON MILK is caps only, so it is used for headings alone. Body copy is
 * LM Pro, which has lowercase. Putting LEMON MILK on everything is how you
 * end up with a page shouting in capitals.
 */

@font-face {
  font-family: 'LEMON MILK';
  src: url('/aw-fonts/LEMONMILK-Regular.woff2') format('woff2');
  font-weight: 100 499;
  font-display: swap;
}
@font-face {
  font-family: 'LEMON MILK';
  src: url('/aw-fonts/LEMONMILK-Medium.woff2') format('woff2');
  font-weight: 500 649;
  font-display: swap;
}
@font-face {
  font-family: 'LEMON MILK';
  src: url('/aw-fonts/LEMONMILK-Bold.woff2') format('woff2');
  font-weight: 650 900;
  font-display: swap;
}

@font-face {
  font-family: 'LM Pro';
  src: url('/aw-fonts/LemonMilkPro-Light.woff2') format('woff2');
  font-weight: 100 349;
  font-display: swap;
}
@font-face {
  font-family: 'LM Pro';
  src: url('/aw-fonts/LemonMilkPro-Regular.woff2') format('woff2');
  font-weight: 350 499;
  font-display: swap;
}
@font-face {
  font-family: 'LM Pro';
  src: url('/aw-fonts/LemonMilkPro-Medium.woff2') format('woff2');
  font-weight: 500 649;
  font-display: swap;
}
@font-face {
  font-family: 'LM Pro';
  src: url('/aw-fonts/LemonMilkPro-Bold.woff2') format('woff2');
  font-weight: 650 900;
  font-display: swap;
}

/* Body copy across the app. */
html body,
html body button,
html body input,
html body select,
html body textarea {
  font-family: 'LM Pro', Poppins, Helvetica, Arial, sans-serif;
}

/* Headings only, so nothing else turns into capitals. */
html body h1,
html body h2,
html body h3,
html body [data-testid='event-title'],
html body [data-testid='event-meta'] h1 {
  font-family: 'LEMON MILK', 'LM Pro', Helvetica, Arial, sans-serif;
  letter-spacing: 0.01em;
}

/* The booking card: frosted, so the starfield reads as texture behind it
   rather than competing with the dates.
 *
 * ⚠️ The blur lives on a pseudo element, NOT on the card itself. An element
 * with backdrop-filter becomes the containing block for its position:fixed
 * descendants, and the card contains Cal.com's header, which is pinned to the
 * viewport corner. Blurring the card directly dragged that header inside the
 * card and on top of the view switcher. isolation gives us a stacking context
 * for the pseudo element without that side effect. */
html body [data-testid='booker-container'] {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

html body [data-testid='booker-container']::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  background-color: rgba(20, 20, 22, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  border: 1px solid rgba(242, 240, 234, 0.10);
  pointer-events: none;
}

/* Inner panels inherit the card rather than painting solid blocks over it. */
html body [data-testid='booker-container'] > div {
  background-color: transparent !important;
}

/* The wordmark, top left, the way Keyframe and Flow carry theirs. */
#aw-bookings-mark-fixed {
  position: fixed;
  top: 22px;
  left: 26px;
  z-index: 40;
  line-height: 0;
  display: block;
}
#aw-bookings-mark-fixed img {
  height: 20px;
  width: auto;
  display: block;
  opacity: 0.95;
}

@media (max-width: 640px) {
  #aw-bookings-mark-fixed { top: 14px; left: 16px; }
  #aw-bookings-mark-fixed img { height: 16px; }
}

@media (prefers-reduced-transparency: reduce) {
  html body [data-testid='booker-container']::before {
    background-color: rgba(20, 20, 22, 0.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Harvey, 6 Oct 2026: the mentor photo on the booking page was a 22px dot; make it a proper portrait. */
[data-testid="avatar-href"] [data-testid="avatar"], [data-testid="avatar-href"] [data-testid="avatar"] img { width: 72px !important; height: 72px !important; min-width: 72px !important; min-height: 72px !important; }
[data-testid="avatar-href"] [data-testid="avatar"] { border: 2px solid #E4AC01 !important; }