/* recondite custom branding for the Element auth (login) page. */

/* 1. Plain black background on the login/welcome page.
   Element sets an inline background:url(...lake.jpg) on .mx_AuthPage and a
   blurred copy on .mx_AuthPage_modalBlur; override both. */
.mx_AuthPage {
  background: #000 !important;
}
.mx_AuthPage_modalBlur {
  background: #000 !important;
  filter: none !important;
}

/* 2. Replace the Element logo (an <img> inside .mx_AuthHeaderLogo) with ours. */
.mx_AuthHeaderLogo {
  height: 140px !important;
  margin-top: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mx_AuthHeaderLogo img {
  content: url("recondite-logo.jpg") !important;
  max-height: 132px !important;
  width: auto !important;
  border-radius: 12px !important;
}

/* 3. Relabel the "Homeserver" picker heading to "Private Recondite Chat".
   In this Element version it is a bare <h2> with no class inside .mx_ServerPicker. */
.mx_ServerPicker > h2 {
  font-size: 0 !important; /* hide the original "Homeserver" text */
}
.mx_ServerPicker > h2::after {
  content: "Private Recondite Chat";
  font-size: 15px;
  font-weight: 600;
}
/* keep the (i) info icon button inside the heading at normal size */
.mx_ServerPicker > h2 .mx_ServerPicker_help {
  font-size: 15px !important;
}

/* 4. "Log out" button (injected by recondite-logout.js).
   Off-room (Home, settings, etc.): full labelled button in the top-right corner.
   In a room: the top-right header is packed with buttons + the room-name banner,
   so the script swaps to a COMPACT power-icon tucked at the far right edge,
   above the header (clear of the composer at the bottom). */
#recondite-logout-btn {
  position: fixed;
  top: 12px;
  right: 16px;
  left: auto;
  bottom: auto;
  z-index: 2147483647;
  padding: 6px 13px;
  font:
    600 12px/1 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  color: #fff;
  background: #d8345f;
  border: 1px solid #ff6b81;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* In-room: compact icon, pinned to the very top-right corner above the header
   button row (the room-info icons sit just below/left of this point). */
#recondite-logout-btn.in-room {
  top: 6px;
  right: 6px;
  padding: 0;
  width: 26px;
  height: 26px;
  font-size: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#recondite-logout-btn:hover {
  background: #e54b73;
}