/* My Lemorau auth buttons. Styled to match the site's standard Elementor button
   (kit post-5): Lato 700, uppercase, 2px letter-spacing, square corners, and the
   site's button colours (#0054A4 accent, #191817 dark). Rules are scoped under
   .lemorau-auth so the surrounding theme styles don't override them. */
.lemorau-auth {
	--lemorau-blue: #0054a4; /* site accent (--e-global-color-vamtam_accent_1) */
	--lemorau-dark: #191817; /* site button base colour (--e-global-color-vamtam_accent_4) */
	/* Two equal buttons filling the width, side by side, 1rem (16px) apart, with
	   a little space above them. On phones they stack to full width (media query
	   below). !important guards against the surrounding theme styling this <nav>. */
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 1rem;
	margin-top: 1.25rem;
}

/* One button (LEMORAU_CLIENT_SIGNUP=off): one column, so Login fills the width
   instead of sitting in the left half with an empty column beside it. Two
   classes beat the single-class rule above, !important included. */
.lemorau-auth.lemorau-auth--login-only {
	grid-template-columns: 1fr !important;
}

/* Phones: stack the two buttons, each full width. */
@media (max-width: 767px) {
	.lemorau-auth {
		grid-template-columns: 1fr !important;
	}
}

.lemorau-auth .lemorau-auth__btn {
	display: block !important;
	box-sizing: border-box;
	width: 100% !important;
	padding: 0.55rem 1rem; /* height knob: raise for a taller button, lower to tighten */
	border-radius: 0; /* square, like the site's buttons */
	font-family: "Lato", sans-serif;
	font-size: 0.875rem; /* 14px, matches the site button */
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap; /* keep each label on one line */
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Secondary (login): outline in the site's accent blue. */
.lemorau-auth .lemorau-auth__btn--login {
	color: var(--lemorau-blue);
	border: 1px solid var(--lemorau-blue);
	background: transparent;
}

.lemorau-auth .lemorau-auth__btn--login:hover,
.lemorau-auth .lemorau-auth__btn--login:focus-visible {
	background: var(--lemorau-dark);
	border-color: var(--lemorau-dark);
	color: #fff;
}

/* Primary (signup): filled accent blue, hover to the site's dark button colour. */
.lemorau-auth .lemorau-auth__btn--signup {
	color: #fff;
	background: var(--lemorau-blue);
	border: 1px solid var(--lemorau-blue);
}

.lemorau-auth .lemorau-auth__btn--signup:hover,
.lemorau-auth .lemorau-auth__btn--signup:focus-visible {
	background: var(--lemorau-dark);
	border-color: var(--lemorau-dark);
	color: #fff; /* re-assert: stops the theme's link-hover colour turning the label dark */
}

/* Pending-approval note, shown only with note="inline". It sits on its own row
   below the two buttons and spans both columns. max-width lets the sentence wrap
   rather than stretching the button row wider. The default note="tooltip" drops
   this line and keeps the text on hover only. */
.lemorau-auth__note {
	grid-column: 1 / -1;
	max-width: 20ch;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.3;
	opacity: 0.7;
}