/* THC Courses: the "Continue with Google" button (0.25.0). Follows Google's sign-in branding: a neutral (white) button,
   Google's four-colour G at the left, the approved label, nothing else on it. Loaded on wp-login.php on its own and
   imported by thc-courses.css on the course pages, so both places draw the same button. Colours for the rest come
   from THC Core's tokens with light fallbacks. */

.thc-google { margin: 1rem 0 0; }
.thc-google__or {
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 .75rem;
  font-size: .9rem;
  color: var(--thc-text, var(--wp--preset--color--contrast, #332d25));
}
.thc-google__or::before, .thc-google__or::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--thc-border, var(--wp--preset--color--accent-6, #d9d0bc));
}

.thc-google__button,
.thc-google__button:visited,
.thc-google__button:hover,
.thc-google__button:focus {
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 1.25rem 0 1rem;
  border: 1px solid #747775;
  border-radius: 999px;
  background: #fff;
  color: #1f1f1f;
  font-family: "THC Fira Sans", Roboto, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.thc-google__button:hover { background: #f2f2f2; box-shadow: 0 1px 2px rgba(60, 64, 67, .3); }
.thc-google__button:focus-visible { outline: 3px solid var(--thc-leaf-deep, var(--wp--preset--color--accent-3, #3f5c3b)); outline-offset: 2px; }
.thc-google__g { flex: none; width: 20px; height: 20px; }
.thc-google__label { color: #1f1f1f; }

/* On the course pages' signed-out dashboard: the Sign in button sits above; this stretches to the same width on phones. */
.thc-google--dash .thc-google__button { width: 100%; max-width: 22rem; }
.thc-google--dash { max-width: 22rem; }

/* On wp-login.php: the form becomes a column so the button sits under Log In, with "or" between (the login_form hook
   can only print above Remember me). Everything else keeps its order. */
.login #loginform { display: flex; flex-direction: column; }
.login #loginform > * { order: 0; }
.login #loginform .thc-google--form { order: 10; margin-top: 1.25rem; }
.login #loginform .thc-google--form .thc-google__button { width: 100%; }
.login #loginform .submit { order: 9; }
.login #loginform .forgetmenot { order: 8; }
.login #loginform::after { content: none; }