/* ============ Custom CSS by O-Line ========== */

/* -------- styling menu section -------------- */
#sp-section-1 {
	/*height: 41px;*/
	border-top: 4px solid #7FA607;
    border-bottom: 1px solid #7FA607;
    margin-bottom: 15px;
}

.sp-menu-item.current-item.active > a {  /* assigning color to currently active menu item */
	color: #7FA607 !important;
}

#sp-section-1 .container .container-inner, #sp-menu, #sp-menu .sp-megamenu-wrapper .sp-menu-item a {
	height: 36px;
    text-decoration: none;	
}

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
    padding: 0 17.5px;
    line-height: 36px !important;
    font-size:20px;
}

#sp-section-1 .container {
    display: flex;
    justify-content: space-between; /* Optional: horizontally center too */
}

.sp-megamenu-parent .sp-menu-item>a img, .sp-megamenu-parent .sp-menu-item>span img {
    vertical-align: top !important;
}

/* START Allign hamburger/ off canvas menu center vertically and add word "Menu"after */

/* XS: phones ≤575px */
@media (max-width: 575.98px) {
  #offcanvas-toggler {
    height: 35px;
    line-height: 35px;
  }
}

/* SM: 576–767px */
@media (min-width: 576px) and (max-width: 767.98px) {
  #offcanvas-toggler {
    height: 40px;
    line-height: 40px;
  }
}

/* MD: 768–991px (still collapsed in Helix) */
@media (min-width: 768px) and (max-width: 991.98px) {
  #offcanvas-toggler {
    height: 48px;
    line-height: 48px;
  }
}

/* Optional: ensure vertical centering irrespective of font/icon size */
@media (max-width: 991.98px) {
  #offcanvas-toggler {
    display: inline-flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center if needed */
    padding: 0; /* avoid padding shifting the center */
  }

  /* Add the word "Menu" after the icon */
  #offcanvas-toggler::after {
    content: "Menu";         /* the text */
    margin-left: 10px;       /* space between icon and text */
    font-size: 16px;         /* adjust to taste */
    color: inherit;          /* match the current header color */
    font-weight: 500;        /* optional */
  }
}
/* END Allign hamburger/ off canvas menu center vertically and add word "Menu"after */

/* Offcanvas menu link styles */
.offcanvas-menu ul.menu li a {
  color: inherit;                 /* keep default text color */
  text-decoration: none;          /* remove underline by default */
  transition: color 0.2s ease;    /* smooth color change */
}

/* 1) Red on hover */
.offcanvas-menu ul.menu li a:hover {
  color: red !important;
  text-decoration: none;          /* no underline on hover */
}

/* 2) Red + underline when clicked / active */
.offcanvas-menu ul.menu li a:active,
.offcanvas-menu ul.menu li.active > a,
.offcanvas-menu ul.menu li.current > a {
  color: red !important;
  text-decoration: none !important;
}

/* ----------  styling  breadcrumb in header ------ */
.breadcrumb {
    margin: 0px 0px 0px 5px;
    font-size: 0.7em;
    background-color: transparent !important;
    padding: 0 !important;
}

.mod-breadcrumbs__here {
    font-weight: bold !important;
}
#sp-breadcrum-static-contact-info {
    font-size: 1.2em;    
}

.breadcrumb-item.active {
    color: #81a600;      /* force custom color for breadcrumb element showing active page */
}

/* Replace the breadcrumb divider with an arrow image */
.breadcrumb-item + .breadcrumb-item::before {
    content: url("/images/arrow.png");  /* use your image */
    display: inline-block;
    vertical-align: middle;             /* align nicely with text */
    margin: 0 6px;                      /* spacing between items */
    padding: 0;                         /* remove Bootstrap padding */
    float: none;                        /* prevent float issues */
}

/* Remove Bootstrap’s extra left padding on breadcrumb items */
.breadcrumb-item + .breadcrumb-item {
    padding-left: 0 !important;
}

/* -------- styling short contact info in header ------*/
.short-contact-info-header {
    float: right;
    width: 280px !important;
    margin: 5px 0px 0px 0px;
    padding: 0px 5px 0px 5px;
    font-size: .7em;
    border-radius: 3px;
    border-style: solid;
    border-color: #7EA607;
    border-width: 1px;
    background-color: #B1D01E;
}

/* START force contact bar to wrap and float left in mobile mode */
/* Below lg: stop floating the contact bar and align it left */
@media (max-width: 991.98px) {
  #sp-breadcrum-static-contact-info .short-contact-info-header {
    float: none !important;   /* kill the float */
    display: block;           /* take its own line */
    width: 100%;              /* span the row */
    text-align: left;         /* left-align text */
    margin: 8px 0 0 0;        /* tidy spacing; tweak if needed */
  }

  /* (Optional) ensure its container also spans full width */
  #sp-breadcrum-static-contact-info #sp-top1,
  #sp-breadcrum-static-contact-info #sp-top1 .sp-column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* END force contact bar to wrap and float left in mobile mode */

/* -------- styling the logo and slogans section ------- */
#sp-top2 {
padding-top: 15px !important; /* - align-bottom the slogans with logo*/
}

/* Override Helix default small logo height + center on mobile */
@media (max-width: 991.98px) {
  .sp-default-logo,
  .logo {
    display: block;
    text-align: center;   /* center logo inside container */
  }

  .sp-default-logo img,
  .logo img {
    max-height: 200px !important;  /* adjust as you like */
    height: auto !important;
    width: auto !important;
    margin: 0 auto;                /* makes sure the image itself is centered */
    display: inline-block;         /* prevents full-width stretch */
  }
}

/* Force align slogans to the right in mobile moide */
@media (max-width: 991.98px) {
  #sp-logo-and-slogans #sp-top2 {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
  #sp-logo-and-slogans #sp-top2 .sp-column { margin-left: auto; text-align: right; }
}

/* ---------- Styling Footer and footer elements -----------*/
#sp-custom-footer {
    background: #4D4D4C;
    border-top: 4px solid #7FA607;
    margin: 0 auto;
    position: relative;
    color: #BEC5CA;
    font-size: 13px;
   /* font-family: Khmer, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;*/
   /* font-family: 'Didact Gothic', Arial, 'Arial Unicode MS', Helvetica, Sans-Serif; */
    font-family: Helvetica, Sans-Serif, Arial, 'Arial Unicode MS', 'Didact Gothic';    
    text-align: left;
    padding: 0;
}

#sp-footer1 {
    margin: 0 auto;
    min-width: 940px;
    max-width: 940px;
    width: 100%;
    padding: 8px;
    padding-right: 8px;
    padding-left: 8px;
}

#Footer_container_grouper { /* Footer elements container-grouper */
	width: 100%;
	float: left;
}

.footer_container_1_HP, .footer_container_2_HP, .footer_container_3_HP, .footer_container_4_HP {
	/* container for footer elements 1-2-3 on hompage*/
	margin-bottom: 20px;
	float: left;
	min-height: 50px;
	text-align: left;
	line-height: 1.4em !important;
}

.footer_container_1, .footer_container_2, .footer_container_3, .footer_container_4 {
	/* container for footer elements 1-2-3 */
	margin-bottom: 20px;
	float: left;
	min-height: 50px;
	text-align: left;
	line-height: 1.4em !important;
}

.footer_container_1 {
	/* container width for footer elements 1 */
	min-width: 170px;
	margin-right: 20px;	
}

.footer_container_1_HP {
	/* container width for footer elements 1 on homepage*/
	min-width: 200px;
	margin-right: 20px;	
}

.footer_container_2 {
	/* container width for footer elements 2 */
	min-width: 270px;
	margin-right: 20px;	
}

.footer_container_2_HP {
	/* container width for footer elements 2 on homepage */
	min-width: 270px;
	margin-right: 20px;	
}

.footer_container_3 {
	/* container width for footer elements 3 */
	min-width: 220px;
	margin-right: 20px;	
}

.footer_container_3_HP {
	/* container width for footer elements 3 on homepage */
	min-width: 200px;
	margin-right: 20px;	
}

.footer_container_4 { /* container for footer element 4 */
	margin-right: 0px;
	min-width: 150px;	
	clear: right;
}

.footer_container_4_HP { /* container for footer element 4 on homepage */
	margin-right: 0px;
	min-width: 150px;	
	clear: right;
}

#sp-footer1 H1, .footer_container_1 H1, .footer_container_2 H1, .footer_container_3 H1, .footer_container_4 H1, 
.footer_container_1_HP H1, .footer_container_2_HP H1, .footer_container_3_HP H1, .footer_container_4_HP H1 {
    font-family: Helvetica, Sans-Serif, Arial, 'Arial Unicode MS', 'Didact Gothic';
    font-weight: bold;
    color: #FFFFFF;
    font-size: 1em;
    letter-spacing: .15em;
    padding-bottom: 0px;
    margin-bottom: 0px;
    line-height: 1.4em !important;
}

/* Start styling sets for Menu in footer */
.menu_in_footer ul {
    list-style: none;   /* Removes bullets */
    margin: 0;          /* Removes default margin */
    padding: 0;         /* Removes default padding so it’s flush left */
}

.menu_in_footer img {
	display:none;       /* Removes home icon from menu in teh footer */
}

.footer_container_1 img, .footer_container_2 img, .footer_container_3 img, .footer_container_4 img,
.footer_container_1_Hp img, .footer_container_2_HP img, .footer_container_3_HP img, .footer_container_4_HP img  {/* styling image behaviour in footer area */
	border-style: none;
}

.footer_container_1 a:link, .footer_container_1 a:visited,
.footer_container_2 a:link, .footer_container_2 a:visited,
.footer_container_3 a:link, .footer_container_3 a:visited,
.footer_container_4 a:link, .footer_container_4 a:visited,
.footer_container_1_HP a:link, .footer_container_1_HP a:visited,
.footer_container_2_HP a:link, .footer_container_2_HP a:visited,
.footer_container_3_HP a:link, .footer_container_3_HP a:visited,
.footer_container_4_HP a:link, .footer_container_4_HP a:visited { /* styling hyperlink behaviour in footer (part 1) */
	text-decoration: underline;
	color: #BEC5CA;
}

.footer_container_1 a:hover,
.footer_container_2 a:hover,
.footer_container_3 a:hover,
.footer_container_4 a:hover,
.footer_container_1_HP a:hover,
.footer_container_2_HP a:hover,
.footer_container_3_HP a:hover,
.footer_container_4_HP a:hover {  /* styling hyperlink behaviour in footer (part 2) */
	color: #e0e699 !important;
}

a.sp-scroll-up {                  /*  styling the scroll-up button link */
    color:#7EA607 !important;
    background: #565656;
}

a:hover.sp-scroll-up {                  /*  styling the scroll-up button hover */
    color:#ffffff !important;
    background: #565656;    
}


/*  Styling social icons -- positioning  */
.rssocial-left {
    margin: 0px !important;     /* - removing standard margins - */
}

#rssocial-119 li, #rssocial-120 li {
    padding-left: 0px;         /* - aligning flush right - */
    padding-right: 15px;       /* - Setting space between the icons -*/
    Text-decoration: none;
}

#rssocial-120 a, #rssocial-119 a,
#rssocial-120 a:link, #rssocial-119 a:link,
#rssocial-120 a:visited, #rssocial-119 a:visited,
#rssocial-120 a:hover, #rssocial-119 a:hover {    /* styling footer Media icon sizes and some behaviour */

	border-style: none;
	font-size: 1.0em;
	text-decoration: none;
	outline: 0;
}

/* --- START MOBILE FIXES FOR PAGES-FOOTER WRAP & HOMPAGE-FOOTER WRAP --- */
@media (max-width: 991.98px) {
  /* Let the footer shrink on small screens */
  #sp-footer1 {
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Stack columns and remove rigid min-widths */
  .footer_container_1,
  .footer_container_2,
  .footer_container_3,
  .footer_container_4,
  .footer_container_1_HP,
  .footer_container_2_HP,
  .footer_container_3_HP,
  .footer_container_4_HP {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-right: 0 !important;
  }

  /* Optional: add space between stacked blocks */
  .footer_container_1,
  .footer_container_2,
  .footer_container_3,
  .footer_container_4 {
    margin-bottom: 16px;
  }

  /* Make any images inside responsive */
  #sp-custom-footer img {
    max-width: 100%;
    height: auto;
  }
}
/* --- END MOBILE FIXES FOR PAGES-FOOTER WRAP & HOMPAGE-FOOTER WRAP --- */

/* ===== Styling website content pages ====== */

/* Styling website wide hyperlinks */
a, a:link, a:visited {
  font-family: Khmer, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  text-decoration: none;
  color: #E2341D;
}

a:hover, a.hover {
  font-family: Khmer, Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  text-decoration: underline;
  color: #E2341D;
}

/* website wide styling of H2 */
h2 {
  font-style: italic;
}

/* Left-align all H1, H2, H3 on mobile */
@media (max-width: 991.98px) {
  h1, h2, h3 {
    text-align: left !important;
  }
}

/* --- Styling unordered lists that are in the page contents ---- */
/* TEST SECTION=============== */
/* --- Styling unordered lists that are in the page contents ---- */
#exp_pages_container ul {    /* Apply only inside the content wrapper */
  margin-left: 10px;         /* left indent */
  padding: 5px 0;            /* top/bottom padding */
  list-style: none;          /* remove standard bullets. We'll draw our own bullets */
}

#exp_pages_container ul > li {  /* List items with custom icon + 5px gap to text */
  position: relative;
  padding-left: 15px;           /* icon width (10px) + 5px gap = 15px text indent */
}

#exp_pages_container ul > li::before {       /* Custom bullet icon + allow for 5px space to text */
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;                 /* vertically centers near first text line */
  transform: translateY(-50%);
  width: 10px;                /* icon render size — tweak if needed */
  height: 10px;
  background-image: url("/images/postbullets.png");
  background-repeat: no-repeat;
  background-size: contain;   /* scales image to fit width/height */
}



/* - Styling on  hompage - */
#column-wrap-id-a01c832e-30ce-4df2-9aef-72c6486f9520.sppb-row-column,    /* 1st column on hompage */
#column-wrap-id-263e574b-7529-4af5-b053-9ad0b72ea7c6.sppb-row-column {   /* 2nd column (photo) on hompage */
    padding-right: 0px !important;                                       /* removing right padding from columns 1 & 2 on hompage */ 
}

#column-wrap-id-263e574b-7529-4af5-b053-9ad0b72ea7c6.sppb-row-column {   /* 2nd column (photo) on hompage */
    padding-top: 10px !important;                                        /* aligning phopto a bit lower */
}

.homepage_contactinfo { /* container for contact info and socialmedia on homepage */
	margin-right: 0px;
	margin-bottom: 20px;
	width: 197px;
	float: left;
	height: 257px;
	clear: right;
}
.homepage_contactinfo_adress, .homepage_contactinfo_social {
	/* contact info adress and social positioning */
	margin-top: 13px;
	font-size: .9em;
}

a.art-button {  
    display: inline-block;          /* Makes it act like a button */
    margin-top: 15px;                /* allow some space above the button */
    padding: 3px 20px 3px 20px;     /* Space inside */
    background-color: #7FA607;    /* Button background */
    color: #fff;                  /* Text color */
    text-decoration: none;          /* Remove underline */
    letter-spacing: 1px;            /* Adjust spacing between characters */
    border-radius: 3px;             /* Rounded corners */
    font-weight: normal;            /* Bold text */
    transition: background-color 0.3s ease;
}

a.art-button:hover {
    background-color: #E2341D;    /* Red on hover */
}

/* START Mobile padding fix for HOMEPAGE content section */
@media (max-width: 991.98px) {
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-row-container {
    padding-left: 16px;
    padding-right: 16px;          /* gives you the right-side breathing room */
  }

  /* Neutralize Bootstrap’s negative margins inside this section only */
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-row {
    margin-left: 0;
    margin-right: 0;
  }

  /* Optional: keep columns flush to the new container padding */
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-row-column,
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 [class*="sppb-col"] {
    padding-left: 0;
    padding-right: 0;
  }

  /* Safety: prevent any accidental horizontal scroll */
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 {
    overflow-x: hidden;
  }

  /* Safety: ensure images/text don’t push past the edge */
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 img {
    max-width: 100%;
    height: auto;
  }
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-addon-content {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
}
/* END Mobile padding fix for HOMEPAGE content section */

/* START Tweaking layout of homepage content for mobile devices */

/* Mobile & tablet ONLY: allow a 5px gap and wrap; keep items flush-left when wrapping */
@media (max-width: 991.98px) {
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;                 /* minimum space between columns when side-by-side */
    justify-content: flex-start;
    margin-left: 0;           /* neutralize Bootstrap’s negative gutters just here */
    margin-right: 0;
  }

  /* Let each column shrink/grow and wrap naturally */
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-row-column {
    flex: 1 1 300px;          /* try to be ~300px; wrap if there isn’t room */
    min-width: 0;             /* prevent overflow pushing layout */
  }

  /* Safety: content shouldn't overflow the column width */
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 img,
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-addon-content {
    max-width: 100%;
    height: auto;
  }
}

/* Optional: phones in portrait — force full-width stacking, flush-left */
@media (max-width: 575.98px) {
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-row-column {
    flex: 1 1 100%;
  }
}
/* END Tweaking layout of homepage content for mobile devices */

/* START Eliminate excesive white space under content of homepage, but allow for mobile */
/* 1) Kill the section’s default bottom padding just here */
#section-id-69c0cc14-9d26-4337-84ac-5db133176728 {
  padding-bottom: 0px !important;
}

/* 2) Remove the bottom margin on the last addon in each column */
#section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-column-addons > .sppb-addon-wrapper:last-child,
#section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-column-addons > .sppb-addon:last-child {
  margin-bottom: 0px !important;
}

/* 3) Prevent baseline gap under images (treat them as block elements) */
#section-id-69c0cc14-9d26-4337-84ac-5db133176728 img {
  display: block;         /* removes the tiny baseline space */
  max-width: 100%;
  height: auto;
}

/* (Optional) ensure last content block doesn’t add extra spacing */
#section-id-69c0cc14-9d26-4337-84ac-5db133176728 .sppb-addon-content :last-child {
  margin-bottom: 0;
}

/* Mobile only: add a 15px gap under the section */
@media (max-width: 991.98px) {
  #section-id-69c0cc14-9d26-4337-84ac-5db133176728 {
    padding-bottom: 15px !important;  /* restore a small gap for mobile */
  }
}
/* END Eliminate excesive white space under content of homepage, but allow for mobile */


/* - Styling on  page "Coaching" - */
/* ================= Start styling div enclosure for special events =================== */
.specialevent {
	border:3px solid #ED1515;
	border-radius:10px;
	background-color:#F8FEB9;
	padding:10px;
	max-width:90%;
	margin:auto;
}

.specialevent_retraite {
	border:3px solid #ED1515;
	border-radius:10px;
	background-image:url('https://www.expressief.com/images/expressief/website_images/background_image_keetje21-3.png');
 /* background-color:#F8FEB9;*/
    background-color:#FFFFFF;
    min-height:400px;
	background-repeat:no-repeat;
	/*background-attachment:fixed;*/
	background-position:right;
    background-size:cover;
	padding:10px;
	max-width:90%;
	margin:auto;
}
/* ================= End styling div enclosure for special events =================== */



/* - Styling on  page "Ontmoeten" - */

/* styling photo Gallery 3x2 for section veilig vergaderen */
/* 3×2 gallery of 305×229 images (Veilig vergaderen), evenly spaced, flush left/right */
#exp_pages_container .img-grid-3x2 {
  /* tweakable settings */
  --img-w: 298px;
  --img-h: 224px;
  --gap: 5px;          /* equal horizontal & vertical spacing */
  --bw: 0px;            /* border width */
  --cell-w: calc(var(--img-w) + 2 * var(--bw));

  display: grid;
  grid-template-columns: repeat(3, var(--cell-w));  /* 3 wide on desktop */
  gap: var(--gap);                                   /* equal spacing both ways */

  /* make the grid edges flush with the container */
  width: calc(3 * var(--cell-w) + 2 * var(--gap));
  max-width: 100%;                                   /* never exceed page width */
  margin: 0 auto;                                    /* center if container is wider */
  box-sizing: border-box;
}

#exp_pages_container .img-grid-3x2 img {
  display: block;
  width: var(--img-w);           /* real image size */
  height: var(--img-h);
  border: var(--bw) solid #B9C0C6;
  box-sizing: content-box;       /* border sits outside the 305×229 */
}

/* Prevent overflow on narrower screens: gracefully drop to 2 columns, then 1 */
@media (max-width: 1000px) {
  #exp_pages_container .img-grid-3x2 {
    grid-template-columns: repeat(2, var(--cell-w));
    width: calc(2 * var(--cell-w) + var(--gap));
  }
}
@media (max-width: 680px) {
  #exp_pages_container .img-grid-3x2 {
    grid-template-columns: var(--cell-w);
    width: var(--cell-w);
  }
}







/* TEST SECTION=============== */