/* Shared shell for every dwagenvoort.nl page. One stylesheet, no build step:
   the deploy publishes exactly what is committed, so anything that needs
   compiling would need a toolchain on the VPS that deliberately is not there. */

:root {
  color-scheme: light dark;
  --bg: #eef3fa;
  --ink: #10243f;
  --muted: #4a6180;
  --accent: #1668c4;
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1422;
    --ink: #e7eef8;
    --muted: #9db2cc;
    --accent: #6ba6ef;
  }
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

main {
  width: min(100% - 3rem, 42rem);
  padding: clamp(2rem, 7vw, 5rem) 0;
}

.rule {
  width: 3rem;
  height: 3px;
  margin-bottom: 2rem;
  background: var(--accent);
}

.domain {
  margin: 0 0 1.25rem;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 5rem);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.message {
  max-width: 34rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
}

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: .2em; }

/* The personal homepage is one card: the name and the link to LinkedIn, and
   nothing else to read. It keeps its own layout so the app pages stay as they
   are. */
body.home {
  background:
    radial-gradient(circle at 78% 22%, rgba(22, 104, 196, .16), transparent 45%),
    radial-gradient(circle at 12% 88%, rgba(22, 104, 196, .10), transparent 45%),
    var(--bg);
}

@media (prefers-color-scheme: dark) {
  body.home {
    background:
      radial-gradient(circle at 78% 22%, rgba(107, 166, 239, .16), transparent 45%),
      radial-gradient(circle at 12% 88%, rgba(107, 166, 239, .10), transparent 45%),
      var(--bg);
  }
}

.home-card {
  width: min(100% - 2.5rem, 28rem);
  padding: clamp(2rem, 6vw, 3rem);
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  text-align: center;
}

.home-monogram {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: .85rem;
  font-weight: 750;
  letter-spacing: -.04em;
}

.home-name {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .9rem 1.4rem;
  border-radius: .4rem;
  background: var(--accent);
  /* Page background as the ink: white would only carry on the darker blue of
     the light scheme, not on the lighter accent the dark one needs. */
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
}

.home-link-icon { flex: none; }
.home-link-arrow { font-size: 1.1rem; line-height: 1; }
.home-link:hover { background: var(--ink); transform: translateY(-2px); }
.home-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .home-link { transition: none; }
  .home-link:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Mijn Traject pages (the subdomain). They share this stylesheet but not the
   apex page's palette: someone arriving from the app should recognise the
   pages as the same product, and the apex blues above are not the app's blues.
   Every value below is the app's own — the two schemes in
   Theme.kt, the yellow toolbar in AppTopBar.kt, the 10dp route panels in
   DepartureBoard.kt — so when a colour moves there, it moves here too.

   Scoped to the body class rather than :root so the apex holding page keeps
   the palette it was designed with.
   --------------------------------------------------------------------------- */

body.mijntraject {
  --bg: #fbfcfe;          /* LightColors.background */
  --ink: #1a1c1e;         /* LightColors.onBackground */
  --muted: #43474e;       /* LightColors.onSurfaceVariant */
  --accent: #003082;      /* NsBlue */
  --panel: #ffffff;       /* departurePanelColor, light */
  --line: #c3c7cf;        /* LightColors.outlineVariant */
  --raised: #e3e6ec;      /* LightColors.surfaceVariant */
  /* NS yellow and the blue on it are fixed ink in both schemes, the way the
     app bar keeps its yellow when the rest of the app goes dark. */
  --brand: #ffc917;       /* NsYellow */
  --on-brand: #003082;    /* NsBlue */
}

@media (prefers-color-scheme: dark) {
  body.mijntraject {
    --bg: #101418;        /* DarkColors.background */
    --ink: #e2e6eb;
    --muted: #c2c7ce;
    --accent: #7fa8e8;    /* NsBlueOnDark — NsBlue is near-black on these surfaces */
    --panel: #171e26;     /* departurePanelColor, dark */
    --line: #43484f;
    --raised: #272c33;
  }
}

/* The app bar runs the full width of the window, so these pages stack rather
   than centring the whole body the way the apex page does. The alignment above
   has to go with the grid: browsers now honour `justify-items` on block
   containers too, and a centred one shrink-wraps the bar to the width of its
   own text instead of letting it span the window. */
body.mijntraject {
  display: block;
  place-items: normal;
}

.app-bar {
  background: var(--brand);
  color: var(--on-brand);
}

.app-bar-inner {
  width: min(100% - 2.5rem, 52rem);
  min-height: 56px;              /* AppTopBar's toolbar height */
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: .5rem 0;
}

.app-bar a { color: inherit; text-decoration: none; }
.app-bar a:hover, .app-bar a:focus-visible { text-decoration: underline; }
.app-bar a:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 4px; }
.app-bar .brand { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.site-links { display: flex; gap: 1.5rem; font-weight: 600; font-size: .95rem; }

.document {
  width: min(100% - 2.5rem, 52rem);
  margin: 0 auto;
  padding: clamp(1.75rem, 5vw, 2.75rem) 0 3rem;
  line-height: 1.65;
}

/* Calmer than the apex headline: the app's own type is utilitarian, and these
   pages sit under a brand bar that already carries the weight. */
.document h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  letter-spacing: -.02em;
  max-width: 20ch;
}

.document p { margin: 1rem 0; }
.document code { font-size: .9em; overflow-wrap: anywhere; }
.eyebrow { margin: 0 0 .5rem; color: var(--accent); text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; font-weight: 700; }
.lede { font-size: clamp(1.05rem, 2.4vw, 1.2rem); max-width: 45rem; }
.updated { color: var(--muted); font-size: .95rem; }

/* A section reads as one of the app's departure panels: the same 10dp plate on
   the page background, titled by a blue header over a blue rule. */
.panel {
  margin: 1.75rem 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.panel > h2 {
  margin: 0;
  padding: .7rem 1.1rem;
  font-size: clamp(1.1rem, 2.6vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.panel-body { padding: .1rem 1.1rem 1.1rem; }

.link-cards {
  display: grid;
  margin-top: 2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

/* Stacked rows behind one plate, divided like the trips inside a route panel,
   rather than separate floating cards. */
.link-cards a { position: relative; display: grid; gap: .2rem; padding: 1rem 2.75rem 1rem 1.1rem; text-decoration: none; }
.link-cards a + a { border-top: 1px solid var(--line); }
.link-cards a:hover, .link-cards a:focus-visible { background: var(--raised); }
.link-cards strong { color: var(--accent); }
.link-cards span { color: var(--muted); font-size: .95rem; }

/* The chevron the app puts on its paging actions, drawn rather than fetched. */
.link-cards a::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translateY(-50%) rotate(45deg);
}

.site-footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.site-footer p { margin: .5rem 0 0; }