/* Aliases onto css/style.css's own tokens (already loaded on this page
   before this file, so they're available here) rather than a separate
   invented palette - keeps the landing page in the same blue/navy/purple
   family as the rest of the site instead of its own one-off colors. */
:root {
  --front-purple-1: var(--accent);
  --front-purple-2: var(--purple);
  --front-ink: var(--ink);
  --front-muted: var(--muted);
  --front-navy: var(--navy);
  --front-navy-dark: var(--navy-dark);
}

* { box-sizing: border-box; }

body.front-body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  background: #eef1f6;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

/* Split card: a colored hero half (the site's own blue/purple gradient -
   see .landing-hero below) and a white sign-in half. */
.landing-card {
  position: relative;
  width: 100%;
  max-width: 940px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(31,20,60,0.35);
  display: flex;
  align-items: stretch;
  /* Tall enough to match the create-password step (the tallest of the
     identify/password/create-password states) so the card doesn't visibly
     grow or shrink switching between them - measured at 476.5px. */
  min-height: 480px;
}

.landing-hero {
  flex: 1 1 44%;
  position: relative;
  overflow: hidden;
  /* Same blue-to-purple pairing as the profile avatar badge in the app's
     own sidebar (css/style.css) - the site's actual primary gradient. */
  background: linear-gradient(160deg, var(--accent) 0%, var(--purple) 100%);
  color: #fff;
  padding: 35px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Decorative circles, purely cosmetic. */
.landing-hero::before, .landing-hero::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255,255,255,0.1);
}
.landing-hero::before { width: 280px; height: 280px; top: -100px; left: -100px; }
.landing-hero::after { width: 220px; height: 220px; bottom: -80px; right: -60px; }

.landing-hero-text { position: relative; z-index: 2; text-align: center; }
.landing-hero-text h1 {
  margin: 0 0 4px;
  font-size: 34px;
  line-height: 1.15;
  font-weight: 800;
  color: #fff;
}
.landing-hero-text h1 span { display: block; }

/* Quote of the day - text is filled in by js/daily-quotes.js, this is just
   the fallback shown if JavaScript is unavailable. */
.landing-quote {
  margin: 14px auto 0;
  color: #fff;
  opacity: 0.92;
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.6;
  max-width: 340px;
}

.landing-cta-row { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.landing-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 0.15s, opacity 0.15s;
}
.landing-btn:hover { text-decoration: none; }
.landing-btn.secondary {
  background: #fff;
  color: var(--front-ink);
  box-shadow: 0 10px 24px rgba(31,20,60,0.25);
}
.landing-btn.secondary:hover {
  opacity: 0.96;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.25), 0 0 22px rgba(37,99,235,0.55);
}

/* Right half - the actual admin/teacher sign-in form (see index.php),
   styled the same as login.php's card but without its own gradient
   backdrop or shadow, since it's already inside the split card. */
.landing-panel-right {
  flex: 1 1 56%;
  padding: 35px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landing-panel-right h1 { margin: 0 0 4px; text-align: center; color: var(--front-ink); font-size: 26px; }
.landing-panel-right .subtitle { text-align: center; margin: 0 0 18px; }
.landing-panel-right .field { margin-bottom: 12.5px; }
.landing-panel-right .field label { text-align: center; }
.landing-panel-right .login-divider { margin: 12.5px 0; }
.landing-panel-right .login-remember-row { justify-content: center; gap: 20px; }
.landing-panel-right .field input:focus, .landing-panel-right .field select:focus { border-color: var(--front-purple-1); }
.landing-panel-right .link-btn { color: var(--front-purple-1); }
.landing-panel-right .btn {
  background: linear-gradient(135deg, var(--front-navy), var(--front-navy-dark));
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(15,23,42,0.35);
}
.landing-panel-right .btn:hover { opacity: 0.92; }
.landing-panel-right .alert { text-align: center; }

/* Icon-prefixed input, same treatment as login.php's own card - see
   css/style.css's ".login-box .field-icon" comment for why the icon
   positions against .input-icon-wrap and not .field-icon itself. */
.landing-panel-right .field-icon .input-icon-wrap { position: relative; }
.landing-panel-right .field-icon .input-icon-wrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #9ca3af; pointer-events: none;
}
.landing-panel-right .field-icon input { padding-left: 38px; }


.landing-avatar-row { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 6px; text-align: center; }
.landing-avatar-circle {
  width: 180px; height: 180px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--front-purple-1);
  border: 1px solid #fff; box-shadow: 0 10px 24px rgba(31,20,60,0.15);
}
.landing-avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
/* The school logo (unlike a face photo) shouldn't be cropped to fill the
   circle - contain it with a little breathing room instead. */
.landing-avatar-circle img.landing-logo-img { object-fit: contain; padding: 22px; }
.landing-avatar-circle .login-avatar-initial {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--front-purple-1), var(--front-purple-2)); color: #fff;
  font-weight: 700; font-size: 66px;
}

/* Phone-sized viewports (by narrow width in portrait, or short height in
   landscape - a phone rotated sideways can be wider than 820px, e.g. a
   Galaxy S23 Ultra's ~915px landscape CSS width, so width alone wouldn't
   catch it) - the card fills the whole screen instead of floating as a
   card on the gray background, same as a native app screen. */
@media (max-width: 820px), (max-height: 520px) {
  body.front-body { padding: 0; align-items: stretch; }
  .landing-card {
    min-height: 100vh; min-height: 100dvh; max-width: none;
    border-radius: 0; box-shadow: none;
  }

  /* Every size below scales with the viewport's own height (vh) between a
     floor and a ceiling, instead of a fixed pixel guess for one device -
     so a short landscape phone compresses the hero/avatar/spacing down
     automatically until everything fits with no scrolling, and a tall
     portrait phone doesn't end up looking sparse either. Width still
     decides row vs column layout below (a landscape phone keeps the
     side-by-side layout, same as desktop), this only touches sizing. */
  .landing-hero { padding: clamp(12px, 4vh, 35px) clamp(18px, 5vw, 42px); }
  .landing-hero-text h1 { font-size: clamp(17px, 4.2vh, 34px); margin-bottom: 2px; }
  .landing-hero-text h1 span { display: inline; }
  .landing-quote { margin-top: clamp(4px, 1.6vh, 14px); font-size: clamp(11px, 2vh, 14.5px); line-height: 1.4; max-width: none; }
  .landing-cta-row { margin-top: clamp(6px, 2vh, 24px); }
  .landing-btn { padding: clamp(6px, 1.6vh, 12px) clamp(14px, 3vw, 24px); font-size: clamp(10.5px, 1.8vh, 13px); }
  .landing-panel-right { padding: clamp(12px, 4vh, 35px) clamp(18px, 5vw, 46px); }
  .landing-panel-right h1 { font-size: clamp(15px, 3.4vh, 26px); }
  .landing-panel-right .subtitle { margin-bottom: clamp(5px, 1.5vh, 18px); font-size: clamp(11px, 1.8vh, 13.5px); }
  .landing-panel-right .field { margin-bottom: clamp(5px, 1.5vh, 14px); }
  .landing-panel-right .login-divider { margin: clamp(5px, 1.5vh, 12.5px) 0; }
  .landing-avatar-circle { width: clamp(60px, 16vh, 180px); height: clamp(60px, 16vh, 180px); }
  .landing-avatar-circle img.landing-logo-img { padding: clamp(8px, 2.2vh, 22px); }
  .landing-avatar-circle .login-avatar-initial { font-size: clamp(26px, 6vh, 66px); }
  .landing-avatar-row { gap: clamp(3px, 1vh, 10px); margin-bottom: clamp(2px, 0.6vh, 6px); }
  .landing-remember-row, .login-remember-row { font-size: 11.5px; }
  .landing-hero::before { width: clamp(110px, 26vh, 280px); height: clamp(110px, 26vh, 280px); top: clamp(-90px, -9vh, -50px); left: clamp(-90px, -9vh, -50px); }
  .landing-hero::after { width: clamp(90px, 20vh, 220px); height: clamp(90px, 20vh, 220px); bottom: clamp(-70px, -7vh, -35px); right: clamp(-55px, -5.5vh, -25px); }
}
@media (max-width: 820px) {
  .landing-card { flex-direction: column; }
}