/* ============================================================
   Google Sign-In button — Google brand-guideline compliant styling
   applied to the openid_connect "google" client's submit element on
   /user/login and any other openid_connect_login_form rendering.
   Spec: https://developers.google.com/identity/branding-guidelines
   - Text: "Sign in with Google" (set in mvsd_helpers_form_alter)
   - Light theme: white bg, #747775 border, #1F1F1F text
   - 40dp min height, Roboto Medium 14, official multicolor G icon
   ============================================================ */

.openid-connect-login-form input.gsi-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;     /* 1px stroke renders INSIDE per Google spec */
  background-color: #FFFFFF;  /* light theme fill   */
  color: #1F1F1F;             /* light theme text   */
  border: 1px solid #747775;  /* light theme stroke */
  border-radius: 4px;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-weight: 500;           /* Roboto Medium      */
  font-size: 14px;            /* Google spec: 14/20 */
  line-height: 20px;
  letter-spacing: 0.25px;
  height: 48px;               /* Scaled per Google spec ("scale as needed") */
  min-width: 260px;
  /* Padding: 12L + 20 icon + 10 gap + text + 12R = matches Google spec values */
  padding: 0 12px 0 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285F4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334A853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' fill='%23FBBC05'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' fill='%23EA4335'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 20px 20px;
  cursor: pointer;
  transition: background-color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.openid-connect-login-form input.gsi-button:hover {
  background-color: #F8F9FA;
  border-color: #D2D5DB;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.openid-connect-login-form input.gsi-button:active {
  background-color: #F1F3F4;
}

.openid-connect-login-form input.gsi-button:focus-visible {
  outline: 3px solid var(--color-focus-ring, #b45309);
  outline-offset: 2px;
}

/* "Or" separator between the SSO button and the Drupal credential form.
   Only renders when both forms are present (i.e., on /user/login). The
   :has() check excludes /staff where the openid_connect form stands alone. */
.openid-connect-login-form:has(+ .user-login-form-themed) {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  position: relative;
}
.openid-connect-login-form:has(+ .user-login-form-themed)::after {
  content: 'or';
  position: absolute;
  bottom: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 0 0.6rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}