/* =============================================
   Clique Mods — FluentAuth Passwordless UI
   Hides password fields on the DEFAULT login screen,
   forces magic login as the visible state, and adds
   an "or" divider above the Google SSO button.

   IMPORTANT: All rules are scoped to `body.login-action-login`
   so they ONLY apply to /wp-login.php in its default state.
   Other actions (fls_2fa_email — the 2FA code page —
   register, lostpassword) render with full default UI so
   their forms aren't accidentally broken.

   Selectors target FluentAuth 2.1.2 markup — re-verify
   after upgrades.
   ============================================= */

/* -------- Hide regular login chrome (default screen only) -------- */

body.login-action-login .fls_login_form_wrap #loginform > p:first-of-type {
	display: none !important;
}
body.login-action-login .fls_login_form_wrap .user-pass-wrap {
	display: none !important;
}
body.login-action-login .fls_login_form_wrap .forgetmenot {
	display: none !important;
}
body.login-action-login .fls_login_form_wrap p.submit {
	display: none !important;
}
body.login-action-login .fls_login_form_wrap #nav {
	display: none !important;
}
body.login-action-login .fls_login_form_wrap .privacy-policy-page-link {
	display: none !important;
}
body.login-action-login .fls_login_form_wrap .magic_back_regular {
	display: none !important;
}

/* The "Email" label above the magic input is redundant — placeholder reads "Email". */
body.login-action-login .fls_login_form_wrap label[for="fls_magic_logon"] {
	display: none !important;
}

/* Header subtitle "Please enter your details to login" is redundant — the
   form itself is self-explanatory. */
body.login-action-login .fls_login_form_wrap .fls_login_header > p {
	display: none !important;
}

/* -------- Force magic-login visible (non-primary mode fallback) -------- */

body.login-action-login .fls_login_form_wrap #fls_magic_login {
	display: block !important;
	margin-bottom: 20px;
}
body.login-action-login .fls_login_form_wrap #fls_magic_login .fls_magic_initial {
	display: none !important;
}
body.login-action-login .fls_login_form_wrap #fls_magic_login .fls_magic_login_form {
	display: block !important;
}
body.login-action-login .fls_login_form_wrap #fm_login_with_wrap {
	display: block !important;
}

/* -------- Magic-as-primary mode (is_primary=1) override

   FluentAuth's fls_login.js injects this inline at runtime:
     #loginform.showing_magic_form > *                { display: none  !important; }
     #loginform.showing_magic_form > #fls_magic_login { display: block !important; }

   The Google SSO button (#fm_login_with_wrap) is appended into #loginform by
   FluentAuth's social bootstrap, so it's a direct child and gets hidden by
   the wildcard rule. Our higher-specificity rule (0,2,1,0 vs FluentAuth's
   0,1,1,0) re-allows it. Flexbox order keeps the magic form on top and the
   Google button below, regardless of DOM insertion order.
-------- */

body.login-action-login #loginform.showing_magic_form > #fls_magic_login,
body.login-action-login #loginform.showing_magic_form > #fm_login_with_wrap {
	display: block !important;
}

body.login-action-login #loginform.showing_magic_form {
	display: flex;
	flex-direction: column;
}
body.login-action-login #loginform.showing_magic_form > #fls_magic_login {
	order: 1;
}

/* -------- Inline error notice (replaces FluentAuth's alert popups) -------- */

body.login-action-login .cm-magic-notice {
	display: none;
	padding: 12px 14px;
	margin: 0 0 16px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.45;
}
body.login-action-login .cm-magic-notice-error {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
}

/* -------- Google SSO wrapper styling + "or" divider -------- */

body.login-action-login #loginform.showing_magic_form > #fm_login_with_wrap {
	order: 2;
	position: relative;
	/* Symmetric: same gap from Continue button down to the "or" line as
	   from the "or" line down to the Google button. */
	margin-top: 18px !important;
	padding-top: 18px !important;
	border-top: 1px solid #e5e7eb !important;
	/* FluentAuth's inline `<style>` sets `.fm_login_with { overflow: hidden }`,
	   which clips the "or" pseudo-element that sits above the border. */
	overflow: visible !important;
}
body.login-action-login #loginform.showing_magic_form > #fm_login_with_wrap::before {
	content: "or";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--fls-form-background_color, #ffffff);
	color: var(--fls-form-text_color, #6b7280);
	padding: 0 14px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* =============================================
   Clique Agency brand styling
   Tokens lifted from clique-brand-guidelines.html — paper/ink/oxblood
   palette, Fraunces (display) + Inter Tight (body), 8px button radius.
   Scoped to body.login-action-login so the 2FA / register / etc. screens
   stay on FluentAuth defaults.
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter+Tight:wght@400;500;600&display=swap');

/* Override FluentAuth's customizer variables with brand colours.
   These flow through every rule in fluent-security/.../login_customizer.css
   automatically, so most of the page recolours for free. */
body.login-action-login {
	--fls-banner-background_color: #EDE7DD;  /* paper-2 — left banner panel */
	--fls-banner-title_color:      #1A1915;  /* ink */
	--fls-banner-text_color:       #3A3933;  /* ink-soft */
	--fls-form-background_color:   #F5F1EC;  /* paper — right form panel */
	--fls-form-title_color:        #1A1915;  /* ink */
	--fls-form-text_color:         #3A3933;  /* ink-soft */
	--fls-form-button_color:       #8A2A1E;  /* oxblood */
	--fls-form-button_label_color: #ffffff;

	/* Custom brand tokens for use below. */
	--cm-paper:      #F5F1EC;
	--cm-paper-2:    #EDE7DD;
	--cm-paper-3:    #E1D9CA;
	--cm-ink:        #1A1915;
	--cm-ink-soft:   #3A3933;
	--cm-ink-muted:  #6F6C63;
	--cm-oxblood:    #8A2A1E;
	--cm-oxblood-dk: #6B1E14;
	--cm-line:       #C9C1AE;
	--cm-r-btn:      8px;
	--cm-f-display:  'Fraunces', 'Times New Roman', serif;
	--cm-f-body:     'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Body font for everything on the login page. */
body.login-action-login,
body.login-action-login .fls_login_form_wrap,
body.login-action-login .fls_login_form_wrap p,
body.login-action-login .fls_login_form_wrap label,
body.login-action-login .fls_login_form_wrap input,
body.login-action-login .fls_login_form_wrap button {
	font-family: var(--cm-f-body);
}

/* Display font for headings (left-banner welcome + right-form title). */
body.login-action-login .fls_login_header h1,
body.login-action-login .fls_login_cusom_content_inner h1 {
	font-family: var(--cm-f-display) !important;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Email input — paper-on-line, oxblood focus ring. */
body.login-action-login #fls_magic_logon {
	background: #ffffff !important;
	border: 1px solid var(--cm-line) !important;
	border-radius: var(--cm-r-btn) !important;
	padding: 12px 14px !important;
	color: var(--cm-ink) !important;
	box-shadow: none !important;
}
body.login-action-login #fls_magic_logon:focus {
	border-color: var(--cm-oxblood) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(138, 42, 30, 0.18) !important;
}

/* Continue (primary CTA) — oxblood. */
body.login-action-login #fls_magic_submit,
body.login-action-login .fls_magic_show_btn {
	background: var(--cm-oxblood) !important;
	color: #ffffff !important;
	border: 1px solid var(--cm-oxblood) !important;
	border-radius: var(--cm-r-btn) !important;
	padding: 12px 16px !important;
	font-weight: 500 !important;
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body.login-action-login #fls_magic_submit:hover,
body.login-action-login .fls_magic_show_btn:hover {
	background: var(--cm-oxblood-dk) !important;
	border-color: var(--cm-oxblood-dk) !important;
}

/* "or" divider — line colour + paper mask behind the text. */
body.login-action-login #loginform.showing_magic_form > #fm_login_with_wrap {
	border-top-color: var(--cm-line) !important;
}
body.login-action-login #loginform.showing_magic_form > #fm_login_with_wrap::before {
	background: var(--cm-paper) !important;
	color: var(--cm-ink-muted) !important;
}

/* Google SSO button — paper-bordered secondary. */
body.login-action-login a.fs_auth_btn.fs_auth_google {
	background: #ffffff !important;
	color: var(--cm-ink) !important;
	border: 1px solid var(--cm-line) !important;
	border-radius: var(--cm-r-btn) !important;
	padding: 10px 14px !important;
	font-weight: 500;
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
body.login-action-login a.fs_auth_btn.fs_auth_google:hover {
	background: var(--cm-paper-2) !important;
	color: var(--cm-ink) !important;
}

/* Inline error notice — oxblood-tinted, on-brand. */
body.login-action-login .cm-magic-notice-error {
	background: #f7ebe9 !important;
	border-color: rgba(138, 42, 30, 0.35) !important;
	color: var(--cm-oxblood-dk) !important;
}
body.login-action-login .cm-magic-notice-error a {
	color: var(--cm-oxblood-dk) !important;
	text-decoration: underline;
	font-weight: 500;
}
body.login-action-login .cm-magic-notice-error a:hover {
	color: var(--cm-oxblood) !important;
	text-decoration: none;
}

/* =============================================
   Brand styling for ALL login pages (2FA, expired-link, etc.)

   The brand-variable block above is scoped to body.login-action-login (the
   default magic-login screen). For other login states — 2FA email code
   entry, magic-link-expired fallback — we want the same colours and fonts
   without inheriting the "hide-the-password-form" rules. This block defines
   the same tokens at the wider body.login scope, then applies styling to
   the generic form elements + WP error blocks.
   ============================================= */

body.login {
	--fls-banner-background_color: #EDE7DD;
	--fls-banner-title_color:      #1A1915;
	--fls-banner-text_color:       #3A3933;
	--fls-form-background_color:   #F5F1EC;
	--fls-form-title_color:        #1A1915;
	--fls-form-text_color:         #3A3933;
	--fls-form-button_color:       #8A2A1E;
	--fls-form-button_label_color: #ffffff;

	--cm-paper:      #F5F1EC;
	--cm-paper-2:    #EDE7DD;
	--cm-ink:        #1A1915;
	--cm-ink-soft:   #3A3933;
	--cm-ink-muted:  #6F6C63;
	--cm-oxblood:    #8A2A1E;
	--cm-oxblood-dk: #6B1E14;
	--cm-line:       #C9C1AE;
	--cm-r-btn:      8px;
	--cm-f-display:  'Fraunces', 'Times New Roman', serif;
	--cm-f-body:     'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Fonts + heading treatment for every login state */
body.login,
body.login .fls_login_form_wrap,
body.login .fls_login_form_wrap p,
body.login .fls_login_form_wrap label,
body.login .fls_login_form_wrap input,
body.login .fls_login_form_wrap button {
	font-family: var(--cm-f-body);
}
body.login .fls_login_header h1,
body.login .fls_login_cusom_content_inner h1 {
	font-family: var(--cm-f-display) !important;
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Generic form inputs (2FA code, password field on regular login, etc.) */
body.login .fls_login_form_wrap input[type="text"],
body.login .fls_login_form_wrap input[type="email"],
body.login .fls_login_form_wrap input[type="password"],
body.login .fls_login_form_wrap input[type="number"],
body.login .fls_login_form_wrap input.input {
	background: #ffffff !important;
	border: 1px solid var(--cm-line) !important;
	border-radius: var(--cm-r-btn) !important;
	padding: 12px 14px !important;
	color: var(--cm-ink) !important;
	box-shadow: none !important;
	font-family: var(--cm-f-body) !important;
}
body.login .fls_login_form_wrap input[type="text"]:focus,
body.login .fls_login_form_wrap input[type="email"]:focus,
body.login .fls_login_form_wrap input[type="password"]:focus,
body.login .fls_login_form_wrap input[type="number"]:focus,
body.login .fls_login_form_wrap input.input:focus {
	border-color: var(--cm-oxblood) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(138, 42, 30, 0.18) !important;
}

/* Primary submit buttons on any login state (2FA verify, password login, etc.) */
body.login .fls_login_form_wrap p.submit input[type="submit"],
body.login .fls_login_form_wrap button[type="submit"],
body.login .fls_login_form_wrap .button.button-primary {
	background: var(--cm-oxblood) !important;
	color: #ffffff !important;
	border: 1px solid var(--cm-oxblood) !important;
	border-radius: var(--cm-r-btn) !important;
	padding: 12px 16px !important;
	font-weight: 500 !important;
	font-family: var(--cm-f-body) !important;
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	text-shadow: none !important;
	box-shadow: none !important;
}
body.login .fls_login_form_wrap p.submit input[type="submit"]:hover,
body.login .fls_login_form_wrap button[type="submit"]:hover,
body.login .fls_login_form_wrap .button.button-primary:hover {
	background: var(--cm-oxblood-dk) !important;
	border-color: var(--cm-oxblood-dk) !important;
}

/* =============================================
   Error / notice blocks (all login states)
   WP renders #login_error for auth errors. FluentAuth uses .message for
   notices (e.g. "Magic login link sent"). Style both with the brand
   oxblood-tinted notice + clickable link styling.
   ============================================= */

body.login #login_error,
body.login .message,
body.login .fls_login_form_wrap .notice,
body.login .fls_login_form_wrap .notice-error {
	/* Identical visual treatment to .cm-magic-notice-error (the inline magic-link
	   error) — subtle border all around, no left-border accent, same padding,
	   so the two error rendering paths look identical to the user. */
	background: #f7ebe9 !important;
	border: 1px solid rgba(138, 42, 30, 0.35) !important;
	color: var(--cm-oxblood-dk) !important;
	border-radius: 6px !important;
	padding: 12px 14px !important;
	margin: 0 0 16px !important;
	font-family: var(--cm-f-body) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	box-shadow: none !important;
}
body.login #login_error a,
body.login .message a,
body.login .fls_login_form_wrap .notice a {
	color: var(--cm-oxblood-dk) !important;
	text-decoration: underline !important;
	font-weight: 500 !important;
}
body.login #login_error a:hover,
body.login .message a:hover,
body.login .fls_login_form_wrap .notice a:hover {
	color: var(--cm-oxblood) !important;
	text-decoration: none !important;
}

/* Success-state notices (e.g. magic-link sent confirmation) — laurel green
   instead of oxblood. Reuse FluentAuth's success classes. */
body.login .login_magic_success {
	color: var(--cm-ink) !important;
	font-family: var(--cm-f-body) !important;
}
body.login .login_magic_success .login_success_heading {
	font-family: var(--cm-f-display) !important;
	font-weight: 500;
	color: var(--cm-ink) !important;
}
body.login .login_magic_success .login_success_message {
	color: var(--cm-ink-soft) !important;
}

/* =============================================
   Mobile — hide the "Welcome to clique.agency" banner panel entirely
   FluentAuth's stock CSS just reverses the column on mobile (form on top,
   banner below) but the banner adds no value on small screens — just
   pushes content down. Hide it and let the form take full width.
   ============================================= */
@media (max-width: 767px) {
	body.login .fls_login_page_wrap .fls_login_cusom_content_wrap {
		display: none !important;
	}
	body.login .fls_login_page_wrap .fls_login_form_wrap {
		flex: 1 1 100% !important;
		width: 100% !important;
	}
}

/* "Go to clique.agency" back link */
body.login-action-login #backtoblog a {
	color: var(--cm-ink-muted) !important;
	text-decoration: none;
}
body.login-action-login #backtoblog a:hover {
	color: var(--cm-oxblood) !important;
}