/* =====================================================================
   PT-00539 - light page palette (Kelly Buchanan's item 4 / 4a, 2026-10-16)

   _Layout loads this on every page and turns it on for a page that sets
   ViewData["PageTheme"] = "light":
   - .cs-page-light on <html> and <body> gives the page a light background.
   - .cs-light on <main> swaps the site colour variables, so everything inside
     <main> reads light. The navbar, its dropdowns, the cookie banner and the
     footer sit outside <main> and keep the site theme.
   - .cs-dark-band (heroes, call-to-action bands, video players) restores the
     dark values, so text on a night photo or a video stays light.
   Everything here is scoped to those classes, so dark pages are untouched.
   Light pages: About Us, Become a Client, Plans, Careers, home, city pages,
   public venue pages.
   ===================================================================== */

:root {
  --mk-navy: #16133a;
  --mk-text: #34314d;
  --mk-muted: #57546e; /* darker than first pass so small text keeps 4.5:1 on the lilac page */
  --mk-purple: #5b3fe4;
  --mk-purple-hover: #4c31d1;
  --mk-purple-deep: #6a2fc0;
  --mk-purple-soft: #8f76ff;
  --mk-lavender: #f3f0fe;
  --mk-lavender-2: #ebe6fd;
  --mk-border: #e6e1f7;
  --mk-gold: #f4b41a;
  --mk-dark: #15123a;
  --mk-radius: 14px;
  --mk-shadow: 0 2px 10px rgba(40, 30, 110, 0.06);
  /* Page background: the faint lavender-white of Kelly's "Careers page in light"
     mockup (sampled #f7f6fd), Brian 2026-10-19 - replaces the first-pass lilac #e4daf8.
     Cards and inputs stay white on top of it. About Us, Become a Client and Plans
     ask for plain white instead (ViewData["PageBackground"] = "white"). */
  --mk-page-bg: #f7f6fd;
}

html.cs-page-light,
body.cs-page-light {
  background-color: var(--mk-page-bg);
}

body.cs-page-light {
  background-image: none;
}

/* Pages that ask for a plain white background (ViewData["PageBackground"] = "white"). */
html.cs-page-white,
body.cs-page-white {
  background-color: #ffffff;
}
main.cs-light-white {
  --cs-dark-bg: #ffffff;
}

.cs-light {
  --cs-dark-bg: var(--mk-page-bg);
  --cs-card-bg: #ffffff;
  --cs-surface: var(--mk-lavender);
  --cs-text: var(--mk-text);
  --cs-text-primary: var(--mk-navy);
  --cs-text-secondary: var(--mk-muted);
  --cs-light: var(--mk-text);
  --cs-heading-color: var(--mk-navy);
  --cs-border: var(--mk-border);
  --cs-link-color: var(--mk-purple);
  --cs-link-hover-color: var(--mk-purple-hover);
  --cs-button-primary-bg: var(--mk-purple);
  --cs-button-hover-bg: var(--mk-purple-hover);
  --cs-input-bg: #ffffff;
  --cs-input-border: #d9d3f0;
  --cs-input-text: var(--mk-navy);
  --cs-input-placeholder: #8a87a0;
  --cs-input-focus-border: var(--mk-purple);
  --cs-focus-ring: rgba(91, 63, 228, 0.18);
  --cs-pill-bg: var(--mk-lavender);
  --cs-pill-border: var(--mk-border);
  --cs-distance-pill-bg: var(--mk-lavender-2);
  --cs-distance-text: var(--mk-purple);
  --cs-card-icon-color: var(--mk-purple-deep);
  --cs-purple-light: var(--mk-purple-deep);
  --cs-alert-danger: #c62828;
  --cs-alert-warning: #9a6700;
  --cs-alert-success: #15803d;
  --cs-alert-info: #1d4ed8;
  color: var(--mk-text);
}

.cs-light .cs-dark-band,
.cs-light .careers-hero,
.cs-light .hero-section,
.cs-light .bg-dark {
  --cs-dark-bg: var(--mk-dark);
  --cs-card-bg: #1a1a2e;
  --cs-surface: #1d1830;
  --cs-text: #f4f2fb;
  --cs-text-primary: #f5f5f5;
  --cs-text-secondary: #d4d0ea;
  --cs-light: #e5e7eb;
  --cs-heading-color: #ffffff;
  --cs-border: #2a2a4a;
  --cs-input-bg: rgba(255, 255, 255, 0.08);
  --cs-input-border: rgba(255, 255, 255, 0.25);
  --cs-input-text: #f5f5f5;
  --cs-input-placeholder: #c9c5dd;
  --cs-pill-bg: #1a1a2e;
  --cs-pill-border: #2a2a4a;
  --cs-distance-text: #9f66ff;
  --cs-card-icon-color: #9f66ff;
  --cs-purple-light: #c77dff;
  color: #f5f5f5;
}

/* ---------- shared bits on any light page ---------- */
.cs-light .card {
  box-shadow: var(--mk-shadow);
}
.cs-light .form-control[readonly],
.cs-light .form-control:disabled,
.cs-light .form-select:disabled {
  background-color: #f6f5fa;
  border-color: var(--mk-border);
}
.cs-light .breadcrumb-item + .breadcrumb-item::before { color: var(--mk-muted); }

/* ---------- Careers (Kelly's "Careers page in light" mockup) ---------- */
.cs-light .careers-cta {
  background: var(--mk-lavender);
  border-color: var(--mk-border);
}
.cs-light .careers-cta-icon,
.cs-light .careers-callout-icon {
  background: #ffffff;
}
.cs-light .job-card-v2,
.cs-light .careers-form-card {
  box-shadow: var(--mk-shadow);
}
/* careers.css resolves its --careers-* colours once on .careers-page, so the
   dark hero needs them set again (a custom property is computed where declared). */
.cs-light .careers-hero {
  --careers-surface: rgba(255, 255, 255, 0.06);
  --careers-border: rgba(255, 255, 255, 0.22);
  --careers-text: #f4f2fb;
  --careers-text-muted: #d4d0ea;
  --careers-accent-soft: #9f66ff;
}

/* ---------- home page, city pages, venue pages (item 4a) ---------- */
.cs-light .top-pick-card,
.cs-light .fc-card,
.cs-light .venue-detail-header {
  background: #ffffff;
  border-color: var(--mk-border);
  box-shadow: var(--mk-shadow);
}
.cs-light .top-pick-tile,
.cs-light .fc-tile {
  background-color: var(--mk-lavender);
}
.cs-light .fc-arrow {
  background: #ffffff;
  border-color: var(--mk-border);
  color: var(--mk-purple);
  box-shadow: var(--mk-shadow);
}
.cs-light .sort-dropdown option { background: #ffffff; color: var(--mk-navy); }
.cs-light .shadow-sm { box-shadow: 0 2px 8px rgba(40, 30, 110, 0.06) !important; }
.cs-light .shadow { box-shadow: 0 4px 14px rgba(40, 30, 110, 0.08) !important; }
.cs-light .business-cta-banner {
  background: #ffffff;
  border-top: 1px solid var(--mk-border);
  box-shadow: 0 -6px 20px rgba(40, 30, 110, 0.08);
}
/* The photos button icon is a light-grey PNG drawn for dark cards; tint it to
   the purple of the other action icons on light pages. */
.cs-light img.action-icon[src*="photos-lt"] {
  filter: brightness(0) saturate(100%) invert(22%) sepia(76%) saturate(3600%) hue-rotate(262deg) brightness(86%);
}

/* Bootstrap .bg-dark is themed to --cs-dark-bg, which is white here; keep the
   live-camera tiles, the camera modal and the "Video" badges dark. */
.cs-light .bg-dark { background-color: var(--mk-dark) !important; }