/*
 * Global stylesheet: reset, design tokens, base typography, layout
 * containers, header/footer, buttons/forms, and the default post loop.
 * Anything specific to one component belongs in that component's own
 * style.css instead (see template-parts/components/*), which is only
 * loaded on pages that actually use it.
 */

/* ---------- Design tokens ---------- */
:root {
	--zenith-color-primary: #c9a227;
	--zenith-color-primary-contrast: #12100d;
	--zenith-color-text: #f6f1e7;
	--zenith-color-text-muted: #a89f8e;
	--zenith-color-surface: #12100d;
	--zenith-color-surface-alt: #1c1811;
	--zenith-color-border: #332d22;

	--zenith-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--zenith-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
	--zenith-font-size-base: 1rem;
	--zenith-font-size-lg: 1.25rem;
	--zenith-font-size-xl: 1.75rem;
	--zenith-font-size-2xl: 2.25rem;
	--zenith-font-size-3xl: 2.75rem;

	--zenith-space-xs: 0.5rem;
	--zenith-space-sm: 0.75rem;
	--zenith-space-md: 1.25rem;
	--zenith-space-lg: 2rem;
	--zenith-space-xl: 3rem;
	--zenith-space-2xl: 4rem;
	--zenith-space-3xl: 6rem;

	--zenith-radius-md: 0.5rem;
	--zenith-container-width: 72rem;
}

/* ---------- Reset ---------- */
/* The off-canvas mobile menu panel (.zenith-site-nav__menu-wrap) sits at
   right:0 with position:fixed and is shifted off-screen via
   transform:translateX(100%) rather than display:none, so the slide-in
   transition has something to animate. Chromium still counts a
   transformed-away fixed element's untransformed box in the page's
   scrollable overflow, which without this would widen the mobile layout
   viewport and let the whole page scroll horizontally even though nothing
   is visibly overflowing. html/body clip that stray overflow instead of
   ever showing it.

   `clip`, not `hidden`: setting overflow-x alone forces the browser to
   compute overflow-y as non-visible too (CSS Overflow spec's visible/
   non-visible pairing rule) -- with `hidden` that turns html/body into a
   scroll-container box that every `position: sticky` element on the site
   gets confined to, silently breaking sticky (pinned headers, the Scroll
   Story element's pinned image pane, anything future) everywhere on the
   site. `overflow: clip` clips the same stray horizontal overflow without
   establishing a scroll container, so it doesn't drag overflow-y along
   with it. `hidden` is kept as a same-property fallback for the rare
   browser that doesn't understand `clip` (invalid values are dropped, so
   the second declaration silently wins wherever it's supported). */
html, body {
	overflow-x: hidden;
	overflow-x: clip;
}

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

body, h1, h2, h3, h4, p, figure, blockquote, ol, ul {
	margin: 0;
}

img, picture, video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- Base ---------- */
body {
	font-family: var(--zenith-font-body);
	font-size: var(--zenith-font-size-base);
	line-height: 1.6;
	color: var(--zenith-color-text);
	background: var(--zenith-color-surface);
}

h1, h2, h3, h4 {
	line-height: 1.2;
	font-family: var(--zenith-font-heading, var(--zenith-font-body));
}

/* Same scale several components (hero title, feature-grid card titles,
   etc.) already build on — see class-theme-options.php's Theme Options
   -> Typography h1-h4 fields, which drive these same four variables. */
h1 { font-size: var(--zenith-font-size-3xl); }
h2 { font-size: var(--zenith-font-size-2xl); }
h3 { font-size: var(--zenith-font-size-xl); }
h4 { font-size: var(--zenith-font-size-lg); }

a {
	color: inherit;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.zenith-skip-link:focus {
	position: fixed;
	top: var(--zenith-space-sm);
	left: var(--zenith-space-sm);
	width: auto;
	height: auto;
	clip: auto;
	background: var(--zenith-color-primary);
	color: var(--zenith-color-primary-contrast);
	padding: var(--zenith-space-xs) var(--zenith-space-sm);
	border-radius: var(--zenith-radius-md);
	z-index: 100;
}

/* ---------- Layout ---------- */
.zenith-container {
	max-width: var(--zenith-container-width);
	margin-inline: auto;
	padding-inline: var(--zenith-space-md);
}

/* ---------- Buttons ---------- */
.zenith-button {
	display: inline-block;
	padding: var(--zenith-space-sm) var(--zenith-space-lg);
	background: var(--zenith-color-primary);
	color: var(--zenith-color-primary-contrast);
	text-decoration: none;
	border-radius: var(--zenith-radius-md);
	font-weight: 600;
}

.zenith-button--inverse {
	background: var(--zenith-color-primary-contrast);
	color: var(--zenith-color-primary);
}

/* ---------- Site header ---------- */
.zenith-site-header {
	background: var(--zenith-header-bg, var(--zenith-color-surface));
	color: var(--zenith-header-text, var(--zenith-color-text));
	border-bottom: var(--zenith-header-border-width, 1px) solid var(--zenith-header-border-color, var(--zenith-color-border));
}

.zenith-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--zenith-space-sm);
	min-height: var(--zenith-header-height, auto);
}

.zenith-site-title {
	font-family: var(--zenith-font-heading, var(--zenith-font-body));
	font-size: var(--zenith-font-size-lg);
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.02em;
}

.zenith-site-nav__menu {
	display: flex;
	gap: var(--zenith-space-md);
	list-style: none;
	padding: 0;
	margin: 0;
}

.zenith-site-nav__menu li {
	position: relative;
}

.zenith-site-nav__menu a {
	text-decoration: none;
	text-transform: var(--zenith-header-menu-text-transform, uppercase);
	font-size: var(--zenith-header-menu-font-size, 0.78rem);
	font-weight: var(--zenith-header-menu-font-weight, 600);
	letter-spacing: 0.08em;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.zenith-site-nav__menu a:hover {
	color: var(--zenith-header-menu-hover-color, var(--zenith-color-primary));
	border-color: var(--zenith-header-menu-hover-color, var(--zenith-color-primary));
}

/* ---------- Submenus (desktop: hover/focus dropdown) ---------- */
.zenith-site-nav__menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 12rem;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--zenith-color-surface);
	border: 1px solid var(--zenith-color-border);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
	z-index: 60;
}

.zenith-site-nav__menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.zenith-site-nav__menu li:hover > .sub-menu,
.zenith-site-nav__menu li:focus-within > .sub-menu,
.zenith-site-nav__menu li.is-submenu-open > .sub-menu {
	display: block;
}

.zenith-site-nav__menu .sub-menu a {
	display: block;
	padding: 0.5rem 1rem;
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
	border-bottom: none;
	white-space: nowrap;
}

/* ---------- Mega menu (add the "has-mega-menu" CSS class to a top-level
   menu item via Appearance > Menus -- enable "CSS Classes" under Screen
   Options if it isn't shown yet, a stock WordPress core field) ---------- */
.zenith-site-nav__menu .menu-item.has-mega-menu {
	position: static;
}

.zenith-site-nav__menu .menu-item.has-mega-menu > .sub-menu {
	left: 0;
	right: 0;
	width: 100%;
	min-width: 0;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.5rem 2rem;
	padding: 1.5rem var(--zenith-space-md);
}

.zenith-site-nav__menu .menu-item.has-mega-menu:hover > .sub-menu,
.zenith-site-nav__menu .menu-item.has-mega-menu:focus-within > .sub-menu,
.zenith-site-nav__menu .menu-item.has-mega-menu.is-submenu-open > .sub-menu {
	display: grid;
}

.zenith-site-nav__menu .menu-item.has-mega-menu .sub-menu .sub-menu {
	position: static;
	border: none;
	box-shadow: none;
	padding: 0;
}

.zenith-site-nav__submenu-toggle {
	display: none;
}

/* ---------- Mobile toggle (hamburger) ---------- */
/* The icon itself stays a compact 1.5rem x 1.25rem (unchanged look), but
   the button's own hit area is padded out to the 44x44px minimum touch
   target size (WCAG 2.5.5 / mobile platform guidelines) via min-width/
   min-height + flex centering, rather than sizing the button to the icon. */
.zenith-site-nav__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
	color: var(--zenith-mobile-menu-toggle-color, var(--zenith-color-text));
}

.zenith-site-nav__toggle-bar {
	position: relative;
	display: block;
	width: 1.5rem;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.zenith-site-nav__toggle-bar::before,
.zenith-site-nav__toggle-bar::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.zenith-site-nav__toggle-bar::before {
	top: -0.5rem;
}

.zenith-site-nav__toggle-bar::after {
	top: 0.5rem;
}

.zenith-site-nav__toggle[aria-expanded="true"] .zenith-site-nav__toggle-bar {
	background: transparent;
}

.zenith-site-nav__toggle[aria-expanded="true"] .zenith-site-nav__toggle-bar::before {
	top: 0;
	transform: rotate(45deg);
}

.zenith-site-nav__toggle[aria-expanded="true"] .zenith-site-nav__toggle-bar::after {
	top: 0;
	transform: rotate(-45deg);
}

.zenith-site-nav__close {
	display: none;
	color: var(--zenith-mobile-menu-toggle-color, var(--zenith-color-text));
}

/* When a distinct Mobile Menu is assigned (Appearance -> Menus), header.php
   renders two separate wp_nav_menu() outputs sharing this same base class:
   one desktop-only, one mobile-only. Without a distinct mobile menu
   assigned, only one (unmodified) .zenith-site-nav__menu-wrap exists at
   all, so neither of these modifier rules ever matches anything. */
.zenith-site-nav__menu-wrap--mobile-only {
	display: none;
}

body.zenith-nav-open {
	overflow: hidden;
}

@media (max-width: 48rem) {
	.zenith-site-nav__toggle {
		display: flex;
	}

	.zenith-site-nav__backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
		z-index: 90;
	}

	.zenith-site-nav__backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Always laid out (not display:none) so the transform below can
	   actually animate sliding in/out, rather than the panel just
	   appearing/disappearing instantly. */
	.zenith-site-nav__menu-wrap {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(85vw, 320px);
		overflow-y: auto;
		background: var(--zenith-color-surface);
		padding: var(--zenith-space-lg) var(--zenith-space-md) var(--zenith-space-md);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		z-index: 95;
	}

	.zenith-site-nav__menu-wrap.is-open {
		transform: translateX(0);
	}

	.zenith-site-nav__menu-wrap--desktop-only {
		display: none;
	}

	.zenith-site-nav__menu-wrap--mobile-only {
		display: block;
	}

	.zenith-site-nav__close {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		min-height: 2.75rem;
		margin: 0 -0.5rem var(--zenith-space-md) auto;
		background: none;
		border: 0;
		font-size: 1.75rem;
		line-height: 1;
		cursor: pointer;
	}

	.zenith-site-nav__menu {
		flex-direction: column;
		gap: 0;
	}

	.zenith-site-nav__menu li {
		border-bottom: 1px solid var(--zenith-color-border);
	}

	.zenith-site-nav__menu a {
		display: block;
		padding: var(--zenith-space-sm) 0;
		color: var(--zenith-mobile-menu-item-color, var(--zenith-color-text));
	}

	.zenith-site-nav__menu a:hover,
	.zenith-site-nav__menu a:focus {
		color: var(--zenith-mobile-menu-item-hover-color, var(--zenith-color-primary));
	}

	/* Hover/focus-within dropdowns don't make sense once the whole menu is
	   already a vertical off-canvas list -- submenus become inline
	   accordions instead, opened by the injected caret button (see
	   main.js) since a tap on the link itself should still navigate. */
	.zenith-site-nav__menu .sub-menu,
	.zenith-site-nav__menu li:hover > .sub-menu,
	.zenith-site-nav__menu li:focus-within > .sub-menu,
	.zenith-site-nav__menu .menu-item.has-mega-menu > .sub-menu {
		display: none;
		position: static;
		grid-template-columns: none;
		border: none;
		box-shadow: none;
		width: auto;
		min-width: 0;
		padding-left: var(--zenith-space-md);
	}

	.zenith-site-nav__menu li.is-submenu-open > .sub-menu {
		display: block;
	}

	.zenith-site-nav__menu .menu-item-has-children > a {
		padding-right: 2rem;
	}

	.zenith-site-nav__submenu-toggle {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 2rem;
		background: none;
		border: 0;
		cursor: pointer;
		font-size: 0.7rem;
	}

	.zenith-site-nav__submenu-toggle[aria-expanded="true"] {
		transform: scaleY(-1);
	}
}

/* ---------- Header layout variants (Theme Options: Header Layout / Sticky) ---------- */
.zenith-header--sticky .zenith-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--zenith-header-bg, var(--zenith-color-surface)) 92%, transparent);
}

/* backdrop-filter lives on a pseudo-element rather than the header itself:
   filter/backdrop-filter on an element creates a new containing block for
   any position:fixed descendant (same as transform would) -- with it on
   .zenith-site-header directly, the off-canvas mobile menu panel (a
   fixed-position element nested inside this header, see
   .zenith-site-nav__menu-wrap) gets trapped inside the header's own small
   box instead of covering the full viewport when opened. */
.zenith-header--sticky .zenith-site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(6px);
}

.zenith-header--centered .zenith-site-header__inner {
	flex-direction: column;
	text-align: center;
	gap: var(--zenith-space-sm);
}

/* Transparent WITHOUT sticky: header is taken out of flow entirely so it
   can float over the hero with zero reserved space of its own -- see the
   .zenith-site-main rule right below for how that reserved space gets
   recreated for every *other* (non-hero) page. */
.zenith-header--transparent:not(.zenith-header--sticky) .zenith-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding-top: 20px;
	background: transparent;
	border-bottom-color: transparent;
}

/* Taking the header out of flow (above) means <main> would otherwise
   start at the very top of the viewport with nothing reserving the
   header's own height -- fine for a hero specifically designed to sit
   behind it (opts in via .zenith-hero-overlay, which pulls itself back
   up by the exact same amount), but on any other page this is what was
   causing the transparent header to visibly overlap/crush whatever
   content came first (a page title, for example) instead of floating
   cleanly above it. 5.5rem comfortably covers the header at its default
   size; --zenith-header-height (Theme Options -> Header) overrides it
   when a site has configured a taller/shorter header explicitly. The
   extra 20px matches this header's own padding-top above -- without it,
   the reserved space would be 20px short of the header's actual visual
   height. Only for the non-sticky case: a sticky header (below) stays in
   flow and already reserves this same space on its own, so adding it
   again here would double-reserve it. */
.zenith-header--transparent:not(.zenith-header--sticky) .zenith-site-main {
	padding-top: calc(var(--zenith-header-height, 5.5rem) + 20px);
}

/* Transparent AND sticky together: position:absolute (above) would win
   this exact fight against .zenith-header--sticky's position:sticky at
   equal selector specificity purely by being declared later in this file
   -- silently discarding "sticky" the instant both options were turned on
   together, which is the bug this rule exists to fix. Sticky needs the
   header to stay in normal flow (so it has a resting position to scroll
   away from before pinning), so this keeps it transparent at rest --
   still floating over a hero exactly like the non-sticky case, since its
   resting flow position is the very top of the page either way -- and
   lets .is-header-scrolled (toggled by main.js once the page has
   scrolled roughly one header-height) fade in the same frosted-glass
   background .zenith-header--sticky alone already uses, so the pinned nav
   stays readable over whatever content is scrolled underneath it instead
   of staying see-through forever. */
.zenith-header--transparent.zenith-header--sticky .zenith-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: transparent;
	border-bottom-color: transparent;
	transition: background 0.25s ease;
}

.zenith-header--transparent.zenith-header--sticky.is-header-scrolled .zenith-site-header {
	background: color-mix(in srgb, var(--zenith-header-bg, var(--zenith-color-surface)) 92%, transparent);
	border-bottom-color: var(--zenith-header-border-color, var(--zenith-color-border));
}

.zenith-header--transparent.zenith-header--sticky.is-header-scrolled .zenith-site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(6px);
}

/* Two hero sources opt into sitting behind the transparent header, each
   handled separately because they're structurally different and never
   nested inside each other:
   - .zenith-hero-overlay: the theme's own generic Hero component
     (template-parts/components/hero/), rendered directly under
     .zenith-site-main with no wrapper in between.
   - .bdhc-cinema-hero: the bdh-cinema plugin's element, which -- when
     placed via Nova Builder -- sits several nested wrapper divs deep
     (.nova-section > .nova-section__inner > .nova-column > .nova-element),
     one of which (.nova-column) has its own padding-block that would stop
     a margin on the hero itself from ever reaching all the way up, hence
     targeting the outer .nova-section via :has() instead. */
.zenith-header--transparent .zenith-hero-overlay {
	margin-top: calc(-1 * (var(--zenith-header-height, 5.5rem) + 20px));
}

.zenith-header--transparent .nova-section:has(.bdhc-cinema-hero) {
	margin-top: calc(-1 * (var(--zenith-header-height, 5.5rem) + 20px));
}

/* ---------- Site footer ---------- */
.zenith-site-footer {
	background: var(--zenith-footer-bg, var(--zenith-color-surface-alt));
	color: var(--zenith-footer-text, inherit);
	margin-top: var(--zenith-space-2xl);
}

.zenith-site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--zenith-space-md);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--zenith-space-lg);
}

.zenith-site-footer__copy {
	color: var(--zenith-color-text-muted);
	font-size: 0.875rem;
	margin-top: var(--zenith-space-xs);
}

.zenith-site-footer__menu {
	display: flex;
	gap: var(--zenith-space-md);
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ---------- Footer widget areas (Theme Options: Footer Widget Columns) ---------- */
.zenith-site-footer__widgets {
	display: grid;
	gap: var(--zenith-space-lg);
	padding-block: var(--zenith-space-lg);
	border-top: 1px solid var(--zenith-color-border);
	/* Blank by default (transparent/inherit) so the widgets row keeps
	   blending into the page background exactly as before -- once a
	   custom footer color IS set, it extends here too so the whole footer
	   region (widgets + bar) reads as one coherent block. */
	background: var(--zenith-footer-bg, transparent);
	color: var(--zenith-footer-text, inherit);
}

.zenith-site-footer__widgets--cols-1 { grid-template-columns: 1fr; }
.zenith-site-footer__widgets--cols-2 { grid-template-columns: repeat(2, 1fr); }
.zenith-site-footer__widgets--cols-3 { grid-template-columns: repeat(3, 1fr); }
.zenith-site-footer__widgets--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 48rem) {
	.zenith-site-footer__widgets {
		grid-template-columns: 1fr;
	}
}

/* ---------- Default post loop (Theme Options: Blog Layout) ---------- */
.zenith-entry-list {
	display: grid;
	grid-template-columns: repeat(var(--zenith-blog-columns, auto-fit), minmax(16rem, 1fr));
	gap: var(--zenith-space-lg);
	padding-block: var(--zenith-space-xl);
}

.zenith-entry-list--list {
	grid-template-columns: 1fr;
	max-width: 48rem;
	margin-inline: auto;
}

.zenith-entry {
	display: flex;
	flex-direction: column;
	background: var(--zenith-color-surface-alt);
	border: 1px solid var(--zenith-color-border);
	border-radius: var(--zenith-radius-md);
	overflow: hidden;
}

.zenith-entry__thumbnail {
	display: block;
	margin: 0;
}

.zenith-entry__thumbnail img {
	display: block;
	width: 100%;
	height: 12rem;
	object-fit: cover;
}

.zenith-entry__body {
	padding: var(--zenith-space-md) var(--zenith-space-lg) var(--zenith-space-lg);
}

.zenith-entry-list--list .zenith-entry {
	display: grid;
	grid-template-columns: 12rem 1fr;
	gap: var(--zenith-space-md);
}

.zenith-entry-list--list .zenith-entry__thumbnail {
	margin: 0;
}

@media (max-width: 40rem) {
	.zenith-entry-list--list .zenith-entry {
		grid-template-columns: 1fr;
	}

	/* A fixed column count (2-5) would otherwise force cards to overflow
	   on a narrow screen -- "auto" already collapses gracefully on its
	   own via auto-fit, so this only ever has to correct a fixed count. */
	.zenith-entry-list {
		grid-template-columns: 1fr;
	}
}

.zenith-entry__title a {
	text-decoration: none;
}

.zenith-entry__meta {
	color: var(--zenith-color-text-muted);
	font-size: 0.875rem;
}

.zenith-entry__read-more {
	display: inline-block;
	margin-top: var(--zenith-space-sm);
	padding: 0.4em 1.1em;
	font-size: 0.875rem;
}

/* ---------- Static page ---------- */
.zenith-page {
	max-width: 42rem;
	margin-inline: auto;
	padding-block: var(--zenith-space-xl);
}

/* ---------- 404 / no results ---------- */
.zenith-404,
.zenith-no-results {
	max-width: 32rem;
	margin-inline: auto;
	padding-block: var(--zenith-space-2xl);
	text-align: center;
}

/* ---------- Comments ---------- */
.zenith-comments {
	max-width: 42rem;
	margin-inline: auto;
	padding-block: var(--zenith-space-xl);
}

.zenith-comments__list {
	list-style: none;
	padding: 0;
}

/* ---------- Scroll animations ---------- */
/* Theme Options > Animations (includes/theme-options/defaults.php) drives
   every value here through the --zenith-anim-* custom properties (see
   zenith_output_theme_options_css()) — nothing below is a fixed choice.
   Only elements template-parts/content/content.php and footer.php actually
   opt into this (via zenith_animate_class()/zenith_animate_delay_attr(),
   see includes/animations.php); Nova Builder-authored content keeps using
   its own separate, already-editor-controlled per-element Animation
   setting instead of this, so the two systems never compete over the same
   element. assets/js/animations.js adds --in once an element scrolls into
   view; nothing above ever touches nova-animate/nova-animate--* — see
   nova-builder/assets/css/frontend.css for that half of the pairing. */
.zenith-animate {
	opacity: 0;
	transition: opacity var(--zenith-anim-duration, 600ms) ease, transform var(--zenith-anim-duration, 600ms) ease;
}

.zenith-animate--fade-up { transform: translateY(var(--zenith-anim-distance, 28px)); }
.zenith-animate--fade-in { transform: none; }
.zenith-animate--slide-left { transform: translateX(var(--zenith-anim-distance, 28px)); }
.zenith-animate--slide-right { transform: translateX(calc(var(--zenith-anim-distance, 28px) * -1)); }
.zenith-animate--zoom-in { transform: scale(0.94); }

.zenith-animate--in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.zenith-animate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Defends against a full-page cache plugin still serving markup that was
   generated before "Enable Scroll Animations" was switched off (see the
   zenith-animations-off body class in zenith_theme_options_body_class()) —
   without this, already-cached pages could show permanently-invisible
   content until every cached page is regenerated. */
body.zenith-animations-off .zenith-animate {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ---------- Hover effects ---------- */
/* Gated on Theme Options > Animations > "Modern Hover Effects" — see the
   zenith-hover-effects body class in zenith_theme_options_body_class().
   Pure :hover transitions, so this is safe to apply universally (including
   to Nova Builder-rendered instances of these same classes) with no risk
   of conflicting with either animation system's scroll-reveal state above:
   nothing here touches opacity or an element's resting transform. */
body.zenith-hover-effects .zenith-button {
	transition: transform var(--zenith-anim-duration, 600ms) ease, box-shadow var(--zenith-anim-duration, 600ms) ease;
}

body.zenith-hover-effects .zenith-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

body.zenith-hover-effects .zenith-entry {
	transition: transform var(--zenith-anim-duration, 600ms) ease, box-shadow var(--zenith-anim-duration, 600ms) ease;
}

body.zenith-hover-effects .zenith-entry:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

body.zenith-hover-effects .zenith-entry__thumbnail {
	overflow: hidden;
}

body.zenith-hover-effects .zenith-entry__thumbnail img {
	transition: transform var(--zenith-anim-duration, 600ms) ease;
}

body.zenith-hover-effects .zenith-entry:hover .zenith-entry__thumbnail img {
	transform: scale(1.06);
}