/* Meetings en Congres — /meeting-congres/ (post 347948)
 * ============================================================================
 *
 * Deze pagina volgt de wireframe en niet het bpv-destal designsysteem.
 * Vrijwel alles hangt aan .mc en raakt dus geen enkele andere pagina. De
 * uitzonderingen staan onderaan in het blok GLOBAAL, met uitleg waarom.
 *
 * DRIE LAGEN
 *   1. MERKKLEUREN   de kleuren zelf. Hier kies je, en nergens anders.
 *   2. PALETTEN      licht en donker, allebei opgebouwd uit de merkkleuren.
 *   3. ROLLEN        .light of .dark op een element vult negen rollen in een
 *                    keer: achtergrond, zacht, inzet, kop, tekst, label en de
 *                    drie knopwaarden. Alles daaronder gebruikt alleen rollen.
 *
 * EEN VLAK OMDRAAIEN
 * Zet .dark of .light op een sectie, rij, kolom of losse module. Achtergrond
 * en tekst kantelen samen mee, dus het contrast blijft staan. In Divi doe je
 * dat onder Geavanceerd, CSS-klasse.
 *
 * CONTRAST
 * Beide paletten halen WCAG AA (4,5:1 voor gewone tekst, 3:1 voor groot en
 * voor vlakken). Controleren na een wijziging: python3 contrast.py
 *
 * Doel: wp-content/themes/Divi-child/meeting-congres.css
 * Verhoog na elke wijziging de v= achter de link in de pagina, anders houdt de
 * browser de oude versie vast.
 */


/* ============================================================================
 * 1. DE MERKKLEUREN
 * Hier zitten alle kleuren. Elke merkkleur heeft een variant voor lichte
 * vlakken en een voor donkere, want dezelfde tint die op wit werkt is op
 * zwart onleesbaar en andersom.
 * ==========================================================================*/

:root {

  /* PRIMAIR — navy. De knoppen en het logovlak. */
  --primair:                 #2f4034;
  --primair-hover:           #161c26;  /* donkerder, niet lichter            */
  --primair-op-donker:       #aebbd0;  /* navy verdwijnt op zwart, dus licht */
  --primair-op-donker-hover: #c3cddd;

  /* SECUNDAIR — donkergroen. Een donker vlak binnen een lichte pagina,
   * nu de teksthelft van de hero. */
  --secundair:               #2f4034;

  /* TERTIAIR — mosgroen. Accenten, nu het streepje onder de titel.
   * Op wit haalt dit maar 2,36:1, dus daarvoor staat een donkere variant. */
  --tertiair:                #9fb06a;  /* op een donker vlak                 */
  --tertiair-op-licht:       #5f7136;  /* op wit of creme                    */
}


/* ============================================================================
 * 2. DE TWEE PALETTEN
 * Alleen de neutralen staan hier als waarde; de rest verwijst naar hierboven.
 * ==========================================================================*/

:root {

  /* --- LICHT: donkere tekst op een licht vlak --------------------------- */
  --licht-achtergrond: #f2fbf3;  /* het sectievlak zelf                     */
  --licht-zacht:       #f5f5f5;  /* iets afwijkend vlak                     */
  --licht-inzet:       #ededed;  /* ingelegd vlak: vergelijkblok, fotovlak  */
  --licht-kop:         #1a1a1a;  /* koppen en de Bekijk-link                */
  --licht-tekst:       #3a3a3a;  /* lopende tekst                           */
  --licht-label:       #6b6b6b;  /* broodkruimel, labels Groep en Prijs     */
  --licht-knop:        var(--primair);
  --licht-knop-tekst:  #ffffff;
  --licht-knop-hover:  var(--primair-hover);
  --licht-accent:      var(--tertiair-op-licht);

  /* --- DONKER: lichte tekst op een donker vlak -------------------------- */
  /* Elke rol is de tegenhanger van dezelfde rol hierboven. */
  --donker-achtergrond: #1a1a1a;
  --donker-zacht:       #232323;
  --donker-inzet:       #2b2b2b;
  --donker-kop:         #ffffff;
  --donker-tekst:       #d8d8d8;
  --donker-label:       #adadad;  /* was #a5a5a5: zakte naar 4,48:1 op het
								   * groen van de hero, nu 4,92:1           */
  --donker-knop:        var(--primair-op-donker);
  --donker-knop-tekst:  #1a1a1a;
  --donker-knop-hover:  var(--primair-op-donker-hover);
  --donker-accent:      var(--tertiair);
}


/* ============================================================================
 * DE VORM
 * Geen kleur, maar wel handig om mee te spelen.
 * ==========================================================================*/

:root {
  --mc-rond-foto:    8px;   /* hoeken van de foto in een tegel */
  --mc-rond-vlak:    6px;   /* hoeken van het vergelijkblok    */
  --mc-rond-knop:    3px;   /* hoeken van de Boeken-knop       */
  --mc-foto-hoogte:  230px; /* hoogte van de foto in een tegel */
  --mc-hero-hoogte:  420px; /* hoogte van de hero op desktop   */
}


/* ============================================================================
 * 3. DE SCHAKELAAR
 * .light en .dark vullen dezelfde rollen. Ze werken op een sectie, maar ook
 * op een rij, kolom of losse module: de rollen erven door naar alles eronder,
 * dus de binnenste wint.
 * ==========================================================================*/

.mc.light,
.mc .light {
  --achtergrond: var(--licht-achtergrond);
  --zacht:       var(--licht-zacht);
  --inzet:       var(--licht-inzet);
  --kop:         var(--licht-kop);
  --tekst:       var(--licht-tekst);
  --label:       var(--licht-label);
  --knop:        var(--licht-knop);
  --knop-tekst:  var(--licht-knop-tekst);
  --knop-hover:  var(--licht-knop-hover);
  --accent:      var(--licht-accent);
}

/* De teksthelft van de hero staat op een donker groen vlak en hoort dus bij
 * het donkere palet. Zonder deze regel stond daar tekst uit het lichte palet:
 * #3a3a3a op #2f4034 is 1,03:1 en dus praktisch onleesbaar. */
.mc.dark,
.mc .dark,
.mc-hero .et_pb_column.et-last-child {
  --achtergrond: var(--donker-achtergrond);
  --zacht:       var(--donker-zacht);
  --inzet:       var(--donker-inzet);
  --kop:         var(--donker-kop);
  --tekst:       var(--donker-tekst);
  --label:       var(--donker-label);
  --knop:        var(--donker-knop);
  --knop-tekst:  var(--donker-knop-tekst);
  --knop-hover:  var(--donker-knop-hover);
  --accent:      var(--donker-accent);
}

/* De sectieachtergrond komt uit de rol en niet uit Divi. Divi zet er ook een in
 * de blok-JSON zodat de editor klopt, en giet dat in een regel van vier klassen
 * diep met !important:
 *
 *   .et-l--post > .et_builder_inner_content .et_pb_section.et_pb_section_7
 *
 * Een enkele .mc verliest daarvan, waardoor het omdraaien van de klasse wel de
 * tekst meenam maar niet de achtergrond. Onderstaande selectors tellen vijf
 * klassen en winnen wel. Wint Divi hier ooit toch weer, tel dan hoeveel klassen
 * er in hun selector staan en zet er een meer tegenover. */
.et-l--post > .et_builder_inner_content .et_pb_section.mc.light,
.et-l--post > .et_builder_inner_content .et_pb_section.mc.dark {
  background-color: var(--achtergrond) !important;
}

/* Een rij, kolom of module met .light of .dark krijgt ook zijn eigen vlak,
 * want lichte tekst op een licht vlak is precies wat dit moet voorkomen. Wil
 * je alleen de tekst omdraaien, zet er dan background:none bij. */
.mc .light,
.mc .dark {
  background-color: var(--achtergrond);
}

/* Losse klassen om in Divi op een module te zetten, onder Geavanceerd,
 * CSS-klasse. Ze kantelen mee met de light of dark eromheen, dus je hoeft
 * nooit zelf een variant te kiezen. */
.mc .primair        { color: var(--knop) !important; }
.mc .accent         { color: var(--accent) !important; }
.mc .primair-vlak   { background-color: var(--knop) !important; }
.mc .secundair-vlak { background-color: var(--secundair) !important; }
.mc .accent-vlak    { background-color: var(--accent) !important; }


/* ============================================================================
 * BASIS
 * ==========================================================================*/
/* Divi laat het logo meebewegen als de header op et-fixed-header gaat. Deze regels voorkomen dat */
 #main-header .centered-inline-logo-wrap,
 #main-header.et-fixed-header .centered-inline-logo-wrap {
   margin-top: -33px !important;
   margin-bottom: -33px !important;
   transition: none !important;
 }
 
 #main-header .centered-inline-logo-wrap a,
 .logo_container,
 #logo {
   transition: none !important;
 }

/* De selector moet .et_pb_module bevatten: Divi zet zijn eigen letter met
 * .et_pb_text_0 h1 en dat weegt even zwaar als .mc h1, waarna Divi wint op
 * volgorde. Met twee klassen wint deze regel wel. */
.mc .et_pb_module,
.mc .et_pb_module * {
  font-family: "Bricolage Grotesque", Helvetica, Arial, sans-serif !important;
}

.mc { color: var(--kop); }

.mc h1,
.mc h2,
.mc h3 {
  color: var(--kop) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin: 0;
}

.mc p {
  color: var(--tekst) !important;
  font-size: 15px !important;
  line-height: 1.72 !important;
  max-width: none !important;
  margin: 0 0 14px;
}

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

/* Het streepje onder de titel. Stond op een vaste #9fb06a; dat haalt op wit
 * maar 2,36:1 en is daar dus nauwelijks te zien. Via --accent pakt hij op een
 * donker vlak het mosgroen en op een licht vlak de donkere variant. */
.mc .streep {
  width: 64px;
  height: 3px;
  background: var(--accent);
  margin: 0 0 26px;
}

/* De sectie die de stylesheet inlaadt heeft niets te tonen, maar hield op
 * mobiel toch een strook boven de hero vast. */
.mc-css {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.mc-css .et_pb_row,
.mc-css .et_pb_module {
  margin: 0 !important;
  padding: 0 !important;
}


/* ============================================================================
 * HERO
 * Twee helften over de volle breedte: foto links, tekst rechts.
 * ==========================================================================*/

.mc-hero {
  background-color: var(--zacht) !important;
  padding: 0;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.mc-hero .et_pb_row {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
}

.mc-hero .et_pb_column {
  width: 50% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* De teksthelft. De kleur komt uit de merkkleuren; de tekstrollen erop staan
 * bij DE SCHAKELAAR hierboven. */
.mc-hero .et_pb_column.et-last-child {
  padding: 0 6% !important;
  background-color: var(--secundair);
}

.mc-hero .mc-herofoto {
  margin: 0 !important;
  height: 100%;
}

.mc-hero .mc-herofoto .et_pb_image_wrap,
.mc-hero .mc-herofoto img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: var(--mc-hero-hoogte);
  object-fit: cover;
}

.mc-hero .mc-herotekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--mc-hero-hoogte);
  padding: 56px 8% 56px 6%;
}

.mc-hero h1 {
  font-size: 38px !important;
  line-height: 1.2 !important;
  margin: 0 0 20px !important;
}

.mc-hero p { max-width: 46em; }


/* ============================================================================
 * BROODKRUIMEL EN OVER-SECTIE
 * ==========================================================================*/

.mc-kruimel,
.mc-kruimel * {
  font-size: 12px !important;
  color: var(--label) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

.mc-kruimel a {
  color: var(--label) !important;
  text-decoration: none;
}

.mc-over h2 {
  font-size: 30px !important;
  line-height: 1.25 !important;
  margin: 0 0 24px !important;
}


/* ============================================================================
 * TEGELS
 * ==========================================================================*/

.mc-tegels .et_pb_row { margin-bottom: 0 !important; }
.mc-tegels .et_pb_module { margin-bottom: 0 !important; }

/* Divi zet de foto in een .et_pb_image_wrap die om de afbeelding heen krimpt.
 * Bij een portretfoto op vaste hoogte werd de tegel daardoor half zo breed,
 * dus de wrap moet expliciet de volle kolombreedte pakken. */
.mc-tegels .mc-foto {
  margin: 0 0 22px !important;
  width: 100% !important;
}

.mc-tegels .mc-foto .et_pb_image_wrap {
  display: block !important;
  width: 100% !important;
}

.mc-tegels .mc-foto img {
  display: block;
  width: 100% !important;
  height: var(--mc-foto-hoogte) !important;
  object-fit: cover;
  border-radius: var(--mc-rond-foto);
  background: var(--inzet);
}

.mc-tegels h3 {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
}

.mc-tegels .mc-omschrijving { margin-bottom: 22px !important; }

/* Het vergelijkblok krijgt een vaste minimumhoogte, zodat de knoppen van drie
 * tegels naast elkaar op dezelfde lijn uitkomen. */
.mc-tegels .mc-vergelijk {
  background: var(--inzet);
  border-radius: var(--mc-rond-vlak);
  padding: 18px 20px;
  margin-bottom: 20px !important;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.mc-tegels .mc-vergelijk .r {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.mc-tegels .mc-vergelijk .k {
  font-size: 12px !important;
  color: var(--label) !important;
  flex: 0 0 auto;
}

.mc-tegels .mc-vergelijk .v {
  font-size: 13px !important;
  color: var(--kop) !important;
  text-align: right;
}

/* De twee acties naast elkaar. Streng binnen .mc-tegels: een blanco regel op
 * .et_pb_button_module_wrapper heeft eerder sitebreed knoppen uit het midden
 * getrokken. */
.mc-tegels .et_pb_button_module_wrapper {
  display: inline-block !important;
  margin: 0 10px 0 0 !important;
  vertical-align: middle;
}

/* Divi zet de opgegeven CSS-klasse op het knopelement zelf en niet op een
 * ouder, dus .mc-bekijk .et_pb_button vond niets. Beide vormen staan er,
 * zodat het blijft werken als Divi de opbouw ooit verandert. */
.mc-tegels .mc-bekijk,
.mc-tegels .mc-bekijk .et_pb_button {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--kop) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.mc-tegels .mc-boeken,
.mc-tegels .mc-boeken .et_pb_button {
  background: var(--knop) !important;
  border: 0 !important;
  color: var(--knop-tekst) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 7px 16px !important;
  border-radius: var(--mc-rond-knop) !important;
  text-decoration: none !important;
}

.mc-tegels .mc-boeken:hover,
.mc-tegels .mc-boeken .et_pb_button:hover {
  background: var(--knop-hover) !important;
}

/* Divi animeert bij hover de padding, om ruimte te maken voor een pijltje dat
 * hieronder al verborgen is. Dat gebeurt met
 *
 *   body #page-container .et_pb_section .et_pb_button_1:hover { padding: 1em }
 *
 * en dat zit een id diep, dus een gewone klassenregel verliest het. Zonder
 * deze twee kromp Boeken 6px en groeide Bekijk 26px zodra je erover ging. */
body #page-container .et_pb_section.mc .mc-bekijk,
body #page-container .et_pb_section.mc .mc-bekijk:hover {
  padding: 0 !important;
}

body #page-container .et_pb_section.mc .mc-boeken,
body #page-container .et_pb_section.mc .mc-boeken:hover {
  padding: 7px 16px !important;
}

.mc-tegels .et_pb_button:after,
.mc-tegels .et_pb_button:before { display: none !important; }


/* ============================================================================
 * MOBIEL
 * ==========================================================================*/

@media (max-width: 980px) {
  .mc-hero .et_pb_column { width: 100% !important; }

  .mc-hero .mc-herofoto .et_pb_image_wrap,
  .mc-hero .mc-herofoto img { min-height: 260px; }

  .mc-hero .mc-herotekst {
	min-height: 0;
	padding: 40px 24px;
  }

  .mc-hero h1 { font-size: 30px !important; }

  .mc-tegels .mc-vergelijk { min-height: 0; }

  /* Divi stapelt deze kolommen niet vanzelf, waardoor de drie tegels op een
   * telefoon naast elkaar bleven staan met een woord per regel. */
  .mc-tegels .et_pb_column {
	width: 100% !important;
	margin: 0 0 48px !important;
  }

  .mc-tegels .et_pb_row:last-child .et_pb_column:last-child {
	margin-bottom: 0 !important;
  }
}


/* ============================================================================
 * GLOBAAL
 * Deze twee regels hangen NIET aan .mc en raken dus de hele pagina, niet
 * alleen de hub-onderdelen. Ze werken nu bovendien alleen op deze pagina,
 * want dit stylesheet wordt enkel hier ingeladen. De header ziet er hier dus
 * anders uit dan op de rest van de site. Prima om mee te proberen; wil je het
 * houden, dan horen ze in het gedeelde stylesheet thuis en niet hier.
 * ==========================================================================*/

.logo_container {
  background-color: var(--primair);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 150 !important;
}

/* Haalt de donkere waas onder de header weg, zodat de hero tot bovenaan loopt */
.page-id-347948 #main-content:before {
  background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);
}