/*
 * Fluent Community's sign-in and sign-up screens (/community/?fcom_action=auth) in the Lifting Leaner design.
 * Loaded by inc/sign-in-screens.php on Fluent Community's headless auth page only. The banner's copy, logo and
 * colors are Fluent Community's own settings (Settings > General > Customize Login/Signup Form); this file sets
 * what those settings cannot: the form side, the fields, the button and the type.
 * Same tokens as login-theme.css, so wp-login.php (where "Lost your password?" leads) reads as the same flow.
 */

body.fcom_headless_scope_user_registration {
  --ll-page: #0E1219;
  --ll-panel: #090D12;
  --ll-field: #111620;
  --ll-text: #FFFFFF;
  --ll-text-body: rgba(255, 255, 255, 0.85);
  --ll-text-muted: rgba(255, 255, 255, 0.62);
  --ll-line: rgba(255, 255, 255, 0.14);
  --ll-accent: #C8A84B;
  --ll-accent-hover: #D9BC72;
  --ll-accent-line: rgba(200, 168, 75, 0.35);
  --ll-on-accent: #090D12;
  --ll-radius: 6px;
  --ll-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ll-font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --ll-font-button: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Fluent Community's own variables, for anything it draws that this file does not name. */
  --fcom-primary-bg: var(--ll-page);
  --fcom-secondary-bg: var(--ll-panel);
  --fcom-primary-text: var(--ll-text);
  --fcom-secondary-text: var(--ll-text-muted);
  --fcom-text-off: var(--ll-text-muted);
  --fcom-primary-border: var(--ll-line);
  --fcom-primary-button: var(--ll-accent);
  --fcom-primary-button-text: var(--ll-on-accent);
  --fcom-text-link: var(--ll-accent);

  margin: 0;
  background: var(--ll-page);
  color: var(--ll-text-body);
  font-family: var(--ll-font-body);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

/* The two sides. The banner keeps the color set in Fluent Community; a brass hairline divides them. */
.fcom_headless_scope_user_registration .fcom_layout_side { border-right: 1px solid var(--ll-accent-line); }
.fcom_headless_scope_user_registration .fcom_auth_page_row_reverse .fcom_layout_side { border-right: 0; border-left: 1px solid var(--ll-accent-line); }
.fcom_headless_scope_user_registration .fcom_layout_main { background-color: var(--ll-page); }
.fcom_headless_scope_user_registration .fcom_welcome { padding-inline: 24px; }
.fcom_headless_scope_user_registration .fcom_logo img { width: 240px; max-width: 100%; height: auto; }

/* Type: display face for the two titles, body face for everything else. */
.fcom_headless_scope_user_registration .fcom_title,
.fcom_headless_scope_user_registration .fcom_onboard_header_title h2 {
  font-family: var(--ll-font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.fcom_headless_scope_user_registration .fcom_title { font-size: clamp(30px, 3.2vw, 44px); margin-block: 20px 10px; }
.fcom_headless_scope_user_registration .fcom_onboard_header_title h2 { font-size: clamp(28px, 2.6vw, 36px); color: var(--ll-text); margin: 0 0 8px; }
.fcom_headless_scope_user_registration .fcom_sub_title p,
.fcom_headless_scope_user_registration .fcom_onboard_header_title p { font-size: 16px; line-height: 1.5; margin: 0; text-wrap: balance; }
.fcom_headless_scope_user_registration .fcom_sub_title { max-width: 34ch; margin-inline: auto; }
.fcom_headless_scope_user_registration .fcom_onboard_header_title p { color: var(--ll-text-muted); }

/* The form. */
.fcom_headless_scope_user_registration .fcom_user_onboard { max-width: 440px; }
.fcom_headless_scope_user_registration .fcom_user_onboard .fcom_onboard_form { color: var(--ll-text-body); }
.fcom_headless_scope_user_registration .fcom_user_onboard .fcom_onboard_form :is(.fcom_form-group, .fs_input_wrap) label {
  color: var(--ll-text-body);
  font-size: 14px;
  font-weight: 500;
}
.fcom_headless_scope_user_registration .fcom_user_onboard .fcom_onboard_form :is(.fcom_form-group, .fs_input_wrap) input:is([type="text"], [type="email"], [type="password"]) {
  background: var(--ll-field);
  color: var(--ll-text);
  border: 1px solid var(--ll-line);
  border-radius: var(--ll-radius);
  padding: 12px 14px;
  font-family: var(--ll-font-body);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
}
.fcom_headless_scope_user_registration .fcom_user_onboard .fcom_onboard_form input::placeholder { color: var(--ll-text-muted); opacity: 1; }
.fcom_headless_scope_user_registration .fcom_user_onboard .fcom_onboard_form :is(.fcom_form-group, .fs_input_wrap) input:is([type="text"], [type="email"], [type="password"]):focus {
  border-color: var(--ll-accent);
  box-shadow: 0 0 0 1px var(--ll-accent);
  outline: none;
}
.fcom_headless_scope_user_registration .fcom_user_onboard .fcom_onboard_form :is(.fcom_form-group, .fs_input_wrap) input:is(:disabled, :read-only):not([type="checkbox"]) { background: var(--ll-panel); color: var(--ll-text-muted); }
.fcom_headless_scope_user_registration .fcom_user_onboard .fcom_onboard_form .login-remember label { display: flex; align-items: center; gap: 8px; margin: 0; }
.fcom_headless_scope_user_registration .fcom_user_onboard input[type="checkbox"] { accent-color: var(--ll-accent); width: 16px; height: 16px; margin: 0; }

/* The button: the site's brass button. */
.fcom_headless_scope_user_registration .fcom_user_onboard :is(input[type="submit"], button[type="submit"], .fcom_btn_primary, .button-primary) {
  width: 100%;
  background: var(--ll-accent);
  color: var(--ll-on-accent);
  border: 1px solid var(--ll-accent);
  border-radius: var(--ll-radius);
  padding: 14px 20px;
  font-family: var(--ll-font-button);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.fcom_headless_scope_user_registration .fcom_user_onboard :is(input[type="submit"], button[type="submit"], .fcom_btn_primary, .button-primary):hover { background: var(--ll-accent-hover); border-color: var(--ll-accent-hover); }
.fcom_headless_scope_user_registration .fcom_user_onboard :is(input[type="submit"], button[type="submit"], .fcom_btn_primary, .button-primary):focus-visible { outline: 2px solid var(--ll-accent); outline-offset: 3px; }

/* Under the form. */
.fcom_headless_scope_user_registration .fcom_spaced_divider { border-top: 1px solid var(--ll-line); color: var(--ll-text-muted); font-size: 14px; }
.fcom_headless_scope_user_registration .fcom_user_onboard a { color: var(--ll-accent); text-decoration: underline; text-decoration-color: var(--ll-accent-line); text-underline-offset: 3px; }
.fcom_headless_scope_user_registration .fcom_user_onboard a:hover { color: var(--ll-accent-hover); text-decoration-color: currentColor; }

/* Messages. */
.fcom_headless_scope_user_registration .fcom_user_onboard :is(.fcom_field_error, .error, .fcom_form_errors) { color: #F4A7AE; }
.fcom_headless_scope_user_registration .fcom_user_onboard :is(.fcom_completed, .fcom_message, .fcom_alert) {
  background: var(--ll-field);
  color: var(--ll-text-body);
  border-left: 3px solid var(--ll-accent);
  border-radius: 0 var(--ll-radius) var(--ll-radius) 0;
  padding: 12px 14px;
}

/* Phones: the banner is a short band above the form, not half a screen. */
@media (max-width: 768px) {
  .fcom_headless_scope_user_registration .fcom_layout_side { border-right: 0; border-bottom: 1px solid var(--ll-accent-line); padding-block: 28px; }
  .fcom_headless_scope_user_registration .fcom_logo img { width: 200px; }
  .fcom_headless_scope_user_registration .fcom_title { font-size: 28px; margin-block: 14px 6px; }
  .fcom_headless_scope_user_registration .fcom_user_onboard { padding: 28px 20px 40px; }
}