/**
 * Mere Content Gate — default gate template styles.
 *
 * Minimal, inheritable layout. Themes can override by dequeueing this
 * stylesheet (handle: mere-content-gate) and providing their own, or
 * by supplying a theme-level template at
 * `<active-theme>/mere-content-gate/gate.php`.
 *
 * Uses CSS custom properties so partial theming is possible without a
 * full rewrite — override one variable instead of all the rules.
 */

.mcg-gate {
	--mcg-gate-max-width: 34rem;
	--mcg-gate-padding: 2rem;
	--mcg-gate-bg: #fff;
	--mcg-gate-fg: #1d1d1f;
	--mcg-gate-muted: #6b7280;
	--mcg-gate-border: #e5e7eb;
	--mcg-gate-accent: #1d4ed8;
	--mcg-gate-accent-fg: #fff;
	--mcg-gate-error-bg: #fee2e2;
	--mcg-gate-error-fg: #991b1b;
	--mcg-gate-radius: 8px;
	--mcg-gate-gap: 1.25rem;

	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 4rem 1rem;
	color: var(--mcg-gate-fg);
}

.mcg-gate__section {
	width: 100%;
	max-width: var(--mcg-gate-max-width);
}

.mcg-gate__content {
	background: var(--mcg-gate-bg);
	border: 1px solid var(--mcg-gate-border);
	border-radius: var(--mcg-gate-radius);
	padding: var(--mcg-gate-padding);
	display: flex;
	flex-direction: column;
	gap: var(--mcg-gate-gap);
}

.mcg-gate__header {
	margin: 0;
}

.mcg-gate__headline {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.mcg-gate__body {
	color: var(--mcg-gate-muted);
	line-height: 1.5;
}

.mcg-gate__body p {
	margin: 0 0 0.75em;
}

.mcg-gate__body p:last-child {
	margin-bottom: 0;
}

.mcg-gate__error {
	background: var(--mcg-gate-error-bg);
	color: var(--mcg-gate-error-fg);
	padding: 0.75rem 1rem;
	border-radius: var(--mcg-gate-radius);
	font-size: 0.9375rem;
}

.mcg-gate__notice {
	background: #ecfdf5;
	color: #065f46;
	padding: 0.75rem 1rem;
	border-radius: var(--mcg-gate-radius);
	font-size: 0.9375rem;
}

.mcg-gate__honeypot {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mcg-gate__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
}

.mcg-gate__field {
	margin: 0;
}

.mcg-gate__password,
.mcg-gate__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	border: 1px solid var(--mcg-gate-border);
	border-radius: var(--mcg-gate-radius);
	background: var(--mcg-gate-bg);
	color: var(--mcg-gate-fg);
}

.mcg-gate__password:focus,
.mcg-gate__input:focus {
	outline: 2px solid var(--mcg-gate-accent);
	outline-offset: 2px;
	border-color: var(--mcg-gate-accent);
}

.mcg-gate__submit {
	margin: 0;
}

.mcg-gate__button {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 500;
	background: var(--mcg-gate-accent);
	color: var(--mcg-gate-accent-fg);
	border: 1px solid var(--mcg-gate-accent);
	border-radius: var(--mcg-gate-radius);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.mcg-gate__button:hover,
.mcg-gate__button:focus {
	opacity: 0.9;
}

.mcg-gate__button:focus-visible {
	outline: 2px solid var(--mcg-gate-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}