/* Social sign-in buttons (Google / Facebook).  v4, 2026-11-01.
 * Two login UIs, different markup:
 *   1. full page ucp.php?mode=login -> <div class="content"><a class="button2" ...>
 *   2. quicklogin modal             -> <hr><p class="ql-oauth"><a>Facebook</a>&bull;<a>Google</a>
 * Modal links carry NO class, hence the second selector in each rule.
 * !important is needed because the theme paints a gradient on these via a
 * selector not discoverable from the stylesheets. Scoped to oauth links only.
 *
 * v4 fixes a collision: font-size:0 on p.ql-oauth (used to collapse the
 * &bull; separators) also made the INHERITED line-height 0, so the
 * "Or sign in with" label had a zero-height line and overlapped the Login
 * button above it. The label now sets its own line-height explicitly. */

.content > a.button2[href*="/oauth/login/"],
p.ql-oauth > a {
	display: inline-block;
	min-width: 140px;
	padding: 11px 22px;
	border: none !important;
	border-radius: 8px;
	background: linear-gradient(90deg, #E8940C 0%, #C9790A 100%) !important;
	color: #FFFFFF !important;
	font-size: 16px !important;
	line-height: 1.25 !important;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	text-shadow: 0 1px 1px rgba(0,0,0,.25);
	box-shadow: 0 1px 3px rgba(0,0,0,.3);
	transition: filter .15s ease, transform .1s ease;
}

.content > a.button2[href*="/oauth/login/"]:hover,
.content > a.button2[href*="/oauth/login/"]:focus,
p.ql-oauth > a:hover,
p.ql-oauth > a:focus {
	filter: brightness(1.12);
	color: #FFFFFF !important;
	transform: translateY(-1px);
}

/* the label needs its own font-size AND line-height, see note above */
.content:has(> a.button2[href*="/oauth/login/"])::before,
p.ql-oauth::before {
	content: "Or sign in with";
	display: block;
	width: 100%;
	text-align: center;
	color: #D7DEE8 !important;
	opacity: 1 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	font-weight: 600;
	margin: 0 0 12px !important;
}

.content:has(> a.button2[href*="/oauth/login/"]) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 20px 0 6px;
}
br:has(+ .content > a.button2[href*="/oauth/login/"]) { display: none; }

p.ql-oauth {
	font-size: 0;
	line-height: 0;
	text-align: center;
	margin: 20px 0 6px;
}
p.ql-oauth > a { margin: 0 5px 10px; }
hr:has(+ p.ql-oauth) { display: none; }

@media (max-width: 480px) {
	.content > a.button2[href*="/oauth/login/"] { flex: 1 1 100%; min-width: 0; }
	p.ql-oauth > a { display: block; margin: 0 0 10px; }
}
/* Site title is now a link to the board index; it must look exactly like
   the plain heading did, including the gradient text treatment. */
h1 a.sitename-link,
#site-description h1 a.sitename-link {
	color: inherit !important;
	background: none;
	-webkit-text-fill-color: inherit;
	text-decoration: none !important;
	display: inline;
	font: inherit;
}
h1 a.sitename-link:hover { opacity: .9; }