/* RSR — login.css — re-skins wp-login.php with the site's brand and
   the front-page hero's WebGL gradient canvas as a full-bleed
   background. WordPress's own login markup/behaviour stays intact —
   this only restyles it. */

:root {
  --rsr-harbour-blue: #004a78;
  --rsr-dock-mint: #4ad3b9;
  --rsr-near-black: #0d0d0d;
  --rsr-signal-orange: #ffa500;
  --rsr-ash: #8e8e95;
  --rsr-font: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --rsr-radius-pill: 62.5rem;
  --rsr-border-radius: 1.5rem;
}

html {
  background: var(--rsr-harbour-blue);
}

body.login {
  position: relative;
  overflow-x: hidden;
  font-family: var(--rsr-font);
  background: var(--rsr-harbour-blue);
}

.rsr-hero__canvas {
  position: fixed;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

body.login.rsr-hero--ready .rsr-hero__canvas {
  opacity: 1;
}

#login {
  position: relative;
  z-index: 1;
  padding-top: 8vh;
  width: 400px;
}

#login h1 a {
  width: 220px;
  height: 64px;
  background-image: url('../images/logo-white.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#loginform {
  background: rgb(13 13 13 / 55%);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--rsr-border-radius);
  box-shadow: 0 30px 60px -20px rgb(4 10 18 / 45%);
  padding: 4rem;
}

.login label {
  color: rgb(255 255 255 / 85%);
  font-size: var(--rsr-fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login form {
  margin-top: 0;
}

.login input[type='text'],
.login input[type='password'] {
  background: rgb(255 255 255 / 0%);
  border: none;
  border-bottom: 1px solid rgb(255 255 255 / 18%);
  color: #fff;

  /* border-radius: 0.75rem; */
  box-shadow: none;
}

.login input[type='text']:focus,
.login input[type='password']:focus {
  border-bottom-width: 1px !important;
  border-color: var(--rsr-dock-mint);
}

.login .button-primary {
  background: var(--rsr-signal-orange);
  border-color: var(--rsr-signal-orange);
  color: var(--rsr-near-black);
  border-radius: var(--rsr-radius-pill);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus {
  background: #e69400;
  border-color: #e69400;
}

.login .forgetmenot label {
  color: rgb(255 255 255 / 70%);
  text-transform: none;
  font-weight: 400;
}

#nav,
#backtoblog {
  text-align: center;
}

#nav a,
#backtoblog a {
  color: rgb(255 255 255 / 70%) !important;
}

#nav a:hover,
#backtoblog a:hover {
  color: var(--rsr-dock-mint);
}

/* stylelint-disable-next-line selector-id-pattern */
.login #login_error,
.login .message,
.login .success {
  background: rgb(13 13 13 / 55%);
  border-left: 4px solid var(--rsr-signal-orange);
  color: #fff;
  backdrop-filter: blur(12px);
}

.login .success {
  border-left-color: var(--rsr-dock-mint);
}

/* ─── Cross-document view transitions — smoother page navigation ──
   Opt-in only; browsers without support (anything but Chromium 126+)
   just keep their normal hard navigation. No JS needed — the browser
   snapshots old/new page and crossfades automatically. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* Default UA crossfade is a touch long/floaty for a full page nav —
   tighten it and hold the outgoing frame briefly so text doesn't
   just melt into the next page's completely different layout. */
::view-transition-old(root) {
  animation-duration: 0.2s;
}

::view-transition-new(root) {
  animation-duration: 0.2s;
}