/**
 * Bridge WordPress theme styling into the embedded PlayPoint booking SPA.
 * Forces light venue styling — PlayPoint dark-mode / OS dark preference must not win.
 */

html.pp-wp-theme-shell,
body.pp-wp-theme-shell,
body.playpoint-booking-page {
  color-scheme: light only !important;
  /* Match Alpamare page — kill PlayPoint mint --color-bg */
  --color-bg: #ffffff !important;
  --color-bg-alt: #ffffff !important;
}

/* Kill dark-mode class + tokens even if ThemeService / localStorage race */
html.pp-wp-theme-shell.dark-mode,
body.pp-wp-theme-shell.dark-mode,
body.playpoint-booking-page.dark-mode,
html.pp-wp-theme-shell body.dark-mode {
  /* Light tokens (match PlayPoint :root light, then theme overrides via inline tokens) */
  --color-bg: #ffffff !important;
  --color-bg-alt: #f7fbf4 !important;
  --color-bg-disabled: #d7ded2 !important;
  --color-surface: #ffffff !important;
  --color-input-bg: #ffffff !important;
  --color-text: var(--alp-ink, #444444) !important;
  --color-text-secondary: var(--alp-muted, #555555) !important;
  --color-text-disabled: #8a8a8a !important;
  --color-muted: var(--alp-muted, #555555) !important;
  --color-muted-text: var(--alp-muted, #555555) !important;
  --color-border: #e6e6e6 !important;
  --color-primary: var(--alp-navy, #0c3274) !important;
  --color-primary-dark: var(--alp-blue, #003375) !important;
  --color-primary-light: #e8eef8 !important;
  --color-primary-rgb: 12, 50, 116 !important;
  --color-accent: var(--alp-sky, #0cafeb) !important;
  --color-secondary: var(--alp-red, #de1c4a) !important;
  --color-secondary-dark: var(--alp-pink, #e93c6c) !important;
  --color-overlay: rgba(11, 18, 32, 0.72) !important;
  --color-overlay-soft: rgba(11, 18, 32, 0.38) !important;
}

body.pp-wp-theme-shell,
body.playpoint-booking-page,
body.pp-wp-theme-shell app-root,
body.pp-wp-theme-shell .layout-wrapper,
body.pp-wp-theme-shell .page-wrapper,
body.pp-wp-theme-shell .main-container,
body.pp-wp-theme-shell .content,
body.pp-wp-theme-shell .playpoint-booking-shell,
body.pp-wp-theme-shell app-create-admission-booking,
body.pp-wp-theme-shell .booking-container,
body.pp-wp-theme-shell .booking-page {
  background: #fff !important;
  background-color: #fff !important;
  color: var(--alp-ink, #444444) !important;
  color-scheme: light only !important;
}

/* Prefer venue fonts inside the booking app (not WP chrome) */
body.pp-wp-theme-shell app-root,
body.pp-wp-theme-shell .layout-wrapper,
body.pp-wp-theme-shell .playpoint-booking-shell,
body.pp-wp-theme-shell .playpoint-booking-shell * {
  font-family: var(--font-sans, "Jost", system-ui, sans-serif);
}

body.pp-wp-theme-shell .layout-wrapper h1,
body.pp-wp-theme-shell .layout-wrapper h2,
body.pp-wp-theme-shell .layout-wrapper .display,
body.pp-wp-theme-shell .layout-wrapper .hero-title {
  font-family: var(--font-heading, "Montserrat", system-ui, sans-serif);
}

/*
 * Lock WordPress header/footer to main-site type.
 * PlayPoint SPA sets body { font-family: -apple-system... } after theme CSS.
 */
body.pp-wp-theme-shell .site-header,
body.playpoint-booking-page .site-header,
body.pp-wp-theme-shell .site-header__nav a,
body.playpoint-booking-page .site-header__nav a,
body.pp-wp-theme-shell .site-header__mobile a,
body.playpoint-booking-page .site-header__mobile a,
body.pp-wp-theme-shell .site-header__cta,
body.playpoint-booking-page .site-header__cta,
body.pp-wp-theme-shell .site-header__basket,
body.playpoint-booking-page .site-header__basket {
  font-family: var(--font-heading, "Montserrat", system-ui, sans-serif) !important;
}

body.pp-wp-theme-shell .site-header__nav a:not(.site-header__cta),
body.playpoint-booking-page .site-header__nav a:not(.site-header__cta),
body.pp-wp-theme-shell .site-header__mobile a:not(.site-header__cta),
body.playpoint-booking-page .site-header__mobile a:not(.site-header__cta) {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.pp-wp-theme-shell .site-header__cta,
body.playpoint-booking-page .site-header__cta {
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.pp-wp-theme-shell .site-footer,
body.playpoint-booking-page .site-footer,
body.pp-wp-theme-shell .site-footer p,
body.pp-wp-theme-shell .site-footer a,
body.pp-wp-theme-shell .site-footer li {
  font-family: var(--font-sans, "Jost", system-ui, sans-serif) !important;
}

body.pp-wp-theme-shell .site-footer h4,
body.playpoint-booking-page .site-footer h4 {
  font-family: var(--font-heading, "Montserrat", system-ui, sans-serif) !important;
}

/* Hide PlayPoint chrome — WordPress header/footer own the page */
body.pp-wp-theme-shell .layout-wrapper > header.navbar,
body.pp-wp-theme-shell .mobile-menu-overlay,
body.pp-wp-theme-shell .mobile-menu,
body.pp-wp-theme-shell .mobile-nav-menu,
body.pp-wp-theme-shell legal-footer,
body.pp-wp-theme-shell app-legal-footer,
body.pp-wp-theme-shell .theme-toggle-btn,
body.pp-wp-theme-shell footer.footer,
body.pp-wp-theme-shell .layout-wrapper > footer.footer,
body.pp-wp-theme-shell cookie-banner,
body.pp-wp-theme-shell .cookie-banner {
  display: none !important;
}

body.pp-wp-theme-shell .layout-wrapper {
  min-height: auto;
  padding-top: 0;
  background: transparent !important;
}

body.pp-wp-theme-shell .playpoint-booking-shell {
  padding-block: 1.5rem 3rem;
  width: min(100% - 2rem, 80rem);
  margin-inline: auto;
}

/* Map primary actions to Alpamare CTA look */
body.pp-wp-theme-shell .btn-primary,
body.pp-wp-theme-shell button.primary,
body.pp-wp-theme-shell .primary-button,
body.pp-wp-theme-shell a.btn.btn-primary {
  background: var(--color-secondary, var(--alp-red, #de1c4a)) !important;
  border-color: var(--color-secondary, var(--alp-red, #de1c4a)) !important;
  color: #fff !important;
  font-family: var(--font-family-cta, var(--font-cta, inherit));
}

/* Colour booking-app links only — do not restyle WP header/footer nav */
body.pp-wp-theme-shell .playpoint-booking-shell a:not(.btn):not(.nav-links a),
body.pp-wp-theme-shell .layout-wrapper a:not(.btn):not(.nav-links a) {
  color: var(--color-primary, var(--alp-navy, #0c3274));
}

/* Neutralize OS-level dark preference used in a few payment SCSS blocks */
@media (prefers-color-scheme: dark) {
  body.pp-wp-theme-shell,
  body.pp-wp-theme-shell app-root,
  body.pp-wp-theme-shell .layout-wrapper,
  body.pp-wp-theme-shell .content {
    background-color: #fff !important;
    color: var(--alp-ink, #444444) !important;
  }

  body.pp-wp-theme-shell .payment-option .payment-icons img {
    filter: none !important;
  }
}