/**
 * Preferred Realtor Signup page.
 *
 * Every rule is scoped under .ij-rsignup. Layout lives in the template's
 * inline styles, as on every other redesigned page; this file carries only
 * what an inline style attribute cannot express — hover and focus states,
 * and the breakpoints.
 */

.ij-rsignup { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }

/* ---- Parent-theme overrides ----------------------------------------------
   bb-theme/css/base.min.css underlines every link on hover and paints a
   system-blue ring on focus, and the generated Beaver Builder skin carries
   `.fl-page-content a:hover { text-decoration: underline }` — which wraps this
   <main>. That selector scores 0-2-1 and both sheets load after this one, so a
   bare `.ij-rsignup a:hover` would tie and lose on load order. The leading
   `body` adds the element that settles it. */
body .ij-rsignup a:hover,
body .ij-rsignup a:focus { text-decoration: none; }
body .ij-rsignup a:focus { outline: none; }

.ij-rsignup a:focus-visible {
	outline: 2px solid var(--brand-green-dark);
	outline-offset: 2px;
	border-radius: 100px;
}

/* ---- Buttons -------------------------------------------------------------- */

.ij-rsignup .rs-btn {
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-rsignup .rs-btn--primary:hover { background: var(--brand-green-dark); }

.ij-rsignup .rs-btn--ghost:hover {
	background: var(--slate-50);
	border-color: var(--brand-green);
}

/* ---- Breakpoints ---------------------------------------------------------- */

/* The card grid's 420px minimum is wider than a phone, so auto-fit already
   drops it to one column. What it does not do is shrink the icon tile, which
   at 72px square crowds the copy beside it on a narrow screen. */
@media (max-width: 560px) {
	.ij-rsignup .rs-grid > div > span:first-child {
		width: 56px;
		height: 56px;
		border-radius: 16px;
	}

	.ij-rsignup .rs-grid > div > span:first-child svg {
		width: 26px;
		height: 26px;
	}
}

/* ---- Card grid on a phone ------------------------------------------------
   The template sets `repeat(auto-fit, minmax(420px, 1fr))`. auto-fit collapses
   the grid to a single column, but that column keeps the 420px minimum, so on
   a 390px phone the card is 420px wide and pushes the page sideways. careers.css
   clamps its own grid the same way, as does every grid in the design. */
@media (max-width: 560px) {
	.ij-rsignup .rs-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ij-rsignup .rs-btn { transition: none; }
}