/* Sanctuary Realty — dark/gold theme tokens */
:root {
  --surface: oklch(0.18 0.012 80);
  --background: oklch(0.14 0.01 80);
  --foreground: oklch(0.97 0.01 80);
  --muted-foreground: oklch(1 0 0);
  --border: oklch(0.42 0.02 80 / 60%);
  --card: oklch(0.14 0.01 80);
  --ink: oklch(0.10 0.005 80);
  --gold: oklch(0.78 0.14 78);
  --gold-2: oklch(0.88 0.10 88);
  --gradient-gold: linear-gradient(135deg, oklch(0.88 0.10 88) 0%, oklch(0.78 0.14 78) 45%, oklch(0.55 0.14 55) 100%);
  --gradient-spotlight: radial-gradient(ellipse at top, oklch(0.78 0.14 78 / 25%), transparent 60%);
  --shadow-gold: 0 20px 60px -20px oklch(0.78 0.14 78 / 35%);
  --shadow-deep: 0 30px 80px -30px oklch(0 0 0 / 60%);
  --input: oklch(0.24 0.015 80);
  --primary-foreground: oklch(0.14 0.01 80);
  --gold-deep: oklch(0.62 0.15 65);
}

html, body { background: var(--background); color: var(--foreground); }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background-image: radial-gradient(1200px 600px at 80% -10%, oklch(0.78 0.14 78 / 10%), transparent 60%), radial-gradient(900px 500px at -10% 30%, oklch(0.55 0.14 55 / 8%), transparent 60%); background-attachment: fixed; }
h1, h2, h3, h4, .font-display { font-family: 'Playfair Display', Georgia, serif; letter-spacing: -0.01em; }
* { border-color: var(--border); }

/* Tailwind colour aliases — exact parity with the preview's oklch tokens.
   Values below mirror what Tailwind v4 computes in the React build, so every
   shade renders identically in WordPress. */
.bg-ink { background-color: var(--ink); }
.bg-card { background-color: var(--card); }
.bg-background { background-color: var(--background); }
.bg-surface { background-color: var(--surface); }
.bg-surface\/50 { background-color: color-mix(in oklab, var(--surface) 50%, transparent); }
.bg-surface\/30 { background-color: color-mix(in oklab, var(--surface) 30%, transparent); }
.bg-gradient-gold { background-image: var(--gradient-gold); }
.bg-gold { background-color: var(--gold); }
.bg-gold\/20 { background-color: color-mix(in oklab, var(--gold) 20%, transparent); }
.bg-gold\/15 { background-color: color-mix(in oklab, var(--gold) 15%, transparent); }
.bg-gold\/10 { background-color: color-mix(in oklab, var(--gold) 10%, transparent); }
.bg-input { background-color: var(--input); }
.bg-input\/60 { background-color: color-mix(in oklab, var(--input) 60%, transparent); }
.text-gold { color: var(--gold); }
.text-gold-soft { color: var(--gold-2); }
.text-foreground { color: var(--foreground); }
.text-foreground\/90 { color: color-mix(in oklab, var(--foreground) 90%, transparent); }
.text-foreground\/80 { color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.text-foreground\/70 { color: color-mix(in oklab, var(--foreground) 70%, transparent); }
.text-foreground\/40 { color: color-mix(in oklab, var(--foreground) 40%, transparent); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-primary-foreground { color: var(--primary-foreground); }
/* --border is already 60% alpha, so the /60 and /40 variants compound exactly
   the way Tailwind v4 compounds them in the preview. */
.border-border { border-color: var(--border); }
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent); }
.border-border\/40 { border-color: color-mix(in oklab, var(--border) 40%, transparent); }
.bg-border\/60 { background-color: color-mix(in oklab, var(--border) 60%, transparent); }
.border-gold { border-color: var(--gold); }
.border-gold\/60 { border-color: color-mix(in oklab, var(--gold) 60%, transparent); }
.border-gold\/50 { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.border-gold\/40 { border-color: color-mix(in oklab, var(--gold) 40%, transparent); }
.border-gold\/30 { border-color: color-mix(in oklab, var(--gold) 30%, transparent); }
.ring-gold\/30 { --tw-ring-color: color-mix(in oklab, var(--gold) 30%, transparent); }
.accent-gold { accent-color: var(--gold); }
.hover\:text-gold:hover { color: var(--gold); }
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:border-gold:hover { border-color: var(--gold); }
.hover\:border-gold\/60:hover { border-color: color-mix(in oklab, var(--gold) 60%, transparent); }
.hover\:bg-gold\/10:hover { background-color: color-mix(in oklab, var(--gold) 10%, transparent); }

.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.shadow-gold { box-shadow: var(--shadow-gold); }
.shadow-deep { box-shadow: var(--shadow-deep); }

.sr-glass, .glass {
  background: color-mix(in oklab, var(--surface, oklch(0.18 0.012 80)) 70%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--gold) 18%, transparent);
}
.sr-nav-shell, .scrolled .sr-nav-shell {
  background: color-mix(in oklab, var(--surface, oklch(0.18 0.012 80)) 70%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid color-mix(in oklab, var(--gold) 18%, transparent);
  box-shadow: var(--shadow-deep);
}
/* keep the fixed header a constant height on every page, E-Shop included */
#site-header .sr-nav-shell { min-height: 88px; }
#site-header.scrolled .sr-nav-shell { min-height: 80px; }

.bg-\[var\(--gradient-spotlight\)\] { background-image: var(--gradient-spotlight); }

/* Section reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Map B&W styling */
.sr-map { filter: contrast(1.08) brightness(0.92); }

img { max-width: 100%; height: auto; }
a { color: inherit; }
.marquee { display:flex; gap:4rem; width:max-content; animation:sr-marquee 30s linear infinite; }
@keyframes sr-marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .marquee,.reveal { animation:none!important; transition:none!important; } }

/* Uniform card heights across all grids (parity with React build) */
.grid > article, .grid > a.group { display:flex; flex-direction:column; height:100%; }
.grid > article > a:first-child, .grid > article > span:first-child,
.grid > a.group > span:first-child { flex-shrink:0; }
.grid > article > div:last-child, .grid > a.group > span:last-child { display:flex; flex-direction:column; flex:1 1 auto; }
.grid > article > div:last-child > :last-child, .grid > a.group > span:last-child > :last-child { margin-top:auto; }

/* ============================================================
 *  Light / dark mode (default opening mode = dark)
 *  In light mode the header/footer/menu shell flips to white
 *  with formerly-white type inverted to black.
 *  Gold and black-on-gold values never change.
 * ============================================================ */
html.light {
  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --surface: oklch(1 0 0);
  --card: oklch(1 0 0);
  --muted-foreground: oklch(0 0 0);
  --border: oklch(0 0 0 / 22%);
  --input: oklch(1 0 0);
  --gradient-spotlight: radial-gradient(ellipse at top, oklch(0.78 0.14 78 / 16%), transparent 60%);
  --shadow-deep: 0 30px 80px -30px oklch(0 0 0 / 18%);
}
html.light body {
  background-image:
    radial-gradient(1200px 600px at 80% -10%, oklch(0.78 0.14 78 / 12%), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, oklch(0.55 0.14 55 / 7%), transparent 60%);
}
/* body carries bg-ink from body_class; in light mode the canvas must be white */
html.light body.bg-ink { background-color: var(--background); }
html.light body { color: var(--foreground); }

.dark-zone {
  --background: oklch(0.10 0.005 80);
  --foreground: oklch(1 0 0);
  --surface: oklch(0.14 0.01 80);
  --card: oklch(0.14 0.01 80);
  --muted-foreground: oklch(1 0 0);
  --border: oklch(0.42 0.02 80 / 60%);
  --input: oklch(0.16 0.01 80);
  color: var(--foreground);
}

/* Light mode: header, footer and menu shell go white with black type.
   The CDN utilities emit literal colors, so these need !important. */
html.light .dark-zone {
  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --surface: oklch(1 0 0);
  --card: oklch(1 0 0);
  --muted-foreground: oklch(0.18 0.005 80);
  --border: oklch(0 0 0 / 22%);
  --input: oklch(1 0 0);
  color: var(--foreground);
  background-color: oklch(1 0 0);
}
html.light .dark-zone.bg-ink,
html.light .dark-zone .bg-ink { background-color: oklch(1 0 0) !important; }
html.light .dark-zone .bg-surface,
html.light .dark-zone .bg-card,
html.light .dark-zone .bg-background { background-color: oklch(1 0 0) !important; }
html.light .dark-zone .text-foreground,
html.light .dark-zone .text-white { color: oklch(0 0 0) !important; }
html.light .dark-zone .text-foreground\/90 { color: oklch(0 0 0 / 90%) !important; }
html.light .dark-zone .text-foreground\/80 { color: oklch(0 0 0 / 80%) !important; }
html.light .dark-zone .text-foreground\/70 { color: oklch(0 0 0 / 70%) !important; }
html.light .dark-zone .text-muted-foreground { color: oklch(0.18 0.005 80) !important; }
html.light .dark-zone .border-border,
html.light .dark-zone .border-border\/60,
html.light .dark-zone .border-border\/40 { border-color: oklch(0 0 0 / 22%) !important; }
html.light .dark-zone .glass,
html.light .dark-zone .sr-glass {
  background: oklch(1 0 0 / 92%) !important;
  border-color: color-mix(in oklab, var(--gold) 35%, transparent) !important;
}

/* Tailwind CDN emits literal oklch values for these utilities, so in light mode
   we re-point them at the tokens (skipped inside .dark-zone shells). */
html.light :not(.dark-zone):not(.dark-zone *) {
  --sr-l: 1;
}
html.light .bg-background:not(.dark-zone):not(.dark-zone *) { background-color: var(--background) !important; }
html.light .bg-card:not(.dark-zone):not(.dark-zone *) { background-color: var(--card) !important; }
html.light .bg-surface:not(.dark-zone):not(.dark-zone *) { background-color: var(--surface) !important; }
html.light .bg-surface\/50:not(.dark-zone):not(.dark-zone *) { background-color: color-mix(in oklab, var(--surface) 50%, transparent) !important; }
html.light .bg-surface\/30:not(.dark-zone):not(.dark-zone *) { background-color: color-mix(in oklab, var(--surface) 30%, transparent) !important; }
html.light .bg-input:not(.dark-zone):not(.dark-zone *),
html.light .bg-input\/60:not(.dark-zone):not(.dark-zone *) { background-color: var(--input) !important; }
html.light .bg-ink:not(.dark-zone):not(.dark-zone *) { background-color: var(--background) !important; }
html.light .text-foreground:not(.dark-zone):not(.dark-zone *) { color: var(--foreground) !important; }
html.light .text-foreground\/90:not(.dark-zone):not(.dark-zone *) { color: color-mix(in oklab, var(--foreground) 90%, transparent) !important; }
html.light .text-foreground\/80:not(.dark-zone):not(.dark-zone *) { color: color-mix(in oklab, var(--foreground) 80%, transparent) !important; }
html.light .text-foreground\/70:not(.dark-zone):not(.dark-zone *) { color: color-mix(in oklab, var(--foreground) 70%, transparent) !important; }
html.light .text-muted-foreground:not(.dark-zone):not(.dark-zone *) { color: var(--muted-foreground) !important; }
html.light .border-border:not(.dark-zone):not(.dark-zone *) { border-color: var(--border) !important; }
html.light .border-border\/60:not(.dark-zone):not(.dark-zone *) { border-color: color-mix(in oklab, var(--border) 60%, transparent) !important; }
html.light .border-border\/40:not(.dark-zone):not(.dark-zone *) { border-color: color-mix(in oklab, var(--border) 40%, transparent) !important; }
html.light .glass:not(.dark-zone):not(.dark-zone *),
html.light .sr-glass:not(.dark-zone):not(.dark-zone *) {
  background: color-mix(in oklab, var(--surface) 82%, transparent);
}
/* Hero overlays keep their cinematic dark wash so the white headline stays legible */
html.light .sr-map { filter: contrast(1.03) brightness(1.02); }

/* Hero — dark cinematic by default, light & legible in light mode */
.sr-hero-img { opacity: 0.5; }
html.light .sr-hero { --foreground: oklch(0 0 0); color: var(--foreground); }
html.light .sr-hero-img { opacity: 0.18 !important; }
html.light .sr-hero-wash {
  background-image: linear-gradient(180deg, oklch(1 0 0 / 88%) 0%, oklch(1 0 0 / 93%) 50%, var(--background) 100%) !important;
}
html.light .sr-hero .glass, html.light .sr-hero .sr-glass {
  background: oklch(1 0 0 / 94%) !important;
  border-color: color-mix(in oklab, var(--gold) 45%, transparent) !important;
  box-shadow: 0 18px 50px -30px oklch(0 0 0 / 35%);
}
html.light .sr-hero .text-gradient-gold {
  background: linear-gradient(135deg, oklch(0.68 0.15 72) 0%, oklch(0.52 0.14 55) 100%) !important;  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
html.light .sr-hero .text-gold { color: oklch(0.52 0.13 60) !important; }
html.light .sr-hero .text-foreground,
html.light .sr-hero .text-foreground\/90,
html.light .sr-hero h1, html.light .sr-hero p { color: var(--foreground) !important; }
html.light .sr-hero .border-gold\/50 { border-color: oklch(0.52 0.13 60 / 60%) !important; }

/* ============================================================
 *  Header shell — black in dark mode, pure white in light mode.
 *  Footer keeps the gold→brown button gradient via .shell-gold-footer.
 * ============================================================ */
:root { --gradient-shell: linear-gradient(105deg, oklch(0.99 0.015 92) 0%, oklch(0.90 0.09 88) 20%, oklch(0.79 0.14 78) 52%, oklch(0.52 0.13 52) 100%); }

/* Dark mode: header and mobile menu keep the black shell */
.shell-gold {
  --foreground: oklch(1 0 0);
  --muted-foreground: oklch(1 0 0);
  --border: oklch(0.42 0.02 80 / 60%);
  color: var(--foreground) !important;
  background-color: oklch(0.10 0.005 80) !important;
}

/* Light mode: header and menu are pure white with black type. Gold accents stay gold. */
html.light .shell-gold {
  background-image: none !important;
  background-color: oklch(1 0 0) !important;
  --foreground: oklch(0 0 0);
  --muted-foreground: oklch(0 0 0);
  --border: oklch(0 0 0 / 22%);
  --gold: oklch(0.78 0.14 78);
  color: var(--foreground) !important;
}
html.light .shell-gold .sr-glass,
html.light .shell-gold .glass {
  background: oklch(1 0 0 / 92%) !important;
  border-color: color-mix(in oklab, var(--gold) 35%, transparent) !important;
}
html.light .shell-gold .text-gold { color: var(--gold) !important; }
html.light .shell-gold .text-foreground,
html.light .shell-gold .text-foreground\/80,
html.light .shell-gold .text-foreground\/90,
html.light .shell-gold .text-muted-foreground { color: oklch(0 0 0) !important; }
html.light .shell-gold .border-border\/60,
html.light .shell-gold .border-border\/40,
html.light .shell-gold .border-gold\/50 { border-color: oklch(0 0 0 / 22%) !important; }

/* Mobile menu: black in dark mode, white in light mode */
#sr-mobile-menu {
  background: oklch(0.12 0.008 80) !important;
  border-color: oklch(0.42 0.02 80 / 60%) !important;
  color: oklch(1 0 0) !important;
}
#sr-mobile-menu a, #sr-mobile-menu p,
#sr-mobile-menu .text-foreground\/90 { color: oklch(1 0 0) !important; }
#sr-mobile-menu .text-gold { color: oklch(0.78 0.14 78) !important; }
#sr-mobile-menu .border-border\/40,
#sr-mobile-menu .border-border\/60 { border-color: oklch(0.42 0.02 80 / 60%) !important; }

html.light #sr-mobile-menu {
  background: oklch(1 0 0) !important;
  border-color: oklch(0 0 0 / 22%) !important;
  color: oklch(0 0 0) !important;
}
html.light #sr-mobile-menu a, html.light #sr-mobile-menu p,
html.light #sr-mobile-menu .text-foreground\/90 { color: oklch(0 0 0) !important; }
html.light #sr-mobile-menu .text-gold { color: oklch(0.78 0.14 78) !important; }
html.light #sr-mobile-menu .border-border\/40,
html.light #sr-mobile-menu .border-border\/60 { border-color: oklch(0 0 0 / 22%) !important; }

/* Footer keeps the gold→brown button gradient in light mode */
.shell-gold-footer {
  --foreground: oklch(1 0 0);
  --muted-foreground: oklch(1 0 0);
  --border: oklch(0.42 0.02 80 / 60%);
  color: var(--foreground) !important;
  background-color: oklch(0.10 0.005 80) !important;
}
html.light .shell-gold-footer {
  background-image: var(--gradient-shell) !important;
  background-color: transparent !important;
  --foreground: oklch(0.17 0.03 58);
  --muted-foreground: oklch(0.30 0.04 58);
  --card-foreground: oklch(0.17 0.03 58);
  --border: oklch(0.25 0.05 55 / 32%);
  --gold: oklch(0.24 0.05 52);
  color: var(--foreground) !important;
}
html.light .shell-gold-footer .sr-glass,
html.light .shell-gold-footer .glass {
  background: color-mix(in oklab, oklch(1 0 0) 26%, transparent) !important;
  border-color: oklch(0.25 0.05 55 / 28%) !important;
}
html.light .shell-gold-footer .text-gold,
html.light .shell-gold-footer .text-foreground,
html.light .shell-gold-footer .text-foreground\/80,
html.light .shell-gold-footer .text-foreground\/90,
html.light .shell-gold-footer .text-muted-foreground { color: oklch(0.20 0.04 55) !important; }
html.light .shell-gold-footer .border-gold\/50,
html.light .shell-gold-footer .border-border\/60,
html.light .shell-gold-footer .border-border\/40 { border-color: oklch(0.25 0.05 55 / 40%) !important; }
html.light .shell-gold-footer .text-gradient-gold {
  background: linear-gradient(135deg, oklch(0.30 0.06 55), oklch(0.18 0.03 55)) !important;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.light .shell-gold-footer .bg-gold { background-color: oklch(0.24 0.05 52) !important; }
html.light .shell-gold-footer .bg-gradient-gold { background: oklch(0.20 0.04 52) !important; color: oklch(0.97 0.02 90) !important; }

/* Hero — cross-fading, gently panning background photos (CSS only) */
.sr-hero-slide { position: absolute; inset: 0; opacity: 0; animation: sr-hero-fade 30s linear infinite; }
.sr-hero-slide img { animation: sr-kenburns 18s ease-in-out infinite alternate; }
.sr-hero-slide:nth-child(1) { animation-delay: 0s; }
.sr-hero-slide:nth-child(2) { animation-delay: 6s; }
.sr-hero-slide:nth-child(3) { animation-delay: 12s; }
.sr-hero-slide:nth-child(4) { animation-delay: 18s; }
.sr-hero-slide:nth-child(5) { animation-delay: 24s; }
@keyframes sr-hero-fade {
  0% { opacity: 0; } 4% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes sr-kenburns {
  from { transform: scale(1.04); }
  to { transform: scale(1.16) translate3d(-2%, -2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sr-hero-slide { animation: none; opacity: 1; }
  .sr-hero-slide:not(:first-child) { opacity: 0; }
  .sr-hero-slide img { animation: none; }
}