/* Self-hosted Nunito Sans (Phoenix's default type family), variable font
   covering weights 300-900 in one file — avoids a runtime dependency on
   Google Fonts' CDN. */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/nunito-sans/nunito-sans-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Brand color — overrides Phoenix's default blue (#3874ff) with the site's
   existing accent so buttons, badges, and focus rings pick it up
   automatically everywhere theme.min.css references --phoenix-primary.
   --phoenix-primary-bg-subtle/-light-rgb are separate, precompiled
   variables (not derived from --phoenix-primary) that .bg-primary-subtle/
   .border-primary-light key off directly — without overriding these too,
   those pale tint boxes stay Phoenix's original blue even after the main
   color is rebranded. */
:root {
  --phoenix-primary: #0f76c8;
  --phoenix-primary-rgb: 15, 118, 200;
  --phoenix-primary-bg-subtle: color-mix(in srgb, var(--phoenix-primary) 12%, white);
  --phoenix-primary-light-rgb: 123, 180, 225;
}

/* Admin login — full-bleed photo panel (a real caregiving photo already
   used on the public Courses page, not a new stock/AI image) with a brand
   statement on the left and a frosted-glass card holding the actual form
   on the right. Only the login route uses this; 403/404 keep the plain
   centered card (cpn/index.php's $bare_layout branch). */
.auth-page {
  background-color: var(--phoenix-body-bg, #f5f7fa);
}

.auth-page-outer {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-hero-panel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  min-height: 640px;
  border-radius: 1.5rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
}

.auth-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 20, 40, .75) 0%, rgba(6, 20, 40, .35) 55%, rgba(6, 20, 40, .15) 100%);
}

.auth-hero-content {
  position: relative;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 2.5rem 1.5rem;
}

.auth-hero-brand {
  flex: 1 1 320px;
  max-width: 420px;
}

.auth-card-glass {
  flex: 0 1 380px;
  width: 100%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
}

@media (min-width: 992px) {
  .auth-hero-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 4rem;
  }

  .auth-hero-brand {
    text-align: left;
  }
}