/* Hypervision – huisstijl bovenop Material for MkDocs
   Kleuren: inkt (onzichtbaar spectrum), valse-kleur teal en magenta (hyperspectrale beelden).
   Ook op [data-md-color-scheme]: Material zet daar --md-typeset-a-color opnieuw op <body>. */
:root, [data-md-color-scheme="default"] {
  --hv-ink: #14213D;
  --hv-teal: #0E8C8C;
  --hv-magenta: #A3297A;
  --hv-mist: #F3F5F8;
  --hv-grey: #4A5568;

  --md-primary-fg-color: var(--hv-ink);
  --md-primary-fg-color--light: #2A3A5E;
  --md-primary-fg-color--dark: #0C1528;
  --md-accent-fg-color: var(--hv-teal);
  --md-typeset-a-color: #0B7474; /* donkerdere teal: 5,6:1 contrast op wit */

  /* Eén leesbreedte voor lopende tekst en losse afbeeldingen, in een vaste eenheid (rem,
     niet ch): ch hangt af van het font-size van elk element, dus een titel op 2,6rem en
     een paragraaf op .86rem kregen anders nooit dezelfde pixelbreedte. Brede onderdelen
     (kaarten, het grijze blok) gebruiken bewust de volle kolombreedte, niet deze variabele. */
  --hv-measure: 49rem; /* Material zet html{font-size} op 20px, niet de browserstandaard 16px */
}

.md-typeset { font-size: .86rem; line-height: 1.65; }
.md-typeset h1, .md-typeset h2 { color: var(--hv-ink); font-weight: 700; letter-spacing: -.01em; }
.md-typeset p, .md-typeset li { max-width: var(--hv-measure); text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* Uitzondering: justify geeft lelijke "rivieren" in de smalle kaartkolommen
   (en soms al in de titel-paragraaf). Daar blijft tekst links uitgelijnd. */
.md-typeset .grid.cards p { text-align: left; hyphens: none; }

/* Hero op de startpagina. Zelfde --hv-measure als de rest van de tekst: anders is de
   titel smaller en de inleiding breder dan bv. de alinea onder "Het probleem". */
.hv-hero { padding: 1.5rem 0 1rem; }
.hv-hero h1 { font-size: 2.6rem; line-height: 1.1; margin: 0 0 .8rem; max-width: var(--hv-measure); }
.hv-hero .hv-lead { font-size: 1.1rem; color: var(--hv-grey); max-width: var(--hv-measure); text-align: justify; hyphens: auto; }
.hv-hero .md-button { margin: .4rem .4rem 0 0; }

/* Status: project in voorbereiding */
.hv-status {
  display: inline-block; margin-bottom: 1rem; padding: .25rem .7rem;
  border-left: 4px solid var(--hv-magenta); background: var(--hv-mist);
  color: var(--hv-ink); font-size: .8rem;
}

/* Figuren met bijschrift */
/* Material maakt figure "fit-content"; met img width:100% krimpt een SVG dan tot 300px.
   Zelfde --hv-measure als de tekst, en links uitgelijnd (niet gecentreerd): zo loopt de
   afbeelding gelijk met de paragrafen erboven en eronder. */
.md-typeset figure { width: 100%; max-width: var(--hv-measure); margin: 1.5rem 0; }
.md-typeset figure p { max-width: none; margin: 0; }
.md-typeset figure img { width: 100%; height: auto; }
.md-typeset figcaption { color: var(--hv-grey); font-size: .75rem; max-width: var(--hv-measure); margin: .4rem auto 0; }
.hv-narrow img { display: block; max-width: 520px; margin: 0 auto; }

/* Use-case kaarten: rand in sectorkleur i.p.v. schaduw */
.md-typeset .grid.cards > ul > li { border: 1px solid #DDE3EA; border-top: 4px solid var(--hv-teal); border-radius: 4px; box-shadow: none; }
.md-typeset .grid.cards > ul > li:hover { border-color: #DDE3EA; border-top-color: var(--hv-magenta); box-shadow: none; }

/* Blok "deelnemen in het kort" */
.hv-band { background: var(--hv-mist); padding: 1.2rem 1.4rem; border-radius: 4px; margin: 2rem 0; }
.hv-band h2 { margin-top: 0; }

@media screen and (max-width: 44.9375em) {
  .hv-hero h1 { font-size: 1.9rem; }
  /* Spectrum op gsm leesbaar houden: horizontaal scrollen i.p.v. onleesbaar klein */
  .hv-spectrum p { overflow-x: auto; }
  .hv-spectrum img { min-width: 640px; }
}

/* Partnerlogo's in header en footer (overrides/partials/header.html en footer.html).
   Vaste hoogte voor alle logo's, ongeacht de eigen verhouding van elk beeld. Wit kaartje
   erachter: VIVES-logo heeft zwarte tekst op transparante achtergrond, onleesbaar op de
   donkere header/footer zonder dat kaartje. */
.hv-partner-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.hv-partner-logos img {
  /* box-sizing hier bewust op content-box: de globale reset zet border-box, waardoor
     de padding anders van de hoogte zou afgaan en het logo juist kleiner maakt. */
  box-sizing: content-box;
  height: 32px; width: auto; display: block;
  background: #fff; padding: .3rem .6rem; border-radius: 3px;
}

.md-header .hv-partner-logos {
  margin-inline-start: .6rem;
  padding-inline-start: .8rem;
  border-left: 1px solid rgba(255, 255, 255, .25);
}

/* Header wordt krap zodra de zoekbalk meegroeit; logo's verdwijnen dan, blijven in de footer. */
@media screen and (max-width: 59.9375em) {
  .md-header .hv-partner-logos { display: none; }
}

/* Tussen de vorige/volgende-knoppen (overrides/partials/footer.html). Positie: absoluut
   gecentreerd op het midden van de volledige balk, niet via flex "margin:auto" tussen
   Vorige en Volgende: zodra die ongelijk breed zijn (of één van beide ontbreekt, zoals
   op index.md zonder vorige of deelnemen.md zonder volgende) schuift zo'n marge-truc het
   blok uit het echte midden. Absolute positionering raakt bovendien de ingebakken
   flex-sizing van .md-footer__link niet aan (die knapt anders zichtbaar af: de titeltekst
   verdween volledig toen de logo's als grid-item ernaast stonden). */
.md-footer__inner.md-grid { position: relative; }
.hv-partner-logos--footernav {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
}
.hv-partner-logos--footernav img { height: 24px; }

/* Let op bronvolgorde: deze @media staat bewust ná de regels hierboven. Bij gelijke
   specificiteit wint de regel die later in het bestand staat, media query of niet. */
@media screen and (max-width: 44.9375em) {
  /* Geen plaats náást "Vorige"/"Volgende": logo's op een eigen volle rij eronder.
     Vorige/Volgende blijven de ingebakken flexrij (niet aanraken: die krimpt daar al
     netjes vanzelf, met tekst-ellipsis indien nodig — zie commentaar hierboven). */
  .md-footer__inner.md-grid { flex-wrap: wrap; row-gap: .6rem; padding-block: .6rem; }
  .hv-partner-logos--footernav {
    position: static; transform: none; margin: 0;
    flex-basis: 100%; order: 1; justify-content: center;
  }
}