/* Apply branding only while Cal.com renders its public booking card.
 * This also follows client-side navigation without styling login or settings. */
/* Match styles.css .hero-shade: a uniform 30% black overlay. */
body:has(.main [class~="[grid-area:meta]"]) {
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
    url("/abaku-booking-background.jpg") center / cover fixed #022c3a;
}

/* Match the main site's white wordmark and responsive brand sizing. */
body:has(.main [class~="[grid-area:meta]"])::before {
  content: "";
  position: absolute;
  top: calc(30px + 2.25rem);
  left: clamp(24px, 5vw, 76px);
  width: clamp(180px, 18vw, 260px);
  aspect-ratio: 715 / 175;
  background: url("/abaku-booking-logo.webp") center / contain no-repeat;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

@media (max-width: 760px) {
  body:has(.main [class~="[grid-area:meta]"])::before {
    /* The front-page header centers the logo beside its 43px menu button. */
    top: calc(22px + 2.25rem + (43px - 170px * 175 / 715) / 2);
    left: 24px;
    width: 170px;
  }
}

/* Leave the background visible beside the stacked calendar on narrow screens. */
body:has(.main [class~="[grid-area:meta]"]) > main {
  padding: 24px 16px;
}

/* Cal.com v6.2.0 places these controls outside the white booking card. */
body:has(.main [class~="[grid-area:meta]"]) [class~="[grid-area:header]"] {
  padding: 8px;
  border-radius: 8px;
  background: #f1eee7;
}

.dark body:has(.main [class~="[grid-area:meta]"]) [class~="[grid-area:header]"] {
  background: #242321;
}

body:has(.main [class~="[grid-area:meta]"]) a[href="https://go.cal.com/booking"] img {
  filter: brightness(0) invert(1);
}