/*
  File role: the whole look of the e-Registratura sign-in page (/e-reg/login/).

  The page loads the same stylesheets as the standard sign-in page — that is what
  makes every VOGO door behave the same — and this file is what makes this one
  look like e-Registratura: the scene photograph becomes the page, and the form
  becomes a card standing on it.

  register.css is shared with wp-login.php and is never touched from here. It
  forces the form column, the card and the inputs to white with !important, so
  the overrides below repeat its selectors and carry !important where they have
  to win. Everything is scoped under body.vogo-ereg, which only this page has,
  so /pc/ and the standard page cannot be reached by any rule written here.

  The scene address arrives as the custom property --ereg-scene, set inline on
  <body> by index.php, so the image is cache-busted by the page version.

  @file_version 1.3.0
*/

/* ---- Palette, read off the photograph itself ---- */
body.vogo-ereg {
  --ereg-abyss:  #030b1c;   /* the darkest corner of the scene */
  --ereg-navy:   #0a1f3d;   /* the depth the card sits against */
  --ereg-ember:  #E4812F;   /* the light trails; the only accent */
  --ereg-card:   #ffffff;
  --ereg-ink:    #0d1526;
  --ereg-steel:  rgba(255,255,255,.74);
}

/* One accent, not two. register.css keeps its colours in tokens - the green of
   the standard door - so recolouring means redefining the tokens, not hunting
   the rules that draw the button, the field icons and the focus ring. */
:root {
  --btn: #E4812F;
  --btn-hover: #cf7120;
  --btn-shadow: rgba(228,129,47,.30);

  --brand: #E4812F;
  --brand-tint: #fdf1e6;
  --brand-glow: rgba(228,129,47,.16);

  --link: #b9651d;
  --link-hover: #9a5416;
}

/* ---- The page is the photograph ----
   The veil is a left-to-right gradient: near-solid navy where the card stands,
   clear where the devices are, so the scene stays readable behind the form. */
body.login.vogo-ereg {
  background:
    linear-gradient(100deg,
      rgba(3,11,28,.97) 0%,
      rgba(3,11,28,.93) 26%,
      rgba(6,20,44,.62) 48%,
      rgba(6,20,44,.28) 68%,
      rgba(6,20,44,.12) 100%),
    var(--ereg-scene) right center / cover no-repeat,
    var(--ereg-abyss) !important;
  min-height: 100vh;
}

/* ---- One column: the grid of two disappears with the aside ---- */
body.vogo-ereg .vogo-shell {
  display: block;
  width: 100%;
  min-height: 100vh;
}

body.vogo-ereg .vogo-form-col {
  background: transparent;
  align-items: center;
  justify-content: flex-start;
  padding: 48px clamp(20px, 7vw, 120px);
  min-height: 100vh;
}

/* ---- The card ---- */
body.vogo-ereg .vogo-form-inner {
  width: 100%;
  max-width: 408px;
  background: var(--ereg-card);
  border-radius: 18px;
  padding: 34px 32px 28px;
  box-shadow: 0 34px 80px -28px rgba(0,0,0,.72), 0 2px 0 rgba(255,255,255,.06);
}

body.vogo-ereg .vogo-title {
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--ereg-ink);
  text-align: left;
  margin: 0 0 6px;
}
body.vogo-ereg .vogo-title-sup { color: var(--ereg-ember); }

body.vogo-ereg .vogo-subtitle {
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
  margin: 0 0 24px;
  max-width: 34ch;
}

/* The access code sits where the emailed one would: right above the button, so
   the order on screen matches the order of the checks. */
body.vogo-ereg #loginform label[for="vogo_code"] { display: block; }

/* wp-login.php's own stylesheet draws a bordered white panel around the form.
   Inside a card that is already white, it reads as a frame within a frame, and
   its padding is what left the empty band under the button. */
body.vogo-ereg #loginform {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 26px 0 0;
  box-shadow: none;
  /* The floating label of the first field rises 10px above the field. With the
     panel's padding gone, wp-login's overflow:hidden would cut it in half. */
  overflow: visible;
}

/* ---- The trademark block sits inside the card, so it is dark on white and
        stays a footnote: a hairline above it, no second frame. ---- */
body.vogo-ereg .vogo-euipo-card {
  margin-top: 22px;
  padding: 14px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid #e8ebf0;
  border-radius: 0;
}
body.vogo-ereg .vogo-euipo-card img {
  max-width: 116px;
  opacity: .9;
}
body.vogo-ereg .vogo-euipo-note {
  color: #6b7280;
  font-size: 11px;
  line-height: 1.45;
  margin-top: 5px;
}

/* ---- Phones: the scene keeps working as a background, with a heavier veil so
        the card never sits on a bright part of the image. ---- */
@media (max-width: 980px) {
  body.login.vogo-ereg {
    background:
      linear-gradient(180deg,
        rgba(3,11,28,.86) 0%,
        rgba(3,11,28,.93) 55%,
        rgba(3,11,28,.97) 100%),
      var(--ereg-scene) center center / cover no-repeat,
      var(--ereg-abyss) !important;
  }
  body.vogo-ereg .vogo-form-col {
    justify-content: center;
    padding: 32px 20px 28px;
  }
  body.vogo-ereg .vogo-form-inner { max-width: 440px; }
}

@media (max-width: 480px) {
  body.vogo-ereg .vogo-form-inner { padding: 26px 20px 22px; border-radius: 16px; }
  body.vogo-ereg .vogo-title { font-size: 22px; }
}

/* ---- The way out of the door (22.09.2026) ----
   Two quiet links under the card: the site, and the page this door belongs to. */
body.vogo-ereg .vogo-ereg-back {
  display: flex;
  gap: 18px;
  margin: 16px 0 0;
  font-size: .88rem;
}
body.vogo-ereg .vogo-ereg-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  text-decoration: none;
}
body.vogo-ereg .vogo-ereg-back a:hover { color: var(--btn); text-decoration: underline; }
body.vogo-ereg .vogo-ereg-back i { font-size: .95rem; }