/* Octzen Showcase: shared tokens, resets and buttons.
   Every widget root carries .ocs-root. Component rules are written as
   ".widget .part" (two classes) so they beat Elementor's kit rules such as
   ".elementor-kit-5 h1" and theme link/button styles. */

.ocs-root {
	--ocs-bg: #07090e;
	--ocs-surface: #0f131b;
	--ocs-surface-2: #161b26;
	--ocs-line: rgba(255, 255, 255, 0.09);
	--ocs-line-strong: rgba(255, 255, 255, 0.18);
	--ocs-text: #eef1f7;
	--ocs-muted: #98a1b5;
	--ocs-accent: #ffb347;
	--ocs-accent-ink: #1a1000;
	--ocs-cool: #7b8cff;
	--ocs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ocs-gutter: clamp(16px, 4vw, 40px);
	--ocs-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

	/* Space taken by a fixed header: the Octzen header widget publishes
	   --ocs-header-bottom on <html>; without it the widget's own setting is used. */
	--ocs-offset: var(--ocs-header-bottom, calc(var(--ocs-hdr, 72px) + var(--ocs-adminbar, 0px)));

	box-sizing: border-box;
	color: var(--ocs-text);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

/* WordPress admin bar: fixed above 600px wide, scrolls away on small phones. */
body.admin-bar {
	--ocs-adminbar: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--ocs-adminbar: 46px;
	}
}

@media (max-width: 600px) {
	body.admin-bar {
		--ocs-adminbar: 0px;
	}
}

.ocs-root *,
.ocs-root *::before,
.ocs-root *::after {
	box-sizing: inherit;
}

/* zero-specificity reset so component classes always win */
:where(.ocs-root) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) {
	margin: 0;
	padding: 0;
}

:where(.ocs-root) :where(ul, ol) {
	list-style: none;
}

:where(.ocs-root) :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

.ocs-root a,
.ocs-root a:hover,
.ocs-root a:focus,
.ocs-root a:active {
	text-decoration: none;
}

/* Themes style bare <button> elements (pink hover backgrounds, borders). Reset them
   here; component rules use "button.class" so they still win. */
.ocs-root button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ocs-root button:hover,
.ocs-root button:focus,
.ocs-root button:active {
	background: none;
	color: inherit;
	box-shadow: none;
}

.ocs-root a:focus-visible,
.ocs-root button:focus-visible {
	outline: 2px solid var(--ocs-accent);
	outline-offset: 3px;
}

/* icons rendered by Elementor (font or inline svg) */
.ocs-i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.ocs-i svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* scroll lock while a full-screen menu is open */
html.ocs-lock,
html.ocs-lock body {
	overflow: hidden;
}

/* ------------------------------------------------------------------ Buttons */

.ocs-root .ocs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--ocs-btn-radius, 999px);
	font-weight: 600; font-size: 0.95rem; line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.35s var(--ocs-ease), background-color 0.25s, border-color 0.25s, color 0.25s;
}

.ocs-root .ocs-btn--solid,
.ocs-root .ocs-btn--solid:focus {
	background: var(--btn-accent, var(--ocs-accent));
	color: var(--ocs-accent-ink);
}

.ocs-root .ocs-btn--solid:hover {
	background: var(--btn-accent, var(--ocs-accent));
	transform: translateY(-2px);
	color: var(--ocs-accent-ink);
}

.ocs-root .ocs-btn--ghost,
.ocs-root .ocs-btn--ghost:focus {
	border-color: var(--ocs-line-strong);
	color: var(--ocs-text);
	background: transparent;
}

.ocs-root .ocs-btn--ghost:hover {
	border-color: var(--btn-accent, var(--ocs-accent));
	color: var(--ocs-text);
	background: transparent;
	transform: translateY(-2px);
}

@keyframes ocs-pop {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

@keyframes ocs-rise {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ocs-root .ocs-btn {
		transition-duration: 0.01s;
	}
}

/* use the site's own fonts everywhere */
.ocs-root button, .ocs-root input, .ocs-root select, .ocs-root textarea { font-family: inherit; }

/* themes love to add bullets to lists: none of our lists want them */
.ocs-root ul, .ocs-root ol, .ocs-root li { list-style: none; }
.ocs-root li::marker { content: ""; }

/* buttons stay compact on phones */
@media (max-width: 767px) {
	.ocs-root .ocs-btn { min-height: 44px; padding: 0 20px; font-size: 0.9rem; gap: 8px; }
}

/* ------------------------------------------------------------------
   Entrance reveal (classes are added by core.js only)
   ------------------------------------------------------------------ */
.ocs-root .ocs-rv-el.ocs-rv-el {
	opacity: 0;
	transform: translate3d(0, 26px, 0) scale(0.985);
	filter: blur(5px);
	transition: opacity 0.7s ease, transform 0.85s var(--ocs-ease), filter 0.7s ease;
	will-change: opacity, transform;
}

.ocs-root .ocs-rv-el.ocs-rv-el.is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* phones and tablets: no blur, shorter travel, so scrolling stays smooth */
.ocs-rv-lite .ocs-rv-el.ocs-rv-el {
	transform: translate3d(0, 18px, 0);
	filter: none;
	transition: opacity 0.6s ease, transform 0.7s var(--ocs-ease);
}