/*
Theme Name:   Jeroen Sanders
Theme URI:    https://www.jeroen-sanders.nl
Description:  Child theme voor Extra met de huisstijl van Jeroen Sanders: workshops, coaching, advies en quiz.
Author:       Jeroen Sanders
Template:     Extra
Version:      1.3.0
Text Domain:  jeroen-sanders
*/

/* ---------- Huisstijl ---------- */
:root{
  --js-blauw:#1e73be;
  --js-blauw-donker:#165a96;
  --js-tekst:#3a3a3a;
  --js-groen:#34a866;
  --js-mint:#44d89e;
  --js-oranje:#ff7f00;
  --js-achtergrond:#ecf0f5;
  --js-lijn:#c9d6e4;
}

body,
body .et_pb_text,
body .et_pb_blurb_description,
body p, body li, body input, body textarea, body select{
  font-family:'Allerta Stencil',system-ui,sans-serif;
  color:var(--js-tekst);
}
body{ font-size:18px; line-height:1.6; background:var(--js-achtergrond); }
body .et_pb_text p, body .et_pb_text li{ font-size:18px; line-height:1.6; }

h1,h2,h3,h4,h5,h6,
body .et_pb_text h1,body .et_pb_text h2,body .et_pb_text h3,body .et_pb_text h4{
  font-family:'Brawler',Georgia,serif;
  color:var(--js-tekst);
  line-height:1.2;
  padding-bottom:0;
  margin:0 0 .45em;
}
body .et_pb_text h1{ font-size:52px; font-weight:700; }
body .et_pb_text h2{ font-size:36px; font-weight:400; }
body .et_pb_text h3{ font-size:26px; font-weight:400; color:var(--js-blauw); }

a{ color:var(--js-blauw); }
a:hover{ color:var(--js-blauw-donker); }

/* ---------- Header en menu (Extra) ---------- */
/* Kleuren van de header stel je bij voorkeur in via Weergave > Customizer.
   Onderstaande regels zijn een vangnet als de Customizer-instelling ontbreekt. */
#main-header, #main-header-wrapper, #top-header{ background-color:var(--js-blauw); }
#et-navigation > ul > li > a, #et-menu > li > a{ color:#fff; font-family:'Allerta Stencil',sans-serif; }
#et-navigation > ul > li > a:hover, #et-menu > li > a:hover{ color:#ffd2a6; }
/* Menu-item 'Boek Jeroen': geef het in Weergave > Menu's de CSS-klasse js-menu-cta */
.js-menu-cta > a{
  background:var(--js-oranje) !important;
  color:#2a2a2a !important;
  border-radius:4px;
  padding-left:18px !important;
  padding-right:18px !important;
}

/* ---------- Bouwstenen voor de Divi-layouts ---------- */

/* Blauwe kopsectie */
.js-hero, .js-hero p, .js-hero li{ color:#e8f1fa; }
.js-hero h1, .js-hero h2{ color:#fff !important; }

/* Klein label boven een kop */
.js-eyebrow{
  font-size:15px !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--js-blauw) !important;
  margin-bottom:10px !important;
  display:block;
}
.js-hero .js-eyebrow{ color:#ffd2a6 !important; }

/* Witte kaart met gekleurde bovenrand */
.js-card{
  background:#fff;
  border-radius:6px;
  padding:32px 28px;
  height:100%;
  box-sizing:border-box;
  border-top:5px solid var(--js-blauw);
}
.js-card--groen{ border-top-color:var(--js-groen); }
.js-card--oranje{ border-top-color:var(--js-oranje); }
.js-card--mint{ border-top-color:var(--js-mint); }
.et_pb_equal_columns > .et_pb_column{ display:flex; flex-direction:column; }
.et_pb_equal_columns > .et_pb_column > .js-card{ flex:1; }
.js-card .js-meer{ color:var(--js-blauw); font-size:16px; }

/* Labels / chips */
.js-chip{
  display:inline-block;
  background:var(--js-achtergrond);
  padding:6px 12px;
  border-radius:40px;
  font-size:15px;
  margin:4px 6px 0 0;
}
.js-chip--licht{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;
  padding:8px 18px;
  font-size:17px;
}
.js-chip--oranje{ background:var(--js-oranje); color:#2a2a2a; padding:8px 18px; font-size:17px; }

/* Lijst met lijntjes (workshops op home, thema's) */
.js-lijst{ list-style:none !important; padding:0 !important; margin:0; border-top:1px solid var(--js-lijn); }
.js-lijst li{ padding:14px 0; border-bottom:1px solid var(--js-lijn); }
.js-lijst li a{ display:flex; justify-content:space-between; text-decoration:none; color:var(--js-tekst); font-family:'Brawler',Georgia,serif; font-size:22px; }

/* Groot jaartal */
.js-jaartal{ font-family:'Brawler',Georgia,serif; font-size:96px; line-height:1; color:var(--js-blauw); }

/* Tijdlijn */
.js-tijdlijn{ list-style:none !important; margin:0; padding:0 !important; border-left:3px solid var(--js-blauw); }
.js-tijdlijn li{ position:relative; padding:0 0 28px 32px; }
.js-tijdlijn li:before{ content:''; position:absolute; left:-9px; top:8px; width:14px; height:14px; border-radius:50%; background:var(--js-blauw); }
.js-tijdlijn li:first-child:before{ background:var(--js-oranje); }
.js-tijdlijn .js-jaar{ font-family:'Brawler',Georgia,serif; color:var(--js-blauw); font-size:20px; display:block; }
.js-tijdlijn strong{ font-family:'Brawler',Georgia,serif; font-weight:400; font-size:22px; }

/* Citaat */
.js-citaat{ text-align:center; }
.js-citaat blockquote{ border:0; padding:0; margin:0; font-family:'Brawler',Georgia,serif; font-size:30px; line-height:1.35; }
.js-citaat .js-aanhalingsteken{ font-family:'Brawler',Georgia,serif; font-size:80px; line-height:.6; color:var(--js-oranje); display:block; margin-bottom:16px; }

/* Groene afsluitende balk */
.js-cta h2{ color:#fff !important; margin-bottom:0; }
.js-cta p{ color:#f0fbf5; }

/* Quiztitel */
.js-quiztitel h1{ font-size:96px !important; line-height:1 !important; }
.js-quiztitel h1 span{ color:var(--js-mint); }

/* Foto's netjes afgerond */
.js-foto img{ border-radius:6px; width:100%; object-fit:cover; }

/* Contactformulier */
.et_pb_contact_form_container .input, .et_pb_contact_form_container textarea{
  background:#fff !important; border:1px solid #b8c7d8 !important; border-radius:4px; color:var(--js-tekst) !important;
}

/* ---------- Telefoon ---------- */
@media (max-width:980px){
  body .et_pb_text h1{ font-size:40px; }
  body .et_pb_text h2{ font-size:30px; }
  .js-quiztitel h1{ font-size:56px !important; }
  .js-jaartal{ font-size:72px; }
}

/* ---------- v1.2: Divi-pagina's over de volle breedte in Extra ---------- */
#top-header{display:none!important}
body.et_pb_pagebuilder_layout #main-content{padding-top:0!important;background:transparent}
body.et_pb_pagebuilder_layout #main-content > .container{width:100%!important;max-width:100%!important;padding:0!important}
body.et_pb_pagebuilder_layout #content-area{display:block!important}
body.et_pb_pagebuilder_layout .et_pb_extra_column_main{width:100%!important;max-width:100%!important;float:none!important;padding:0!important;flex:0 0 100%!important}
body.et_pb_pagebuilder_layout .et_pb_extra_column_sidebar{display:none!important}
body.et_pb_pagebuilder_layout article.page,
body.et_pb_pagebuilder_layout .post-wrap{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;margin:0!important;border-radius:0!important}
body.et_pb_pagebuilder_layout h1.entry-title{display:none!important}
h1,h2,h3,h4,h5,h6,.et_pb_text h1,.et_pb_text h2,.et_pb_text h3{text-transform:none!important}
#et-menu > li.js-menu-cta > a{padding:12px 18px!important;margin:-12px 0 0!important;border-radius:4px;background:#ff7f00!important;color:#2a2a2a!important}
#et-menu > li.js-menu-cta{padding-bottom:42px}

/* ---------- v1.3: lijn onder het menu en footer in huisstijl ---------- */
#main-header{border-bottom:1px solid rgba(255,255,255,.35)!important}
#footer,#footer-bottom{background:#1e73be!important}
#footer #footer-bottom{border-top:1px solid rgba(255,255,255,.25)}
#footer,#footer p,#footer li,#footer .widget,#footer #footer-info{color:#dbe7f3!important;font-family:'Allerta Stencil',sans-serif}
#footer a,#footer .et-extra-icon:before{color:#ffffff!important}
#footer a:hover{color:#ffd2a6!important}
#footer .widgettitle,#footer h4{color:#fff!important;font-family:'Brawler',Georgia,serif!important;text-transform:none!important;font-size:20px!important;letter-spacing:0!important}