/* List adjustments, this is needed until Wordpress makes these editable with FSE */

.wp-block-post-content ul {
    padding-left: var(--wp--custom--list--padding-left);
    margin-bottom: var(--wp--custom--list--margin-bottom);
}

.wp-block-post-content ul li {
    margin-bottom: var(--wp--custom--list--margin-between);
}

/* Adjust padding for mobile, needed untill FSE introduces padding option for mobile on group block */

@media only screen and (max-width: 1200px) {

    .wp-site-blocks .wp-block-group,
    #editor .wp-block-group, #footer .wp-block-group {
        padding-top: var(--wp--custom--mobile-group--padding-top-bottom) ;
        padding-bottom: var(--wp--custom--mobile-group--padding-top-bottom) ;
        padding-left: var(--wp--custom--mobile-group--padding-left-right) ;
        padding-right: var(--wp--custom--mobile-group--padding-left-right) ;
    }

}

html { 
    scroll-behavior: smooth; 
    scroll-padding-top: 150px;
}

@media (max-width: 1100px) {
    html {
        scroll-padding-top: 100px;
    }
}

@media only screen and (max-width: 772px) {
    .person-holder img{
            width: 95px;
            height: auto;
            aspect-ratio: 1;
            border-radius: 50% !important;
            object-fit: cover;
            object-position: center;
    }
}

/* Header */
header {
    position: sticky;
    top: 0;
    z-index: 999;
    transition: none;
}

.has-modal-open header {
    position: static;
}

.header-arrow i,
.link-arrow i {
    font-size: 10px;
    margin-left: 5px;
}

header .custom-logo-link,
header .custom-logo-link .custom-logo img {
    width: 200px;
    height: auto;
}

.wp-block-site-logo {
    z-index: 9999999;
}

header .wp-block-navigation-item__label {
    font-weight: 500;
    transition: .2s linear;
}

@media (min-width: 772px) {
    header .wp-block-navigation-item__label:hover {
        opacity: .4;
    }
}

header .wp-block-navigation__container {
    gap: 32px;
}

@media (max-width: 772px) {
    header .wp-block-navigation__container:first-child {
        gap: 16px !important;
        padding-top: 50px !important;
    }

    header .custom-logo-link,
header .custom-logo-link .custom-logo img {
    width: 130px;
    height: auto;
}

}

.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
    z-index: 999;
}

header .is-style-fill .wp-block-navigation-item__label {
    background: var(--wp--custom--button-primary--background-color);
    border: var(--wp--custom--button-primary--border-width) solid var(--wp--custom--button-primary--border-color);
    color: var(--wp--custom--button-primary--color) !important;
    opacity: var(--wp--custom--button-primary--opacity);
    border-radius: var(--wp--custom--button-primary--border-radius);
    padding: var(--wp--custom--button-primary--padding);
    font-weight: var(--wp--custom--button-primary--font-weight);
    transition: opacity all 600ms;
}

header .is-style-fill .wp-block-navigation-item__label:hover {
    opacity: 0.4;
}

header .header-shadow {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 6px 4px -6px;
}

/* Mobile menu styling */
.wp-block-navigation__responsive-container.is-menu-open {
    animation: fadeIn .1s ease-out !important;
    animation-fill-mode:forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 772px) {
    /* .wp-block-navigation__responsive-dialog {
        margin-top: 46px;
    } */
}

.justify-content-center {
    justify-content: center;
}

.has-modal-open .wp-block-navigation__responsive-container-content,
.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    align-items: flex-start !important;
}

.has-modal-open .wp-block-navigation__responsive-container-content {
    padding: 30px !important;
}

.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-item span {
    color: #170d69;
    font-size: 22px;
    font-weight: 500;
}

.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation-item.small-font span {
    font-size: 16px;
}

.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container:first-child {
    gap: 20px;
    width: 100%;
    border-top: 4px solid #170D69;
    padding-top: 20px;
    margin-top: 60px;
    position: relative;
}

.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container:last-child {
  padding-top: 0 !important;
}

.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container:first-child:before {
    content: '';
    position: absolute;
    left: 0;
    top: -4px;
    width: 22%;
    height: 4px;
    background-color: #E13A44;
}

.has-modal-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container:first-child:after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 22%;
    height: 4px;
    background-color: #38ADF0;
}

.has-modal-open .wp-block-navigation__responsive-container-close {
    color: var(--wp--preset--color--secondary);
    right: 20px;
    top: 22px;
}

.has-modal-open .wp-block-navigation__responsive-container-content .is-style-fill {
    padding: 12px 0;
}

/* Button with icon styling */
.wp-block-button i.lo24-arrow-right {
    font-size: 10px;
}

.wp-block-button i {
    margin-left: 5px;
}

.wp-block-buttons {
    gap: 5px;
}

/* Heading marker */
mark.has-inline-color:not([class*=" "]) {
    color: unset !important;
    position: relative;
    background-color: unset !important;
    display: inline-flex;
    width: fit-content;
}

mark.has-inline-color:not([class*=" "])::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 12%;
    background-color: var(--wp--preset--color--secondary);
    width: 0;
    height: 8px;
    z-index: -1;
    transition: .6s linear;
}

.visible mark.has-inline-color:not([class*=" "])::before {
    width: 100%;
}

.block-editor-rich-text__editable mark.has-inline-color:not([class*=" "])::before {
    z-index: 1;
    width: 100%;
}

@media (max-width: 772px) {
    .wp-block-post-content {
        overflow: hidden;
    }
   
}

h1, h2, h3, h4, h5, h6 {
    margin-block-start: 0;
}

.vacancy-title-detail{
    font-size: 3.5rem;
    color: var(--wp--preset--color--primary);
}

@media (max-width: 772px) {
    .vacancy-title-detail {
        font-size: 2rem;
}
}


.wp-block-buttons {
    margin-bottom: 0;
}


/* Block cover styling */
.wp-block-cover:not(.no-border-radius) > picture img,
.wp-block-cover:not(.no-border-radius) > img {
    border-radius: 8px !important;
}

.wp-block-cover.br-0 > picture img {
    border-radius: 0 !important;
}

/* Footer icon styling */
.footer-background {
    position: relative;
    overflow: hidden;
}

.footer-background > * {
    z-index: 9;
    position: relative;
}

.footer-background::after {
    content: '';
    position: absolute;
    width: auto;
    height: 100%;
    background-image: url(../../assets/images/clock.png);
    bottom: -6%;
    left: 65%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 1;
}

@media (max-width: 772px) {
    .footer-background::after {
        bottom: -3%;
        left: 11%;
    }

}

/* Styling for image block with fixed size */
.wp-block-image.is-style-rounded.fixed-size img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50% !important;
    object-fit: cover;
    object-position: center;
}

/* Footer social icons */
.wp-block-social-link span {
    display: none;
}

/* fix for align-items-center */
.align-items-center {
    align-items: center;
}

/* apply now mobile bottom sticky */
.apply-now-mobile {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.apply-now-mobile .is-style-fill-tertiary .wp-element-button{
    width: 45px;
    display: flex;
    justify-content: center;
}

.apply-now-mobile .is-style-fill-tertiary .wp-element-button i {
    margin: 0;
}

.apply-now-mobile .wp-block-group {
    justify-content: center;
}

/* Call Me Form Styling */
#gform_10 .gform_footer {
    display: none;
}

/* hide recaptcha */
.grecaptcha-badge {
    display: none;
}

/* Back link on the single stories page */
.back-link-container {
    position: relative;
}

.back-link {
    margin-bottom: 0;
    cursor: pointer;
}

.back-link a {
    font-size: 14px;
    transition: .2s linear;
}

.back-link a:hover {
    opacity: .6;
    color: #fff !important;
}

.back-link i {
    font-size: 10px;
    padding-right: 10px;
}

.wp-block-image:not(.no-border-radius) {
    border-radius: 8px;
    overflow: hidden;
}

/* Make containers sticky */
.sticky-container {
    position: sticky;
    top: 150px;
}

/* Werken bij Logistiek24 pagina */

@media (min-width: 992px) {
    .overflow-image figure,
    .overflow-image {
        overflow: hidden;
        height: 100%;
    }

    .overflow-image img {
        height: calc(100% + 50px);
        width: 115%;
        margin-top: -50px;
        border-radius: 0 0 0 8px;
        max-width: unset;
        object-fit: cover;
    }
}

.page-id-2749 .vacancies-list .col-md-3 {
    display: none !important;
}

@media (min-width: 772px) {
    .page-id-2749 .vacancies-list .col-md-7 {
        -ms-flex: 0 0 83.333333%;
            flex: 0 0 83.333333%;
            max-width: 83.333333%;
    }
}

/* Custom classes */
.overflow-hidden {
    overflow: hidden;
}

.border-radius-video {
    border-radius: 8px;
    overflow: hidden;
}

/* mobile and desktop styling for double content */
@media (min-width: 1200px) {
    .vacature-aanmelden .wp-block-cover > picture,
    .vacature-aanmelden .wp-block-cover > img {
        display: none;
    }

    .vacature-aanmelden * {
        color: var(--wp--preset--color--primary);
    }

    .proces-slider .steps-slider picture,
    .proces-slider .steps-slider img {
        filter: brightness(0) invert(1);
    }
}

@media (max-width: 1200px) {
    .onze-verhalen .wp-block-cover > picture,
    .onze-verhalen .wp-block-cover > img,
    .proces-slider .wp-block-cover > picture,
    .proces-slider .wp-block-cover > img,
    .blog-slider .wp-block-cover > picture,
    .blog-slider .wp-block-cover > img {
        display: none;
    }

    .onze-verhalen *:not(.slick-arrow):not(.wp-element-button):not(.wp-element-button i),
    .blog-slider *:not(.slick-arrow):not(.wp-element-button):not(.wp-element-button i) {
        color: var(--wp--preset--color--primary);
    }

    .proces-slider .wp-block-cover {
        padding: 0 16px !important;
    }
}

/* Font correction */
@media (max-width: 992) {
    h1 {
        font-size: 45px;
    }

    h2 {
        font-size: 38px;
    }
}

.call-to-action-image img{
    border-radius: 100%;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 772px) {
    .remove-mobile-padding {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Sticky container */
.wp-block-group.is-position-sticky {
    top: 150px !important;
}

/* Fix for wordpress 6.6 update */
:root :where(h2) {
    color: inherit;
}

footer.wp-block-template-part a:hover {
    color: #fff !important;
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
    color: #170D69 !important;
}