/* Two-tone Google sign-in button: white icon tile on the left, blue body on the right.
 *
 * Three things here are load-bearing rather than decorative:
 *
 * 1. NO prefers-color-scheme block. gradezup.com is light in every state, so a button that
 *    follows the visitor's OS turns black on a cream page. A component matches the page it
 *    sits on, not the operating system.
 *
 * 2. The !important flags are deliberate and minimal. Elementor and the theme style `a`
 *    aggressively and load after this file. `.elementor a { box-shadow: none }` in particular
 *    matches at EQUAL specificity (0,1,1), so without !important the shadow would survive or
 *    vanish purely on stylesheet order. Only the contested properties are forced.
 *
 * 3. The white tile is not styling for its own sake. Google's guidelines require the "G" to
 *    sit on a light background and never directly on a coloured fill — the split is what
 *    permits a blue body at all.
 */

.gz-social-btn,
a.gz-social-btn {
	/* Tweak these rather than the rules below. */
	--gz-blue: #4f71e8;
	--gz-blue-hover: #4361d6;
	--gz-blue-active: #3a54bf;
	--gz-stroke: #4f71e8;
	--gz-tile: #fff;
	--gz-fg: #fff;
	--gz-radius: 4px;
	--gz-height: 44px;
	--gz-tile-w: 46px;

	/* Matches the Ultimate Member form it sits above (inputs and submit are 229px wide on
	   gradezup.com). Override per-placement with [gradezup_google_login width="450px"]
	   rather than editing this file — other UM forms are wider. */
	--gz-max: 230px;

	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--gz-max);
	min-height: var(--gz-height);
	padding: 0;
	margin: 0 auto;
	overflow: hidden; /* clips the tile's square corners to the button's radius */

	background: var(--gz-blue) !important;
	color: var(--gz-fg) !important;
	border: 1px solid var(--gz-stroke) !important;
	text-decoration: none !important;

	box-shadow: 0 1px 2px rgba(60, 64, 67, .18), 0 1px 3px rgba(60, 64, 67, .08) !important;

	border-radius: var(--gz-radius);
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .25px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* White tile holding the mark. align-self:stretch makes it full-bleed top to bottom, so the
   split is a clean vertical edge rather than a floating square. */
.gz-social-btn .gz-social-tile {
	flex: 0 0 var(--gz-tile-w);
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	background: var(--gz-tile);
}

.gz-social-btn .gz-social-icon {
	display: block;
	width: 18px;
	height: 18px;
}

/* flex:1 + centring keeps the label optically centred in the BLUE area, not in the whole
   button — centring across the full width would push it right of where the eye expects it. */
.gz-social-btn .gz-social-label {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gz-social-btn:hover,
a.gz-social-btn:hover {
	background: var(--gz-blue-hover) !important;
	border-color: var(--gz-blue-hover) !important;
	color: var(--gz-fg) !important;
	text-decoration: none !important;
	box-shadow: 0 1px 3px rgba(60, 64, 67, .28), 0 4px 8px 2px rgba(60, 64, 67, .12) !important;
}

/* Press drops below the resting shadow — the button appears to move toward the page. */
.gz-social-btn:active,
a.gz-social-btn:active {
	background: var(--gz-blue-active) !important;
	border-color: var(--gz-blue-active) !important;
	box-shadow: 0 1px 1px rgba(60, 64, 67, .16) !important;
}

/* Visible ring for keyboard users only — a mouse click shouldn't leave an outline behind.
   Offset so the ring reads against the blue rather than merging with the border. */
.gz-social-btn:focus-visible,
a.gz-social-btn:focus-visible {
	outline: 2px solid #0b57d0;
	outline-offset: 2px;
}

/* Optional "or" rule, for sitting the button under a password form.
   Usage: [gradezup_google_login divider="yes"] */
.gz-social-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: var(--gz-max, 230px);
	margin: 18px auto;
	color: #5f6368;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .6px;
}

.gz-social-divider::before,
.gz-social-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: .25;
}

@media (prefers-reduced-motion: reduce) {
	.gz-social-btn,
	a.gz-social-btn {
		transition: none;
	}
}