/*
 * Site Gate — the box that replaces a locked article's text.
 *
 * Dark, to sit in the site's dark theme; the accent is the site's yellow.
 * Every colour is a variable, so a child theme can restyle it in one place.
 */

.sgt-lock {
	--sgt-bg: #0e0e0e;
	--sgt-border: #2a2a2a;
	--sgt-text: #e6e6e6;
	--sgt-muted: #a8a8a8;
	--sgt-accent: #f7ca2d;
	--sgt-on-accent: #111;

	margin: 24px 0;
}

.sgt-lock__teaser {
	margin: 0 0 18px;
	color: var(--sgt-text, inherit);
	font-size: 1.05em;
	line-height: 1.7;
}

.sgt-lock__box {
	padding: 28px 26px;
	border: 1px solid var(--sgt-border);
	border-top: 3px solid var(--sgt-accent);
	border-radius: 4px;
	background: var(--sgt-bg);
	text-align: center;
}

.sgt-lock__heading {
	margin: 0 0 8px;
	color: var(--sgt-text);
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.3;
}

.sgt-lock__text {
	max-width: 36em;
	margin: 0 auto 20px;
	color: var(--sgt-muted);
	line-height: 1.6;
}

.sgt-lock__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.sgt-lock__button {
	display: inline-block;
	min-width: 140px;
	padding: 11px 22px;
	border: 1px solid var(--sgt-accent);
	border-radius: 3px;
	color: var(--sgt-accent);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sgt-lock__button:hover,
.sgt-lock__button:focus {
	background: var(--sgt-accent);
	color: var(--sgt-on-accent);
	text-decoration: none;
}

.sgt-lock__button--primary {
	background: var(--sgt-accent);
	color: var(--sgt-on-accent);
}

.sgt-lock__button--primary:hover,
.sgt-lock__button--primary:focus {
	opacity: 0.9;
}

@media (max-width: 480px) {
	.sgt-lock__box {
		padding: 22px 16px;
	}

	.sgt-lock__button {
		width: 100%;
	}
}