/* Praktijk J.C. de Jong — faithful reproduction of the Squarespace 7.1 site.
   Design tokens measured from the 2026-08-19 crawl; see ../../site-map.md. */

/* ---------- fonts (self-hosted: no third-party request, no AVG question) --- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ------------------------------------------------------- */

:root {
  --accent: #00ffff;          /* header + footer bars, hsl(180 100% 50%)      */
  --paper: #e6f5f5;           /* page background, hsl(180 40% 94.1%)          */
  --ink: #000;

  --gutter: 4vw;              /* Squarespace site gutter                      */
  --bar-height: 104px;        /* header bar, measured off the live site       */
  --max-page-width: 1400px;   /* drives the fluid heading scale below         */

  /* The live site sets headings in futura-pt (Adobe Fonts, licensed through
     Squarespace — it does not survive the move). Jost is the closest free
     Futura revival; body text stays Poppins, which the live site also uses. */
  --display: 'Jost', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;

  /* Jost sits about 9% wider and taller than futura-pt at the same nominal
     size. This factor brings headings back onto the original's line breaks;
     leading is scaled back up so the absolute spacing is unchanged. */
  --display-scale: .92;

  /* Squarespace's section heights are viewport-relative, not fixed pixels:
     section-height--small/medium/large = 33vh / 66vh / 100vh, with the
     content wrapper padded 3.3vmax / 6.6vmax / 10vmax and vertically centred
     inside it. Lifted from the live site.css; see ../../site-map.md. */
  --pad-small: 3.3vmax;
  --pad-medium: 6.6vmax;
}

/* ---------- base --------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Poppins', 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
}

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

a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--accent);
  padding: .75rem 1.25rem;
  z-index: 100;
  text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { padding-inline: var(--gutter); }

/* ---------- header ------------------------------------------------------- */

.masthead {
  background: var(--accent);
  min-height: var(--bar-height);
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: space-between;
}

.brand {
  font-family: var(--display);
  font-weight: 500;
  font-size: min(1.2vw + 1rem, 32.8px);   /* Squarespace site-title scale */
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

.nav-toggle { display: none; }

.nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  display: inline-block;
  padding: .15rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover,
.nav a[aria-current] { border-bottom-color: currentColor; }

/* folders */
.nav li.has-sub { position: relative; }
.nav .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: -1rem;
  /* No margin-top: a transparent gap between the item and the panel breaks
     li:hover the moment the pointer crosses it, so the menu closes before you
     can reach it. The old .35rem offset is folded into padding-top instead —
     the panel box is now flush with the item, the first link still sits where
     it did, and since panel and bar share --accent the extra 5.6px is
     invisible. */
  padding: .95rem 1rem .6rem;
  background: var(--accent);
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  min-width: max-content;
  z-index: 20;
}
.nav li.has-sub:hover > .sub,
.nav li.has-sub:focus-within > .sub { display: flex; }

/* ---------- page body ---------------------------------------------------- */

main { flex: 1 0 auto; }

.section {
  min-height: 66vh;
  padding-block: var(--pad-medium);
  display: flex;
  align-items: center;   /* Squarespace: vertical-alignment--middle */
}
.section > .prose { width: 100%; }

/* The live section-height rules carry :not(.content-collection), so a
   collection page is exempt from both the 66vh floor and the vmax padding —
   its content sits at the top and the footer takes up the slack. /nieuws is
   the one collection page (an empty blog); this reproduces that, minus the
   emptiness. Without it the 66vh floor centres two lines of text halfway down
   the window. */
.section--flow {
  min-height: 0;
  align-items: flex-start;
}

.prose { max-width: none; }

/* Headings. Squarespace sizes these fluidly; the formula below is lifted
   verbatim from the live site.css, with --max-page-width: 1400px. On phones
   (< 768px) Squarespace uses the viewport-height variant instead. */

h1, h2, h3, h4, .size-1, .size-2, .size-3, .size-4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: calc(1.4 / var(--display-scale));
  margin: 2rem 0;
}

h1, .size-1 { --size: 4; }
h2, .size-2 { --size: 2.8; }
h3, .size-3 { --size: 2.2; }
h4, .size-4 { --size: 1.6; }

h1, h2, h3, h4, .size-1, .size-2, .size-3, .size-4 {
  font-size: calc(
    ((var(--size) - 1) * calc(.012 * min(100vh, 900px)) + 1rem)
    * var(--display-scale)
  );
}

@media screen and (min-width: 768px), screen and (orientation: landscape) {
  h1, h2, h3, h4, .size-1, .size-2, .size-3, .size-4 {
    font-size: calc(
      min(
        calc((var(--size) - 1) * 1.2vw + 1rem),
        max(
          calc((var(--size) - 1) * 0.012 * var(--max-page-width) + 1rem),
          calc(var(--size) * 1rem)
        )
      ) * var(--display-scale)
    );
  }
}

.prose > :first-child { margin-top: 0; }

.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .2rem; }
.prose strong { font-weight: 500; }

/* ---------- home --------------------------------------------------------- */

.hero {
  height: clamp(320px, 73.7vw, 1061px);
  background-size: cover;
  background-position: center;
}

/* section-height--small, but the live band runs taller than 33vh because
   Squarespace's grid reserves rows under the text. The wider padding gets the
   band back to roughly the height it has on the live site. */
.news-band {
  background: var(--accent);
  min-height: 33vh;
  padding-block: var(--pad-medium);
}
.news-band a { text-decoration: none; border-bottom: 2px solid currentColor; }

/* ---------- full-width photo band (afspraak maken, routebeschrijving) ----- */

.band {
  min-height: 100vh;          /* section-height--large, full-bleed */
  background-size: cover;
  background-position: center;
}

/* ---------- map (routebeschrijving) -------------------------------------- */

.map { margin: 2.5rem 55px 3rem; }
.map img { width: 100%; height: auto; }
.map a { text-decoration: none; }
.map figcaption {
  margin-top: .7rem;
  font-size: .95rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
}
.map figcaption a { text-decoration: underline; }
.map .attrib { color: #4a5555; }

/* ---------- footer ------------------------------------------------------- */

.colophon {
  background: var(--accent);
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.colophon .brand { margin: 0; }
.colophon .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  font-size: .95rem;
  line-height: 1.6;
}
.colophon p { margin: 0; }

/* ---------- narrow screens ----------------------------------------------- */

@media (max-width: 900px) {
  /* vmax is the *long* edge on a phone, so 6.6vmax would be a screenful of
     padding. Sections stop reserving height and just wrap their content. */
  :root {
    --pad-small: 2rem;
    --pad-medium: 3rem;
  }

  .section { min-height: 0; }
  .news-band { min-height: 0; }
  .band { min-height: 0; aspect-ratio: 4 / 3; }

  .brand { white-space: normal; }

  .masthead { flex-wrap: wrap; padding-block: 1rem; }

  .nav-toggle {
    display: block;
    background: none;
    border: 1px solid currentColor;
    font: inherit;
    font-size: 1rem;
    padding: .35rem .8rem;
    cursor: pointer;
    border-radius: 2px;
  }

  .nav { flex-basis: 100%; display: none; }
  .nav[data-open='true'] { display: block; }
  .nav ul { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .nav .sub {
    display: flex;
    position: static;
    margin: .5rem 0 .5rem 1.2rem;
    padding: 0;
    gap: .5rem;
  }

  .colophon { grid-template-columns: 1fr; }

  .map { margin-inline: 0; }
}

@media (max-width: 520px) {
  .colophon .cols { grid-template-columns: 1fr; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- print -------------------------------------------------------- */

@media print {
  .masthead, .colophon, .hero, .band { display: none; }
  body { background: #fff; min-height: 0; display: block; }
  .section { min-height: 0; padding-block: 0; display: block; }
}