/*
Theme Name: Hicle2025
Author: Johan 
Version: 2.0
*/

/* Color
 * --------------------- */
/* lichtere vlakken altijd 25 % lichter */
:root {
  --fig2: #708721;
  --fwbnl2: #ad2d0e;
  --fwbbe2: #9f9b04;
  --ebcbe2: #007372;
  --ebcnl2: #b77501;
  --ibtc2: #005176;
  --hhd2: #cea400;

  --fig1: #89a329;
  --fwbnl1: #d63416;
  --fwbbe1: #c4be01;
  --ebcnl1: #e28e03;
  /*--ebcbe1: #008c8b;*/
  --ebcbe1: #e28e03;
  --ibtc1: #006897;
  --ibtc3: #d63416;
  --ibtc4: #ad2d0e;
  --hhd1: #f3bf00;
  --hhd3: #c4be01;
  --hhd4: #9f9b04;
}

/* clockwise: 
 * home:  73a4a9, ecf0f1, f4f8e7, 617a01, logo: a5c8cc, 89a2a7, 6f8520, 89a328
 * ebcbe: 5d7074, ebf6f8, c5d4db, 015071, logo: a5c8cc, 89a2a7, 007372, 008b8c
 * ebcnl: 6c8488, d8e4e4, f9e2b9, b67501, logo: a5c8cc, 8aa3a8, b67203, e18d06
 * fwbbe: 89a2a7, e9f1f4, f3f0bd, 9f9b06, logo: a5c8cc, 89a2a7, 9f9b06, c3bd07
 * fwbnl: 6d8589, d5e3e3, f9d1c9, ae2b0d, logo: a5c8cc, 89a2a7, ac2d0d, d43316
 * hhd:   789195, eeeeee, f5f2e1, cea400, logo: a5c8cc, 89a2a7, cda300, f4bf00
 * ibtc:  6b8387, ebf6f8, d4d9dc, 015071, logo: a5c8cc, 89a2a7, 005075, 006897
 *
 * home:  newsletter: 526607, bottom: 51660b
 * ebcbe: newsletter: 005176, bottom: 005075
 * ebcnl: newsletter: 7a4d03, bottom: 805101
 * fwbbe: newsletter: 9e9a03, bottom: 7b7529
 * fwbnl: newsletter: bc2d0d, bottom: 6e1602
 * hhd:   newsletter: 856a02, bottom: 896d02
 * ibtc:  newsletter: 004e72, bottom: 005075
 */

/* default colors
 * ------------------------------ */
body {
  --rtl: #73a4a9;
  --rtr: #ecf0f1;
  --rbr: #f4f8e7;
  --rbl: #617a01;
  --ltl: #a5c8cc;
  --ltr: #89a2a7;
  --lbr: #6f8520;
  --lbl: #89a328;
  --news: #526607;
  --bottom: #51660b;
}

body.ebc {
  --rtl: #6c8488;
  --rtr: #d8e4e4;
  --rbr: #f9e2b9;
  --rbl: #b67501;
  --ltl: #a5c8cc;
  --ltr: #8aa3a8;
  --lbr: #b67203;
  /*--lbl: #e18d06;*/
  --lbl: #e28e03;
  --news: #7a4d03;
  --bottom: #805101;
}

body.fwb {
  --rtl: #6d8589;
  --rtr: #d5e3e3;
  --rbr: #f9d1c9;
  --rbl: #ae2b0d;
  --ltl: #a5c8cc;
  --ltr: #89a2a7;
  --lbr: #ac2d0d;
  --lbl: #d43316;
  --news: #bc2d0d;
  --bottom: #6e1602;
}

body.hhd {
  --rtl: #789195;
  --rtr: #eeeeee;
  --rbr: #f5f2e1;
  --rbl: #cea400;
  --ltl: #a5c8cc;
  --ltr: #89a2a7;
  --lbr: #cda300;
  --lbl: #f4bf00;
  --news: #856a02;
  --bottom: #896d02;
}

body.ibtc {
  --rtl: #6b8387;
  --rtr: #ebf6f8;
  --rbr: #d4d9dc;
  --rbl: #015071;
  --ltl: #a5c8cc;
  --ltr: #89a2a7;
  --lbr: #005075;
  --lbl: #006897;
  --news: #004e72;
  --bottom: #005075;
}

body { color: #222222 }
h1, h2, h4, h5, h6 { color: #607901 }
/*h3 { color: #150a15 }*/
h3 { color: #607901 }
a, a:visited, a:hover { color: var(--fig2) }

/* Font
 * --------------------- */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 400; 
  line-height: 1.6;
}

h1 { font-size: 2.8rem; line-height: 1.2; }
h2 { font-size: 2rem; line-height: 1.3; }
h3 { font-size: 1.7rem; line-height: 1.35; }
h4 { font-size: 1.3rem; line-height: 1.5; }
p { font-size: 1rem; line-height: 1.6; }

/* Layout
 * --------------------- */
* { box-sizing: border-box }

body { overflow-x: hidden } /* no horizontal scrollbar */

ul.menu a, ul.menu a:visited { text-decoration: none; }
ul.menu a:hover { text-decoration: underline }
ul.menu { padding: 0; margin: 0; list-style: none; }
ul.sub-menu { list-style: none; padding: 0; margin: 0 }

.header { 
  height: 80px; 
  background: var(--rtr); 
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 2; /* necessary so that video in iframe scroll underneath the header */
}

.header-bg { 
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 80px;
  background: var(--rtl);
}

.header-bg-skewed { 
  position: absolute;
  top: 0;
  left: 7px;
  width: 20%;
  height: 80px;
  background: var(--rtl);
  transform: skew(-10deg);
}

.hicle-logo-wrapper { 
  position: absolute;
  top: 45px;
  left: 20%;
  width: 60px;
}

.hicle-logo { 
  position: relative;
  left: -30px;
}

.logo-menu {
  position: absolute;
  left: 20%;
  top: 45px;
  width: 60px;
  height: 60px;
}

.logo-menu a { 
  color: transparent; 
  background-image: url('hicle-logo-white-v2.png');
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  line-height: 0px;
  display: block;
  position: absolute;
  left: -30px;
  width: 60px;
  height: 60px;
}

@media (min-width: 850px) {
  .hicle-logo-wrapper { width: 110px; top: 25px; }
  .hicle-logo { left: -55px }
  .logo-menu { width: 110px; height: 110px; top: 25px; }
  .logo-menu a { left: -55px; width: 110px; height: 110px; }
}

a#menu-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
}

a#menu-toggle #menu-toggle-cross { display: none }
a#menu-toggle.opened #menu-toggle-bars { display: none }
a#menu-toggle.opened #menu-toggle-cross { display: block }

@keyframes menu-open {
  from { left: 50% }
  to   { left: 0 }
}

a#menu-toggle.opened ~ .top-menu > div {
  animation-name: menu-open;
  animation-duration: 0.3s;
  left: 0;
}

.top-menu {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
}

@media (max-width: 850px) {
  .header .top-menu { display: none }

  /* on mobile, when menu is open, make the menu scrollable.
   * the <div class="header"> element will then have received
   * an extra css class "opened" (due to some javascript in footer.php).
   * Because of this extra css class, we can make the header cover the
   * entire screen, and then vertical scrolling of the menu is possible.
   * The content of the site itself cannot be seen then! */
  .header.opened { height: auto; bottom: 0; position: fixed; width: 100% }

  .header.opened .top-menu {
    display: block;
    /* if the menu is large, then allow scrolling it vertically */
    overflow: scroll;
    overflow-x: hidden;
    bottom: 0;
  }

  .header.opened .top-menu > div {
    /* add extra margin at the bottom so that the last menu
     * item can be fully scrolled into view */
    margin-bottom: 20px;
  }
}

.top-menu > div { 
  position: relative; 
  left: 100%; 
}

.top-menu a { 
  color: #fff; 
  display: block; 
  padding: 20px;
  font-weight: bold;
  text-align: center;
  font-size: 18px;
}

.top-menu ul.sub-menu { padding-bottom: 20px; display: inline-block; }
.top-menu ul.menu > li { text-align: center }
.top-menu ul.sub-menu a { padding: 0; display: block; text-align: left; font-size: 16px}
.top-menu ul.sub-menu ul.sub-menu { padding-bottom: 0px; padding-left: 30px }

.top-menu li.fwb { background-color: var(--fwbnl1) }
.top-menu li.ebc { background-color: var(--ebcbe1) }
.top-menu li.hhd { background-color: var(--hhd1) }
.top-menu li.ibtc { background-color: var(--ibtc1) }

.site-title {
  position: relative;
  left: 32%;
  top: 20px;
  color: var(--ltl);
  font-size: 18px;
}

.side-menu { display: none; }

.footer {
  background: var(--bottom);
  color: white;
}
.footer a, .footer a:visited, .footer a:hover {
  color: white;
}

.hicle-search-results {
  margin: 80px 25% 20px 25%;
}

form.search-form {
  display: flex;
  flex: row nowrap;
}

form.search-form input {
  max-width: 5rem;
}

span.highlight { color: red; }

/* Margin
 * --------------------------------------*/
.content-wrapper > *:first-child { margin-top: 50px; }
.content-wrapper > figure:first-child { margin-top: inherit; margin-bottom: 0 }

.wp-block-columns { margin-bottom: 0px!important }

/* Padding
 * --------------------------------------*/
.content-outer h1,
.content-outer h2,
.content-outer h3,
.content-outer h4,
.content-outer h5,
.content-outer h6,
.content-outer p { 
  padding-left: 20px; 
  padding-right: 20px; 
}

.wp-block-columns.has-background { padding: 2.375em; }

.footer { padding: 20px }
.footer ul.sub-menu { padding-left: 20px; }
.footer ul.menu > li { padding-bottom: 20px; }

.wp-block-columns { gap: 10px!important }

@media (min-width: 850px) {

  .wp-block-columns { gap: 2em!important; }

  #menu-toggle { display: none; }

  .site-title {
    position: absolute;
    top: 23px;
    left: 25%;
    padding-left: 20px;
  }

  .side-menu {
    display: block;
    position: absolute;
    right: 5%;
    top: 20px;
  }

  .side-menu li {
    display: inline-block;
    margin-left: 15px;
  }

  .side-menu a, .side-menu a:visited {
    color: black;
    font-size: 16px;
  }

  .side-menu a:hover {
    color: black;
  }

  .side-menu > div {
    display: inline-block;
  }

  .search-widget {
    margin-left: 20px;
  }

  .search-widget svg { 
    height: 20px; 
    width: 20px; 
    min-height: 10px; 
    min-width: 10px; 
  } 

  .search-widget button { 
    padding: 0;
  }

  .search-widget input { 
    min-width: 5rem;
    width: 5rem;
  }

  .top-menu { 
    position: absolute; 
    top: 80px; 
    left: 25%; 
    width: 50%;
  }
  .top-menu ul.menu {
    display: flex;
    flex: row nowrap;
  }
  .top-menu > div { position: relative; left: 0px }

  .top-menu ul.sub-menu { display: none }
  .top-menu li:hover > ul.sub-menu,
  .top-menu li:hover > ul.sub-menu ul.sub-menu { display: block }

  .top-menu ul.sub-menu a { text-align: left; padding: 0 }
  .top-menu ul.sub-menu { padding-left: 20%; padding-bottom: 20px; }
  .top-menu ul.sub-menu ul.sub-menu { padding-bottom: 0px; }

  .top-menu li.fwb > a, .top-menu li.fwb ul.sub-menu { background-color: var(--fwbnl1) }
  .top-menu li.ebc > a, .top-menu li.ebc ul.sub-menu { background-color: var(--ebcbe1) }
  .top-menu li.hhd > a, .top-menu li.hhd ul.sub-menu { background-color: var(--hhd1) }
  .top-menu li.ibtc > a, .top-menu li.ibtc ul.sub-menu { background-color: var(--ibtc1) }

  .top-menu li.fwb { background-color: transparent }
  .top-menu li.ebc { background-color: transparent }
  .top-menu li.hhd { background-color: transparent }
  .top-menu li.ibtc { background-color: transparent }

  .footer { padding: 20px 20% }

  .footer ul.menu {
    display: flex;
    flex: row wrap;
    gap: 20px;
  }
  .footer ul.menu > li { padding-bottom: 0px; }
  
  .footer ul.sub-menu { padding-left: 0px }

  .wp-block-columns.is-layout-flex {
    justify-content: space-around;
  }

  /* menu button : alleen in desktop versie rounded corners */
  .menu-button { margin-left: 20px }

  .menu-button a {
    border:1px solid #2f2f2f;
    border-radius:30px;
    -webkit-box-shadow:0px 0px 0px 0px #2f2f2f;
    -moz-box-shadow:0px 0px 0px 0px #2f2f2f;
    box-shadow:0px 0px 0px 0px #2f2f2f;
    /*margin: -2px;*/
  }
}

/* language selection on mobile */
li.flag-nl a, li.flag-nl a:visited, li.flag-nl a:hover {
color: transparent;
       background-image: url('nl.gif');
       background-repeat: no-repeat;
       background-size: 50px;
       background-position: center;
}
li.flag-en a, li.flag-en a:visited, li.flag-en a:hover {
color: transparent;
       background-image: url('en.gif');
       background-repeat: no-repeat;
       background-size: 50px;
       background-position: center;
}

li.flag-nl a:hover, li.flag-en a:hover { text-decoration: none }

/* language selection on desktop */
@media (min-width:850px) {
        .top-menu .flag-en, .top-menu .flag-nl { display: none }
        li.flag-en a, li.flag-en a:visited, li.flag-en a:hover,
        li.flag-nl a, li.flag-nl a:visited, li.flag-nl a:hover {
                background-size: 90%;
        }
}




.menu-button a,
.menu-button a:visited,
.menu-button a:hover,
.menu-button a:active {
  color:#000000;   
  background-color:#FFD300;
  text-decoration: none!important;
}

.menu-button a:hover { color:#2f2f2f; }
.menu-button a:active { color:red; }

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before { display: none; }