/* ============================================================
   C.O.R.E. auth pages (login / register / forgot / reset)
   Tema avorio · navy · oro — rebrand set 2026.

   Tutte le regole sono limitate a html.brand-core (classe messa da
   brand.js sul sito C.O.R.E.). Sui domini white-label (WIA, Scholar
   Haven) questa classe non c'è e le pagine mantengono il tema scuro
   definito inline in ciascun file, rivestito da brand.js.
   ============================================================ */

html.brand-core {
  --core-navy: #12213c;
  --core-navy-mid: #223152;
  --core-gold: #cd9b50;
  --core-gold-ink: #a97a34;
  --core-ivory: #f9f0e7;
  --core-ivory-light: #fbf3e8;
  --core-muted: #4b5570;
  --core-line: rgba(18, 33, 60, 0.16);
}

/* ---- pagina ---- */
html.brand-core body {
  color: var(--core-navy);
  background:
    radial-gradient(1200px 700px at 80% 10%, rgba(205, 155, 80, 0.20), transparent 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(43, 60, 97, 0.10), transparent 60%),
    linear-gradient(180deg, #fffaf3 0%, #f9f0e7 60%, #efe3d3 100%);
}
/* sostituisce il velo scuro di styles.css con una trama esagonale leggerissima */
html.brand-core body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.028;
  background: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2312213c'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.65V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ---- login: il gufo (fermo immagine del video della home) a destra
   del riquadro, sfumato nell'avorio; il riquadro resta centrato ---- */
html.brand-core body.login-body::after {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  left: calc(50% + 190px);
  right: 0;
  z-index: 0;
  pointer-events: none;
  background: url('assets/hero-owl-poster.jpg') 66% 0 / auto 100% no-repeat;
  mix-blend-mode: multiply;
  -webkit-mask: radial-gradient(ellipse 54% 62% at 50% 58%, #000 40%, transparent 100%);
  mask: radial-gradient(ellipse 54% 62% at 50% 58%, #000 40%, transparent 100%);
}
html.brand-core body.login-body .login-wrapper { z-index: 1; } /* già position: relative */
html.brand-core body.login-body .login-footer { z-index: 1; }   /* già position: fixed */
@media (max-width: 1023px) {
  html.brand-core body.login-body::after { display: none; }
}

/* ---- logo: scritta ufficiale (PNG trasparente) ---- */
html.brand-core .login-logo,
html.brand-core .auth-logo,
html.brand-core .fp-logo,
html.brand-core .rp-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto 1.1rem;
}
html.brand-core .auth-logo { width: 240px; margin-bottom: 0.9rem; }
html.brand-core .fp-logo,
html.brand-core .rp-logo { width: 260px; }
/* il nome e la tagline sono già nella scritta */
html.brand-core .login-brand,
html.brand-core .login-subtitle,
html.brand-core .fp-brand,
html.brand-core .rp-brand { display: none; }

/* ---- card ---- */
html.brand-core .login-card,
html.brand-core .auth-card,
html.brand-core .fp-card,
html.brand-core .rp-card {
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--core-line);
  box-shadow: 0 24px 50px rgba(18, 33, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
html.brand-core .login-card h2,
html.brand-core .auth-card h2,
html.brand-core .fp-card h2,
html.brand-core .rp-card h2 { color: var(--core-navy); }
html.brand-core .auth-desc,
html.brand-core .fp-desc,
html.brand-core .rp-desc { color: var(--core-muted); }

/* ---- form ---- */
html.brand-core .form-group label,
html.brand-core .form-col label {
  color: var(--core-muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
html.brand-core .form-group input,
html.brand-core .form-col input {
  color: var(--core-navy);
  background: var(--core-ivory-light);
  border: 1px solid rgba(18, 33, 60, 0.22);
}
html.brand-core .form-group input:focus,
html.brand-core .form-col input:focus {
  border-color: var(--core-gold);
  box-shadow: 0 0 0 3px rgba(205, 155, 80, 0.28);
}
html.brand-core .form-group input::placeholder,
html.brand-core .form-col input::placeholder { color: rgba(75, 85, 112, 0.55); }
/* credenziali compilate dal browser: niente sfondo azzurro/giallo di sistema */
html.brand-core .form-group input:-webkit-autofill,
html.brand-core .form-group input:-webkit-autofill:hover,
html.brand-core .form-group input:-webkit-autofill:focus,
html.brand-core .form-col input:-webkit-autofill,
html.brand-core .form-col input:-webkit-autofill:hover,
html.brand-core .form-col input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--core-navy);
  -webkit-box-shadow: 0 0 0 1000px var(--core-ivory-light) inset;
  box-shadow: 0 0 0 1000px var(--core-ivory-light) inset;
  caret-color: var(--core-navy);
  transition: background-color 9999s ease-out 0s;
}
html.brand-core .form-group input:autofill,
html.brand-core .form-col input:autofill {
  background: var(--core-ivory-light);
  color: var(--core-navy);
}
html.brand-core .toggle-password-btn { color: var(--core-muted); }
html.brand-core .toggle-password-btn:hover { color: var(--core-navy); }

/* bottone primario: navy pieno, testo avorio */
html.brand-core .btn-primary {
  background: var(--core-navy);
  color: var(--core-ivory-light);
}
html.brand-core .btn-primary:hover {
  background: var(--core-navy-mid);
  box-shadow: 0 8px 22px rgba(18, 33, 60, 0.28);
}

/* messaggi */
html.brand-core .login-error,
html.brand-core .auth-msg.error,
html.brand-core .fp-msg.error,
html.brand-core .rp-msg.error { color: #c9463d; }
html.brand-core .auth-msg.success,
html.brand-core .fp-msg.success,
html.brand-core .rp-msg.success { color: #1f6b48; }

/* ---- link ---- */
html.brand-core .forgot-link,
html.brand-core .register-link,
html.brand-core .fp-back,
html.brand-core .rp-back { color: var(--core-gold-ink); opacity: 1; }
html.brand-core .login-back-link,
html.brand-core .auth-back-top {
  color: var(--core-navy);
  border: 1px solid rgba(18, 33, 60, 0.3);
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
html.brand-core .login-back-link:hover,
html.brand-core .auth-back-top:hover { border-color: var(--core-navy); text-decoration: none; }

/* ---- footer ---- */
html.brand-core .login-footer,
html.brand-core .fp-footer,
html.brand-core .rp-footer,
html.brand-core .auth-footer { color: var(--core-muted); }

/* ============================================================
   LOGIN — "night watch" scene (Oct 2026)
   Navy page like www.core-aiowl.org, the home-hero owl on the right,
   glass card on the left with the gold medallion. Scoped to the
   login page only: forgot / reset / register keep the ivory theme.
   ============================================================ */
html.brand-core body.login-body {
  --lb-navy: #07142d;
  --lb-navy-2: #0b1a3a;
  --lb-ivory: #f9f0e7;
  --lb-gold: #cd9b50;
  --lb-gold-light: #e2b878;
  --lb-gold-pale: #f3dcb4;
  --lb-line: rgba(249, 240, 231, 0.14);
  color: var(--lb-ivory);
  background: var(--lb-navy);
  display: block;
  padding: 0;
  overflow-x: hidden;
}
html.brand-core body.login-body::before,
html.brand-core body.login-body::after { display: none; }   /* no hex pattern, no ivory owl */

/* scene: the owl of the website home, feathered into the navy */
html.brand-core body.login-body .login-scene {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
html.brand-core body.login-body .login-scene img {
  position: absolute;
  right: -2vw;
  top: 50%;
  transform: translateY(-50%);
  width: 74vw;
  min-height: 100%;
  height: auto;
  object-fit: cover;
  object-position: 55% center;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 62% 50%, #000 55%, transparent 100%);
  mask: radial-gradient(ellipse 70% 80% at 62% 50%, #000 55%, transparent 100%);
}
html.brand-core body.login-body .login-scene__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,20,45,1) 0%, rgba(7,20,45,.94) 24%, rgba(7,20,45,.6) 46%, rgba(7,20,45,.12) 70%, rgba(7,20,45,0) 100%),
    linear-gradient(180deg, rgba(7,20,45,.5) 0%, rgba(7,20,45,0) 30%, rgba(7,20,45,0) 70%, var(--lb-navy) 100%);
}

/* layout: card column on the left */
html.brand-core body.login-body .login-wrapper {
  position: relative;
  z-index: 1;
  max-width: 400px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 0 0 12vw;
  padding: 5rem 0 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: none;
}
html.brand-core body.login-body .login-logo,
html.brand-core body.login-body .login-brand,
html.brand-core body.login-body .login-subtitle { display: none; }

/* card */
html.brand-core body.login-body .login-card {
  background: rgba(11, 26, 58, 0.72);
  border: 1px solid var(--lb-line);
  border-radius: 26px;
  padding: 2rem 2rem 1.4rem;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(249, 240, 231, 0.06);
}
html.brand-core body.login-body .login-medallion {
  display: block;
  width: 74px;
  height: 74px;
  margin: 0 auto 10px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}
html.brand-core body.login-body .login-card h2 {
  color: var(--lb-ivory);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
}
html.brand-core body.login-body .login-program {
  display: block;
  font-size: 0.9rem;
  color: rgba(249, 240, 231, 0.7);
  margin: 0 0 1.3rem;
}

/* form */
html.brand-core body.login-body .form-group label {
  color: var(--lb-gold-light);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}
html.brand-core body.login-body .form-group input {
  color: var(--lb-ivory);
  background: rgba(249, 240, 231, 0.06);
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  padding: 0.85rem 1rem;
}
html.brand-core body.login-body .password-wrap input { padding-right: 2.75rem; }
html.brand-core body.login-body .form-group input:focus {
  border-color: var(--lb-gold);
  box-shadow: 0 0 0 3px rgba(205, 155, 80, 0.3);
}
html.brand-core body.login-body .form-group input::placeholder { color: rgba(249, 240, 231, 0.45); }
html.brand-core body.login-body .form-group input:-webkit-autofill,
html.brand-core body.login-body .form-group input:-webkit-autofill:hover,
html.brand-core body.login-body .form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--lb-ivory);
  -webkit-box-shadow: 0 0 0 1000px #13244a inset;
  box-shadow: 0 0 0 1000px #13244a inset;
  caret-color: var(--lb-ivory);
}
html.brand-core body.login-body .form-group input:autofill { background: #13244a; color: var(--lb-ivory); }
html.brand-core body.login-body .toggle-password-btn { color: rgba(249, 240, 231, 0.6); }
html.brand-core body.login-body .toggle-password-btn:hover { color: var(--lb-ivory); }

/* gold button like the website */
html.brand-core body.login-body .btn-primary {
  background: linear-gradient(135deg, var(--lb-gold-light), var(--lb-gold));
  color: var(--lb-navy);
  border-radius: 999px;
  padding: 0.95rem 1rem;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(205, 155, 80, 0.28);
}
html.brand-core body.login-body .btn-primary:hover {
  background: linear-gradient(135deg, var(--lb-gold-pale), var(--lb-gold-light));
  box-shadow: 0 16px 40px rgba(205, 155, 80, 0.4);
}
html.brand-core body.login-body .btn-primary:disabled { opacity: 0.7; }

/* links */
html.brand-core body.login-body .forgot-link,
html.brand-core body.login-body .register-link {
  color: var(--lb-gold-light);
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 0.5rem;
}
html.brand-core body.login-body .forgot-link { margin-top: 1rem; }
html.brand-core body.login-body .login-error { color: #ff8b84; }
html.brand-core body.login-body .login-schools {
  display: block;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--lb-line);
  font-size: 0.84rem;
  color: rgba(249, 240, 231, 0.7);
}
html.brand-core body.login-body .login-schools a { color: var(--lb-gold-light); font-weight: 600; text-decoration: none; }
html.brand-core body.login-body .login-schools a:hover { text-decoration: underline; }

/* tagline under the card */
html.brand-core body.login-body .login-tagline {
  display: block;
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(249, 240, 231, 0.85);
}
html.brand-core body.login-body .login-tagline em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.15em;
  color: var(--lb-gold-light);
}
html.brand-core body.login-body .login-tagline small {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(249, 240, 231, 0.5);
}

/* chrome */
html.brand-core body.login-body .login-back-link {
  z-index: 2;
  color: var(--lb-ivory);
  border: 1px solid var(--lb-line);
  background: rgba(7, 20, 45, 0.35);
  border-radius: 999px;
  font-weight: 600;
  opacity: 0.85;
}
html.brand-core body.login-body .login-back-link:hover { opacity: 1; border-color: var(--lb-gold-light); text-decoration: none; }
html.brand-core body.login-body .login-footer {
  z-index: 1;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(249, 240, 231, 0.5);
}

/* tablet / phone: owl fades behind the centred card */
@media (max-width: 1023px) {
  html.brand-core body.login-body .login-scene { display: block; }
  html.brand-core body.login-body .login-scene img {
    right: auto; left: 50%; transform: translate(-50%, -50%);
    width: auto; height: 100%; min-width: 100%;
    object-position: 62% center;
    opacity: 0.45;
    -webkit-mask: radial-gradient(ellipse 80% 90% at 50% 50%, #000 40%, transparent 100%);
    mask: radial-gradient(ellipse 80% 90% at 50% 50%, #000 40%, transparent 100%);
  }
  html.brand-core body.login-body .login-scene__shade {
    background: linear-gradient(180deg, rgba(7,20,45,.75) 0%, rgba(7,20,45,.55) 50%, var(--lb-navy) 100%);
  }
  html.brand-core body.login-body .login-wrapper { margin: 0 auto; padding: 5rem 1.25rem 4.5rem; }
}
@media (max-width: 600px) {
  html.brand-core body.login-body { flex-direction: column; }
  html.brand-core body.login-body .login-wrapper { min-height: 0; padding-top: 5.5rem; padding-bottom: 0; }
  html.brand-core body.login-body .login-card { padding: 1.6rem 1.3rem 1.2rem; }
  html.brand-core body.login-body .login-footer { position: static; margin: 1.25rem 0 1.5rem; }
  html.brand-core body.login-body .login-tagline { margin-bottom: 1.25rem; }
}
html.brand-core body.login-body .login-error:empty { display: none; }