/* ==========================================================================
   LobbyVPN — inner page sections
   Styles for the widgets used outside the landing page: lvpn-page-hero,
   lvpn-post-grid and lvpn-contact.
   ========================================================================== */

/* ==========================================================================
   Page header — lvpn-page-hero
   ========================================================================== */

.lvpn-page-hero {
	padding-block: 56px 32px;
	background-color: var(--lvpn-black);
}

.lvpn-page-hero__inner {
	width: 100%;
	max-width: 820px;
	margin-inline: auto;
	padding-inline: 20px;
	text-align: center;
}

.lvpn-page-hero__logo {
	margin-bottom: 20px;
}

.lvpn-page-hero__logo img {
	display: inline-block;
	height: 56px;
	width: auto;
}

.lvpn-page-hero__eyebrow {
	margin-bottom: 10px;
	color: var(--lvpn-green-soft);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lvpn-page-hero__title {
	color: #fff;
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	text-wrap: balance;
}

.lvpn-page-hero__subtitle {
	max-width: 640px;
	margin-inline: auto;
	margin-top: 14px;
	color: var(--lvpn-text-quiet);
	font-size: 16px;
	line-height: 1.65;
}

.lvpn-page-hero__inner[style*='left'] .lvpn-page-hero__subtitle,
.lvpn-page-hero__inner[style*='left'] .lvpn-page-hero__title {
	margin-inline: 0;
}

@media (min-width: 640px) {
	.lvpn-page-hero {
		padding-block: 72px 40px;
	}

	.lvpn-page-hero__title {
		font-size: 42px;
	}

	.lvpn-page-hero__logo img {
		height: 64px;
	}
}

@media (min-width: 1024px) {
	.lvpn-page-hero__title {
		font-size: 52px;
	}

	.lvpn-page-hero__subtitle {
		font-size: 18px;
	}
}

/* ==========================================================================
   Post grid — lvpn-post-grid
   Card styles live in blog.css because archives and search reuse them.
   ========================================================================== */

.elementor-widget-lvpn-post-grid {
	display: block;
	width: 100%;
	padding-block: 8px 72px;
	background-color: var(--lvpn-black);
}

.elementor-widget-lvpn-post-grid > .elementor-widget-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

.lvpn-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}

@media (min-width: 1024px) {
	.elementor-widget-lvpn-post-grid .lvpn-archive__grid {
		grid-template-columns: repeat(var(--lvpn-cols, 3), minmax(0, 1fr));
	}
}

/* ==========================================================================
   Contact — lvpn-contact
   ========================================================================== */

/*
 * Frosted glass needs something behind it.
 *
 * `backdrop-filter` blurs whatever is painted underneath — over a flat black
 * page that is nothing, and the cards would read as plain dark grey. These two
 * soft brand-coloured pools give the blur something to pick up, so the cards
 * actually look like glass. They sit behind the content and never intercept
 * clicks.
 */
.lvpn-contact {
	position: relative;
	isolation: isolate;
	padding-block: 56px 80px;
	background-color: var(--lvpn-black);
}

.lvpn-contact::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(46rem 26rem at 12% 12%, rgba(98, 255, 140, 0.13), transparent 60%),
		radial-gradient(38rem 24rem at 88% 78%, rgba(54, 211, 255, 0.11), transparent 62%);
}

.lvpn-contact__inner {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

.lvpn-contact__intro {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: 48px;
	text-align: center;
}

.lvpn-contact__title {
	margin-bottom: 14px;
	color: var(--lvpn-green-cta);
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	text-wrap: balance;
}

.lvpn-contact__subtitle {
	color: var(--lvpn-text-quiet);
	font-size: 16px;
	line-height: 1.65;
}

.lvpn-contact__subtitle strong {
	color: #fff;
}

.lvpn-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}

.lvpn-contact__grid > * {
	min-width: 0;
}

.lvpn-contact__aside-title {
	margin-bottom: 16px;
	color: #fff;
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
}

.lvpn-contact__methods {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lvpn-contact__method {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 18px;
	border: 1px solid var(--lvpn-glass-border);
	border-radius: var(--lvpn-radius-lg);
	background-color: var(--lvpn-glass-bg);
	backdrop-filter: var(--lvpn-glass-blur);
	-webkit-backdrop-filter: var(--lvpn-glass-blur);
	/* Hairline along the top edge — what sells a pane of glass. */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
	transition: border-color 0.2s ease, background-color 0.2s ease,
		transform 0.2s ease;
}

.lvpn-contact__method:hover {
	border-color: var(--lvpn-green-review);
	background-color: var(--lvpn-glass-bg-strong);
	transform: translateY(-2px);
}

.lvpn-contact__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: var(--lvpn-radius-lg);
	background-color: rgba(98, 255, 140, 0.12);
	color: var(--lvpn-green-soft);
}

/*
 * Each icon declares its own fill/stroke — the mail and clock glyphs are
 * stroke-based — so only the colour is set here. Forcing `fill: currentColor`
 * turned the outlined envelope into a solid block.
 */
.lvpn-contact__icon svg {
	width: 20px;
	height: 20px;
}

.lvpn-contact__method-body {
	min-width: 0;
}

.lvpn-contact__method-label {
	margin-bottom: 4px;
	color: var(--lvpn-green-soft);
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.lvpn-contact__method-line {
	color: var(--lvpn-gray-300);
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.lvpn-contact__method-line a {
	color: var(--lvpn-gray-300);
	text-decoration: none;
	transition: color 0.2s ease;
}

.lvpn-contact__method-line a:hover,
.lvpn-contact__method-line a:focus {
	color: var(--lvpn-green-soft);
}

.lvpn-contact__social {
	margin-top: 32px;
}

.lvpn-contact__card {
	padding: 24px;
	border: 1px solid rgba(98, 255, 140, 0.45);
	border-radius: var(--lvpn-radius-xl);
	background-color: var(--lvpn-glass-bg);
	backdrop-filter: var(--lvpn-glass-blur);
	-webkit-backdrop-filter: var(--lvpn-glass-blur);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 24px 60px -30px rgba(0, 0, 0, 0.9);
}

.lvpn-contact__card-title {
	margin-bottom: 20px;
	color: #fff;
	font-size: 22px;
	line-height: 30px;
	font-weight: 700;
}

@media (min-width: 640px) {
	.lvpn-contact__title {
		font-size: 40px;
	}

	.lvpn-contact__card {
		padding: 32px;
	}
}

@media (min-width: 1024px) {
	.lvpn-contact__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 40px;
	}
}

/* --------------------------------------------------------------------------
   Fluent Forms inside the contact card

   The form markup comes from the plugin, so it is restyled here rather than
   rebuilt. Selectors are scoped to the card so other forms are untouched.
   -------------------------------------------------------------------------- */

.lvpn-contact__form .fluentform .ff-el-group {
	margin-bottom: 16px;
}

.lvpn-contact__form .fluentform .ff-el-input--label label {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.lvpn-contact__form .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']),
.lvpn-contact__form .fluentform textarea,
.lvpn-contact__form .fluentform select {
	width: 100%;
	padding: 12px 16px;
	background-color: var(--lvpn-surface-3);
	border: 1px solid var(--lvpn-border-dim);
	border-radius: var(--lvpn-radius-lg);
	color: #fff;
	font-family: var(--lvpn-font);
	font-size: 15px;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.lvpn-contact__form .fluentform input::placeholder,
.lvpn-contact__form .fluentform textarea::placeholder {
	color: var(--lvpn-gray-500);
}

.lvpn-contact__form .fluentform input:not([type='submit']):focus,
.lvpn-contact__form .fluentform textarea:focus,
.lvpn-contact__form .fluentform select:focus {
	outline: none;
	border-color: var(--lvpn-green);
	background-color: var(--lvpn-gray-900);
}

.lvpn-contact__form .fluentform textarea {
	min-height: 140px;
	resize: vertical;
}

/*
 * Fluent Forms ships `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)`
 * at specificity (0,3,1). The extra `.lvpn-contact__card` ancestor takes ours to
 * (0,4,1) so it wins for any form id, without `!important`.
 */
.lvpn-contact__card .lvpn-contact__form .fluentform .ff-btn-submit,
.lvpn-contact__card .lvpn-contact__form .fluentform button[type='submit'] {
	width: 100%;
	padding: 14px 24px;
	background-color: var(--lvpn-green-lime);
	border: 0;
	border-radius: var(--lvpn-radius-lg);
	color: #000;
	font-family: var(--lvpn-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.lvpn-contact__card .lvpn-contact__form .fluentform .ff-btn-submit:hover,
.lvpn-contact__card .lvpn-contact__form .fluentform button[type='submit']:hover {
	background-color: var(--lvpn-green-soft);
	transform: translateY(-1px);
}

.lvpn-contact__form .fluentform .ff-el-is-error input,
.lvpn-contact__form .fluentform .ff-el-is-error textarea {
	border-color: #ff8080;
}

.lvpn-contact__form .fluentform .error,
.lvpn-contact__form .fluentform .text-danger {
	color: #ff8080;
	font-size: 13px;
}

.lvpn-contact__form .ff-message-success {
	padding: 16px;
	border: 1px solid var(--lvpn-green-review);
	border-radius: var(--lvpn-radius-lg);
	background-color: rgba(98, 255, 140, 0.1);
	color: var(--lvpn-green-soft);
}

/* Same specificity story for the fields and their labels. */
/* The fields sit on the glass, so they are translucent too — a solid grey fill
   would look pasted on. */
.lvpn-contact__card .lvpn-contact__form .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']),
.lvpn-contact__card .lvpn-contact__form .fluentform textarea,
.lvpn-contact__card .lvpn-contact__form .fluentform select {
	background-color: rgba(255, 255, 255, 0.05);
	border-color: var(--lvpn-glass-border);
	color: #fff;
}

/*
 * The three `:not()` attribute selectors above each count as a class, putting the
 * rest state at (0,6,1). This focus rule must carry the same three or it lands at
 * (0,5,1) and loses — the field would stay at its resting fill while focused.
 */
.lvpn-contact__card .lvpn-contact__form .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']):focus,
.lvpn-contact__card .lvpn-contact__form .fluentform textarea:focus,
.lvpn-contact__card .lvpn-contact__form .fluentform select:focus {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--lvpn-green);
}

/*
 * Safari before 18 and Firefox before 103 have no backdrop-filter. Fall back to
 * the original opaque surfaces rather than leaving nearly-transparent panels
 * floating over the glow, which would hurt contrast.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lvpn-contact__method,
	.lvpn-contact__card {
		background-color: var(--lvpn-surface-2);
	}

	.lvpn-contact__method:hover {
		background-color: var(--lvpn-surface-3);
	}

	.lvpn-contact__card .lvpn-contact__form .fluentform input:not([type='submit']):not([type='checkbox']):not([type='radio']),
	.lvpn-contact__card .lvpn-contact__form .fluentform textarea,
	.lvpn-contact__card .lvpn-contact__form .fluentform select {
		background-color: var(--lvpn-surface-3);
	}
}

.lvpn-contact__card .lvpn-contact__form .fluentform .ff-el-input--label label {
	color: #fff;
}

/* Fluent Forms renders its own asterisk next to a label that already ends in
   one, which reads as "Email * *". Hide the duplicate. */
.lvpn-contact__form .fluentform .ff-el-is-required.asterisk-right label:after {
	display: none;
}