:root{
  --bg:#0b1d35; --accent:#e4b100; --text:#0f172a; --muted:#64748b; --card:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;color:var(--text);background:#f6f7fb}
a{color:#1146d7;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{background:#0b1d35;color:#fff}
.brand{display:flex;align-items:center;gap:20px}
.brand img{width:100%;max-height:140px;object-fit:cover;border-radius:6px}
.brand h1{margin:0;font-weight:800;letter-spacing:.5px}
/* Shared nav styles */
nav, .top-nav {
  display: flex;
  gap: 28px;          /* consistent spacing */
  padding: 12px 20px; /* same breathing room */
}

nav a, .top-nav a {
  color: #fff;             /* white links */
  text-decoration: none;
  font-size: 1.2rem;
  opacity: 0.9;
}

nav a[aria-current="page"],
.top-nav a[aria-current="page"] {
  font-weight: 700;
  opacity: 1;
}
.hero{background:url('../img/workshop-banner.png') center/contain no-repeat; background-color:#0b1d35; color:#fff; height: 220px; display: flex; align-items: center}
.hero .container{padding:0}
.hero h2{margin:0 0 6px 0;font-size:clamp(24px,3vw,36px);font-weight:900}
.hero p{margin:8px 0 0 0;opacity:.95}
.cta{display:flex;gap:14px;margin-top:18px;flex-wrap:wrap}
.button{display:inline-block;background:#fff;color:#0b1d35;border-radius:10px;padding:12px 18px;font-weight:700;border:2px solid transparent}
/* Unit-specific button colors */
.button-unit1 {
  background:#bfdbfe;   /* light blue */
  color:#1e3a8a;
}
.button-unit1:hover {
  background:#93c5fd;
}

.button-unit2 {
  background:#fef9c3;   /* yellow */
  color:#854d0e;
}
.button-unit2:hover {
  background:#fde047;
}

.button-unit3 {
  background:#bbf7d0;   /* green */
  color:#065f46;
}
.button-unit3:hover {
  background:#86efac;
}

.button-unit4 {
  background:#fecaca;   /* red */
  color:#7f1d1d;
}
.button-unit4:hover {
  background:#fca5a5;
}
.button:hover{background:#f2f6ff;border-color:#cbd5e1;text-decoration:none}
/* Exercise button - light green */
.button-exercise {
  background:#a7f3d0;       /* light green */
  color:#065f46;            /* dark green text */
}
.button-exercise:hover {
  background:#6ee7b7;       /* a bit darker on hover */
}

/* Quiz button - mid blue */
.button-quiz {
  background:#bfdbfe;       /* mid blue */
  color:#1e3a8a;            /* dark blue text */
}
.button-quiz:hover {
  background:#93c5fd;       /* darker on hover */
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:18px}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:12px;padding:18px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.card h3{margin:0 0 8px 0}
/* Constrain and center the welcome card */
.card {
  max-width: 875px;       /* match main hero width (adjust if your hero is narrower) */
  margin: 0 auto;         /* center the card horizontally */
  text-align: center;     /* center the text inside */
}
.small{color:var(--muted);font-size:.95rem}
.footer{padding:28px 0;color:#64748b;text-align:center}
.notice{background:#fff8e1;border:1px solid #facc15;color:#92400e;border-radius:12px;padding:12px 16px}
hr{border:none;border-top:1px solid #e5e7eb;margin:20px 0}
.cta {
  display: flex;
  justify-content: center;  /* centers the buttons horizontally */
  gap: 16px;                /* space between them */
  margin-top: 20px;
  flex-wrap:wrap;
}
/* External link button */
.button-external {
  background: #e5e7eb;      /* light grey */
  color: #111827;
  border:1px solid #d1d5db;
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 600;
  text-decoration: none;
}
.external-link {
  text-align: center;   /* centers the button */
  margin: 30px 0;       /* space above and below */
}
.button-external:hover {
  background: #bbb;      /* slightly darker on hover */
}
.unit-title {
  display: block;       /* forces full-width block element */
  text-align: center;   /* centers the text */
  white-space: normal;  /* allows wrapping nicely */
  word-break: break-word; /* ensures long words don’t overflow */
}