/**
 * Theme Name:     SlimReizen.nu
 * Author:         Martijn Scheutjens
 * Template:       hello-elementor
 * Text Domain:	   slimreizen-nu
 * Description:    Based on Hello Elementor
 * Author URI:     https://martijnscheutjens.nl/
 * Version:        0.9
 */

/*******************
 * BASIS / GLOBAAL *
 *******************/




 
/* Browser-marges headings naar nul */
:where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
}

/* Basis tekstflow */
body {
  line-height: 1.6;
}

/****************
 * MAIN-CONTENT *
 ****************/
 
.main-content {
  padding: 4em 0.45em;
}

.main-content p {
  margin-block: 0.25em 1em;
}

/* Basislijsten in main-content */
.main-content :is(ul, ol) {
  margin: 0 0 1em 1.25em;  /* alleen ondermarge + inspringing */
  padding: 0;
}

/* Eerste niveau list-items */
.main-content :is(ul, ol) > li {
  margin: 0 0 0.4em 0;
}

/* Geneste lijsten compacter en minder extra witruimte */
.main-content :is(ul ul, ol ol, ul ol, ol ul) {
  margin-top: 0.25em;
  margin-bottom: 0.5em;
}

.main-content :is(ul ul, ol ol, ul ol, ol ul) > li {
  margin-bottom: 0.25em;
}

/**************************
 * CUSTOM STYLING CLASSES *
***************************/

/* Donkere vlakken met witte tekst */
.beige  { background-color: var(--e-global-color-530ece8); }
.groen  { background-color: var(--e-global-color-b423556); }
.blauw  { background-color: var(--e-global-color-867bbd5); }
.geel   { background-color: var(--e-global-color-e7f26cd); }
.rood   { background-color: var(--e-global-color-364f7af); }

/* Tekstkleur + headings in donkere vlakken */
.beige,
.groen,
.blauw,
.geel,
.rood {
  color: var(--e-global-color-f0bcff5);
}

.beige :is(h2, h3),
.groen :is(h2, h3),
.blauw :is(h2, h3),
.geel :is(h2, h3),
.rood :is(h2, h3) {
  color: var(--e-global-color-f0bcff5);
}


/* LICHTE VLAKKEN — BASIS */
.lichtbeige { background-color: var(--e-global-color-72475c8); }
.lichtgroen { background-color: var(--e-global-color-cbc7c5d); }
.lichtblauw { background-color: var(--e-global-color-90d7eb8); }
.lichtgeel  { background-color: var(--e-global-color-5379108); }
.lichtrood  { background-color: var(--e-global-color-aae3b62); }
.vlakwit    { background-color: var(--e-global-color-f0bcff5); }

/* LICHTE VLAKKEN — HEADING COLORS */

/* lichtbeige & lichtgroen */
.lichtbeige h2,
.lichtgroen h2 {
  color: var(--e-global-color-b423556);
}
.lichtbeige h3,
.lichtgroen h3 {
  color: var(--e-global-color-867bbd5);
}

/* lichtblauw & lichtgeel */
.lichtblauw h2,
.lichtgeel h2 {
  color: var(--e-global-color-867bbd5);
}
.lichtblauw h3,
.lichtgeel h3 {
  color: var(--e-global-color-b423556);
}

/* lichtrood */
.lichtrood h2 {
  color: var(--e-global-color-364f7af);
}
.lichtrood h3 {
  color: var(--e-global-color-867bbd5);
}

.kader-wit {
  padding: 0.25em 1.5em;
    font-size: calc(var(--e-global-typography-text-font-size) * 0.8);
  background-color: var(--e-global-color-f0bcff5);
}

/**************
 * PANELS     *
 **************/

/* gedeelde paneel-opmaak */
.samenvat-panels > .e-con,
.opsom-panels > .e-con {
  display: flex;
  align-items: center;
}

/* samenvat-panels */
.samenvat-panels > .e-con {
  background-color: var(--e-global-color-primary);
  color: var(--e-global-color-f0bcff5);
  font-size: calc(var(--e-global-typography-text-font-size) * 0.8);
  padding: 0.5em 1.5em;
}

.samenvat-panels > .e-con h4 {
  color: var(--e-global-color-f0bcff5);
}

.samenvat-panels.e-grid {
  gap: 2em;
}

/* opsom-panels */
.opsom-panels > .e-con {
  background-color: var(--e-global-color-72475c8);
  padding: 1.5em;
}

.opsom-panels h4.elementor-heading-title::first-letter {
  font-size: calc(var(--e-global-typography-text-font-size) * 4);
  font-weight: 700;
  float: left;
  margin-right: 0.1em;
  color: var(--e-global-color-e7f26cd);
}

/********************************************
 * STANDAARD RESTYLING SPECIFIEKE ELEMENTEN *
 ********************************************/

/* Icon boxes */
.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon :is(svg, i) {
  fill: var(--e-global-color-e7f26cd);
  color: var(--e-global-color-e7f26cd);
}

.elementor-widget-icon-box .elementor-icon-box-icon {
  text-align: center;
}

.elementor-widget-icon-box .elementor-icon-box-title {
  color: var(--e-global-color-867bbd5);
  font-family: var(--e-global-typography-9dcbfac-font-family);
  font-size: var(--e-global-typography-9dcbfac-font-size);
  font-weight: var(--e-global-typography-9dcbfac-font-weight);
  line-height: var(--e-global-typography-9dcbfac-line-height);
  letter-spacing: var(--e-global-typography-9dcbfac-letter-spacing);
  margin: 0 0 0.25em;
}

.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-icon-box .elementor-icon-box-content :is(p, li) {
  color: var(--e-global-color-text);
  font-family: var(--e-global-typography-text-font-family);
  font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight);
  line-height: 1.45em;
  margin: 0 0 0.3em;
}

/* Figuur captions */
.wp-caption-text {
  font-size: calc(var(--e-global-typography-text-font-size) * 0.67);
  font-family: var(--e-global-typography-accent-font-family);
  font-weight: 600;
  font-style: italic;
}

/* Waarschuwingen: gedeeld */
.elementor-alert-info .elementor-alert,
.elementor-alert-warning .elementor-alert {
  border-left: 4px solid;
  color: var(--e-global-color-text);
}

/* Info */
.elementor-alert-info .elementor-alert {
  background-color: #e7f3ff;
  border-left-color: var(--e-global-color-867bbd5);
}

/* Waarschuwing */
.elementor-alert-warning .elementor-alert {
  background-color: var(--e-global-color-5379108);
  border-left-color: var(--e-global-color-364f7af);
}

/* Titels Waarschuwingen */
.elementor-alert .elementor-alert-title {
  font-family: var(--e-global-typography-9dcbfac-font-family), Serif, "Times New Roman";
  font-size: var(--e-global-typography-9dcbfac-font-size);
  font-weight: var(--e-global-typography-9dcbfac-font-weight);
  line-height: var(--e-global-typography-9dcbfac-line-height);
  letter-spacing: var(--e-global-typography-9dcbfac-letter-spacing);
  margin-bottom: 0.45em;
}

.elementor-alert-warning .elementor-alert-title {
  color: var(--e-global-color-364f7af);
}
.elementor-alert-info .elementor-alert-title {
  color: var(--e-global-color-867bbd5);
}

/****************************
 * UNIEKE EN EENMALIGE CODE *
 ****************************/

/* Veilige scroll-marge anchor links */
[id] {
  scroll-margin-top: 100px;
}

/* Begrippenlijst / Jet-Engine repeater */
.jet-listing-dynamic-repeater__item dt {
  font-family: var(--e-global-typography-7f02a5e-font-family);
  font-weight: var(--e-global-typography-7f02a5e-font-weight);
  font-size: var(--e-global-typography-7f02a5e-font-size);
  text-transform: var(--e-global-typography-7f02a5e-text-transform);
  line-height: var(--e-global-typography-7f02a5e-line-height);
  color: var(--e-global-color-530ece8);
}

.jet-listing-dynamic-repeater__item dd {
  display: block !important;
}

/****************************************
 * ELEMENTOR: HEADINGS (HEADING WIDGET) *
 ****************************************/

/* Basisstijl alle headings in de Heading-widget */
.elementor-widget-heading :is(h1, h2, h3, h4, h5, h6).elementor-heading-title {
  margin-block-end: 0;
  margin-block-start: var(--heading-space, 1em);
}

/* Per level alleen de ruimte boven instellen */
.elementor-widget-heading h1.elementor-heading-title { --heading-space: 0; }
.elementor-widget-heading h2.elementor-heading-title { --heading-space: 2em; }
.elementor-widget-heading h3.elementor-heading-title { --heading-space: 1.75em; }
.elementor-widget-heading h4.elementor-heading-title { --heading-space: 1.5em; }
.elementor-widget-heading h5.elementor-heading-title { --heading-space: 1.25em; }
.elementor-widget-heading h6.elementor-heading-title { --heading-space: 1em; }

/*****************************************
 * ELEMENTOR: HEADINGS IN ANDERE WIDGETS *
 *****************************************/

/* Basis voor h3–h6 binnen willekeurige widgets */
.elementor-widget :is(h3, h4, h5, h6) {
  margin-block-end: 0;
  margin-block-start: var(--widget-heading-space, 1em);
}

/* Zelfde schaal als bij de Heading-widget */
.elementor-widget h3 { --widget-heading-space: 1.75em; }
.elementor-widget h4 { --widget-heading-space: 1.5em; }
.elementor-widget h5 { --widget-heading-space: 1.25em; }
.elementor-widget h6 { --widget-heading-space: 1em; }

/* Paragrafen binnen Elementor widgets */
.elementor-widget p { margin-block: 0.25em 1em; }

/* Lijsten binnen Elementor Text Editor */
.elementor .elementor-widget-text-editor ul {
  margin-left: 0.5em;
  padding-left: 0.5em;
}

/************************************
 * GLOBALE HEADINGS IN CONTENT
 ************************************/

.main-content :is(h2, h3, h4, h5, h6) {
  margin-block-end: 0;
  margin-block-start: var(--content-heading-space, 1em);
}

.main-content h2 { --content-heading-space: 2em; }
.main-content h3 { --content-heading-space: 1.75em; }
.main-content h4 { --content-heading-space: 1.5em; }
.main-content h5 { --content-heading-space: 1.25em; }
.main-content h6 { --content-heading-space: 1em; }