/* ============================================================
   Hallam Interactives design system. Single source of truth for
   the shared brand and UI language. Modules consume the tokens
   below, so retheming the whole site means editing these values.

   TWO HARD RULES, both learned the hard way:

   1. NO EXTERNAL REQUESTS. This file used to open with an
      @import pulling the Inter webfont off Google's font CDN.
      On a locked-down school network that request dies, the type
      system falls back mid-render and the site looks broken. The
      font stack below leads with Century Gothic, which is already
      installed on the school Windows machines (it ships with
      Office) and is the same face as the class decks and
      worksheets, so the site matches the printed materials.

   2. Flat, navy, yellow. Matches the house deck spec: white
      ground, navy chrome, yellow accent dots, no gradients and
      effectively no shadows.
   ============================================================ */
:root {
  /* Brand: house navy and yellow, straight off the deck spec */
  --color-brand: #1c4587; /* deep navy, the dominant brand colour */
  --color-brand-strong: #1b3867; /* darker navy, secondary accent */
  --color-brand-soft: #e4ecf9; /* pale navy wash for tinted panels */
  --color-accent: #1c4587;
  --color-accent-hover: #1b3867;
  --color-accent-active: #14294c;
  --color-on-accent: #ffffff;

  /* Yellow is an ACCENT only: dots, pills, focus. Never a text colour. */
  --color-highlight: #ffd45e; /* softened for screen; FFFF00 glares */
  --color-highlight-pure: #ffff00; /* the deck value, for icon dots */

  /* Neutrals */
  --color-bg: #f6f8fb;
  --color-surface: #ffffff;
  --color-surface-hover: #fbfcfe;
  --color-text: #16202e;
  --color-text-muted: #5a6a7d;
  --color-border: #dfe5ec;

  /* Typography. Century Gothic first, then the closest widely
     available geometric sans fallbacks, then the system stack. */
  --font-sans:
    "Century Gothic", "Questrial", "URW Gothic", "Avant Garde", "Trebuchet MS", system-ui,
    -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Radii */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Elevation. Kept as tokens for compatibility with existing
     modules, but deliberately near-flat per the house spec. */
  --shadow-sm: 0 1px 2px rgba(22, 32, 46, 0.05);
  --shadow: 0 1px 3px rgba(22, 32, 46, 0.07);
  --shadow-lg: 0 4px 14px rgba(22, 32, 46, 0.1);
  --shadow-button: 0 1px 2px rgba(22, 32, 46, 0.1);
  --shadow-modal: 0 20px 45px rgba(0, 0, 0, 0.4);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  --wrap: 1140px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Header ------------------------------------------------ */
/* Flat navy band. No gradient, per the house spec. */
header {
  background: var(--color-brand);
  color: #fff;
  padding: 1.75rem 1.5rem;
  text-align: center;
  position: relative;
}

header h1 {
  margin: 0;
  font-size: clamp(1.45rem, 1rem + 2.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

header h2 {
  margin: 0.3rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  opacity: 0.9;
}

header p {
  margin: 0.3rem 0 0;
  opacity: 0.88;
}

/* Back-home link and extra nav links sit as subtle pills, top-left. */
header a,
#home {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.18s ease;
}

header a:hover,
header a:focus-visible,
#home:hover,
#home:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

/* A second nav link stacks to the right of the first. */
header a + a {
  left: auto;
  right: 1.25rem;
}

/* ---- Site brand bar and subject nav (the hub chrome) ------- */
.sitebar {
  background: var(--color-brand);
  color: #fff;
  padding: 1.6rem 0 1.4rem;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The mark: the Hallam IT Basics 1010 logo, seated on a white rounded badge so
   its navy tiles read against the navy brand bar. */
.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 5px;
  box-sizing: border-box;
}

.brand-text h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.brand-text p {
  margin: 2px 0 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Javalab-style category row: a horizontal strip under the brand. */
.subjectnav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-brand-strong);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.subjectnav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.subjectnav a {
  display: block;
  padding: 12px 16px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 3px solid transparent;
}

.subjectnav a:hover,
.subjectnav a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-bottom-color: var(--color-highlight);
}

/* Active tab: the subject currently showing, marked with the house yellow
   underline that matches the hover cue. */
.subjectnav a.is-active {
  background: rgba(255, 255, 255, 0.14);
  border-bottom-color: var(--color-highlight);
}

/* Tabbed subjects. The .js-tabs class is added by script only when JS runs,
   so with JS OFF every subject stays visible and the page still works
   (progressive enhancement, no external requests). */
.js-tabs .subject-section {
  display: none;
}

.js-tabs .subject-section.is-active {
  display: block;
}

/* Sticky footer: with tabs a single subject can be short, so pin the footer to
   the bottom of the viewport instead of letting it float mid-page. Scoped to
   the hub (.catalog) so the interactive pages are untouched. */
body.catalog #content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.catalog main {
  flex: 1 0 auto;
}

/* ---- Buttons ---------------------------------------------- */
button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.55rem 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
}

button:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

button:active {
  background: var(--color-accent-active);
  border-color: var(--color-accent-active);
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
}

/* ---- Catalog / hub homepage -------------------------------- */
body.catalog {
  background: var(--color-bg);
}

body.catalog main {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px 3rem;
}

/* The hub supplies its own brand bar, so suppress the plain header. */
body.catalog header {
  display: none;
}

.subject-section {
  padding: 2.2rem 0 0.5rem;
  scroll-margin-top: 60px; /* clears the sticky nav on anchor jumps */
}

.subject-head {
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0.5rem;
  margin-bottom: 1.2rem;
}

.subject-head h2 {
  margin: 0;
  font-size: 1.6rem;
  color: var(--color-brand);
  font-weight: 700;
}

.subject-head p {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
}

.catalog-section {
  margin-bottom: 1.6rem;
}

body.catalog h2 {
  color: var(--color-brand);
}

.group-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--color-text-muted);
  margin: 1.1rem 0 0.6rem;
}

.sim-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
}

.sim-link {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.05rem 1.1rem 0.95rem;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.sim-link:hover,
.sim-link:focus-visible {
  border-color: var(--color-brand);
  background: var(--color-surface-hover);
  transform: translateY(-2px);
}

.sim-title {
  font-weight: 700;
  font-size: 1.09rem;
  color: var(--color-brand);
  line-height: 1.3;
}

.sim-link:hover .sim-title {
  color: var(--color-brand-strong);
}

.sim-desc {
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  flex: 1 1 auto;
}

.sim-go {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-brand);
}

.sim-link:focus-visible .sim-go,
.sim-link:hover .sim-go {
  text-decoration: underline;
}

/* A small pill for "Year 10", "Game", "Fullscreen" and friends. */
.sim-tag {
  align-self: flex-start;
  margin-bottom: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

/* The featured card gets the yellow edge, nothing louder. */
.sim-link.featured {
  border-left: 5px solid var(--color-highlight);
}

/* ---- Shared image row (used inside several modules) -------- */
.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-4);
}

.img-box {
  text-align: center;
  max-width: 320px;
}

.img-box img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: transform 0.18s ease;
}

.img-box img:hover {
  transform: scale(1.02);
}

.img-box p {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* ---- Shared modal ----------------------------------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 20, 33, 0.82);
  padding: var(--space-4);
  overflow: auto;
}

.modal-content {
  display: block;
  margin: auto;
  max-width: min(92vw, 1000px);
  max-height: 88vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-modal);
}

.close {
  position: absolute;
  top: 1rem;
  right: 1.6rem;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0.2rem 0.6rem;
  box-shadow: none;
}

.close:hover,
.close:focus-visible {
  color: var(--color-highlight);
  background: none;
}

/* ---- Floating back link, for the fullscreen canvas modules -- */
/* Those pages run overflow:hidden on a full-viewport canvas, so
   they cannot take the normal header without breaking. This
   keeps a way out without touching their layout. */
.backfloat {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(28, 69, 135, 0.9);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.backfloat:hover,
.backfloat:focus-visible {
  background: var(--color-brand-strong);
}

/* ---- Footer ------------------------------------------------ */
.sitefoot {
  background: var(--color-brand);
  color: #fff;
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

.sitefoot p {
  margin: 0;
  opacity: 0.9;
}

.sitefoot a {
  color: var(--color-highlight);
}

/* ---- Accessibility ---------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-highlight);
  color: var(--color-brand-strong);
  padding: 0.6rem 1rem;
  font-weight: 700;
  z-index: 10000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

#content:focus {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .subjectnav,
  .backfloat {
    position: static;
  }
}