/* ============================================================================
   De grafische taal van de VNG-huisstijl.

   Twee niveaus, en dat onderscheid is geen stijlkeuze maar een eis uit de
   handleiding: op een beeldbepalende plek is nooit meer dan een kadervlak
   tegelijk zichtbaar. Een portaal met twintig kaarten per pagina kan er dus
   niet elke kaart een geven.

   Niveau 1, het kadervlak: een per view, op de hero.
   Niveau 2, het kaartprimitief: citeert de vorm zonder hem te herhalen.

   Zie docs/huisstijl-vng.md, sectie "Grafische taal".
   ========================================================================= */

/* ---- Niveau 1: het kadervlak --------------------------------------------- */

/* Het vlak is donkerblauw of wit, nooit met transparantie. De hoeken zijn
   ongelijk: twee grote ronde en twee scherpe. Dat is wat de vorm herkenbaar
   maakt, en het is ook de eis: minstens een scherpe en een grote ronde hoek,
   maximaal twee grote. */
.kadervlak {
  position: relative;
  isolation: isolate;
  border-radius: var(--hoek-groot) 0 var(--hoek-groot) 0;
  background: var(--inkt);
  color: #fff;
}

/* De lijnvoering ligt een margetegel naar binnen en volgt de vorm.

   De opening is het punt: de lijn in het VNG-logo is niet gesloten, en de
   handleiding neemt dat over ("Er is dus altijd een voor VNG kenmerkende
   opening"). Een border kan dat niet uit zichzelf, dus knipt clip-path een
   stuk uit de bovenrand. Dat is bewust geen SVG: een SVG die met het kader
   meeschaalt vervormt zijn ronde hoeken tot ellipsen, tenzij je de viewBox
   in JS bijhoudt, en dat is veel machinerie voor een lijn.

   De opening zit rechtsboven, in de scherpe hoek, zoals voorgeschreven als er
   geen thematitel onderaan staat. */
.kadervlak > .lijnvoering {
  position: absolute;
  inset: var(--tegel);
  border: 2px solid var(--lijn-accent);
  border-radius: calc(var(--hoek-groot) - var(--tegel)) 0
                 calc(var(--hoek-groot) - var(--tegel)) 0;
  pointer-events: none;
  z-index: 2;
  clip-path: polygon(
    0 0, 58% 0, 58% 5px, 84% 5px, 84% 0, 100% 0,
    100% 100%, 0 100%
  );
}

/* De inhoud staat binnen de lijn, met een tegel ruimte ertussen. */
.kadervlak > .kaderinhoud {
  position: relative;
  z-index: 1;
  padding: calc(var(--tegel) * 5);
}

@media (max-width: 720px) {
  .kadervlak > .kaderinhoud { padding: calc(var(--tegel) * 3); }
  /* Smaller scherm, kortere opening: anders eet hij de halve bovenrand. */
  .kadervlak > .lijnvoering {
    clip-path: polygon(
      0 0, 52% 0, 52% 5px, 88% 5px, 88% 0, 100% 0,
      100% 100%, 0 100%
    );
  }
}

/* ---- Niveau 2: het kaartprimitief ---------------------------------------- */

/* De kaarten citeren de vorm: dezelfde twee ongelijke hoeken, maar op een
   witte grond en met een dunne lijn. Zo hoort een kaart zichtbaar bij dezelfde
   familie zonder te doen alsof hij het volledige device is. */
.kaart {
  position: relative;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: var(--hoek-groot) 0 var(--hoek-groot) 0;
  padding: calc(var(--tegel) * 3);
}

/* De accentlijn stopt voor de ronde hoek: het opening-motief op kaartschaal,
   want de lijn loopt niet rond. */
.kaart::before {
  content: "";
  position: absolute;
  left: var(--hoek-groot);
  right: calc(var(--tegel) * 2);
  top: -1px;
  height: 2px;
  background: var(--lijn-accent);
}

.kaart.zonder-lijn::before { content: none; }

/* ---- De vorm op de bestaande primitieven -------------------------------- */

/* Niet elke kaart krijgt eigen markup: de vorm landt op de klassen die er al
   zijn, zodat alle views hem tegelijk krijgen en er niets te vergeten valt.

   De accentlijn blijft voorbehouden aan de dragende kaart. Twintig cyaan
   lijnen op een pagina is geen huisstijl meer maar behang, en de handleiding
   is daar expliciet over bij het kadervlak: een per beeldbepalende plek. */
.card,
.pagehead.metfoto,
.theadcard,
.welkomkaart,
.login-card {
  border-radius: var(--hoek-groot) 0 var(--hoek-groot) 0;
}

/* De kleinere tegels citeren dezelfde verhouding op hun eigen schaal: een
   tegel groot in plaats van vier, anders eet de ronding de inhoud op. */
.tile,
.actie,
.pcard,
.wgk,
.statbox {
  border-radius: calc(var(--hoek-klein) * 2) 0 calc(var(--hoek-klein) * 2) 0;
}

/* De dragende kaart van een view krijgt wel de lijn: een accent dat voor de
   ronde hoek stopt, zoals de lijnvoering van het kadervlak. */
.card.dragend {
  position: relative;
}
.card.dragend::before {
  content: "";
  position: absolute;
  left: var(--hoek-groot);
  right: calc(var(--tegel) * 2);
  top: -1px;
  height: 2px;
  background: var(--lijn-accent);
}