/* ==========================================================================
   Blush Café — Enhancement Layer
   Adds: (1) a site-wide light/dark theme system layered on top of the
   existing compiled Tailwind build (no rebuild required — every rule below
   is scoped to html[data-theme="dark"] and only overrides the specific
   "light chrome" utility classes actually used across the site);
   (2) the cinematic looping video banner component used on every page;
   (3) the theme-toggle control and small brand-mark tweaks.
   ========================================================================== */

/* ---- Theme transition (applied globally so the switch feels intentional,
   not jarring) --------------------------------------------------------- */
html {
  transition: background-color .35s ease;
}
body,
.bg-cream, .bg-white, .bg-blush-50, .bg-blush-100,
.text-charcoal-ink, .text-charcoal,
.border-blush-100, .border-blush-200 {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* ==========================================================================
   1. DARK THEME OVERRIDES
   ========================================================================== */
html[data-theme="dark"] body {
  --tw-bg-opacity: 1;
  background-color: rgb(20 18 16 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(240 233 226 / var(--tw-text-opacity, 1));
}

/* Core surfaces */
html[data-theme="dark"] .bg-cream        { --tw-bg-opacity: 1; background-color: rgb(20 18 16 / var(--tw-bg-opacity, 1)); }
html[data-theme="dark"] .bg-cream\/10    { background-color: #ffffff12; }
html[data-theme="dark"] .bg-cream\/90    { background-color: #141210e6; }
html[data-theme="dark"] .bg-cream\/95    { background-color: #141210f2; }
html[data-theme="dark"] .bg-white        { --tw-bg-opacity: 1; background-color: rgb(34 29 27 / var(--tw-bg-opacity, 1)); }
html[data-theme="dark"] .bg-blush-50     { --tw-bg-opacity: 1; background-color: rgb(44 32 36 / var(--tw-bg-opacity, 1)); }
html[data-theme="dark"] .bg-blush-50\/40 { background-color: #2c202480; }
html[data-theme="dark"] .bg-blush-50\/60 { background-color: #2c2024b3; }
html[data-theme="dark"] .bg-blush-100    { --tw-bg-opacity: 1; background-color: rgb(58 37 48 / var(--tw-bg-opacity, 1)); }

/* Borders/dividers used on light surfaces */
html[data-theme="dark"] .border-blush-100     { border-color: #ffffff14; }
html[data-theme="dark"] .border-blush-100\/70 { border-color: #ffffff0f; }
html[data-theme="dark"] .border-blush-200     { border-color: #ffffff1f; }

/* Body copy + headings that were "dark ink on light paper" */
html[data-theme="dark"] .text-charcoal        { --tw-text-opacity: 1; color: rgb(240 233 226 / var(--tw-text-opacity, 1)); }
html[data-theme="dark"] .text-charcoal-ink    { --tw-text-opacity: 1; color: rgb(240 233 226 / var(--tw-text-opacity, 1)); }
html[data-theme="dark"] .text-charcoal-ink\/40 { color: #f0e9e266; }
html[data-theme="dark"] .text-charcoal-ink\/50 { color: #f0e9e280; }
html[data-theme="dark"] .text-charcoal-ink\/60 { color: #f0e9e299; }
html[data-theme="dark"] .text-charcoal-ink\/70 { color: #f0e9e2b3; }
html[data-theme="dark"] .text-charcoal-ink\/75 { color: #f0e9e2bf; }
html[data-theme="dark"] .text-charcoal-ink\/80 { color: #f0e9e2cc; }
html[data-theme="dark"] .text-charcoal-ink\/85 { color: #f0e9e2d9; }

/* Hover / checked states tied to the light surfaces above */
html[data-theme="dark"] .hover\:bg-blush-50:hover                  { background-color: #35272c; }
html[data-theme="dark"] .hover\:bg-blush-100:hover                 { background-color: #3a2530; }
html[data-theme="dark"] .has-\[\:checked\]\:bg-blush-50:has(:checked) { background-color: #35272c; }

/* Custom (non-Tailwind) components with hardcoded light colors */
html[data-theme="dark"] .carousel-arrow { background: #141210e6; color: #f0e9e2; }
html[data-theme="dark"] .shadow-sm      { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .06); }
html[data-theme="dark"] #preloader      { background-color: rgb(20 18 16); }
html[data-theme="dark"] ::selection     { background: #8b3049; color: #fff; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { color-scheme: dark; }

/* Nav underline + focus ring stay legible on dark */
html[data-theme="dark"] :focus-visible { outline-color: #d4b78a; }

/* ==========================================================================
   2. THEME TOGGLE CONTROL
   ========================================================================== */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(74, 72, 64, .18);
  background: rgba(255, 255, 255, .55);
  color: #4a4840;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .25s ease, border-color .25s ease, transform .2s ease;
}
.theme-toggle:hover { background: #fdf1f4; transform: translateY(-1px); }
.theme-toggle:active { transform: translateY(0); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .theme-toggle {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #f0e9e2;
}
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Floating fallback toggle — only used on pages/headers that don't already
   carry an inline .theme-toggle (staff dashboards, 404) */
.theme-toggle-float {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 70;
  box-shadow: 0 10px 30px -8px rgba(20, 18, 16, .35);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(6px);
}
html[data-theme="dark"] .theme-toggle-float { background: rgba(34, 29, 27, .85); }

/* ==========================================================================
   3. CINEMATIC VIDEO BANNER (used at the top of every interior page)
   ========================================================================== */
.cinematic-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 44vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .cinematic-banner { min-height: 50vh; }
}
.cinematic-banner .cinematic-banner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) brightness(1.03);
}
/* Light, warm wash — keeps the page bright per brand direction while still
   reading as a cinematic, moving backdrop rather than a flat photo. */
.cinematic-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(251, 243, 238, .5) 0%,
    rgba(251, 243, 238, .68) 50%,
    rgba(251, 243, 238, .93) 100%
  );
  transition: background .35s ease;
}
html[data-theme="dark"] .cinematic-banner::before {
  background: linear-gradient(
    180deg,
    rgba(16, 14, 13, .45) 0%,
    rgba(16, 14, 13, .68) 50%,
    rgba(16, 14, 13, .94) 100%
  );
}
.cinematic-banner-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2.5rem 1.5rem;
  max-width: 46rem;
}
.cinematic-banner-logo {
  width: 52px;
  height: 52px;
  margin: 0 auto .9rem;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(184, 144, 95, .35));
}

/* "Our Signature" homepage feature — the flower-bloom loop framed with the
   physical signage photo, tying the uploaded brand assets together. */
.signature-frame {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px -25px rgba(42, 40, 35, .35);
}
.signature-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.signature-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,16,0) 55%, rgba(20,18,16,.55) 100%);
}

/* Header brand mark image */
.brand-mark-img {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}
.footer-brand-mark-img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  object-fit: cover;
}

/* Respect reduced-motion: freeze any decorative video on its poster frame */
@media (prefers-reduced-motion: reduce) {
  .cinematic-banner-media, .signature-frame video { animation: none !important; }
}