/*
 * HackRange colors for Zulip's sign-in and sign-up pages.
 * Author: Tim Rice
 *
 * Injected into every Zulip page by hackrange.conf, but each rule is scoped to
 * pages built on .portico-container (login, signup, password reset), so the
 * chat app itself keeps Zulip's own theme. Colors follow the LMS palette:
 * red #D71105 for actions, near-black #0E0E0E, light grey backgrounds.
 * Zulip reads its button and link colors from CSS variables, so overriding
 * them on <body> recolors everything that uses them; the rest are selectors
 * from Zulip 12's portico styles and may need a look after a major upgrade.
 */
body:has(.portico-container) {
  --color-action-button: #d71105;
  --color-action-button-hover: #b80e04;
  --color-action-button-active: #990c03;
  --color-action-button-subtle-hover: #fde8e7;
  --color-action-button-subtle-active: #fbc6c3;
  --color-link: #d71105;
  --color-link-hover: #990c03;
  --color-link-portico-auth: #d71105;
  --color-link-portico-auth-hover: #990c03;
  --color-background-gradient-start: #0e0e0e;
  --color-background-gradient-end: #3a3a3a;
}

/* The header logo: HackRange in place of the Zulip wordmark. */
body:has(.portico-container) .portico-header .brand.logo .brand-logo {
  display: none;
}
body:has(.portico-container) .portico-header .brand.logo a {
  display: inline-block;
  width: 190px;
  height: 40px;
  background: url("/hackrange-theme/hackrange-logo-day.png") left center / contain no-repeat;
}

/* Footer: near-black with light links, red on hover. */
body:has(.portico-container) #footer {
  background-color: #0e0e0e;
  color: #bfbfbf;
}
body:has(.portico-container) #footer a {
  color: #ffffff;
}
body:has(.portico-container) #footer a:hover,
body:has(.portico-container) #footer a:focus {
  color: #f05d54;
}

/* Zulip 12 gives the forgot-password row a fixed 503px width, which makes the
   login page scroll sideways on a phone. Keep it inside the card. */
body:has(.portico-container) .forgot-password-container {
  width: auto;
  max-width: 100%;
}
body:has(.portico-container) .login-page-container.white-box {
  max-width: 100%;
  box-sizing: border-box;
}

/* Inputs: a red focus ring instead of Zulip's blue. */
body:has(.portico-container) .new-style .input-box input:focus,
body:has(.portico-container) .new-style .input-box select:focus {
  border-color: #d71105;
  box-shadow: 0 0 0 1px #d71105;
}