/* The whole stylesheet for eventworkforce.nl. There is no build step: what is
   written here is what the browser gets. --text, --muted, --hairline and
   --surface are copied by value from frontend/src/index.css, and --red-soft
   is that file's --nav-active, so the site and the app read as the same
   company rather than nearly the same company. --ink and --red come from the
   logo, not from the app.

   --ink was --navy (#1B2A4E) while the logo was a navy one. The mark it now
   follows is black, so this is black — near enough to --text that headings
   and links no longer separate from body copy by colour alone. That is the
   point rather than an oversight: the site carries one dark and one red, and
   --red does the separating. There was a --navy-deep too, which nothing ever
   read; it is not renamed here, it is gone. */
:root {
  --ink: #14161A;
  --red: #D9271E;
  --red-soft: #d43a35;
  --text: #111827;
  --muted: #64748b;
  --hairline: #e3e3e6;
  --surface: #ffffff;
  --wash: #f6f7f9;
}

/* Reset. Just enough to make width math predictable; nothing that hides
   browser defaults we still want (focus rings, list semantics). */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Base typography. System stack only, no web font. */
body {
  margin: 0;
  font: 400 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--ink); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 750; }
p  { max-width: 65ch; margin: 0 0 1em; }
a  { color: var(--ink); text-underline-offset: 0.15em; }

/* Layout column every section sits in. */
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 20px; }

/* Buttons. min-height: 48px is deliberate on every button and form control:
   this site gets read on a phone in a field, and 48px is the smallest
   comfortable touch target. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: 8px;
  font-weight: 650; text-decoration: none; border: 1px solid transparent;
}
/* #fff, not var(--surface): --surface names the page's ground, and white
   button text is a different meaning that happens to share a hex right
   now. Binding them would make a future change to the page background
   silently repaint button labels. */
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-soft); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--wash); }

/* Header. Logo left, primary nav collapses into a <details> disclosure
   below 720px (no JavaScript hamburger), language switch and the two
   actions always visible. */
.siteHeader {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.siteHeader__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
}
.siteHeader__brand { display: inline-flex; }
/* The header carries logo-mark.svg; the footer carries the full logo.svg.
   That split is forced, not stylistic. The lockup sets the name on one line
   beside the mark, so it is about six times as wide as it is tall — where the
   old stacked lockup was two. At these heights that is 238px of header at the
   720px breakpoint against the 89px it replaced, and .siteHeader__bar is
   `flex-wrap: nowrap` from 720px up: the row cannot grow, so the two action
   buttons break onto a second line instead. Sizing the lockup down until it
   fits puts the wordmark at about 10px tall, which is not a wordmark.
   The mark alone is square, so at 44px it costs 44px. */
.siteHeader__brand img { height: 34px; width: auto; }

.siteHeader__nav { order: 1; }
.siteHeader__nav summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  font-weight: 650;
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.siteHeader__nav summary::-webkit-details-marker { display: none; }
.siteHeader__nav summary::after { content: "\2630"; font-size: 0.9em; }
.siteHeader__nav[open] summary::after { content: "\2715"; }

/* One link list, not two. It lives as a sibling of the <details>, not
   inside it: a closed <details>'s own content is hidden through internal
   containment that an author display override on a descendant cannot
   reach, so instead the disclosure is driven by the [open] attribute on
   its sibling combinator, and desktop simply always shows this list. */
.siteHeader__navList {
  display: none;
  order: 2;
  flex-basis: 100%;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0 4px;
}
.siteHeader__nav[open] ~ .siteHeader__navList { display: flex; }
.siteHeader__navList a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
}
.siteHeader__navList a:hover { background: var(--wash); }

.siteHeader__actions {
  order: 3;
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.langSwitch {
  display: inline-flex;
  gap: 2px;
  font-size: 0.9375rem;
  font-weight: 650;
}
/* min-height and min-width, not just padding: NL/EN is two characters, and a
   48px touch target has to come from the box itself on a link this short,
   the same reasoning as .btn above. */
.langSwitch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 48px; padding: 0 8px; border-radius: 8px;
  color: var(--muted); text-decoration: none;
}
.langSwitch a[aria-current="page"] { color: var(--ink); }
.langSwitch a:hover { color: var(--ink); background: var(--wash); }

/* Footer. Light background: the logo is a fixed-colour black-on-transparent
   file, so it needs a light ground to stay legible. A dark footer would take
   the mark with it. */
.siteFooter {
  background: var(--wash);
  border-top: 1px solid var(--hairline);
}
.siteFooter__bar {
  display: grid;
  gap: 32px;
  padding-block: 48px;
}
.siteFooter__brand img { height: 30px; width: auto; }
.siteFooter__brand p { color: var(--muted); margin: 12px 0 0; }
.siteFooter__company p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }
.siteFooter__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* A row gap as well as a column one: these links are 48px boxes, and three
     of them fit on one line today, but a fourth legal link is the likeliest
     edit anyone makes here and a wrapped row with no gap reads as one block. */
  gap: 4px 12px;
  padding: 0;
  margin: 0;
}
/* min-height gives the 48px touch target without changing the visible
   underline/text size; the flex box grows, the label inside it does not. */
.siteFooter__links a {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 4px;
  color: var(--ink); text-decoration: none;
}
.siteFooter__links a:hover { text-decoration: underline; }

/* Sections and the shared grid every later task lays content into. */
.section { padding-block: clamp(48px, 8vw, 96px); }
.section--wash { background: var(--wash); }
.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.5em;
}
.lede {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

.grid { display: grid; gap: 32px; }

/* Hero. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 40px;
}

/* Screenshots. .shot is the base figure (used solo, wide, in the hero, and
   three-up further down); .shot--wide only adjusts the top spacing since it
   already fills the wrap on every width. */
.shot {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--wash);
}
.shot img { width: 100%; height: auto; }
.shot figcaption {
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--ink);
  background: var(--surface);
  border-top: 1px solid var(--hairline);
}
.shot--wide { margin-top: 8px; }

/* Functies. Hand-drawn 24px stroke icons, no icon library, sat in a small
   tinted square that repeats the app's own red accent. */
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--wash);
  color: var(--red);
}
.feature h3 { font-size: 1.1875rem; }
.feature p { color: var(--muted); margin: 0; }

/* Hoe het werkt. Numbered circles via a CSS counter rather than literal
   "1."/"2."/"3." in the copy, so the markup and the visible number can
   never drift apart. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px;
  counter-reset: step;
}
.steps__item {
  position: relative;
  padding-left: 56px;
  min-height: 40px;
}
.steps__item::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}
.steps__item h3 { margin-bottom: 0.25em; }
.steps__item p { color: var(--muted); margin: 0; }

/* Apps. One centred line, no store badges (the apps are not published). */
.apps { padding-block: clamp(32px, 5vw, 56px); }
.apps__text {
  max-width: none;
  margin: 0;
  text-align: center;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  font-weight: 650;
  color: var(--ink);
}
/* The two desktop installers. `justify-content: center` rather than the
   `flex-start` .hero__actions uses, because this section is centred copy and
   a left-aligned pair under a centred sentence reads as a mistake. Wrapping
   is what makes it work on a phone: the buttons are ~200px each, so below
   ~440px they fall onto two rows on their own, with no media query. */
.apps__downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.apps__note {
  max-width: 64ch;
  margin: 14px auto 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* Prijzen. Every figure is the literal placeholder; .priceCard__fill is a
   second, bracketed placeholder for what the tier includes, in the same
   [x] vocabulary the footer's company block already uses, so it reads as
   unfinished rather than as a real, empty feature list. */
.priceCard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
}
.priceCard__scope { margin: 0; color: var(--muted); }
.price { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; }
.price__todo { font-size: 2rem; font-weight: 800; color: var(--muted); }
.price__note { color: var(--muted); font-size: 0.9375rem; }
.priceCard__fill {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--hairline);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-style: italic;
}

/* Contact. */
.contact__direct { margin: 0 0 32px; }
.contact__direct a { display: inline-block; font-weight: 650; }

/* Only ever seen with scripts off, so it carries its own weight rather than
   leaning on anything the form draws. */
.noscriptNote {
  max-width: 640px;
  margin: 0 0 24px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  background: var(--surface);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contactForm {
  display: grid;
  gap: 18px;
  max-width: 640px;
}
.contactForm label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 650;
  color: var(--ink);
}
.contactForm input, .contactForm textarea {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--hairline); border-radius: 8px; font: inherit;
}
.contactForm textarea { min-height: 140px; resize: vertical; }
.formStatus { min-height: 1.5em; margin: 0; color: var(--muted); }

/* Prose. The privacy statement and the terms are the only pages on the site
   that are mostly running text, so they get a measure of their own and a
   smaller, more frequent h2 than a marketing section's. The <dl> is what a
   list of retention periods and a list of definitions both want. */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2em; font-size: 1.375rem; }
.prose ul { padding-left: 1.25em; }
.prose dl dt { font-weight: 650; margin-top: 1em; }
/* The browser's default 40px indent on a dd makes the retention periods the
   narrowest text on the site at 390px, for no gain the bold dt above does not
   already give. */
.prose dl dd { margin-left: 0; }
.prose__meta { color: var(--muted); font-size: 0.9375rem; }

@media (min-width: 720px) {
  .siteHeader__bar { flex-wrap: nowrap; }
  .siteHeader__brand img { height: 40px; }
  .siteHeader__nav { display: none; }
  .siteHeader__navList {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    gap: 4px;
    padding: 0;
  }
  .siteHeader__navList a { min-height: auto; padding: 8px 12px; }
  .siteHeader__actions { order: 3; flex-basis: auto; }

  .siteFooter__bar { grid-template-columns: repeat(2, 1fr); }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1040px) {
  .siteHeader__brand img { height: 44px; }
  .siteHeader__actions { gap: 16px; }

  .siteFooter__bar { grid-template-columns: 1.4fr 1fr auto auto; align-items: start; }

  .grid { gap: 40px; }
}