/* ------------------------------------------------------------------
   Enlayer brand overlay for the Dradis unauthenticated pages.
   Served by nginx from /branding/ and injected into <head> with
   sub_filter. Nothing in the Dradis application itself is modified.
   Every rule is scoped to body.unauthenticated so it cannot leak
   into the authenticated interface.
   Palette and fonts taken from enlayer.com (tokens.css).
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/branding/fonts/instrument-serif-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/branding/fonts/dm-sans-var-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("/branding/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

body.unauthenticated {
  --en-deep-green:      #183A33;
  --en-editorial-green: #0B6B52;
  --en-emerald:         #00A76F;
  --en-warm-ivory:      #F7F5F0;
  --en-graphite:        #262D34;
  --en-champagne:       #C6A96B;
  --en-muted:           #5A6763;
  --en-ash:             #C9D2CE;
  --en-hairline:        rgba(24, 58, 51, .12);

  --en-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --en-sans:  "DM Sans", Arial, system-ui, sans-serif;
  --en-mono:  "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;

  /* Dradis paints the contributor pages from these two variables.
     Repointing them is what brands /pro/contributors/login. */
  --login-bg-color: #183A33 !important;
  --login-text-color: #F7F5F0 !important;

  background: var(--en-deep-green) !important;
  font-family: var(--en-sans) !important;
  color: var(--en-graphite);
}

/* Layered Enlayer mark, bled off the right edge */
body.unauthenticated::before {
  content: "";
  position: fixed;
  right: -8vmin; bottom: -14vmin;
  width: 78vmin; height: 78vmin;
  background: url("/branding/enlayer-mark.svg") no-repeat center / contain;
  opacity: .05;
  pointer-events: none;
  z-index: 0;
}
body.unauthenticated > .container { position: relative; z-index: 1; }

/* ---------------------------------------------------------- the card */
body.unauthenticated .form-container.card {
  background: #FFFFFF !important;
  border: 1px solid var(--en-hairline) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28) !important;
  padding: 2.75rem 2.5rem 2rem !important;
}

/* ------------------------------------------------- the Enlayer logo */
/* The Dradis logo <img> keeps its box but shows our wordmark as a
   background, so no markup has to be rewritten. */
body.unauthenticated .form-container img.logo {
  width: 0 !important;
  height: 0 !important;
  max-width: none !important;
  padding: 38px 0 0 166px !important;
  box-sizing: content-box !important;
  background: url("/branding/enlayer-logo.svg") no-repeat left center / contain;
  margin: 0 0 1.75rem !important;
  display: block !important;
}
body.unauthenticated .logo-icons { display: none !important; }

/* ------------------------------------------------------------ typography */
body.unauthenticated h1 {
  font-family: var(--en-serif) !important;
  font-weight: 400 !important;
  font-size: 2.5rem !important;
  line-height: 1.1 !important;
  color: var(--en-deep-green) !important;
  letter-spacing: -.01em;
  text-align: left !important;
  margin: 0 0 1.5rem !important;
}
body.unauthenticated h1::after {
  content: "";
  display: block;
  width: 44px; height: 2px;
  margin-top: .85rem;
  background: var(--en-champagne);
}

body.unauthenticated .form-label {
  font-family: var(--en-sans) !important;
  font-size: .8125rem !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--en-muted) !important;
  margin-bottom: .4rem !important;
}

/* ---------------------------------------------------------------- fields */
body.unauthenticated .form-control {
  font-family: var(--en-sans) !important;
  font-size: 1rem !important;
  color: var(--en-graphite) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--en-ash) !important;
  border-radius: 8px !important;
  padding: .7rem .85rem !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.unauthenticated .form-control:focus {
  border-color: var(--en-editorial-green) !important;
  box-shadow: 0 0 0 3px rgba(11, 107, 82, .14) !important;
  outline: none !important;
}

/* --------------------------------------------------------------- buttons */
body.unauthenticated .btn-primary,
body.unauthenticated input[type="submit"].btn {
  font-family: var(--en-sans) !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  letter-spacing: .01em;
  color: var(--en-warm-ivory) !important;
  background: var(--en-editorial-green) !important;
  border: 1px solid var(--en-editorial-green) !important;
  border-radius: 8px !important;
  padding: .75rem 1.25rem !important;
  width: 100%;
  transition: background .15s ease, border-color .15s ease;
}
body.unauthenticated .btn-primary:hover,
body.unauthenticated input[type="submit"].btn:hover {
  background: var(--en-deep-green) !important;
  border-color: var(--en-deep-green) !important;
}
body.unauthenticated .btn-primary:focus-visible,
body.unauthenticated input[type="submit"].btn:focus-visible {
  outline: 2px solid var(--en-champagne) !important;
  outline-offset: 3px !important;
}

/* ----------------------------------------------------------------- links */
body.unauthenticated .actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  font-size: .875rem;
}
body.unauthenticated .actions a,
body.unauthenticated .form-container-inner a {
  color: var(--en-editorial-green) !important;
  text-decoration: none !important;
  font-weight: 500;
}
body.unauthenticated .actions a:hover,
body.unauthenticated .form-container-inner a:hover {
  text-decoration: underline !important;
  color: var(--en-deep-green) !important;
}
body.unauthenticated a:focus-visible {
  outline: 2px solid var(--en-editorial-green);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- footer */
body.unauthenticated .form-container footer {
  margin-top: 2rem !important;
  padding-top: 1.1rem !important;
  border-top: 1px solid var(--en-hairline) !important;
}
body.unauthenticated .form-container footer p {
  font-size: .75rem !important;
  color: var(--en-muted) !important;
  margin: 0 !important;
}
body.unauthenticated .form-container footer a {
  color: var(--en-muted) !important;
  text-decoration: underline !important;
}

/* ------------------------------------------------- right-hand mission text */
body.unauthenticated .mission-container {
  font-family: var(--en-mono) !important;
  line-height: 1.6 !important;
  padding-left: 3.5rem;
  max-width: 30ch;
}
body.unauthenticated .mission-container span,
body.unauthenticated .mission-container .white-label-text {
  font-family: var(--en-mono) !important;
  font-size: clamp(1.1rem, .85rem + .85vw, 1.65rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -.01em;
}
body.unauthenticated .mission-container .white-label-text,
body.unauthenticated .mission-container span {
  color: var(--en-warm-ivory) !important;
}
body.unauthenticated .mission-text-cursor {
  color: var(--en-champagne) !important;
}

/* ------------------------------------------------------- alerts / noscript */
body.unauthenticated .alert-danger {
  border-radius: 10px !important;
  border: 1px solid rgba(163, 63, 30, .35) !important;
  background: #FBEBE4 !important;
  color: #A33F1E !important;
}

@media (max-width: 991.98px) {
  body.unauthenticated .form-container.card { padding: 2rem 1.5rem 1.5rem !important; }
  body.unauthenticated h1 { font-size: 2.1rem !important; }
}

/* Contributor page: the tester-login link under the form */
body.unauthenticated .form-container-inner small a {
  color: var(--en-editorial-green) !important;
  font-weight: 500;
}
body.unauthenticated .form-container-inner small {
  display: inline-block;
  margin-top: 1.25rem;
}