/* 
Theme Name: Selectum (Hello Elementor Child)
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Main SELECTUM colouring scheme */
:root {
    --selectum-color-red: #ba0c2f; /* Main brand red color */
    --selectum-color-pink: #ffe5e5; /* Pink color */
    --selectum-color-pink-light: #fff8f8; /* Light pink color */
    --selectum-color-grey: #676767;
    --selectum-color-black: #000;
    --selectum-color-black-hover: #8d8d8d;
    --selectum-color-white: #fff;
    --selectum-color-white-hover: #f4f4f4;
}

@media (min-width: 768px) {
    .hide-if-desktop {
        display: none !important;
    }
}


/* Fix offset for anchor linking */
/* Adjust this value to match the height of your sticky header */
.elementor-menu-anchor {
    scroll-margin-top: 100px;
}


/* Elementor doesn’t apply any margin or padding at the bottom of list items. */
.elementor-widget .elementor-widget-text-editor ul, .elementor-widget-theme-post-content ul {
    margin-block-end: revert;
}
.elementor-widget .elementor-widget-text-editor ol, .elementor-widget-theme-post-content ol {
    margin-block-end: revert;
}


.elementor-element.elementor-button-selectum-red .elementor-button {
    background-color: var( --selectum-color-red );
    border: 1px var( --selectum-color-red ) solid;
    color: var( --selectum-color-white );
    font-weight: bold;
}
.elementor-element.elementor-button-selectum-red:hover .elementor-button {
    background-color: #980d29;
    border: 1px #980d29 solid;
}


.elementor-element.elementor-button-selectum-white .elementor-button {
    background-color: var( --selectum-color-white );
    border: 1px var( --selectum-color-black ) solid;
    color: var( --selectum-color-black );
    font-weight: bold;
}
.elementor-element.elementor-button-selectum-white:hover .elementor-button {
    background-color: #ffe5e5;
    border: 1px var( --selectum-color-black ) solid;
}


.elementor-element.elementor-button-selectum-black .elementor-button {
    background-color: var( --selectum-color-black );
    border: 1px var( --selectum-color-black ) solid;
    color: var( --selectum-color-white );
    font-weight: bold;
}
.elementor-element.elementor-button-selectum-black:hover .elementor-button {
    background-color: #8d8d8d;
    border: 1px #8d8d8d solid;
}


.elementor-element.elementor-button-selectum-sectoritem .elementor-button {
    background-color: var( --selectum-color-white );
    /*border: 1px #8d8d8d solid;*/
    border: none;
    border-radius: 5px 5px 5px 5px;
    color: var( --selectum-color-black );
    font-weight: bold;
}
.elementor-element.elementor-button-selectum-sectoritem:hover .elementor-button {
    background-color: #f4f4f4;
}


/* Main menu dropdown arrow */
.elementor-element .elementor-nav-menu--main .elementor-item .sub-arrow {
    fill: var( --selectum-color-red );
}


/* Sector label slider at homepage */
/* Supports linear scrolling (non easing in/out) and gradient fading at both sides */
/* Credits: https://www.youtube.com/watch?v=FgFaLkHiUrw */
.sector-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px; /* Adjust the width of the fade effect */
    height: 100%;
    z-index: 2; /* Set a higher z-index to render on top of the content */
    background: linear-gradient(to left, rgba(255, 255, 255, 0), var( --selectum-color-pink-light )); /* Adjust the gradient direction */
}

.sector-slider::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px; /* Adjust the width of the fade effect */
    height: 100%;
    z-index: 1;
    background: linear-gradient(to right, rgba(255, 525, 255, 0), var( --selectum-color-pink-light )); /* Adjust the gradient */
}


.sector-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}


/* Hide every widget-heading whose span is empty in vacancy tiles */
.vacancy-tile .elementor-widget-heading:has(.elementor-heading-title:empty), .vacancy-tags .elementor-widget-heading:has(.elementor-heading-title:empty) {
    display: none;
}


/* Carerix application form styling */

#apply_form h3.cx_h3 {
    font-size: 16px;
    font-weight: 600;
    margin-top: 2em;
}

#apply_form input,
#apply_form select,
#apply_form textarea,
#subscribe_form input,
#subscribe_form select,
#subscribe_form textarea
{
    border: none;
    outline: none;
    padding: 10px 20px 10px 20px;
    margin: 0 0 10px 0;
    border-radius: 5px;
}

@media (max-width: 767px) {
    #apply_form input[type=file], #apply_form .cx2_personal-cv input[type=text] {
        width: 100%;
        padding: 0;
        background-color: initial;
    }
    #apply_form label.cx2_personal-cv {
        padding-left: 0;
    }
}
@media (min-width: 768px) {
    #apply_form input[type=file], #apply_form .cx2_personal-cv input[type=text] {
        width: 100%;
        border: 1px dotted var( --selectum-color-red );
    }
}

#apply_form .cx2_personal-cv {
    border: 2px dashed var( --selectum-color-red );
    border-radius: 5px;
    padding: 10px;
    margin: 0 0 10px 0;
    background: var( --selectum-color-white );
}
#apply_form .cx2_personal-cv * {
    border: initial;
}

#apply_form .cx2_personal-cv label, #apply_form .cx2_personal-cv span.cx2_personal-cv-info {
    display: block;
}

#apply_form div#agreement_container {
    margin-top: 1em;
    margin-bottom: 1em;
}

div#agreement_container a {
    text-decoration: underline;
    color: var( --selectum-color-black );
}
div#agreement_container a:hover {
    color: var( --selectum-color-black-hover );
}

/* Superceded by the my_elementor_apply_submit button */
#apply_form .cx2_applyform-apply {
    display: none;
}

/* CX vacancy bodytext */
div.cx2_introduction, div.cx2_organization, div.cx2_function, div.cx2_requirements, div.cx2_offer, div.cx2_information, div.cx2_application {
    margin-bottom: 3em;
}


/* --------------------------------------------------------------------------------- */
/* --------------------------------- CONTACTFORM 7 --------------------------------- */
/* --------------------------------------------------------------------------------- */

/*
    Two columns layout of ContactForm 7 fields based on its parent container min width
    https://wp-doin.com/contact-form-7-two-columns-layout-guide/
    https://css-tricks.com/css-container-queries/
*/
.wpcf7 {
    container-type: inline-size;
    container-name: contactform7-div;
}
@container contactform7-div (min-width: 500px) {
    .my-contact7-2columngrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .my-contact7-3columngrid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
    }
}

.wpcf7-select  {
    background-color: var(--selectum-color-white);
    border:none;
    border-radius: 5px; /* Rounded corners */
    /* Inner padding for better usability */
    /* border-right: 10px solid transparent; */
    color: #6d6d7e;


    appearance: none; /* Remove the default arrow */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */

    /* Add space for the dropdown arrow */
    padding: 10px 30px 10px 20px;

    /* Position it relative */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 25px;
}

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="date"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="tel"], .wpcf7 input[type="number"], .wpcf7 textarea, .wpcf7-file {
    background-color: var(--selectum-color-white);
    border:none;
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Inner padding for better usability */
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    width: 100%;
}

.wpcf7 textarea {
    height: 150px;
}



/* Responsive CSS for WPC Filter Dropdowns */
/* Mobile layout: keep dropdowns stacked vertically */
@media (max-width: 767px) {
    .wpc-filters-widget-wrapper {
        display: block;
    }

    .wpc-filters-section {
        width: 100%;
        margin-bottom: 15px;
    }

    .wpc-filters-section:last-child {
        margin-bottom: 0;
    }

    /* Ensure Select2 dropdowns are full width on mobile */
    .wpc-filters-section .select2-container {
        width: 100% !important;
    }
}

/* Tablet and desktop: make dropdowns display inline */
@media (min-width: 768px) {
    .wpc-filters-widget-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        justify-content: flex-start; /* Changed from stretch */
        align-items: start;
    }

    .wpc-filters-section {
        flex: 1;
        min-width: 200px;
        max-width: calc(33.333%);
    }

    /* Ensure Select2 dropdowns take full width of their container */
    .wpc-filters-section .select2-container {
        width: 100% !important;
    }

    /* Optional: Add some spacing between dropdowns */
    .wpc-filters-section:not(:last-child) {
        margin-right: 0;
    }
}

/* Additional improvements for better UX */
.wpc-filters-section {
    margin-left: 1em;
    margin-right: 1em;
}

.wpc-filters-section .select2-selection__arrow {
    right: 6px;
    width: 20px;
    top: 0 !important;
}

/* Ensure consistent spacing */
.wpc-filters-widget-wrapper {
    margin-bottom: 20px;
}