/* ============================================================
   LIGHT THEME — business-card cream
   Loaded AFTER each page's inline <style>, so these rules override it.
   To turn the light theme off for a page, remove its
   <link rel="stylesheet" href="/light-theme.css"> line.

   Tokens match the light business cards: #f7f3ee paper, #171310 ink,
   #d94e00 orange for small text (AA contrast on cream).
   ============================================================ */
:root {
  --bg: #f7f3ee;
  --bg-alt: #efe8df;
  --surface: #fffcf8;
  --text: #171310;
  --muted: #6b625b;
  --red: #ff4040;
  --orange: #d94e00;
  --border: #ddd3c8;
  --card-light: #efe8df;
  --wash: rgba(247,243,238,0.6);        /* flat cream wash over hero photos/video */
  --wash-band: rgba(247,243,238,0.42);  /* lighter wash over mid-page photo bands */
  --wash-text: rgba(247,243,238,0.72);  /* heavier wash where a band carries a lot of body text */
}

/* ---------- Header ---------- */
header { background: rgba(247,243,238,0.92); }
.nav-mobile { background: rgba(247,243,238,0.98); }
.nav-cta { background: rgba(217,78,0,0.08); border-color: rgba(217,78,0,0.45); }
.nav-cta:hover { background: rgba(217,78,0,0.16); border-color: var(--orange); }

/* ---------- Vivid gradient stays vivid (buttons, big gradient words, badges) ---------- */
.gradient-text,
.btn-primary, .nav-mobile a.cta-mobile, .card-btn-primary,
.badge, .featured-badge, .why-eq span { --orange: #ff5700; }
.gradient-text { background: linear-gradient(90deg, #e63232, #d94e00); -webkit-background-clip: text; background-clip: text; }

/* ---------- Photo / video heroes: flat cream wash, video/photo still visible ---------- */
.hero-video { filter: none; opacity: 1; }
.hero-dim, .page-hero-dim {
  background: linear-gradient(180deg, var(--wash) 0%, var(--wash) 80%, rgba(247,243,238,1) 100%);
}
.hero::before, .page-hero::before { background: linear-gradient(180deg, rgba(255,64,64,0.10) 0%, rgba(255,87,0,0.05) 35%, transparent 70%); z-index: 0; }
.hero::after { opacity: 0.22; z-index: 0; }
.page-hero-streak { opacity: 0.35; }

.hero .eyebrow, .page-hero .eyebrow, .photo-hero .eyebrow, .video-hero .eyebrow {
  display: inline-flex; background: rgba(247,243,238,0.7); border-color: rgba(217,78,0,0.5); box-shadow: none; text-shadow: none;
}
.hero h1, .page-hero h1, .photo-hero h1, .video-hero h1,
.hero p.sub, .page-hero p.sub, .photo-hero p.sub, .video-hero p.sub,
.page-hero p.hero-note { text-shadow: none; }
.hero p.sub, .page-hero p.sub, .photo-hero p.sub, .video-hero p.sub { color: var(--text); font-weight: 600; opacity: 1; }
.hero p.sub strong, .page-hero p.sub strong { color: var(--orange); }
.page-hero p.hero-note { background: rgba(247,243,238,0.7); border-color: rgba(217,78,0,0.45); color: var(--text); }
.btn-hero-cta { box-shadow: 0 8px 26px rgba(217,78,0,0.28); }
.btn-hero-cta:hover { box-shadow: 0 10px 32px rgba(217,78,0,0.4); }

/* Weddings hero: busy brass-band photo behind small text, so a slightly heavier wash */
.page-hero-art[src*="weddings-hero"] + .page-hero-dim {
  background: linear-gradient(180deg, rgba(247,243,238,0.72) 0%, rgba(247,243,238,0.72) 80%, rgba(247,243,238,1) 100%);
}

/* Parades photo hero + venues video hero (their own dark-overlay recipes) */
.photo-hero, .video-hero { background: var(--bg); }
.photo-hero img { opacity: 1; filter: none; }
.video-hero video { opacity: 1; filter: none; }
.photo-hero::before {
  z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 4%, var(--wash) 40%, var(--wash) 100%);
}
.video-hero::before {
  z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 4%, var(--wash) 40%, var(--wash) 100%);
}

/* ---------- Mid-page photo bands (index #services, weddings/corporate #hybrid, schools #why-us, services #photo-booths) ---------- */
.services-dim, .hybrid-dim, .why-us-dim, .photobooth-dim {
  background: linear-gradient(180deg,
    rgba(247,243,238,1) 0%, var(--wash-band) 10%, var(--wash-band) 90%, rgba(247,243,238,1) 100%);
}
#services *, #hybrid *, #why-us *, #photo-booths *, .trusted-by .label, .trusted-by * { text-shadow: none !important; }
#services .section-head p, #hybrid .section-head p, #photo-booths .section-head p { color: var(--text); font-weight: 500; }
#why-us .feature-item p, #why-us .section-head p { color: var(--text); opacity: 1; font-weight: 500; }

/* Sublines sitting on photos: a feathered frost behind the words (blurred cream glass whose edges fade to nothing, no box) */
#services .section-head p, #hybrid .section-head p, #photo-booths .section-head p, #why-us .section-head p {
  position: relative; isolation: isolate; display: inline-block; padding: 6px 4px;
}
#services .section-head p::before, #hybrid .section-head p::before,
#photo-booths .section-head p::before, #why-us .section-head p::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -22px -44px;
  background: rgba(247,243,238,0.72);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 32%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 32%, #000 68%, transparent 100%);
  mask-composite: intersect;
}

/* Homepage What We Do: text on plain cream, then a crisp rounded photo banner, then cards overlapping its bottom edge */
#services { background: var(--bg); }
#services .services-bg, #services .services-dim { display: none; }
#services .section-head p::before { display: none; }
#services .section-head { margin-bottom: 36px; }
.services-banner {
  display: block; position: relative; height: clamp(220px, 32vw, 400px);
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(23,19,16,0.12);
  margin: 0 0 -72px;
}
.services-banner img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  filter: sepia(0.28) saturate(1.1) brightness(1.04);
}
#services .services-grid { position: relative; z-index: 1; padding: 0 20px; }
@media (max-width: 800px) { #services .services-grid { padding: 0 12px; } .services-banner { margin-bottom: -48px; } }

/* Keep the frost from ever widening the page, and pull it in on phones */
#services, #hybrid, #why-us, #photo-booths { overflow-x: clip; }
@media (max-width: 700px) {
  #services .section-head p::before, #hybrid .section-head p::before,
  #photo-booths .section-head p::before, #why-us .section-head p::before { inset: -18px -14px; }
}

/* Per-band tuning. Dark source photos go muddy grey under cream, so lift them first. */
.hybrid-bg, .photobooth-bg { filter: brightness(1.25) saturate(1.1); }
/* Homepage What We Do photo: sepia lift turns the cool blue sky peach so it sits in the cream palette */
.photobooth-bg { filter: blur(3px) brightness(1.4) saturate(1.1); }
.why-us-bg { filter: brightness(1.15) saturate(1.1); }
.hybrid-dim { background: linear-gradient(180deg, rgba(247,243,238,1) 0%, rgba(247,243,238,0.5) 10%, rgba(247,243,238,0.5) 90%, rgba(247,243,238,1) 100%); }
.photobooth-dim { background: linear-gradient(180deg, rgba(247,243,238,1) 0%, rgba(247,243,238,0.5) 12%, rgba(247,243,238,0.5) 88%, rgba(247,243,238,1) 100%); }
.why-us-dim { background: linear-gradient(180deg, rgba(247,243,238,1) 0%, var(--wash-text) 12%, var(--wash-text) 88%, rgba(247,243,238,1) 100%); }
.page-hero-photo { filter: blur(24px) saturate(1.25) brightness(1.35); opacity: 0.9; }

/* Section eyebrows sitting on photos become solid chips so they stand out */
#services .section-head .eyebrow, #hybrid .section-head .eyebrow,
#why-us .section-head .eyebrow, #photo-booths .section-head .eyebrow {
  display: flex !important; width: fit-content; margin: 0 auto 18px !important;
  padding: 8px 20px; border-radius: 30px;
  background: var(--surface); border: 1px solid rgba(217,78,0,0.55);
  color: #c24500; font-weight: 700;
  box-shadow: 0 4px 16px rgba(23,19,16,0.12);
}

/* Frosted cream glass cards over photos */
.hybrid-card {
  background: rgba(255,252,248,0.74); border-color: rgba(23,19,16,0.12);
  box-shadow: 0 8px 24px rgba(23,19,16,0.10);
}
.hybrid-card:hover { background: rgba(255,252,248,0.92); }
/* Homepage service cards match the testimonial/calendar cards: solid off-white, hairline border, soft shadow */
.service-card {
  background: var(--surface); border-color: var(--border); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(23,19,16,0.03), 0 8px 24px rgba(23,19,16,0.08);
}
.service-card:hover { background: var(--surface); border-color: var(--orange); }
.service-card p, .hybrid-card p { opacity: 1; }

/* ---------- Cream sections ---------- */
.section-alt { background: var(--bg-alt); }
.testimonial { background: var(--surface); box-shadow: 0 1px 0 rgba(23,19,16,0.03), 0 8px 24px rgba(23,19,16,0.05); }
.team-photo { border-color: var(--border); background-color: #f1eae1; background-blend-mode: multiply; }
.team-photo::after { background: linear-gradient(0deg, rgba(217,78,0,0.10), transparent); }
.rating-line { background: rgba(217,78,0,0.08); border-color: rgba(217,78,0,0.4); }

/* ---------- Hardcoded light-on-dark bits on inner pages ---------- */
.prose-block p { color: #4a423c; }
.event-chip, .paperwork-row .chip { background: rgba(23,19,16,0.05); border-color: rgba(23,19,16,0.16); }
.trusted-chips .chip { background: rgba(255,252,248,0.75); border-color: rgba(23,19,16,0.15); backdrop-filter: blur(3px); }

/* ---------- Logos: white silhouettes become ink silhouettes ---------- */
.venue-logo { filter: brightness(0); opacity: 0.5; }
.venue-logo-box:hover .venue-logo, a:hover > .venue-logo { opacity: 0.9; }
.credential-logos img { filter: brightness(0); opacity: 0.55; }

/* ---------- Third-party embeds render dark: seat them in dark panels ---------- */
#instagram [class^="elfsight-app"] { background: #0a0a0a; border-radius: 12px; padding: 8px; overflow: hidden; }
#contact-form { border-radius: 12px; overflow: hidden; }
footer { background: var(--bg-alt); }
footer .logo { color: var(--text); }

/* ---------- Media that should stay dark ---------- */
.lightbox { --text: #f5f1ec; --muted: #b9b0a9; --border: #2a2626; }
.video-frame, .video-tile, .video-embed { background: #000; }

/* ---------- Availability calendar, tooltip ---------- */
.availability-card, .form-placeholder { background: var(--surface); }
.avail-nav-btn { background: rgba(23,19,16,0.05); }
.avail-day:not(.empty):hover { background: rgba(23,19,16,0.06); }
.avail-day.tentative { color: #a86f00; }
.avail-day.booked { color: #0f8a5f; }
.avail-day.full { color: #d12b2b; }
.avail-day.tentative .avail-dots span { background: #e0a100; }
.avail-day.booked .avail-dots span { background: #14a874; }
.avail-tooltip { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: 0 8px 24px rgba(23,19,16,0.25); }
.avail-tooltip::after { border-top-color: var(--text); }
#preloader { background: var(--bg); }