/* =================================================================
 * VOODOO VODKA — BASE
 *
 * Reset, typography defaults, atmosphere.
 * The foundation under everything else.
 * ================================================================= */


/* -----------------------------------------------------------------
 * 1. MODERN RESET
 * --------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}


/* -----------------------------------------------------------------
 * 2. BODY & ATMOSPHERE
 * The base canvas. A subtle radial gradient gives the impression
 * of candlelight pooling near the top of the viewport.
 * --------------------------------------------------------------- */

body {
	font-family: var(--vv-font-body);
	font-size: var(--vv-fs-body);
	font-weight: var(--vv-fw-regular);
	line-height: var(--vv-lh-normal);
	color: var(--vv-bone);
	background: var(--vv-midnight);
	min-height: 100vh;
	overflow-x: hidden;
	position: relative;
}

/* WP admin bar offset — push nav below it when logged in */
html[lang] body.admin-bar .vv-nav { top: 32px; }
@media screen and (max-width: 782px) {
	html[lang] body.admin-bar .vv-nav { top: 46px; }
}

/* Rev4 — single-source directional light. One raking key from the upper-left,
   one faint warm (brass) note low-right, and a deep-shadow vignette that pulls
   the frame into darkness so well over half the ground reads empty. Editorial
   falloff, not even poster-flat fill. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 55% 50% at 16% -8%,
			var(--vv-cathedral-tint) 0%,
			transparent 50%),
		radial-gradient(ellipse 38% 28% at 90% 112%,
			var(--vv-gold-tint-08) 0%,
			transparent 56%),
		radial-gradient(ellipse 130% 105% at 50% 38%,
			transparent 38%,
			rgba(10,7,6,0.58) 100%);
	opacity: 0.95;
}

/* Rev4 — fine film grain + whisper of haze across the whole ground. Static
   SVG fractal-noise (CSS only, no JS budget), composited cheaply. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* Parchment Mode body class — applied per-template */
body.vv-mode-parchment {
	background: var(--vv-candle);
	color: var(--vv-cathedral-deep);
}

body.vv-mode-parchment::before {
	background:
		radial-gradient(ellipse 70% 50% at 0% 0%,
			var(--vv-gold-tint-08) 0%,
			transparent 55%),
		radial-gradient(ellipse 60% 40% at 100% 100%,
			var(--vv-cathedral-tint) 0%,
			transparent 60%);
	opacity: 0.55;
}


/* -----------------------------------------------------------------
 * 3. MEDIA ELEMENTS
 * --------------------------------------------------------------- */

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	max-width: 100%;
	height: auto;
}

img {
	border-style: none;
	font-style: italic; /* Alt text styling if image fails */
	color: var(--vv-bone-50);
}

/* Responsive WebP wrapper (vv_theme_image / webp.php emit <picture>). The
   picture box passes through so the inner <img> lays out as a direct child of
   its figure/media wrapper — keeps object-fit:cover + height:100% working. */
picture { display: contents; }


/* -----------------------------------------------------------------
 * 4. TYPOGRAPHY DEFAULTS
 *
 * Display headlines use Cinzel Decorative — wordmark family.
 * Ritual voice uses Playfair Display italic.
 * Body uses Inter.
 *
 * No bold in body text — emphasis is via italic Playfair.
 * --------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vv-font-display);
	font-weight: var(--vv-fw-bold);
	line-height: var(--vv-lh-display);
	letter-spacing: var(--vv-ls-display);
	color: var(--vv-bone);  /* Rev4 — headings default to Bone (editorial); brass reserved for marquee hero/chapter titles. Was marigold. */
}

body.vv-mode-parchment :is(h1,h2,h3,h4,h5,h6) {
	color: var(--vv-cathedral-deep);
}

/* Rev4 — on the Bone reading surface, headings must be Ink (a Bone default
   would be invisible on Bone, and the old gold was only ~1.8:1).
   Rev5 — scoped to #vv-main so the dark nav/footer are unaffected. */
body.vv-page--bone #vv-main :is(h1,h2,h3,h4,h5,h6) {
	color: var(--vv-ink);
}

/* A9-fix — exception: a .vv-phero hero title sits over a dark image + gradient
   overlay, so on a Bone page it must stay Bone (the rule above would force it to
   Ink = black-on-dark, invisible). Higher specificity than the bone-heading rule. */
body.vv-page--bone #vv-main .vv-phero__title {
	color: var(--vv-bone);
}

h1 { font-size: var(--vv-fs-h1); }
h2 { font-size: var(--vv-fs-h2); }
h3 { font-size: var(--vv-fs-h3); letter-spacing: var(--vv-ls-headline); }
h4 { font-size: var(--vv-fs-h4); letter-spacing: var(--vv-ls-meta); }
h5,
h6 { font-size: var(--vv-fs-body); letter-spacing: var(--vv-ls-meta); }

p {
	font-family: var(--vv-font-body);
	font-size: var(--vv-fs-body);
	line-height: var(--vv-lh-normal);
	color: inherit;
}

p + p {
	margin-top: var(--vv-space-4);
}


/* -----------------------------------------------------------------
 * 5. RITUAL TYPE — italics carry the brand voice
 * Used on taglines, intentions, ceremonial instructions.
 * --------------------------------------------------------------- */

em,
.vv-ritual {
	font-family: var(--vv-font-ritual);
	font-style: italic;
	font-weight: var(--vv-fw-regular);
}

strong,
.vv-strong {
	font-weight: var(--vv-fw-semibold);
	color: var(--vv-bone);
}

body.vv-mode-parchment strong { color: var(--vv-cathedral-deep); }


/* -----------------------------------------------------------------
 * 6. LINKS
 * Default link: cream, gold underline, gold on hover.
 * --------------------------------------------------------------- */

a {
	color: var(--vv-bone);
	text-decoration: none;
	background-image: linear-gradient(to right, var(--vv-gold) 0%, var(--vv-gold) 100%);
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition:
		color var(--vv-dur-fast) var(--vv-ease-out-expo),
		background-size var(--vv-dur-base) var(--vv-ease-out-expo);
}

a:hover,
a:focus-visible {
	color: var(--vv-gold-bright);
	background-size: 100% 2px;
}

body.vv-mode-parchment a {
	color: var(--vv-cathedral-deep);
}

body.vv-mode-parchment a:hover {
	color: var(--vv-cathedral);
}

/* Reset link styles for elements that don't want underline */
.vv-bare-link,
.vv-bare-link:hover {
	background-image: none;
	background-size: 0;
}


/* -----------------------------------------------------------------
 * 7. LISTS
 * --------------------------------------------------------------- */

ul, ol {
	list-style: none;
}

.vv-prose ul,
.vv-prose ol {
	padding-left: var(--vv-space-5);
	margin: var(--vv-space-4) 0;
}

.vv-prose ul { list-style: none; }
.vv-prose ul li {
	position: relative;
	padding-left: var(--vv-space-4);
	margin-bottom: var(--vv-space-2);
}
.vv-prose ul li::before {
	content: "✦";
	position: absolute;
	left: 0;
	color: var(--vv-gold);
	font-size: 0.75em;
	top: 0.45em;
}

.vv-prose ol {
	list-style: decimal-leading-zero;
	color: var(--vv-gold);
}
.vv-prose ol li {
	padding-left: var(--vv-space-2);
	margin-bottom: var(--vv-space-2);
}
.vv-prose ol li::marker {
	font-family: var(--vv-font-display);
	color: var(--vv-gold);
	font-weight: var(--vv-fw-bold);
}


/* -----------------------------------------------------------------
 * 8. BLOCKQUOTE
 * The pull quote — gold rules, italic Playfair, centered.
 * --------------------------------------------------------------- */

blockquote {
	font-family: var(--vv-font-ritual);
	font-style: italic;
	font-size: var(--vv-fs-lead);
	line-height: var(--vv-lh-snug);
	color: var(--vv-gold-bright);
	text-align: center;
	padding: var(--vv-space-6) var(--vv-space-5);
	border-top: 1px solid var(--vv-gold);
	border-bottom: 1px solid var(--vv-gold);
	margin: var(--vv-space-7) 0;
	max-width: var(--vv-max-width-prose);
	margin-inline: auto;
}

body.vv-mode-parchment blockquote {
	color: var(--vv-cathedral);
	border-color: var(--vv-gold-deep);
}


/* -----------------------------------------------------------------
 * 9. CODE
 * --------------------------------------------------------------- */

code, kbd, pre, samp {
	font-family: var(--vv-font-mono);
	font-size: 0.9em;
	color: var(--vv-gold);
	background: var(--vv-midnight-2);
	padding: 0.15em 0.4em;
	border-radius: var(--vv-radius-xs);
}

pre {
	padding: var(--vv-space-5);
	overflow-x: auto;
	line-height: var(--vv-lh-snug);
}


/* -----------------------------------------------------------------
 * 10. HORIZONTAL RULE
 * --------------------------------------------------------------- */

hr {
	border: 0;
	height: 1px;
	background: var(--vv-grad-rule);
	margin: var(--vv-space-7) 0;
}


/* -----------------------------------------------------------------
 * 11. FORM ELEMENTS — base reset
 * Component layer handles actual styling.
 * --------------------------------------------------------------- */

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
}

button {
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

textarea {
	resize: vertical;
}

::placeholder {
	color: var(--vv-bone-50);
	opacity: 1;
}

body.vv-mode-parchment ::placeholder {
	color: var(--vv-cathedral);
	opacity: 0.5;
}


/* -----------------------------------------------------------------
 * 12. SELECTION
 * Gold highlight when text is selected.
 * --------------------------------------------------------------- */

::selection {
	background: var(--vv-gold);
	color: var(--vv-midnight);
	text-shadow: none;
}


/* -----------------------------------------------------------------
 * 13. FOCUS — accessible everywhere
 * --------------------------------------------------------------- */

:focus-visible {
	/* Rev4 — focus ring stays marigold explicitly: AA-proven on both Ink and
	   Bone, where the demoted brass would fail the 3:1 UI minimum on Bone. */
	outline: 2px solid var(--vv-marigold);
	outline-offset: 3px;
	border-radius: var(--vv-radius-xs);
}


/* -----------------------------------------------------------------
 * 14. SCROLLBARS — subtle gold accent
 * --------------------------------------------------------------- */

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--vv-midnight);
}

::-webkit-scrollbar-thumb {
	background: var(--vv-gold-deep);
	border-radius: var(--vv-radius-pill);
	border: 2px solid var(--vv-midnight);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--vv-gold);
}


/* -----------------------------------------------------------------
 * 15. ACCESSIBILITY UTILITIES
 * --------------------------------------------------------------- */

.vv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vv-skip-link {
	position: absolute;
	top: -100px;
	left: var(--vv-space-4);
	background: var(--vv-gold);
	color: var(--vv-midnight);
	padding: var(--vv-space-3) var(--vv-space-5);
	font-family: var(--vv-font-body);
	font-weight: var(--vv-fw-semibold);
	letter-spacing: var(--vv-ls-meta);
	text-transform: uppercase;
	font-size: var(--vv-fs-small);
	z-index: var(--vv-z-toast);
	transition: top var(--vv-dur-fast) var(--vv-ease-out-expo);
}

.vv-skip-link:focus {
	top: var(--vv-space-4);
}


/* -----------------------------------------------------------------
 * 16. PRINT
 * Strip atmosphere, ensure readability.
 * --------------------------------------------------------------- */

@media print {
	body,
	body::before {
		background: white !important;
		color: black !important;
	}
	body::after { display: none !important; }  /* Rev4 — no film grain in print */
	* {
		box-shadow: none !important;
		text-shadow: none !important;
	}
}