/**
 * Modern Events Calendar in de kleuren van de site.
 *
 * MEC 7.x zet zijn eigen kleuren en letters als CSS-variabelen neer:
 *
 *   <style>:root,::before,::after{--mec-color-skin: #40d9f1; ...}</style>
 *
 * Dat is een geschenk. Er hoeft geen enkele selector van de plugin
 * overschreven te worden — die kleur komt in de stylesheet van MEC ruim
 * honderd keer voor — en er is dus ook niets dat stukgaat als de plugin
 * zijn opmaak wijzigt. Alleen de variabelen worden hier hergedefinieerd.
 *
 * Twee dingen om te weten.
 *
 * 1. Specificiteit in plaats van volgorde. MEC drukt die variabelen af
 *    als <style> in de head, ná de stylesheets van het theme. Op :root
 *    zou de plugin dus altijd winnen. Daarom staat hier :root:root —
 *    twee keer dezelfde selector, wat zwaarder weegt zonder dat er
 *    !important aan te pas komt. En omdat MEC de variabelen óók
 *    rechtstreeks op ::before en ::after zet, moeten die mee: een
 *    declaratie op de pseudo zelf wint van wat hij zou erven.
 *
 * 2. De doorzichtige varianten worden met color-mix() uit de hoofdkleur
 *    gerekend. Kent een browser color-mix() niet, dan negeert hij die
 *    regels en houdt hij de waarde van MEC. Dan staat er een cyaan
 *    randje in een verder kloppende agenda — vervelend, niet stuk.
 *
 * Bewust niet aangeraakt: --mec-fluent-*. Dat is een eigen huid met een
 * eigen kleurlogica, waar lichtblauwe vlakken de achtergrond dragen.
 * Die met de hoofdkleur van de site overschrijven levert grote gekleurde
 * vlakken op waar zachte bedoeld waren. Gebruikt een site die huid, dan
 * hoort daar een eigen blok regels bij en geen gok.
 */

/*
 * Alleen de letters. Zet je in MEC de typografie op "Inherit from theme",
 * dan zet de plugin --mec-heading-font-family op de waarde `inherit` —
 * en dat erft de letter van het ómliggende element, niet de kopletter van
 * het theme. Een evenemententitel kreeg daardoor de tekstletter. Deze twee
 * regels leggen de goede stack neer.
 *
 * De hoekafronding staat hier niet meer: MEC heeft er een eigen veld voor
 * (Appearance > Primary border-radius). Twee plekken voor één waarde
 * levert alleen verwarring op.
 */
:root:root,
html ::before,
html ::after{
  --mec-heading-font-family:var(--nyf-font-heading);
  --mec-paragraph-font-family:var(--nyf-font-body);
}

/*
 * De skinkleur staat hier met opzet níet.
 *
 * MEC heeft er een eigen instelling voor, en die reikt verder dan CSS:
 * hij kleurt ook wat de plugin in JavaScript opbouwt en wat hij naar
 * een losse weergave meegeeft. Zetten we hem hier óók, dan wint dit
 * bestand en lijkt die instelling in de plugin stuk — je verandert hem
 * en er gebeurt niets. Eén knop op één plek is beter dan twee die
 * elkaar tegenspreken.
 *
 * Dus: de kleur van de agenda stel je in bij de plugin. De letter en de
 * hoekafronding komen van het theme, want die kent MEC niet.
 *
 * Wordt dit ooit anders gewenst, dan hoort daar een regel bij als:
 *
 *   :root:root, html ::before, html ::after{
 *     --mec-color-skin: var(--nyf-primary);
 *   }
 *
 * plus de vier doorzichtige varianten die MEC in dezelfde verhoudingen
 * gebruikt (25%, 50%, 75% en 11%), met color-mix() uit die kleur
 * gerekend.
 */