/*
  Base stylesheet — Life at Noord.
  Reset + tokens-driven typography + shared nav/footer scaffold.
  Loaded on every page after tokens.css. Nav and footer markup here is
  copy-pasted identically into every page's HTML — if this changes,
  every page must be updated (see build-conventions.md).
*/

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-weight: 400;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Buttons never take browser chrome on the public site: Helvetica via
   inherit, no border/background/padding — page CSS adds any specifics.
   (Form-control defaults would otherwise smuggle in a 13.33px third
   type size and native borders.) */
button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Shared horizontal edge padding — reused by any full-width section so
   content lines up with the fixed nav/footer margins on every page. */
.edge-padding {
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}

/* ---------------------------------------------------------------------
   Nav — three fixed points (left / center / right), identical on every
   page. Fixed to the viewport top so it sits above scrolling content.
   Revision 2026-07-22: no background/blur — nav text sits directly over
   the page and scrolling content passes slightly underneath it. Each
   page's own CSS still gives its first section enough top clearance so
   content doesn't render flush under the nav on initial load.
   Revision 2026-07-22 (feedback round 2): nav aligns to the same
   4-column grid as the overview (same margins + gutter). "Nicholas
   Erreweyaert" left-aligns with column 3's left edge (x=972 @1920) —
   the same line the detail photo and contact block sit on — instead of
   being viewport-centered. Below 1024px the 4-column grid doesn't
   exist, so the nav falls back to the previous left/center/right
   layout (designer-approved).
--------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gutter);
  align-items: center;
  /* Round 10: nav margins equal the 24px side margins on every side. */
  padding: var(--grid-margin);
}

.site-nav__item {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 400;
}

.site-nav__item--left {
  grid-column: 1;
  justify-self: start;
}

.site-nav__item--center {
  grid-column: 3;
  justify-self: start;
}

.site-nav__item--right {
  grid-column: 4;
  justify-self: end;
}

@media (max-width: 1024px) {
  .site-nav {
    grid-template-columns: 1fr auto 1fr;
    column-gap: 0;
  }

  .site-nav__item--left {
    grid-column: 1;
  }

  .site-nav__item--center {
    grid-column: 2;
    justify-self: center;
  }

  .site-nav__item--right {
    grid-column: 3;
  }
}

/* ---------------------------------------------------------------------
   Footer — two fixed points (left / right), identical on every page.
--------------------------------------------------------------------- */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Round 10: footer margins equal the 24px side margins on every side. */
  padding: var(--grid-margin);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}