/*
 * Scoped, high-specificity + !important rules throughout: page-builder
 * themes commonly ship global h1/a/button styling that would otherwise
 * override this card's fonts, colors, and shapes.
 */

/* Force the WP admin toolbar (and the top spacing WordPress reserves
   for it) fully out of the way on the standalone template. This
   stylesheet only loads on pages that use this plugin, so it's safe to
   target these globally-scoped selectors here. */
html.wp-toolbar {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

#wpadminbar {
	display: none !important;
}

.lib-wrap {
	--lib-text: #ffffff;
	--lib-secondary-text: #f0e9dd;
	--lib-btn-bg: #f0e9dd;
	--lib-btn-text: #1a1a1a;
	--lib-accent-bg: #3e4a2e;
	--lib-accent-text: #ffffff;
	--lib-overlay: 0.55;
	--lib-font-title: 'Playfair Display', Georgia, serif;
	--lib-font-tagline: 'Dancing Script', cursive;
	--lib-font-body: 'Jost', sans-serif;
	--lib-radius: 6px;

	display: flex;
	justify-content: center;
	font-family: var(--lib-font-body), -apple-system, BlinkMacSystemFont, sans-serif !important;
	box-sizing: border-box;
}

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

.lib-wrap--full {
	min-height: 100vh;
	padding: 0;
	background: #000;
	position: relative;
}

/* Fills the space beside the centered card on desktop with a heavily
   blurred, halftone-dotted version of the same background image,
   instead of flat black. Fixed + behind everything; the opaque card
   sits above it and fully covers it on mobile widths. */
.lib-side-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(55px) saturate(1.15) brightness(0.55);
	transform: scale(1.25);
	pointer-events: none;
}

.lib-side-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(0, 0, 0, 0.95) 1px, transparent 1.6px);
	background-size: 5px 5px;
	mix-blend-mode: multiply;
	opacity: 0.55;
}

body.lib-standalone-page {
	margin: 0;
	padding: 0;
}

.lib-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	overflow: hidden;
	background: #14140f;
	color: var(--lib-text) !important;
}

.lib-wrap--full .lib-card {
	max-width: 100%;
	min-height: 100vh;
}

.lib-wrap:not(.lib-wrap--full) .lib-card {
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Cap the width on larger screens so the card doesn't stretch edge to
   edge on desktop — it stays a tall, centered column with the page
   background filling the sides. This rule is declared AFTER the base
   ".lib-wrap--full .lib-card" rule above (equal specificity, later in
   source order wins) and also carries !important as a safeguard against
   theme stylesheets that may declare their own !important widths. */
@media (min-width: 700px) {
	.lib-wrap--full .lib-card {
		max-width: 960px !important;
		box-shadow: 0 0 90px rgba(0, 0, 0, 0.5);
	}
}

.lib-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.lib-bg-overlay {
	position: absolute;
	inset: 0;
	background: #0a0a08;
	opacity: var(--lib-overlay);
	z-index: 1;
}

.lib-content {
	position: relative;
	z-index: 2;
	/* Generous top padding lets the background image breathe before the
	   title starts — more of a premium "reveal" than a cramped header. */
	padding: 160px 56px 64px;
	text-align: center;
}

.lib-title {
	font-family: var(--lib-font-title) !important;
	font-weight: 600 !important;
	font-size: clamp(2.1rem, 8vw, 4rem) !important;
	line-height: 1.14 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	margin: 0 0 18px !important;
	color: var(--lib-text) !important;
}

.lib-subtitle {
	font-family: var(--lib-font-body) !important;
	font-size: 0.8rem !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	margin: 0 0 34px !important;
	opacity: 0.85;
	color: var(--lib-secondary-text) !important;
}

.lib-tagline {
	font-family: var(--lib-font-tagline) !important;
	font-size: 1.6rem !important;
	font-weight: 500 !important;
	margin: 0 0 40px !important;
	position: relative;
	padding-bottom: 20px;
	color: var(--lib-secondary-text) !important;
}

.lib-tagline::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 44px;
	height: 1px;
	background: currentColor;
	opacity: 0.5;
}

.lib-links {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 42px;
}

.lib-link-btn {
	display: flex !important;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 15px 20px !important;
	background: var(--lib-btn-bg) !important;
	color: var(--lib-btn-text) !important;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--lib-radius) !important;
	text-decoration: none !important;
	text-align: left;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.lib-link-btn:hover {
	background: var(--lib-accent-bg) !important;
	color: var(--lib-accent-text) !important;
	border-color: transparent;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
	transform: translateY(-1px);
}

.lib-link-btn:hover .lib-link-icon {
	background: rgba(255, 255, 255, 0.18);
}

.lib-link-btn:hover .lib-link-arrow {
	opacity: 0.85;
}

.lib-link-btn--highlight {
	background: var(--lib-accent-bg) !important;
	color: var(--lib-accent-text) !important;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.lib-link-btn--highlight .lib-link-icon {
	background: rgba(255, 255, 255, 0.14);
}

.lib-link-btn--highlight:hover {
	background: var(--lib-btn-bg) !important;
	color: var(--lib-btn-text) !important;
	border-color: transparent;
}

.lib-link-btn--highlight:hover .lib-link-icon {
	background: rgba(0, 0, 0, 0.08);
}

.lib-link-icon {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.07);
	transition: background-color 0.2s ease;
}

.lib-link-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lib-link-icon-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

.lib-link-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.lib-link-title {
	font-family: var(--lib-font-body) !important;
	font-weight: 600 !important;
	font-size: 0.86rem !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	color: inherit !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lib-link-subtitle {
	font-family: var(--lib-font-body) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.02em;
	opacity: 0.7;
	color: inherit !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lib-link-arrow {
	flex: 0 0 auto;
	font-size: 1.3rem;
	opacity: 0.4;
	line-height: 1;
	transition: opacity 0.2s ease;
}

.lib-footer {
	margin-top: 10px;
}

.lib-footer-line1 {
	font-family: var(--lib-font-tagline) !important;
	font-size: 1.15rem !important;
	margin: 0 0 12px !important;
	color: var(--lib-secondary-text) !important;
}

.lib-footer-line2 {
	font-family: var(--lib-font-body) !important;
	font-size: 0.68rem !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	opacity: 0.65;
	margin: 0 !important;
	color: var(--lib-secondary-text) !important;
}

@media (max-width: 480px) {
	.lib-content {
		padding: 88px 26px 48px;
	}

	.lib-title {
		font-size: clamp(1.85rem, 8.5vw, 2.3rem) !important;
	}
}