/* Huptax website. Eén stylesheet voor alle pagina's. Alleen licht thema. */

/* Poppins alleen voor het logo, van de eigen site geladen. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2");
}

:root {
  /* Kleuren uit docs/BRAND.md */
  --hx-ink: #0B1F33;
  --hx-brand: #0E7C66;
  --hx-brand-strong: #0A5E4E;
  --hx-brand-soft: #E3F4EF;
  --hx-accent: #F2A93B;
  --hx-bg: #F7F8F6;
  --hx-surface: #FFFFFF;
  --hx-line: #9CA3AF;
  --hx-muted: #5B6673;
  --hx-ok: #15803D;
  --hx-warn: #B45309;
  --hx-error: #B91C1C;

  --hx-radius: 14px;
  --hx-radius-small: 8px;
  --hx-gutter: 16px;
  --hx-max: 1080px;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--hx-bg);
  color: var(--hx-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

a {
  color: var(--hx-brand-strong);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--hx-ink);
}

:focus-visible {
  outline: 3px solid var(--hx-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2rem, 7vw, 3.25rem);
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(1.5rem, 4.5vw, 2.1rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em;
}

.wrap {
  width: 100%;
  max-width: var(--hx-max);
  margin-inline: auto;
  padding-inline: var(--hx-gutter);
}

.springlink {
  position: absolute;
  left: var(--hx-gutter);
  top: -100px;
  background: var(--hx-ink);
  color: var(--hx-surface);
  padding: 8px 12px;
  border-radius: var(--hx-radius-small);
  z-index: 10;
}

.springlink:focus {
  top: 8px;
}

/* Kop */

.kop {
  background: var(--hx-surface);
  border-bottom: 1px solid var(--hx-line);
}

.kop-binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding-block: 12px;
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo > svg {
  width: 128px;
  height: auto;
}

.logo-tekst {
  fill: var(--hx-ink);
}

.logo-bon {
  fill: #08493d;
}

.logo-regel {
  stroke: #ffffff;
}

.voet .logo-bon {
  fill: #ffffff;
}

.voet .logo-regel {
  stroke: #08493d;
}

.kop-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.95rem;
}

.kop-nav a {
  color: var(--hx-ink);
  text-decoration: none;
  padding-block: 6px;
}

.kop-nav a:hover {
  color: var(--hx-brand-strong);
  text-decoration: underline;
}

@media (max-width: 520px) {
  .kop-nav .alleen-breed {
    display: none;
  }
}

/* Knoppen */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid var(--hx-brand);
  border-radius: 999px;
  background: var(--hx-brand);
  color: var(--hx-surface);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.knop:hover {
  background: var(--hx-brand-strong);
  border-color: var(--hx-brand-strong);
  color: var(--hx-surface);
}

.knop-licht {
  background: var(--hx-surface);
  color: var(--hx-brand-strong);
}

.knop-licht:hover {
  background: var(--hx-brand-soft);
  color: var(--hx-brand-strong);
}

.store-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block: 24px 8px;
}

.store-knop {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 150px;
  min-height: 56px;
  padding: 8px 18px;
  border-radius: var(--hx-radius-small);
  background: var(--hx-ink);
  color: var(--hx-surface);
  text-decoration: none;
  line-height: 1.2;
}

.store-knop:hover {
  background: var(--hx-brand-strong);
  color: var(--hx-surface);
}

.store-knop small {
  font-size: 0.75rem;
  opacity: 0.85;
}

.store-knop strong {
  font-size: 1.1rem;
}

/* Secties */

.sectie {
  padding-block: 56px;
}

.sectie-wit {
  background: var(--hx-surface);
  border-block: 1px solid var(--hx-line);
}

.inleiding {
  max-width: 60ch;
  color: var(--hx-muted);
  font-size: 1.1rem;
}

.klein {
  font-size: 0.9rem;
  color: var(--hx-muted);
}

/* Hero */

.hero {
  background: var(--hx-brand-soft);
  padding-block: 48px 56px;
  border-bottom: 1px solid var(--hx-line);
}

.hero-raster {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 880px) {
  .hero-raster {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.hero p.inleiding {
  color: var(--hx-ink);
}

.hup {
  background: linear-gradient(transparent 62%, var(--hx-accent) 62%);
  padding-inline: 2px;
}

.voorbeeld {
  margin: 0;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: 24px;
  padding: 20px;
  max-width: 400px;
  width: 100%;
  justify-self: center;
}

.voorbeeld-kop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.voorbeeld-kop strong {
  font-size: 1.05rem;
}

.label {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--hx-brand-soft);
  color: var(--hx-brand-strong);
  font-size: 0.8rem;
  font-weight: 700;
}

.voorbeeld ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.voorbeeld li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-small);
  font-size: 0.95rem;
}

.voorbeeld li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 0.45em;
  border-radius: 50%;
  background: var(--hx-ok);
}

.voorbeeld li.let-op {
  border-color: var(--hx-warn);
  background: var(--hx-bg);
}

.voorbeeld li.let-op::before {
  background: var(--hx-warn);
}

.voorbeeld .knop {
  width: 100%;
}

.knop-nep {
  pointer-events: none;
}

.voorbeeld figcaption {
  margin-top: 10px;
}

/* Stappen */

.stappen {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .stappen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .stappen {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stap {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius);
  padding: 20px;
}

.stap-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--hx-accent);
  color: var(--hx-ink);
  font-weight: 800;
}

.stap p {
  margin: 0;
  color: var(--hx-muted);
}

/* Talen */

.talen {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.talen li {
  padding: 8px 16px;
  border: 1px solid var(--hx-line);
  border-radius: 999px;
  background: var(--hx-surface);
  font-weight: 600;
  font-size: 1.05rem;
}

/* Branches */

.branches {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .branches {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .branches {
    grid-template-columns: repeat(3, 1fr);
  }
}

.branches li {
  padding: 16px 18px;
  border: 1px solid var(--hx-line);
  border-left: 4px solid var(--hx-brand);
  border-radius: var(--hx-radius-small);
  background: var(--hx-bg);
}

.branches strong {
  display: block;
}

.branches span {
  color: var(--hx-muted);
  font-size: 0.95rem;
}

/* Prijs */

.prijs-raster {
  display: grid;
  gap: 24px;
  margin-top: 32px;
}

@media (min-width: 880px) {
  .prijs-raster {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.prijs {
  background: var(--hx-surface);
  border: 2px solid var(--hx-brand);
  border-radius: var(--hx-radius);
  padding: 24px;
}

.prijs-bedrag {
  font-size: clamp(2.25rem, 9vw, 3rem);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 4px;
}

.prijs-bedrag span {
  font-size: 1rem;
  font-weight: 600;
  color: var(--hx-muted);
}

.prijs ul,
.vinkjes {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: grid;
  gap: 6px;
}

.prijs li,
.vinkjes li {
  position: relative;
  padding-left: 28px;
}

.prijs li::before,
.vinkjes li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.35em;
  width: 7px;
  height: 12px;
  border: solid var(--hx-ok);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.eerlijk {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-left: 6px solid var(--hx-accent);
  border-radius: var(--hx-radius);
  padding: 24px;
}

.eerlijk p:last-child {
  margin-bottom: 0;
}

/* Vragen */

.vragen {
  margin-top: 24px;
  display: grid;
  gap: 10px;
  max-width: 820px;
}

.vragen details {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-small);
  padding: 0 18px;
}

.vragen summary {
  cursor: pointer;
  font-weight: 700;
  padding-block: 16px;
  list-style-position: inside;
}

.vragen details[open] summary {
  border-bottom: 1px solid var(--hx-line);
  margin-bottom: 12px;
}

.vragen details p:last-child {
  padding-bottom: 6px;
}

/* Downloaden */

.download {
  background: var(--hx-ink);
  color: var(--hx-surface);
  padding-block: 56px;
}

.download h2 {
  color: var(--hx-surface);
}

.download p {
  max-width: 60ch;
}

.download .store-knop {
  background: var(--hx-surface);
  color: var(--hx-ink);
}

.download .store-knop:hover {
  background: var(--hx-brand-soft);
  color: var(--hx-ink);
}

/* Voet */

.voet {
  background: var(--hx-ink);
  color: var(--hx-surface);
  padding-block: 40px;
  border-top: 1px solid var(--hx-muted);
}

.voet .logo-tekst {
  fill: var(--hx-surface);
}

.voet-raster {
  display: grid;
  gap: 24px;
}

@media (min-width: 760px) {
  .voet-raster {
    grid-template-columns: 1fr 1.4fr;
  }
}

.voet nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 16px;
}

.voet a {
  color: var(--hx-surface);
}

.voet a:hover {
  color: var(--hx-accent);
}

.voet .klein {
  color: var(--hx-line);
  margin: 12px 0 0;
}

/* Gewone pagina's en juridische teksten */

.pagina {
  padding-block: 40px 64px;
}

.tekst {
  max-width: 72ch;
}

.tekst h2 {
  font-size: 1.4rem;
  margin-top: 2em;
}

.tekst h3 {
  margin-top: 1.5em;
}

.tekst ul,
.tekst ol {
  padding-left: 1.4em;
  margin: 0 0 1em;
}

.tekst li {
  margin-bottom: 0.35em;
}

.tekst li > ul {
  margin-top: 0.35em;
}

.tekst blockquote {
  margin: 0 0 1em;
  padding: 12px 18px;
  border-left: 4px solid var(--hx-brand);
  background: var(--hx-brand-soft);
  border-radius: var(--hx-radius-small);
}

.datum {
  color: var(--hx-muted);
}

.inhoud {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-small);
  padding: 16px 20px;
  margin: 24px 0 8px;
}

.inhoud h2 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.inhoud ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
  columns: 2 220px;
  column-gap: 32px;
}

.tabel-wrap {
  overflow-x: auto;
  margin: 0 0 1.25em;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-small);
  background: var(--hx-surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hx-line);
}

tr:last-child td {
  border-bottom: 0;
}

th {
  background: var(--hx-brand-soft);
}

/* Op een telefoon wordt elke rij een blok, met de kolomnaam boven de cel. */
@media (max-width: 640px) {
  .tabel-wrap thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .tabel-wrap table,
  .tabel-wrap tbody,
  .tabel-wrap tr,
  .tabel-wrap td {
    display: block;
  }

  .tabel-wrap tr {
    padding: 6px 0;
    border-bottom: 1px solid var(--hx-line);
  }

  .tabel-wrap tr:last-child {
    border-bottom: 0;
  }

  .tabel-wrap td {
    border-bottom: 0;
    padding: 4px 14px;
  }

  .tabel-wrap td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--hx-muted);
  }

  .tabel-wrap td:first-child {
    font-weight: 700;
  }
}

mark.jurist {
  background: var(--hx-accent);
  color: var(--hx-ink);
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 600;
}

.blok {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius);
  padding: 20px 24px;
  margin: 24px 0;
}

.blok > :last-child {
  margin-bottom: 0;
}

.blok-let-op {
  border-left: 6px solid var(--hx-warn);
}

.blok-goed {
  border-left: 6px solid var(--hx-ok);
}

/* Formulier */

.formulier {
  display: grid;
  gap: 16px;
}

.veld label {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.veld .hulp {
  display: block;
  font-size: 0.9rem;
  color: var(--hx-muted);
  margin-bottom: 6px;
}

.veld input,
.veld textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-small);
  background: var(--hx-surface);
  color: var(--hx-ink);
  font: inherit;
  font-size: 1rem;
}

.veld textarea {
  min-height: 96px;
  resize: vertical;
}

.veld input:focus,
.veld textarea:focus {
  border-color: var(--hx-brand);
}

.vinkje {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.vinkje input {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: none;
  accent-color: var(--hx-brand);
}

.foutmelding {
  color: var(--hx-error);
  font-weight: 600;
  margin: 0;
}

.contact-raster {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}

@media (min-width: 640px) {
  .contact-raster {
    grid-template-columns: repeat(2, 1fr);
  }
}