html, body { margin: 0; padding: 0; }

/*
 * Utility-page design system — single source of truth for auth,
 * maintenance, 404, and future utility surfaces.
 */
.signo-utility,
.signo-utility * { box-sizing: border-box; }
.signo-utility {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	background: #FFFFFF;
	font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.signo-utility__bg {
	position: absolute;
	inset: 0;
	background-position: center;
	background-size: cover;
	opacity: 0.85;
	filter: blur(5px);
	transform: scale(1.06);
}
/* Pages whose bg is content (maintenance, 404): crisp image, no frost,
 * no edge zoom. Decorative auth pages keep the blurred treatment. */
.signo-utility--sharp-bg .signo-utility__bg {
	filter: none;
	transform: none;
}
.signo-utility__stage {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	place-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: clamp(3rem, 4dvh, 74px) 74px;
}
.signo-card {
	grid-column: 1 / -1;
	width: 713px;
	max-width: 100%;
	margin: auto;
	padding: 78px 129px;
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(50px);
	backdrop-filter: blur(50px);
}
.signo-card--left-two-thirds { grid-column: 1 / span 2; }
.signo-card--right-two-thirds { grid-column: 2 / -1; }
.signo-card__inner { width: 455px; max-width: 100%; }
.signo-card__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--signo-logo-max-h, 96px);
	object-fit: contain;
	margin-right: auto;
	margin-left: auto;
}
.signo-card__logo-link {
	display: block;
	width: auto;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.signo-card__logo-link .signo-card__logo { width: auto; height: auto; }
.signo-card__title {
	margin-top: clamp(2.5rem, 5dvh, 4rem);
	color: #211F31;
	font-family: 'Roboto Flex', 'Inter', ui-sans-serif, system-ui, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	text-align: center;
}

.signo-login .signo-login__form { margin-top: clamp(2rem, 5dvh, 63px); }
.signo-login .signo-login__footer { margin-top: clamp(1.5rem, 5dvh, 4rem); }
.signo-login .signo-login__lang { margin-top: 24px; text-align: center; }
.signo-login .signo-login__lang select {
	height: 40px;
	padding: 0 12px;
	border: 1px solid #E2E2E2;
	border-radius: 4px;
	background-color: #FFFFFF;
	color: #211F31;
	font-family: inherit;
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}
#signo-loginform { position: relative; margin: 0; }
#signo-loginform p { margin: 0; padding: 0; }
#signo-loginform .login-password,
#signo-loginform .login-remember,
#signo-loginform .login-submit { margin-top: 32px; }
#signo-loginform label {
	display: block;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #211F31;
}
#signo-loginform input[type="text"],
#signo-loginform input[type="password"],
#signo-lostpasswordform input[type="text"],
#signo-lostpasswordform input[type="email"],
#signo-resetform input[type="password"] {
	display: block;
	width: 100%;
	height: 49px;
	margin-top: 7px;
	padding: 0 20px;
	background-color: #FFFFFF;
	border: 1px solid #E2E2E2;
	border-radius: 4px;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #211F31;
	outline: none;
}
#signo-loginform input[type="text"]::placeholder,
#signo-loginform input[type="password"]::placeholder,
#signo-lostpasswordform input[type="text"]::placeholder,
#signo-lostpasswordform input[type="email"]::placeholder,
#signo-resetform input[type="password"]::placeholder {
	color: #6B7280;
	opacity: 1;
}
#signo-loginform input[type="text"]:focus,
#signo-loginform input[type="password"]:focus,
#signo-lostpasswordform input[type="text"]:focus,
#signo-lostpasswordform input[type="email"]:focus,
#signo-resetform input[type="password"]:focus { border-color: #5FA4FC; }
#signo-lostpasswordform p { margin: 0; padding: 0; }
#signo-lostpasswordform .login-submit { margin-top: 32px; }

/*
 * Reset form (template-resetpassword). Two password fields share the
 * login form's input styling via the selector extensions above.
 */
#signo-resetform p { margin: 0; padding: 0; }
#signo-resetform .rp-gap { margin-top: 24px; }
#signo-resetform .login-submit { margin-top: 32px; }

/* "Password updated" success banner (login page, ?password=changed). */
.page-changed {
	border: 1px solid #7BA05B;
	background-color: #F1F7EC;
	padding: 12px 20px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 20px;
	color: #2E4A1C;
}
#signo-loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
#signo-loginform .login-remember input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0;
	flex: 0 0 auto;
	border: 1px solid #E2E2E2;
	border-radius: 4px;
	background-color: #FFFFFF;
	cursor: pointer;
}
#signo-loginform .login-remember input[type="checkbox"]:checked {
	background-color: #5FA4FC;
	border-color: #5FA4FC;
}
#signo-loginform .login-remember input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
#signo-loginform #wp-submit,
#signo-resetform #wp-submit,
#signo-lostpasswordform #wp-submit {
	display: block;
	width: 100%;
	height: 49px;
	margin: 0;
	padding: 0;
	background-color: #5FA4FC;
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	box-shadow: none;
	font-family: inherit;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	cursor: pointer;
}
#signo-loginform #wp-submit:hover,
#signo-resetform #wp-submit:hover,
#signo-lostpasswordform #wp-submit:hover { background-color: #4C93F0; }
.signo-login .login-forgot {
	position: absolute;
	top: 216px;
	right: 0;
	font-family: inherit;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: #211F31;
	text-decoration: none;
}
.signo-login .login-forgot:hover { text-decoration: underline; }
.signo-login .login-register-link {
	color: #6B7280;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.signo-login .login-register-link:hover { color: #211F31; }

/*
 * Google login button (rtCamp "Login with Google").
 * We own ALL visuals from this stylesheet: the plugin's own CSS is
 * enqueued late via do_shortcode_tag, so every rule here is scoped under
 * .signo-login to win specificity regardless of load order.
 */
.signo-login .wp_google_login,
.signo-login .wp_google_login__button-container { display: block; width: 100%; margin: 0; padding: 0; }
.signo-login .wp_google_login__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 49px;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	border: 1px solid #E2E2E2;
	border-radius: 8px;
	box-shadow: none;
	font-family: inherit;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	color: #211F31;
	text-decoration: none;
	cursor: pointer;
}
.signo-login .wp_google_login__button:hover { background-color: #F6F8FC; }
.signo-login .wp_google_login__button .wp_google_login__google-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

@media (max-width: 767px) {
	.signo-utility__stage {
		grid-template-columns: minmax(0, 1fr);
		padding-right: 24px;
		padding-left: 24px;
	}
	.signo-card,
	.signo-card--left-two-thirds {
		grid-column: 1;
		padding-right: 24px;
		padding-left: 24px;
	}
}

/*
 * A11y: visible keyboard focus indicator (WCAG 2.1 AA, SC 2.4.7).
 * Palette blue ring, >=2px, offset 2px. Selectors mirror the ID-scoped
 * rules above so they win cascade ties, and the outline property carries
 * !important so no reset can suppress the focus indicator.
 */
#signo-loginform input[type="text"]:focus-visible,
#signo-loginform input[type="password"]:focus-visible,
#signo-loginform .login-remember input[type="checkbox"]:focus-visible,
#signo-resetform input[type="password"]:focus-visible,
#signo-loginform #wp-submit:focus-visible,
#signo-lostpasswordform #wp-submit:focus-visible,
#signo-lostpasswordform input[type="text"]:focus-visible,
#signo-lostpasswordform input[type="email"]:focus-visible,
.signo-login .wp_google_login__button:focus-visible,
.signo-login a:focus-visible {
	outline: 2px solid #5FA4FC !important;
	outline-offset: 2px;
}

/*
 * Adaptive vertical compression ladder. Vertical breathing room is
 * handled fluidly by the clamp() above; these rungs compress the card
 * internals as the viewport shrinks. Double-class specificity outranks
 * the single-class Tailwind utilities WindPress injects late, and above
 * max-height:1040px no rule applies so tall screens keep the approved
 * mock exactly (78px card padding / 64px title gap).
 */
@media (max-height: 1040px) {
	.signo-card { padding-top: 54px; padding-bottom: 54px; }
}
@media (max-height: 940px) {
	.signo-card { padding-top: 48px; padding-bottom: 48px; }
	#signo-loginform .login-password,
	#signo-loginform .login-remember,
	#signo-loginform .login-submit { margin-top: 26px; }
	.signo-login .signo-login__lang { margin-top: 12px; }
}
/*
 * Deepest rung (~750px floor): docked DevTools / split panels shrink the
 * usable viewport far below laptop height. Form-rhythm overrides here are
 * ID-scoped to outrank this sheet's own #signo-loginform rules above.
 * Below ~750px of usable height the page scrolls — there is a limit to
 * how far a login form can compress before usability suffers.
 */
@media (max-height: 800px) {
	.signo-card { padding-top: 28px; padding-bottom: 28px; }
	#signo-loginform .login-password,
	#signo-loginform .login-remember,
	#signo-loginform .login-submit { margin-top: 22px; }
}

/*
 * Maintenance page (template-maintenance.twig, routed at /maintenance).
 * Same card family as the auth pages; card centered in the LEFT HALF of
 * wide viewports, screen-centered below 768px (md: breakpoint).
 * Button mirrors the auth submit button spec exactly (#wp-submit rules).
 */
.signo-card__text {
	margin: 0;
	color: #6B7280;
	font-size: 16px;
	line-height: 24px;
	text-align: center;
}
.signo-card__text + .signo-card__text { margin-top: 8px; }
/* Primary CTA for utility cards — mirrors the auth submit button spec.
 * Styled as flex so it works identically as <button> and <a>. */
.signo-card__button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 49px;
	margin: 32px 0 0;
	padding: 0;
	background-color: #5FA4FC;
	color: #FFFFFF;
	border: none;
	border-radius: 8px;
	box-shadow: none;
	font-family: inherit;
	font-size: 18px;
	line-height: 22px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.signo-card__button:hover { background-color: #4C93F0; }
.signo-card__button:focus-visible,
.signo-maint a:focus-visible {
	outline: 2px solid #5FA4FC !important;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------
 * Utility compatibility layer — only classes used by signo utility pages
 * (auth templates, 404, maintenance). Extracted from the test site's
 * compiled WindPress/Tailwind cache; no other utilities are included.
 * -------------------------------------------------------------------- */
.border{border-style:var(--tw-border-style);border-width:1px}
.relative{position:relative}
.text-center{text-align:center}
.mt-\[8px\]{margin-top:8px}
.mt-\[16px\]{margin-top:16px}
.mt-\[24px\]{margin-top:24px}
.mt-\[32px\]{margin-top:32px}
.px-\[20px\]{padding-inline:20px}
.py-\[12px\]{padding-block:12px}
.leading-\[20px\]{--tw-leading:20px;line-height:20px}
.leading-\[22px\]{--tw-leading:22px;line-height:22px}
.rounded-\[8px\]{border-radius:8px}
.text-\[14px\]{font-size:14px}
.text-\[16px\]{font-size:16px}
.bg-\[\#F1F7EC\]{background-color:#f1f7ec}
.bg-\[\#F9EEEE\]{background-color:#f9eeee}
.border-\[\#7BA05B\]{border-color:#7ba05b}
.border-\[\#B96A6A\]{border-color:#b96a6a}
.text-\[\#2E4A1C\]{color:#2e4a1c}
.text-\[\#571B1B\]{color:#571b1b}
.text-\[\#6B7280\]{color:#6b7280}