/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

.no-scroll {
  overflow: hidden;
}

#sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 100%;
  padding: 20px;
  background: transparent;
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 999;
}

/* when scrolled */
#sticky-header.scrolled {
  background: white;
}

/* when hidden */
#sticky-header.hidden {
  transform: translateY(-100%);
}

.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 9998;
}

.offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
}

.offcanvas {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  /* Default width for mobile/tablet */
  height: 100%;
  background: #f6cff4;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  z-index: 9999;
  overflow-y: auto;
}

/* Desktop only */
@media (min-width: 1024px) {
  .offcanvas {
    max-width: 50vw;
  }
}

.offcanvas.open {
  right: 0;
}

.offcanvas-content {
  padding: 64px 32px 32px 32px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.offcanvas-title {
  min-height: 72px;
}

.tab-buttons {
  display: inline-flex;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50px;
  padding: 4px;
  margin-bottom: 32px;
  min-width: 100%;
}

/* Apply only on desktop (1024px and above) */
@media (min-width: 1024px) {
  .tab-buttons {
    min-width: 75%;
  }
}

.tab-btn {
  flex: 1;
  padding: 10px 24px;
  border: none;
  background: transparent;
  color: #000;
  font-size: var(--wp--preset--font-size--medium) !important;
  cursor: pointer;
  border-radius: 50px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.tab-btn.active {
  background: black;
  color: #fff;
}

.forminator-label {
  font-weight: normal !important;
  font-size: var(--wp--preset--font-size--small) !important;
  margin-bottom: 4px !important;
}

.forminator-input {
  border-radius: 25px !important;
}

.forminator-row {
  margin-bottom: 20px !important;
}

.forminator-button {
  background-color: black;
  border-radius: 25px !important;
  color: white !important;
  box-shadow: none !important;
  font-size: var(--wp--preset--font-size--small) !important;
  padding: 10px 24px !important;
}

.forminator-button-upload {
  border: 1px solid black !important;
  color: black !important;
  background-color: transparent !important;
}

.forminator-module-edit-link {
  display: none !important;
}

.forminator-button-submit {
  margin-top: 1rem !important;
  width: 100% !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  padding: 10px 24px !important;
}

.forminator-ui#forminator-module-718.forminator-design--default
  .forminator-radio
  .forminator-radio-bullet:before {
  background-color: #5b19f9 !important;
}

a.wp-block-navigation-item__content {
  display: inline-block;
  text-decoration: none !important;
  padding-bottom: 2px;
  background-image: linear-gradient(#000 0 0);
  background-position: 0 100%;
  /*OR bottom left*/
  background-size: 0% 1px;
  background-repeat: no-repeat;
  transition: background-size 0.3s, background-position 0s 0.3s;
  /*change after the size immediately*/
}

a.wp-block-navigation-item__content:hover {
  background-position: 100% 100%;
  /*OR bottom right*/
  background-size: 100% 1px;
}

.forminator-custom-form-381 label {
  display: none !important;
}

#hero-homepage {
  min-height: 100vh !important;
}

.hero-banner-container {
  position: relative;
  min-height: 400px;
  /* Set a fixed minimum height */
}

.hero-banner-container .tab-buttons {
  position: absolute;
  /* Fix the buttons in place */
  top: 0;
  left: 0;
  z-index: 10;
}

.hero-banner-container .tab-content {
  margin-top: 80px;
  /* Push content below the fixed buttons */
  /* Adjust 80px based on your button height + desired spacing */
}

/* Alternative approach - if you don't want absolute positioning */
.hero-banner-container-alt {
  min-height: 400px;
  /* Fixed container height */
}

.hero-banner-container-alt .tab-content {
  min-height: 320px;
  /* Fixed content height (container - buttons - spacing) */
}

footer {
  margin-block-start: 0 !important;
}

main {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .is-sticky {
    position: sticky;
    top: 2rem;
    /* adjust spacing */
    align-self: flex-start;
  }
}

.card-item {
  position: sticky;
  top: 2rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea {
  font-size: var(--wp--preset--font-size--medium) !important;
  border-radius: 25px !important;
  /* adjust as you like */
  padding: 10px 24px;
  border: 1px solid #ccc;
  /* optional */
}

input[type="submit"],
button[type="submit"] {
  flex: 1;
  padding: 10px 24px;
  border: none;
  background: black;
  color: #fff;
  font-size: var(--wp--preset--font-size--medium) !important;
  cursor: pointer;
  border-radius: 50px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.search-form {
  margin-top: 2rem !important;
}

body:not(.home) main {
  min-height: 100vh;
}

.upload {
  font-size: var(--wp--preset--font-size--small) !important;
}

.openOffCanvasBtn {
  text-decoration: underline;
}

.job_listings .location,
.job_listings .date {
  font-size: var(--wp--preset--font-size--small) !important;
  color: black !important;
}

.rss_link {
  display: none !important;
}

.job_filters {
  border-radius: 25px;
  margin-bottom: 2rem;
}

.job-listing-meta.meta {
  font-size: var(--wp--preset--font-size--small) !important;
}

.showing_jobs {
  font-size: var(--wp--preset--font-size--small) !important;
  border-radius: 25px;
  background-color: transparent !important;
  border: 0 !important;
  padding: 1em 2em !important;
}

ul.job_listings li.job_listing {
  border: 0;
  border: 1px solid black;
  border-radius: 25px;
  margin-bottom: 1rem;
  width: 100%;
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  ul.job_listings li.job_listing a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 8px;
  }
}

/* Desktop (1024px and above) */
@media (min-width: 1024px) {
  ul.job_listings li.job_listing a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    gap: 8px;
  }
}

/* Tablet and above: row layout */
@media (min-width: 768px) {
  ul.job_listings li.job_listing a {
    flex-direction: row;
    align-items: center;
    /* optional, can adjust */
  }
}

ul.job_listings li.job_listing {
  transition: background-color 0.3s ease-in-out;
  /* Add this */
}

ul.job_listings li.job_listing:hover {
  background-color: var(--wp--preset--color--accent-2);
}

ul.job_listings li.job_listing a {
  transition: background-color 0.3s ease-in-out;
  /* Add this if needed */
}

ul.job_listings li.job_listing a:hover {
  background-color: transparent !important;
}

.company-logo {
  width: 46px !important;
}

/* Maak de afbeelding een achtergrond van een div */
ul.job_listings li.job_listing a .company-logo {
  width: 100px;
  /* pas aan naar gewenste grootte */
  height: 100px;
  display: block;
  background-image: url("/wp-content/themes/boulo/img/BOULO_MASCOTTE_NORMAL.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Op hover wisselen naar _wink */
ul.job_listings li.job_listing a:hover .company-logo {
  background-image: url("/wp-content/themes/boulo/img/BOULO_MASCOTTE_WINK.png");
}

/* Optioneel: img zelf verbergen */
ul.job_listings li.job_listing a .company-logo img {
  display: none;
}

.application_button_custom.button {
  background-color: black;
  border-radius: 25px !important;
  color: white !important;
  box-shadow: none !important;
  font-size: var(--wp--preset--font-size--medium) !important;
  padding: 10px 24px !important;
  text-decoration: none !important;
}

#eyesSvg {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(-10px);
  }

  50% {
    transform: translateY(0);
  }

  75% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

.eyes-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ground-shadow {
  width: 320px;
  height: 40px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
  border-radius: 50%;
  position: absolute;
  bottom: -60px;
  animation: shadowFloat 6s ease-in-out infinite;
}

@keyframes shadowFloat {
  0% {
    transform: scaleX(1) scaleY(1);
    opacity: 0.3;
  }

  25% {
    transform: scaleX(0.9) scaleY(0.8);
    opacity: 0.4;
  }

  50% {
    transform: scaleX(1) scaleY(1);
    opacity: 0.3;
  }

  75% {
    transform: scaleX(1.1) scaleY(1.2);
    opacity: 0.2;
  }

  100% {
    transform: scaleX(1) scaleY(1);
    opacity: 0.3;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.cls-11 {
  transform-origin: center;
  animation: spin 10s linear infinite;
}

.cls-11 {
  transition: fill 0.3s ease; /* Smooth color transition */
}

svg:hover .cls-11 {
  fill: #503aa8; /* Change to pink on hover */
    animation: spin 5s linear infinite;

}

.tab-content h2 {
  font-size: var(--wp--preset--font-size--x-large);
}

.accordion {
  max-width: 800px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.accordion-item {
  border-bottom: 1px solid black;
}

.accordion-header {
  font-family: var(--wp--preset--font-family--neue-plak) !important;
  font-size: var(--wp--preset--font-size--x-large) !important;
  width: 100%;
  text-align: left;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: transparent;
}

.accordion-content p,
.accordion-content ul {
  margin: 8px 0;
}

.accordion-item.active .accordion-content {
  max-height: 1000px;
  /* groot genoeg voor inhoud */
  padding-bottom: 8px;
}

/* Add + symbol by default */
.accordion-header::after {
  content: "+";
  position: absolute;
  right: 0;
  font-size: var(--wp--preset--font-size--x-large) !important;
  transition: transform 0.3s ease;
}

/* Change to – when active */
.accordion-item.active .accordion-header::after {
  content: "–";
}

.over-ons {
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.questions {
  margin-top: 2rem;
}

/* Hide #eyes-right on devices smaller than 1024px (mobile + tablet) */
@media (max-width: 1023px) {
  #eyes-right {
    display: none;
  }
}

.openOffCanvasEmployee {
  cursor: pointer;
}

/* Reduce group padding on mobile */
@media (max-width: 768px) {
  .wp-block-group.is-style-default {
    padding-left: var(--wp--preset--spacing--20) !important;
    padding-right: var(--wp--preset--spacing--20) !important;
  }
}

@media (max-width: 768px) {
  .search-form button {
    margin-top: 0.5rem;
  }
}

.custom-button {
  pointer-events: auto;
  cursor: pointer;
  background: black;
  border: none;
  padding: 0.75rem 1.5rem;
  margin: 0;
  font-family: inherit;
  position: relative;
  display: inline-block;
}

.custom-button::before,
.custom-button::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button--calypso {
  overflow: hidden;
  border-radius: 50px;
  color: #fff;
}

.button--calypso span {
  display: block;
  position: relative;
  z-index: 10;
}

.button--calypso:hover span {
  animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
}

@keyframes MoveScaleUpInitial {
  to {
    transform: translate3d(0, -105%, 0) scale3d(1, 2, 2);
    opacity: 0;
  }
}

@keyframes MoveScaleUpEnd {
  from {
    transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.button--calypso::before {
  content: "";
  background: #503aa8;
  width: 120%;
  height: 0;
  padding-bottom: 120%;
  top: -110%;
  left: -10%;
  border-radius: 50%;
  transform: translate3d(0, 68%, 0) scale3d(0, 0, 0);
}

.button--calypso:hover::before {
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--calypso::after {
  content: "";
  background: #503aa8;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--calypso:hover::after {
  transform: translate3d(0, 0, 0);
  transition-duration: 0.05s;
  transition-delay: 0.4s;
  transition-timing-function: linear;
}

/* only the 4th item */
#tab-service1 .accordion .accordion-item:nth-of-type(4) {
  margin-top: 4rem;
}