/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

:root {
  --cg-color-left:   #fde68a;  /* amber-yellow, left  */
  --cg-color-mid:    #faf5ff;  /* cream base          */
  --cg-color-right:  #e9d5ff;  /* lavender, right     */
  --cg-color-corner: #dbb6fd;  /* richer purple accent */
  --cg-radius: 1.25rem;
	--cg-duration:     12s;
}

.bg-gradient-default + .fusion-column-wrapper, .bg-gradient-default-aside {
  background:
    radial-gradient(ellipse 80% 120% at 0% 60%,
      var(--cg-color-left) 0%, transparent 70%),
    radial-gradient(ellipse 80% 120% at 100% 40%,
      var(--cg-color-corner) 0%, var(--cg-color-right) 35%, transparent 70%),
    var(--cg-color-mid) !important;
	border-radius: var(--cg-radius);
	background-size:contain;
}

.bg-gradient-default-aside {
	border-top-left-radius: 0  !important;
	border-top-right-radius: 0  !important;
}

.bg-gradient-animated {
  position: relative !important;
  overflow: hidden !important;
  background: var(--cg-color-mid);
}

.bg-gradient-animated::before {
  content: "";
  position: absolute;
  width: 200vmax;
  height: 200vmax;
  left: 50%;
  translate: -50% -50%;
  background:
    radial-gradient(ellipse 80% 120% at 20% 60%,
      var(--cg-color-left) 0%, transparent 50%),
    radial-gradient(ellipse 80% 120% at 80% 40%,
      var(--cg-color-corner) 0%, var(--cg-color-right) 35%, transparent 50%),
    var(--cg-color-mid);
  animation: cgRotate var(--cg-duration) linear infinite;
  pointer-events: none;
  z-index: 0;
	filter:blur(60px);
}


.label-it-risk-assurance .bg-gradient-animated::before  {
	 background:
		radial-gradient(ellipse 80% 120% at 20% 60%,
		  var(--awb-custom_color_4) 0%, transparent 50%),
		radial-gradient(ellipse 80% 120% at 80% 40%,
		  var(--cg-color-corner) 0%, var(--cg-color-right) 35%, transparent 50%),
		var(--cg-color-mid);
}

.label-corporate-finance .bg-gradient-animated::before  {
	 background:
		radial-gradient(ellipse 80% 120% at 20% 60%,
		  var(--awb-color7) 0%, transparent 50%),
		radial-gradient(ellipse 80% 120% at 80% 40%,
		  var(--cg-color-corner) 0%, var(--cg-color-right) 35%, transparent 50%),
		var(--cg-color-mid);
}


.label-advies-accountancy .bg-gradient-animated::before  {
	 background:
		radial-gradient(ellipse 80% 120% at 20% 60%,
		  var(--awb-color6) 0%, transparent 50%),
		radial-gradient(ellipse 80% 120% at 80% 40%,
		  var(--cg-color-corner) 0%, var(--cg-color-right) 35%, transparent 50%),
		var(--cg-color-mid);
}


.label-audit-assurance .bg-gradient-animated::before  {
	 background:
		radial-gradient(ellipse 80% 120% at 20% 60%,
		  var(--awb-color8) 0%, transparent 50%),
		radial-gradient(ellipse 80% 120% at 80% 40%,
		  var(--cg-color-corner) 0%, var(--cg-color-right) 35%, transparent 50%),
		var(--cg-color-mid);
}


.bg-gradient-animated::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    #ffffff 100%
  );
  pointer-events: none;
  z-index: 1;
}


@keyframes cgRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-gradient-animated::before {
    animation: none;
  }
}


#menu-project-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 2px;
	margin-top: -10px;
    border-radius: 999px;
    background: #ffaf00;
    color: #480073;
    font-size: 12px;
    line-height: 1;
}

.menu-item .fusion-button {
	border-radius:50px;
}


/* ============================================================
   Post Card — per-label hover gradients
   Uses ::after pseudo-element fade for smooth transition.
   The gradient is always present but opacity: 0 by default,
   transitioning to opacity: 1 on hover.
============================================================ */
/* 
/* Position context for the pseudo-element */
.fusion-layout-column[class*="label-"] .fusion-column-inner-bg-image {
    position: relative;
    overflow: hidden;
}

/* Gradient layer — hidden by default */
.fusion-layout-column[class*="label-"] .fusion-column-inner-bg-image::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}

/* Fade in on hover */
.fusion-layout-column[class*="label-"]:hover .fusion-column-inner-bg-image::after {
    opacity: 1;
}
 */
/* ----------------------------------------------------------
   One block per label term slug
   Pattern: label colour → white
---------------------------------------------------------- */


.vacancy-tag {
	border-radius: 50px;
	border: 1px solid;
	padding: 6px 12px;
	color: var(--awb-color3);
	font-weight: 700;
}

.vacancy-tag *{
	margin: 0 !important;
	padding: 0 !important;
	color: var(--awb-color3);
	font-weight: 700;
}

.event-tag {
	border-radius: 50px;
	border: 1px solid;
	padding: 6px 12px;
	color: var(--awb-color1);
	font-weight: 700;
	
}

.event-tag *{
	margin: 0 !important;
	padding: 0 !important;
	color: var(--awb-color1);
	font-weight: 700;
}

.event-tag-passed {
	border-radius: 50px;
	padding: 6px 12px;
	background-color: var(--awb-color3);
	font-weight: 700;
}

.event-tag *{
	margin: 0 !important;
	padding: 0 !important;
	color: var(--awb-color1) !important;
	font-weight: 700;
}

/**
 * Square images for the vacancy carousel.
 *
 * Accessibility / EAA & WCAG 2.2 notes:
 * - object-fit: cover keeps images undistorted (no squashing of faces/text),
 *   which protects the meaning conveyed by imagery (WCAG 1.1.1 – images must
 *   still be recognisable when alt text is absent or decorative).
 * - aspect-ratio is honoured by all current browsers; the fixed height fallback
 *   below covers older engines so no user gets a broken layout.
 * - No content is hidden purely by colour or motion, so 1.4.x criteria are
 *   unaffected by this change.
 */

/* Make each image a 1:1 box and crop overflow rather than stretch. */
.vacancy-slider .fusion-image-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;   /* enforces the square */
    object-fit: cover;     /* crop, don't distort */
    object-position: center;
    display: block;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
    .vacancy-slider .fusion-image-wrapper {
        position: relative;
        padding-top: 100%; /* 1:1 ratio */
    }
    .vacancy-slider .fusion-image-wrapper img {
        position: absolute;
        inset: 0;
        height: 100%;
    }
}


/**
 * Vacancy carousel styling: rounded image corners + top-right navigation arrows.
 *
 * Accessibility / EAA & WCAG 2.2 notes:
 * - Arrows are positioned visually but remain in DOM order, so keyboard focus
 *   order is unaffected (WCAG 2.4.3 Focus Order).
 * - A visible :focus-visible outline is kept so keyboard users can see the
 *   arrows when tabbing (WCAG 2.4.7 Focus Visible, 2.4.11 Focus Not Obscured).
 * - Arrow hit area is kept at least 24×24px (WCAG 2.5.8 Target Size, new in 2.2).
 * - border-radius is decorative only and conveys no information, so 1.1.1/1.4.x
 *   are unaffected.
 */

/* Rounded corners on each carousel image. */
.vacancy-slider .fusion-image-wrapper img {
    border-radius: 16px;
    display: block;
}

/* The carousel needs to be a positioning context for the absolute arrows,
   and needs top padding so the arrows don't overlap the first row of images. */
.vacancy-slider .awb-swiper-carousel {
    position: relative;
    padding-top: 48px; /* room for the arrow row */
}

/* Pin the navigation arrow group to the top-right corner. */
.vacancy-slider .awb-swiper-button-wrapper,   /* Avada's arrow container */
.vacancy-slider .fusion-carousel-nav,
.employee-slider .awb-swiper-button-wrapper,   /* Avada's arrow container */
.employee-slider .fusion-carousel-nav {
    position: absolute;
    top: 10px;
    right: 0;
    left: auto;
    display: flex;
    gap: 12px;
    z-index: 20;
}

/* Ensure each arrow meets the 24×24px minimum target size (WCAG 2.5.8). */
/* Ensure each arrow meets the 24×24px minimum target size (WCAG 2.5.8). */
.vacancy-slider .awb-swiper-button,
.vacancy-slider .fusion-nav-prev,
.vacancy-slider .fusion-nav-next {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 0;
    left:  auto;
	z-index:30;
}
.employee-slider .awb-swiper-button,
.employee-slider .fusion-nav-prev,
.employee-slider .fusion-nav-next {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    right: 0;
    left:  auto;
	z-index:30;
}

.vacancy-slider .awb-swiper-button-prev,
.employee-slider .awb-swiper-button-prev{
	right: 30px !important;
}

/* Visible focus indicator for keyboard users (WCAG 2.4.7). */
.vacancy-slider .awb-swiper-button:focus-visible,
.vacancy-slider .fusion-nav-prev:focus-visible,
.vacancy-slider .fusion-nav-next:focus-visible,
.employee-slider .awb-swiper-button:focus-visible,
.employee-slider .fusion-nav-prev:focus-visible,
.employee-slider .fusion-nav-next:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}


.vacancy-slider .awb-swiper,
.awb-swiper.employee-slider {
	overflow:visible;
}
.employee-slider .employee-slider-item {
	position:relative;
}


.employee-slider .employee-slider-item .person {
	position:absolute;
	right:20px;
	bottom:-40px;
}

.employee-stories .employee-slider-item .person {
	position:absolute;
	right:40px;
	bottom:0px;
}

 

/* Boost specificity to override Avada's .fusion-modal .modal-header */
.fusion-modal.apply-modal .modal-header {
    background: linear-gradient(135deg, #480073 0%, #6a00a8 100%);
    border-bottom: none;
    padding: 22px 32px;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 76px;
    z-index: 1;
}

.fusion-modal.apply-modal .modal-header::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffaf00, #ffd060);
}

.fusion-modal.apply-modal .modal-header .modal-title,
.fusion-modal.apply-modal .modal-header #modal-heading-1 {
    color: #ffffff;
    font-family: Manrope, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin: 0;
    line-height: 1.3;
}

.fusion-modal.apply-modal .modal-header .close {
    color: #ffffff;
    opacity: 0.9;
    font-size: 22px;
    font-weight: 400;
    text-shadow: none;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.18);
    transition: background-color 0.2s, opacity 0.2s;
    line-height: 1;
    padding: 0;
    margin: 0;
    float: none;
}

.modal-backdrop.in {
    background-color: #480073;
    opacity: 0.7;
}

.fusion-modal.apply-modal .modal-dialog {
    border-radius: 20px;
    overflow: visible;
    box-shadow: rgba(72, 0, 115, 0.4) 0px 25px 70px;
    margin: 40px auto;
}

.fusion-modal.apply-modal .modal-content {
    border-radius: 20px;
    overflow: hidden;
}

.fusion-modal.apply-modal .modal-body {
    background: #ffffff;
}

.fusion-modal.apply-modal .modal-body iframe {
    display: block;
    border: none;
    background: #fff;
    margin-top: -76px;
	height:1200px;
    width: 100%;
    min-height: 600px;
}

/* Mobile: compact modal with minimal margins */
@media (max-width: 767px) {
    .fusion-modal.apply-modal .modal-dialog {
        margin: 10px auto;
        border-radius: 14px;
    }

    .fusion-modal.apply-modal .modal-content {
        border-radius: 14px;
    }

    .fusion-modal.apply-modal .modal-body iframe {
        min-height: 500px;
    }
}

.vacancy-overview-tag {
	padding: 0 12px;
	width: fit-content;
	border-left: 1px solid var(--awb-color3);
}

.form-layout .fusion-column-wrapper, .widget_custom_html .mpForm .mpFormTable{
    background-color: var(--awb-color3) !important;
    padding: 32px !important;
    border-radius: 10px !important;
    color: white !important
}
.widget_custom_html .mpForm .mpFormTable{
    padding:15px !important;
}
.form-layout h1, .form-layout h2, .form-layout h3, .form-layout h4, .form-layout h5 {
    color:white !important;
}


.form-layout ul, .form-layout-green ul,  .widget_custom_html .mpForm .mpFormTable ul {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.form-layout ul li, .form-layout-green ul li,  .widget_custom_html .mpForm .mpFormTable ul li{
    margin: 0 !important;
    padding: 0 !important;
}

.form-layout.shadow, .form-layout-green.shadow{
    box-shadow: 0 3px 6px rgb(0 0 0 / 0.2);
}

.form-layout .error, .form-layout-green .error,  .widget_custom_html .mpForm .mpFormTable .error{
    color: #873535 !important;
}

.form-layout .mpQuestionTable, .form-layout-green .mpQuestionTable,  .widget_custom_html .mpForm .mpFormTable .mpQuestionTable{
    margin-bottom:10px !important;
}

.form-layout h1, .form-layout h2, .form-layout h3, .form-layout h4, .form-layout h5,
.widget_custom_html .mpForm .mpFormTable h1, .widget_custom_html .mpForm .mpFormTable h2, .widget_custom_html .mpForm .mpFormTable h3, .widget_custom_html .mpForm .mpFormTable h4, .widget_custom_html .mpForm .mpFormTable h5 {
    color:white !important;
}

.form-layout input[type='text'],
.form-layout input[type='tel'],
.form-layout textarea,
.form-layout select,
.widget_custom_html .mpForm .mpFormTable input[type='text'],
.widget_custom_html .mpForm .mpFormTable input[type='tel'],
.widget_custom_html .mpForm .mpFormTable textarea,
.widget_custom_html .mpForm .mpFormTable select,
.form-layout-green input[type='text'],
.form-layout-green input[type='tel'],
.form-layout-green textarea,
.form-layout-green select{
    width:100% !important;
    border-radius: 10px !important;
    background-color: white !important;
    padding:10px 15px !important;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1) !important;
    margin-bottom: 0 !important;
}

.form-layout a, .widget_custom_html .mpForm .mpFormTable a{
    color: white !important;
    text-decoration: underline !important;
}


.form-layout a:hover, .widget_custom_html .mpForm .mpFormTable a:hover{
    color: #F1F1F1 !important;
    text-decoration: none !important;
}

.form-layout-green{
    background-color: #f2f5d2 !important;
    padding: 40px !important;
    border: 4px solid #BDCE03 !important;
    border-radius: 10px !important;
    color: #4E4E4E !important
}


.form-layout-green h1, .form-layout-green h2, .form-layout-green h3, .form-layout-green h4, .form-layout-green h5 {
    color:#BDCE03 !important;
}

.form-layout h1,
.form-layout h2,
.form-layout h3,
.form-layout h4,
.form-layout h5,
.form-layout-green h1,
.form-layout-green h2,
.form-layout-green h3,
.form-layout-green h4,
.form-layout-green h5 {
    text-transform:lowercase !important;
}

.form-layout h1:first-letter,
.form-layout h2:first-letter,
.form-layout h3:first-letter,
.form-layout h4:first-letter,
.form-layout h5:first-letter,
.form-layout-green h1:first-letter,
.form-layout-green h2:first-letter,
.form-layout-green h3:first-letter,
.form-layout-green h4:first-letter,
.form-layout-green h5:first-letter {
    text-transform:uppercase !important;

}

.form-layout input[type="submit"]{
    border-radius: 50px !important;
    background-color: var(--awb-color4) !important;
    color: var(--awb-color3) !important;
	padding:8px 18px;
	width:150px;
	border:none !important;
	box-shadow: none;
	cursor: pointer;
}

.form-layout input[type="submit"]:hover {
    background-color: var(--awb-color4) !important;
    color: var(--awb-color3) !important;

.form-layout-green input[type="submit"]{
    border-radius: 10px !important;
    background-color: #453587 !important;
    padding: 5px 10px;
    color: #FFF !important;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.1) !important;
}

.form-layout input[type=checkbox], 
.form-layout input[type=radio],
.form-layout-green input[type=checkbox], 
.form-layout-green input[type=radio]  {
    margin-right: 5px;
}