/* ==========================================================
   University Events - stylesheet
   Direction: a calm campus noticeboard. Classic navy, warm gold,
   plain system fonts, and a calendar-style
   date stamp as the one memorable element.

   Contents
   1. Design tokens      2. Base          3. Header and footer
   4. Layout and cards   5. Forms         6. Buttons
   7. Messages, badges   8. Tables        9. Sign-in page
   10. Utilities        11. Responsive and user settings
   ========================================================== */

/* 1. Design tokens ----------------------------------------- */
:root {
  color-scheme: light;

  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Colour */
  --ink: #12262d;
  --muted: #44545b;
  --bg: #f7f6f1;
  --surface: #ffffff;
  --surface-alt: #eeece4;
  --line: #d7d4ca;
  --line-strong: #62676b;

  --navy: #142f45;
  --navy-soft: #27465c;
  --accent: #e7b64b;

  --primary: #24566b;
  --primary-dark: #173d52;
  --primary-tint: #e6eff1;
  --card-hover: #fff9e9;

  --success: #1a7f3c;
  --success-dark: #14602d;
  --success-ink: #0f4a22;
  --success-tint: #e1f5e7;

  --danger: #b42318;
  --danger-dark: #8f1c13;
  --danger-ink: #7a1710;
  --danger-tint: #fdeceb;

  --focus: #9a4b00;
  --focus-on-dark: #ffd166;

  /* Spacing scale */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  /* Shape and depth */
  --radius: 0.75rem;
  --radius-sm: 0.4rem;
  --shadow: 0 1px 3px rgb(11 42 51 / 10%);
}

/* 2. Base --------------------------------------------------- */
* { box-sizing: border-box; }

body {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
}

a { color: var(--primary); text-underline-offset: 0.18em; }
a:hover { color: var(--primary-dark); }

h1, h2, h3 { line-height: 1.2; }
h1 {
  margin: var(--s1) 0 var(--s3);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}
h2 { margin: var(--s6) 0 var(--s3); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; font-weight: 700; }

.lead { max-width: 46rem; color: var(--muted); font-size: 1.15rem; }
.eyebrow { margin: var(--s3) 0 var(--s1); color: var(--primary); font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  z-index: 10;
  top: var(--s2);
  left: var(--s2);
  transform: translateY(-180%);
  padding: var(--s3) var(--s4);
  color: #fff;
  background: var(--navy);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

/* 3. Header and footer ------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s5);
  min-height: 4.5rem;
  padding: var(--s3) max(var(--s4), calc((100% - 76rem) / 2));
  color: #fff;
  background: var(--navy);
  border-bottom: 4px solid var(--accent);
}
.site-header :focus-visible { outline-color: var(--focus-on-dark); }
.page-footer :focus-visible,
.site-footer :focus-visible { outline-color: var(--focus); }

.brand {
  flex: 0 0 auto;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

.site-header nav {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
}
.site-header nav a,
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin: 0;
  padding: var(--s2) var(--s3);
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.site-header nav .link-button { margin-left: var(--s3); }
.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list > li { display: flex; align-items: center; }
.site-header nav a:hover,
.link-button:hover { color: #fff; background: var(--navy-soft); }

/* Current page: white tab, bold text and an accent underline (not colour alone) */
.site-header nav a[aria-current="page"] {
  color: var(--navy);
  background: #fff;
  font-weight: 700;
  box-shadow: inset 0 -4px 0 var(--accent);
}
.site-header .link-button { border: 1px solid #7e9aa3; }

.page-footer,
.site-footer {
  margin-top: var(--s7);
  color: var(--muted);
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
}
.site-footer { padding: var(--s4) max(var(--s4), calc((100% - 76rem) / 2)); }
.page-footer .page-shell { margin-top: 0; margin-bottom: 0; padding: var(--s4) 0; }
.page-footer p,
.site-footer p { margin: 0; }

/* 4. Layout and cards -------------------------------------- */
.page-shell {
  width: min(72rem, calc(100% - 2rem));
  margin: var(--s6) auto var(--s7);
}

.page-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.page-heading-row h1,
.page-heading-row .lead { margin: 0; }
.page-heading-row .button-link { flex: 0 0 auto; margin: 0; }

.panel,
.event-card {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.panel > h2:first-child { margin-top: 0; }

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s4);
}
.summary-card {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 5px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.summary-card h3 { margin: 0; }
.summary-card p { margin: var(--s2) 0; font-size: 2rem; font-weight: 800; }
.dashboard-next { margin-top: var(--s5); }
.dashboard-next h2 { margin-top: 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s4);
  margin: var(--s5) 0;
  padding: 0;
  list-style: none;
}
.card-grid > li { min-width: 0; }

/* Event cards have a dark blue top rule */
.event-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  border-top: 5px solid var(--primary);
}
.event-card {
  position: relative;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.event-card:hover,
.event-card:focus-within {
  color: var(--ink);
  background: var(--card-hover);
  border-color: var(--accent);
  box-shadow: 0 6px 16px rgb(20 47 69 / 14%);
  transform: translateY(-2px);
}
.event-card h2 a { color: var(--primary-dark); text-decoration-color: currentColor; }
.event-card h2 a::after { position: absolute; inset: 0; content: ""; }
.event-card:hover h2 a,
.event-card:focus-within h2 a { text-decoration-color: currentColor; }
.event-image {
  display: block;
  width: calc(100% + 3rem);
  height: 11rem;
  margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) 0;
  object-fit: cover;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  pointer-events: none;
}
.event-card h2,
.event-card h3 { margin: 0; font-size: 1.2rem; }
.event-card p { margin: 0; }

.event-method { align-self: flex-start; margin-top: auto; }

.event-feedback { margin: 0 0 var(--s4); }

dl { display: grid; grid-template-columns: minmax(9rem, 0.3fr) 1fr; gap: var(--s3) var(--s4); }
dt { font-weight: 700; }
dd { margin: 0; }

.back-link { display: inline-block; margin-bottom: var(--s3); font-weight: 700; text-decoration: none; }
.back-link::before { content: "\2190"; margin-right: var(--s2); }
.back-link:hover { text-decoration: underline; }

/* 5. Forms --------------------------------------------------- */
form label,
.filter-panel label { display: block; margin: var(--s4) 0 var(--s1); font-weight: 700; }

input,
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--s2) var(--s3);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}
textarea { resize: vertical; }
input[type="radio"],
input[type="checkbox"] { width: auto; min-height: auto; accent-color: var(--primary); }
fieldset { margin: var(--s4) 0; padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
fieldset legend { padding: 0 var(--s2); font-weight: 700; }
form label.choice-label { display: flex; align-items: center; gap: var(--s2); margin: var(--s2) 0; font-weight: 400; }
input[readonly] { background: var(--surface-alt); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline-offset: 0; border-color: var(--focus); }

/* Invalid fields get a thicker red border AND a text message (never colour alone) */
[aria-invalid="true"] { border: 2px solid var(--danger); }
.field-error,
.field .error { margin: var(--s1) 0 0; color: var(--danger-ink); font-weight: 700; }

.hint { margin: var(--s1) 0; color: var(--muted); }
.form-panel { max-width: 44rem; }

.filter-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: end;
  gap: var(--s3) var(--s4);
  margin: var(--s5) 0;
  padding: var(--s4);
  background: var(--primary-tint);
  border: 1px solid #a9cdd5;
  border-radius: var(--radius);
}
.filter-panel label { margin-top: 0; }
.filter-panel button { margin: 0; }

/* 6. Buttons ------------------------------------------------- */
button,
.button-link {
  display: inline-block;
  min-height: 2.75rem;
  margin-top: var(--s4);
  padding: var(--s2) var(--s4);
  color: #fff;
  background: var(--primary);
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
button:hover:not(:disabled),
.button-link:hover {
  color: var(--navy);
  background: var(--accent);
  border-color: var(--accent);
}
button:active:not(:disabled),
.button-link:active { transform: translateY(1px); }

button.button-secondary,
.button-link.button-secondary { color: var(--primary-dark); background: #fff; border-color: var(--line-strong); }
button.button-secondary:hover,
.button-link.button-secondary:hover { color: var(--primary-dark); background: var(--primary-tint); border-color: var(--primary-dark); }
.filter-panel .button-secondary { color: var(--primary-dark); background: #fff; }

button:disabled,
button[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

/* 7. Messages and badges ------------------------------------ */
.message {
  margin: var(--s3) 0;
  padding: var(--s3) var(--s4);
  color: var(--primary-dark);
  background: var(--primary-tint);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius-sm);
}
.message.error { color: var(--danger-ink); background: var(--danger-tint); border-left-color: var(--danger); }
.message.success { color: var(--success-ink); background: var(--success-tint); border-left-color: var(--success); }
.field-error { margin: var(--s2) 0; color: var(--danger-ink); font-weight: 700; }

[hidden] { display: none !important; }

.badge {
  display: inline-block;
  padding: 0.12rem var(--s3);
  color: var(--primary-dark);
  background: var(--primary-tint);
  border: 1px solid #7fb0bb;
  border-radius: 10rem;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}
.badge-registered { color: var(--success-ink); background: var(--success-tint); border-color: var(--success); }
.badge-attended { color: var(--primary-dark); background: var(--primary-tint); border-color: var(--primary); }

/* 8. Tables --------------------------------------------------- */
.table-wrap {
  width: 100%;
  margin: var(--s4) 0;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
table { width: 100%; border-collapse: collapse; }
caption { padding: var(--s3) var(--s4); text-align: left; font-weight: 700; }
th, td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
thead { color: #fff; background: var(--navy); }
thead th { border-bottom: 0; }
tbody th { font-weight: 700; }
tbody tr:nth-child(even) { background: #f3f8f8; }
tbody tr:hover { background: var(--primary-tint); }
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
.table-sort {
  min-height: 0;
  margin: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.table-sort:hover:not(:disabled) { color: #fff; background: transparent; }
.table-sort:focus-visible { outline-color: var(--focus-on-dark); }

/* 9. Sign-in page -------------------------------------------- */
.auth-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  width: min(72rem, calc(100% - 2rem));
  min-height: calc(100vh - 5rem);
  margin: 0 auto;
  padding: var(--s7) 0;
}
.auth-intro h1 { max-width: 12ch; font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.08; }
.auth-intro p:last-child { max-width: 38rem; color: var(--muted); font-size: 1.15rem; }
.auth-panel { border-top: 5px solid var(--accent); }
.auth-panel h2 { margin-top: 0; }
.auth-layout + .site-footer { margin-top: 0; }
/* 10. Utilities ---------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 11. Responsive and user settings --------------------------- */
@media (max-width: 46rem) {
  .site-header { align-items: stretch; flex-direction: column; gap: var(--s2); padding: var(--s3) var(--s4); }
  .site-header nav { flex: 0 1 auto; justify-content: flex-start; gap: var(--s1); margin-left: calc(var(--s2) * -1); }
  .site-header nav .nav-list { gap: var(--s1); }
  .site-header nav .link-button { margin-left: 0; }
  .page-shell { margin-top: var(--s5); }
  .page-heading-row { align-items: flex-start; flex-direction: column; }
  .auth-layout { grid-template-columns: 1fr; align-content: center; gap: var(--s4); }
  .auth-intro h1 { max-width: 16ch; }
  dl { grid-template-columns: 1fr; gap: var(--s1); }
  dd { margin-bottom: var(--s3); }
  .stack-table,
  .stack-table tbody,
  .stack-table tr,
  .stack-table th,
  .stack-table td { display: block; width: 100%; }
  .stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .stack-table tbody tr { padding: var(--s2); border-bottom: 1px solid var(--line); }
  .stack-table tbody th { padding: var(--s2) var(--s3); border: 0; }
  .stack-table tbody td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 0.4fr) minmax(0, 1fr);
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    border: 0;
  }
  .stack-table tbody td::before { content: attr(data-label); font-weight: 700; }
}

/* Remove movement for people who ask their system for less of it */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Keep borders visible when the system forces its own colours (Windows High Contrast) */
@media (forced-colors: active) {
  button, .button-link { border: 2px solid ButtonText; }
  .badge, .message, .panel, .event-card { border: 1px solid CanvasText; }
}