/* Styling for the members login pages.
   All colours and fonts are variables here so they can be matched to the main
   sotonccf.co.uk stylesheet in one place. */
:root {
  --lg-brand:      #1d4e89;   /* headings, links, buttons   */
  --lg-brand-dark: #153a68;   /* button hover, footer       */
  --lg-bg:         #f4f5f7;   /* page background            */
  --lg-card:       #ffffff;
  --lg-text:       #222222;
  --lg-muted:      #666666;
  --lg-border:     #cfd4da;
  --lg-font:       "Helvetica Neue", Arial, "Noto Sans", "Microsoft JhengHei", sans-serif;
}

.lg-body { margin:0; font-family:var(--lg-font); color:var(--lg-text); background:var(--lg-bg);
           display:flex; flex-direction:column; min-height:100vh; line-height:1.5; }

/* Header + menu */
.lg-header { background:#fff; border-bottom:3px solid var(--lg-brand); display:flex; flex-wrap:wrap;
             align-items:center; justify-content:space-between; padding:.5rem 1rem; }
.lg-logo img { display:block; max-height:70px; width:auto; }
.lg-nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.25rem 1.1rem; }
.lg-nav a { color:var(--lg-text); text-decoration:none; font-size:.95rem; padding:.4rem 0; display:inline-block; }
.lg-nav a:hover, .lg-nav a[aria-current] { color:var(--lg-brand); border-bottom:2px solid var(--lg-brand); }
.lg-flag { height:.9em; vertical-align:baseline; }
.lg-nav-toggle { display:none; }
.lg-nav-label { display:none; cursor:pointer; font-weight:bold; color:var(--lg-brand); padding:.5rem; }
@media (max-width: 800px) {
  .lg-nav-label { display:block; }
  .lg-nav { display:none; width:100%; }
  .lg-nav-toggle:checked ~ .lg-nav { display:block; }
  .lg-nav ul { flex-direction:column; }
}

/* Main card */
.lg-main { flex:1; display:flex; justify-content:center; align-items:flex-start; padding:2rem 1rem; }
.lg-card { background:var(--lg-card); width:100%; max-width:420px; padding:2rem; border-radius:8px;
           box-shadow:0 2px 10px rgba(0,0,0,.08); box-sizing:border-box; }
.lg-card-wide { max-width:760px; }
.lg-card h1 { margin:0 0 1rem; font-size:1.5rem; color:var(--lg-brand); }
.lg-card label { display:block; margin:1rem 0 .3rem; font-size:.9rem; font-weight:bold; }
.lg-card input[type=email], .lg-card input[type=password] {
  width:100%; padding:.65rem; border:1px solid var(--lg-border); border-radius:4px; box-sizing:border-box; font-size:1rem; }
.lg-card input:focus { outline:2px solid var(--lg-brand); outline-offset:1px; }
.lg-card button { margin-top:1.4rem; width:100%; padding:.75rem; background:var(--lg-brand); color:#fff;
                  border:0; border-radius:4px; font-size:1rem; cursor:pointer; }
.lg-card button:hover { background:var(--lg-brand-dark); }
.lg-card a { color:var(--lg-brand); }
.lg-card small { color:var(--lg-muted); }
.err, .ok { padding:.7rem; border-radius:4px; font-size:.92rem; margin:0 0 1rem; }
.err { background:#fde8e8; color:#9b1c1c; }
.ok  { background:#e6f4ea; color:#1e6b34; }
.links { margin-top:1.3rem; font-size:.92rem; text-align:center; }

/* Footer */
.lg-footer { background:var(--lg-brand-dark); color:#e8edf3; padding:1.5rem 1rem; font-size:.9rem; }
.lg-footer a { color:#fff; }
.lg-footer h2 { font-size:1rem; margin:0 0 .5rem; }
.lg-footer ul { list-style:none; margin:0; padding:0; }
.lg-footer-cols { display:flex; flex-wrap:wrap; gap:2rem; max-width:900px; margin:0 auto 1rem; }
.lg-copy { text-align:center; margin:0; font-size:.85rem; }