/*
 * Open Veil — refinement layer for the compiled live design.
 * Loaded after the build's own stylesheet when Settings → General →
 * "Refined look" is on. It changes presentation only: no layout of the
 * build is removed, so turning it off returns the exact live design.
 */
:root {
  --ovf-gold: oklch(74% .13 80);
  --ovf-gold-deep: oklch(60% .12 75);
  --ovf-plum: oklch(28% .11 315);
  --ovf-ink: oklch(22% .05 315);
  --ovf-soft-shadow: 0 1px 2px rgb(40 12 50 / .05), 0 14px 34px -22px rgb(40 12 50 / .35);
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: oklch(79% .13 85 / .45); color: var(--ovf-ink); }
:focus-visible { outline: 3px solid var(--ovf-gold) !important; outline-offset: 3px !important; border-radius: 6px; }

/* ---------------------------------------------------------- typography */
h1, h2, h3, .font-display { font-optical-sizing: auto; }
main h1 { font-weight: 600; letter-spacing: -.015em; }
main h2 { font-weight: 600; letter-spacing: -.01em; line-height: 1.12; font-size: clamp(2rem, 4.2vw, 2.9rem) !important; }
main h3.font-display, main h3 { letter-spacing: -.005em; }
main section p { text-wrap: pretty; }
main section p.leading-relaxed, main section .max-w-2xl, main section .max-w-3xl { max-width: 64ch; }
main section p:not([class*="text-xs"]) { line-height: 1.75; }

/* Section labels: readable size, gentle tracking, gold rule instead of shouting caps */
main p[class*="tracking-[0.24em]"], main p[class*="tracking-[0.2"] {
  display: inline-flex; align-items: center; gap: .7rem;
  letter-spacing: .14em !important; font-size: .78rem !important; font-weight: 700 !important;
  color: var(--ovf-gold-deep);
}
main p[class*="tracking-[0.24em]"]::before, main p[class*="tracking-[0.2"]::before {
  content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .8;
}
.bg-plum main p[class*="tracking-"], section.bg-plum p[class*="tracking-[0.24em]"] { color: oklch(84% .1 85); }

/* --------------------------------------------------------------- hero */
section.bg-plum.isolate h1 { text-shadow: 0 2px 24px rgb(20 0 30 / .35); }
section.bg-plum.isolate::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgb(37 8 49 / .78) 0%, rgb(37 8 49 / .45) 45%, rgb(37 8 49 / 0) 75%);
}

/* ------------------------------------------------------------- buttons */
main a.inline-flex[class*="rounded"], main button[class*="rounded"], header a[href$="/donate"] {
  font-weight: 600; letter-spacing: .01em;
}
main a[class*="bg-gold"], main a[class*="variant-gold"], a[class*="bg-gold"] { box-shadow: 0 8px 22px -12px oklch(60% .12 75 / .8); }
main a[class*="bg-gold"]:hover { filter: brightness(1.05); }

/* --------------------------------------------------------------- cards */
.hover-lift.rounded-xl, main [class*="rounded-xl"][class*="border"][class*="bg-card"] {
  border-color: oklch(52% .185 317 / .12) !important;
  box-shadow: var(--ovf-soft-shadow) !important;
  position: relative; overflow: hidden;
}
.hover-lift.rounded-xl::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--ovf-gold), oklch(52% .185 317 / .6));
}
.hover-lift.rounded-xl:hover { border-color: oklch(74% .13 80 / .55) !important; }
main img[class*="rounded"] { box-shadow: var(--ovf-soft-shadow); }

/* ------------------------------------------------------- header & nav */
header.sticky { box-shadow: 0 1px 0 oklch(91% .02 320 / .7); }
header nav a[data-status="active"] { box-shadow: inset 0 -2px 0 var(--ovf-gold); }

/* -------------------------------------------------------------- footer */
footer.bg-plum { background-image: radial-gradient(60rem 22rem at 100% 0%, oklch(52% .185 317 / .22), transparent 60%); }
footer.bg-plum h2 { letter-spacing: .14em !important; }
footer.bg-plum a:hover { color: oklch(84% .1 85) !important; }

/* --------------------------------------------------- consent banner */
div.fixed.inset-x-0.bottom-0.z-50.border-t {
  inset: auto auto 1rem 1rem !important; right: auto !important; max-width: min(26rem, calc(100vw - 2rem));
  border: 1px solid oklch(91% .02 320) !important; border-radius: 1rem; padding: 1rem 1.1rem !important;
  box-shadow: 0 24px 60px -24px rgb(40 12 50 / .45) !important;
}
div.fixed.inset-x-0.bottom-0.z-50.border-t > div { flex-direction: column !important; align-items: stretch !important; gap: .75rem !important; }

/* ------------------------------------------------- additions (enhance.js) */
.ovf-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 auto; padding: 1.25rem 1rem 2rem; max-width: 72rem; font: 600 .9rem/1.2 "Plus Jakarta Sans", system-ui, sans-serif; color: var(--ovf-ink);
}
.ovf-share span { margin-right: .35rem; }
.ovf-share a, .ovf-share button {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border-radius: 999px;
  border: 1px solid oklch(91% .02 320); background: #fff; color: var(--ovf-ink); text-decoration: none; cursor: pointer; font: inherit; font-weight: 600;
}
.ovf-share a:hover, .ovf-share button:hover { border-color: var(--ovf-gold); color: oklch(28% .11 315); }
.ovf-share svg { width: 16px !important; height: 16px !important; flex: none; }
.ovf-top svg, .ovf-give svg { width: 20px !important; height: 20px !important; flex: none; display: block; }
.ovf-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 0; background: oklch(28% .11 315); color: #fff; box-shadow: var(--ovf-soft-shadow); cursor: pointer;
  display: grid; place-items: center; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.ovf-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.ovf-give {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 39; display: none;
  align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; border-radius: 999px;
  background: oklch(28% .11 315); color: #fff !important; font: 700 1rem "Plus Jakarta Sans", system-ui, sans-serif; text-decoration: none;
  box-shadow: 0 16px 40px -16px rgb(40 12 50 / .6);
}
@media (max-width: 640px) {
  .ovf-give.is-shown { display: flex; }
  .ovf-top { bottom: 4.5rem; }
  main h2 { font-size: clamp(1.75rem, 7vw, 2.2rem) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ovf-top { transition: none; }
}
@media print { .ovf-share, .ovf-top, .ovf-give { display: none !important; } }
