/* Sign-in pages (layouts/auth.php): letterhead, form card, footer. */
:root {
    --auth-navy: #133a68;
    --auth-gold: #c9a227;
    --auth-paper: #f4f2ed;
    --auth-line: #dcd7cc;
    --auth-ink: #1f2933;
    --auth-muted: #5f6b7a;
}

.auth-body { background: var(--auth-paper); color: var(--auth-ink); min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- Letterhead ---------- */
.auth-letterhead { background: #fff; border-top: 4px solid var(--auth-gold); border-bottom: 1px solid var(--auth-line); }
.auth-letterhead-inner { max-width: 960px; margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.auth-seal { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.auth-kicker { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--auth-muted); }
.auth-school { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.3rem; color: var(--auth-navy); line-height: 1.2; }
.auth-address { font-size: .82rem; color: var(--auth-muted); }

/* ---------- Card ---------- */
/* The card is centred in the space between letterhead and footer, so spare height is shared
   above and below instead of collecting under the card. "safe" keeps a tall card from being cut off. */
.auth-main { flex: 1; display: flex; align-items: safe center; justify-content: center; padding: 2rem 1rem; }
.auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--auth-line); border-radius: 6px; padding: 2rem 2rem 1.75rem; }
.auth-app { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--auth-gold); margin-bottom: .35rem; }
.auth-title { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-weight: 600; font-size: 1.6rem; color: var(--auth-navy); margin-bottom: .35rem; }
.auth-subtitle { color: var(--auth-muted); font-size: .9rem; margin-bottom: 1.5rem; }
.auth-card .form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.auth-card .form-control { border-radius: 4px; border-color: #c9cfd8; padding: .55rem .75rem; }
.auth-card .form-control:focus { border-color: var(--auth-navy); box-shadow: 0 0 0 .15rem rgba(19,58,104,.15); }
.auth-card .btn-toggle-pass { border-radius: 0 4px 4px 0; border-color: #c9cfd8; color: var(--auth-muted); }
.auth-card .btn-primary { background: var(--auth-navy); border-color: var(--auth-navy); border-radius: 4px; font-weight: 600; padding: .6rem; }
.auth-card .btn-primary:hover, .auth-card .btn-primary:focus { background: #0e2c50; border-color: #0e2c50; }
.auth-card a { color: var(--auth-navy); }
.auth-back { display: inline-block; font-size: .85rem; margin-bottom: 1rem; text-decoration: none; }
.auth-links { border-top: 1px solid #ece8e0; margin-top: 1.5rem; padding-top: 1rem; font-size: .85rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.auth-note { font-size: .8rem; color: var(--auth-muted); margin-top: 1rem; margin-bottom: 0; }

/* ---------- Footer ---------- */
.auth-footer { text-align: center; font-size: .78rem; color: var(--auth-muted); padding: 1.25rem 1rem 1.75rem; }


/*
 * Short screens (laptops with display scaling, landscape tablets): tighten vertical spacing
 * so the whole page, footer included, fits without scrolling. Taller monitors are unchanged.
 */
@media (min-width: 576px) and (max-height: 820px) {
    .auth-letterhead-inner { padding: .55rem 1.25rem; }
    .auth-seal { width: 48px; height: 48px; }
    .auth-school { font-size: 1.15rem; }
    .auth-main { padding: 1rem 1rem .75rem; }
    .auth-card { padding: 1.25rem 2rem 1.1rem; }
    .auth-title { font-size: 1.4rem; margin-bottom: .2rem; }
    .auth-subtitle { margin-bottom: .9rem; }
    .auth-card .mb-3 { margin-bottom: .65rem !important; }
    .auth-card .form-control { padding: .45rem .75rem; }
    .auth-card .btn-primary { padding: .5rem; }
    .auth-links { margin-top: .9rem; padding-top: .65rem; }
    .auth-note { margin-top: .6rem; }
    .auth-footer { padding: .5rem 1rem .75rem; }
}
/* Very short screens: drop the letterhead address line to save another row. */
@media (min-width: 576px) and (max-height: 640px) {
    .auth-address { display: none; }
    .auth-subtitle { display: none; }
    .auth-footer .mt-1 { display: inline; margin-left: .35rem; }
}

@media (max-width: 575.98px) {
    .auth-seal { width: 48px; height: 48px; }
    .auth-school { font-size: 1.05rem; }
    .auth-kicker { font-size: .62rem; }
    .auth-main { padding-top: 1.5rem; }
    .auth-card { padding: 1.5rem 1.25rem; border-left: 0; border-right: 0; border-radius: 0; }
}