/*
Theme Name: Hopmans Theme
Theme URI: https://hopmansgroep.nl
Description: Thema hopmansgroep.nl met BOG shortcodes voor Realworks plugin
Author: Studio Code Rood
Author URI: https://studiocoderood.nl
Template: hello-elementor
Version: 1.3.0
*/

/*------------------------
# General Styles
-------------------------*/
body {
  margin: 0;
  overflow-x: hidden; /* Voorkomt horizontale scrolling */
}

/* Typography */
strong, b {
  font-weight: 700 !important;
}

ul, ol li {
  margin-bottom: 20px;
} 

p {
  margin-block-start: 0;
  margin-block-end: .9rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-block-start: .5rem;
  margin-block-end: 1rem;
  line-height: 1.2;
}

/* Accessibility */
body a:focus, 
input[type=text]:focus, 
[type=button]:focus, 
[type=submit]:focus, 
input[type=email]:focus, 
textarea:focus {
  outline-style: dotted !important;
  outline-width: 3px !important;
  outline-color: var(--e-global-color-primary) !important;
}

footer a:focus {
/*    outline-color: black !important;*/
}

.scr-icon .elementor-icon svg {
  width: auto !important;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #333;
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

header .site-logo img {
  max-height: 50px;
  max-width: 180px
  width: auto;
  height: auto;
}

/* Footer Links */
footer a {
  color: white !important;
  text-decoration: none !important;
}

footer a:hover {
  color: white !important;
  text-decoration: underline !important;
}

/*------------------------
# Navigation
-------------------------*/
/* Main Menu Structure */
.hopmans-menu nav ul {
  padding: 0 0 20px 0;
}

/* Head Menu Components */
.head-menu .elementor-cta--skin-classic .elementor-cta__content {
  background-color: transparent;
}

.head-menu .elementor-cta__icon-wrapper {
  display: flex;
  align-items: center;
  width: auto;
}

.head-menu a.elementor-cta {
  text-decoration: none;
  transition: .1s;
}

.head-menu .elementor-cta__icon {
  margin-right: 10px !important;
}

.head-menu .elementor-cta__title {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap; 
}

.head-menu .elementor-cta__content-item {
  width: auto !important; 
  transition: .1s;
}

.head-menu .elementor-cta__title::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 10px;
}

.head-menu .elementor-cta__description {
  margin-top: 5px !important;
  width: 100% !important;
}

.head-menu .green .elementor-cta__title::after, .head-menu .green .elementor-cta__icon svg {
  filter: invert(100%); /* Maak de pijl wit */
}
.head-menu .elementor-cta__title::after, .head-menu .elementor-cta__icon svg {
  filter: invert(39%) sepia(79%) saturate(2547%) hue-rotate(150deg) brightness(105%) contrast(87%);
}

.head-menu .green a.elementor-cta:hover .elementor-cta__title::after, .head-menu .green a.elementor-cta:hover .elementor-cta__icon svg,
.head-menu a.elementor-cta:hover .elementor-cta__title::after, .head-menu a.elementor-cta:hover .elementor-cta__icon svg  {
  filter: invert(0%); 
}

/* Vacature Count Badge */
.head-menu .vac-count {
  display: inline-block;
  background-color: var(--e-global-color-primary);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  font-weight: 600;
  font-size: 11px;
  position: relative;
  top: -15px;
  left: -5px;
  margin-right: -10px;
}


/* Button Style Menu Item */
.hopmans-menu .btn.menu-item > a {
  background-color: var(--e-global-color-secondary) !important;
  color: white !important;
  padding: 8px 15px !important;
  border-radius: 5px !important;
  display: inline-block !important;
  width: auto !important;
  text-align: center !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  margin-left: 20px;
}

.hopmans-menu .btn.menu-item > a:hover {
  background-color: var(--e-global-color-primary) !important;
  text-decoration: none !important;
}

/*------------------------
# Container shapes
-------------------------*/
.intro-head {
  position: relative !important; /* Establish stacking context */
  background: linear-gradient(
    to right, 
    white calc((100% - 1440px) / 2), 
    var(--e-global-color-primary) calc((100% - 1440px) / 2),
    var(--e-global-color-primary) calc((100% - 1440px) / 2 + 1440px * 0.63),
    white calc((100% - 1440px) / 2 + 1440px * 0.63)
  );
  background-color: white; /* Fallback */
  z-index: 1 !important;
	min-height: 550px !important;
	padding-top: 20px;
}

.intro-head img {
  mix-blend-mode: multiply; /* Blend effect */
  display: block;
  width: 100%;
  height: auto;
}

.multi-img img {
  position: relative;
  mix-blend-mode: multiply; /* Blend effect */
  z-index: 3;
}

.intro-head::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 150px !important;
    height: 80px !important;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 2;
    pointer-events: none;
}

@media (min-width: 1025px) {
    .intro-head::before {
        left: calc((100% - 1446px) / 2) !important;
        width: 165px !important;
        height: 100px !important;
    }
}

.corner-right-large::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 160px !important;
    height: 95px !important;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .corner-right-large::after {
        width: 120px !important;
        height: 75px !important;
    }
}

@media (max-width: 767px) {
    .corner-right-large::after {
        width: 80px !important;
        height: 50px !important;
    }
}

.corner-right-small::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 70px !important;
    height: 70px !important;
    background-color: white;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    z-index: 2;
    pointer-events: none;
}
.cornershape-right-small {
  clip-path: polygon(0 0, 90% 0, 100% 20%, 100% 100%, 0 100%)
}

@media (max-width: 767px) {
  .intro-head {
    background: var(--e-global-color-primary);
  }
}


/* Add numbering to the accordion titles */
.acc-nr .e-n-accordion {
    counter-reset: accordion-counter; /* Initialize the counter */
}

.acc-nr .e-n-accordion-item {
    counter-increment: accordion-counter; /* Increment the counter */
}

.acc-nr .e-n-accordion-item-title {
    display: flex; /* Ensures proper alignment */
    justify-content: space-between; /* Title and number on left, icon on right */
    align-items: center;
}

.acc-nr .e-n-accordion-item-title::before {
    content: counter(accordion-counter); /* Add the number before the title */
    background-color: var(--e-global-color-primary); /* Background color for the circle */
    color: white; /* Text color for the number */
    font-weight: 600; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px; /* Circle size */
    height: 35px;
    border-radius: 50%; /* Makes it a perfect circle */
    margin-right: 10px; /* Space between number and title */
    font-size: 1.3em;
}


.acc-nr .e-n-accordion-item-title-header {
    display: flex; /* Align the number and title together */
    align-items: center;
    flex: 1; /* Takes up all available space */
}

.acc-nr .e-n-accordion-item-title-icon {
    margin-left: 10px; /* Ensure some space between title and icon */
}

/*------------------------
# Numbered Headings
-------------------------*/
.numbered-headings {
    counter-reset: heading-counter;
}

.numbered-heading {
    display: flex;
    align-items: center;
    gap: 10px;
}

.numbered-heading::before {
    counter-increment: heading-counter;
    content: counter(heading-counter);
    background-color: var(--e-global-color-primary);
    color: white;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.3em;
    flex-shrink: 0;
}