/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

html {
  font-size: 100%;
}

:root {
  --section-xl: 8rem 4rem;
  --section-large: 7rem 4rem;
  --section-medium: 6rem 4rem;
  --section-small: 5rem 4rem;
  --section-xs: 4rem 4rem;
  --section-xxs: 3rem 3rem;
  --section-xxxs: 2rem 2rem;
  --section-none: 0 4rem;

  --gap-0: 0;
  --gap-xxs: clamp(0.5rem, 1.5vw + 0.25rem, 1.5rem);
  --gap-xs:  clamp(1.5rem, 1.6vw + 0.8rem, 1.75rem);
  --gap-s:   clamp(2rem,   1.5vw + 1rem,   2.5rem);
  --gap-m:   clamp(2rem,   2.5vw + 1rem,   3.5rem);
  --gap-l:   clamp(2rem,   3vw + 1rem,     4.5rem);
  --gap-xl:  clamp(2rem,   4vw + 1rem,     5.5rem);
  --gap-xxl: clamp(2rem,   5vw + 1rem,     6rem);

}

@media (max-width: 1024px) {
  :root {
    --section-xl: 8rem 3rem;
    --section-large: 6rem 3rem;
    --section-medium: 5rem 3rem;
    --section-small: 4rem 3rem;
    --section-xs: 3rem 3rem;
	--section-none: 0 3rem;
  }
}

@media (max-width: 767px) {
  :root {
    --section-xl: 3rem 3rem;
    --section-large: 3rem 3rem;
    --section-medium: 3rem 3rem;
    --section-small: 3rem 3rem;
    --section-xs: 3rem 3rem;
  }
}
.padding-xl.e-con, .padding-xl.e-con-full, .padding-xl.e-con-boxed { padding: var(--section-xl); }
.padding-l.e-con, .padding-l.e-con-full, .padding-l.e-con-boxed { padding: var(--section-large); }
.padding-m.e-con, .padding-m.e-con-full, .padding-m.e-con-boxed { padding: var(--section-medium); }
.padding-s.e-con, .padding-s.e-con-full, .padding-s.e-con-boxed { padding: var(--section-small); }
.padding-xs.e-con, .padding-xs.e-con-full, .padding-xs.e-con-boxed { padding: var(--section-xs); }
.padding-xxs.e-con, .padding-xxs.e-con-full, .padding-xxs.e-con-boxed { padding: var(--section-xxs); }
.padding-xxxs.e-con, .padding-xxxs.e-con-full, .padding-xxxs.e-con-boxed { padding: var(--section-xxxs); }
.padding-0.e-con, .padding-0.e-con-full, .padding-0.e-con-boxed { padding: var(--section-none); }

/*** Container Column Gaps ***/ 
.uabc-gap-0.e-con, .uabc-gap-0.e-con > .e-con-inner { gap: var(--gap-0); }
.uabc-gap-xxs.e-con, .uabc-gap-xxs.e-con > .e-con-inner { gap: var(--gap-xxs); }
.uabc-gap-xs.e-con, .uabc-gap-xs.e-con > .e-con-inner { gap: var(--gap-xs); }
.uabc-gap-s.e-con, .uabc-gap-s.e-con > .e-con-inner { gap: var(--gap-s); }
.uabc-gap-m.e-con, .uabc-gap-m.e-con > .e-con-inner { gap: var(--gap-m); }
.uabc-gap-l.e-con, .uabc-gap-l.e-con > .e-con-inner { gap: var(--gap-l); }
.uabc-gap-xl.e-con, .uabc-gap-xl.e-con > .e-con-inner { gap: var(--gap-xl); }
.uabc-gap-xxl.e-con, .uabc-gap-xxl.e-con > .e-con-inner { gap: var(--gap-xxl); }

/*** Rank Math breadcrumbs ***/
.rank-math-breadcrumb a, .rank-math-breadcrumb p {
color: var(--e-global-color-e212495);
font-weight: var(--e-global-typography-89c28fd-font-weight);
font-size: var(--e-global-typography-c839737-font-size);
}
.rank-math-breadcrumb a:hover {
color: var(--e-global-color-da4bfc9);
}
/*** Inspiratie archive ***/

/*** Custom selection ***/
::-moz-selection { /* Code for Firefox */
  color: var(--global-palette4);
	background-color: color-mix(in srgb, var(--e-global-color-secondary), transparent 50%);
}
/*** Custom selection ***/
::selection {
  color: var(--global-palette4);
	background-color: color-mix(in srgb, var(--e-global-color-secondary), transparent 50%);
}
/*** FORMS ***/
/* Acceptance text small */
.elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option label {
	font-size: 75%!important;
}
input[type=checkbox]:checked:before {
	margin-top: -3px;
	margin-left: -4px;
}

/* General Classes */

.orange-text {
    color: var(--e-global-color-primary);
}
/* Header */
#header.non-transparent {
    background-color: rgba(28, 45, 90, 0.85);
    backdrop-filter: blur(4px);
}

.hamburger {
    height: 24px;
    width: 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: space-between;
}
.hamburger > .stripe {
    height: 1px;
    width: 100%;
    background: var(--e-global-color-64b1f01);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.hamburger.open > .stripe:first-of-type {
    transform: rotate(45deg) translateY(12px) translateX(4px);
}
.hamburger.open > .stripe:last-of-type {
    transform: rotate(-45deg) translateY(-12px) translateX(4px);
}
.hamburger.open > .stripe:nth-of-type(2) {
    opacity: 0;
}
.mobile-menu {
    padding: 0px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: margin-top 0.4s ease-in-out, max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.mobile-menu.open {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
    margin-top: 2rem;
    overflow: auto;
}
/* Carousel Cards */
.card-list .elementor-loop-item .card {
    height: 25vw!important;
    width: 25vw!important;
}
.card-list {
    width: fit-content;
}
/* Animations */
.hover-zoom:hover {
    transform: scale(1.025);
}
/* Wall Slider */
.walls {
    display: flex;
    align-items: center;
}

.wall {
    width: 75px;
}

.wall.front {
    height: 50vh;
    background: #10101015;
}

.wall.back {
    height: 45vh;
    background: #10101025;
}

.slider {
    width: 100%;
}

.slider input {
    width: 100%;
}

.slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: var(--e-global-color-secondary);
    border: none;
    outline: none;
}

.slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--e-global-color-secondary);
    border-radius: 50%;
    cursor: pointer;
}

.slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--e-global-color-secondary);
    border-radius: 50%;
    cursor: pointer;
}

/* Accordion */
.accordion-card.open .inner-content {
    opacity: 1;
    transition-delay: 0.3s;
}

.accordion-card.open .content {
    max-height: 75vh;
    transition-delay: 0s;
}

.accordion-card.open .open-btn {
    transform: rotate(135deg);
}

.accordion-card .inner-content {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.accordion-card .content {
    max-height: 0;
    transition: max-height 0.4s ease-in-out 0.3s;
}

.accordion-card .open-btn {
    cursor: pointer;
    transition: transform 0.4s ease-in-out;
}

/* Packs */
.pack {
    max-width: 1600px;
    width: calc(100vw - 8rem);
    height: fit-content;
    max-height: none;
}

/* Montage Vids */
.montage-btn a {
    border-style: solid !important;
    border-left: solid 2px var(--e-global-color-secondary);
    background: var(--e-global-color-64b1f01);
    color: var(--e-global-color-secondary) !important;
}

.montage-btn a:hover {
    background: var(--e-global-color-secondary);
    color: var(--e-global-color-64b1f01) !important;
}

.montage-btn.active a {
    background: var(--e-global-color-secondary);
    color: var(--e-global-color-64b1f01) !important;
}

.montage-btn.active:hover a {
    background: var(--e-global-color-b85ba81);
    color: var(--e-global-color-64b1f01) !important;
}

.montage-video {
    opacity: 1;
    z-index: 1;
    order: 1;
    transition: opacity 0.4s ease-in-out;
    visibility: visible;
}

.montage-video.hidden {
    opacity: 0;
    z-index: 2;
    top: 0px;
    order: 2;
    position: absolute;
}

/* WPSL Search Bar */
#wpsl-search-wrap label,
#wpsl-search-wrap input {
    font-size: 1em;
    font-weight: 400;
}

/* Download Cards */
.download-card .e-con-inner {
    display: flex;
}

.download-card .img {
    width: fit-content;
}

.download-card .text-container {
    width: fit-container;
}

/* Packs table */
.table .cell {
    padding: 1rem 2rem !important;
    flex-basis: 25%;
    margin: 0px;
}

.table {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    align-content: flex-start;
}

@media (max-width: 1024px) {
    .card {
        height: 40vw;
        width: 40vw;
    }

    .pack {
        max-width: 1600px;
        width: calc(100vw - 8rem);
        height: fit-content;
        max-height: none;
    }
}

@media (max-width: 767px) {
    .card {
        height: 70vw;
        width: 70vw;
    }

    .pack {
        max-width: 1600px;
        width: calc(100vw - 8rem);
        height: fit-content;
        max-height: none;
    }

    .table .cell {
        flex-basis: 100%;
    }
}
/* Word Cladix Pro vakman LP */

/* HEADER */

.blurred-header {
  background: #ffffff;
  transition: background 220ms ease, backdrop-filter 220ms ease, -webkit-backdrop-filter 220ms ease, box-shadow 220ms ease;
  will-change: backdrop-filter, background;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
/* STICKY STATE: transparant + blur + subtiele schaduw */

.elementor-sticky--effects.blurred-header {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* (Optioneel) iets minder intens op mobile */
@media (max-width: 767px) {
  .elementor-sticky--effects.blurred-header {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* Zorg dat de spacer transparant is (geen eigen achtergrond) */
.elementor-sticky__spacer {
  background: transparent !important;
  box-shadow: none !important;
}


/* Divider tussen menu-items in dropdown - alleen toepassen op mobiel/tablet weergave */

@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown .elementor-nav-menu > li:not(:last-child) {
    border-bottom: 1px solid var(--e-global-color-eb87359);
  }

  /* Zorg dat de klikbare rij 100% breed is */
  .elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item {
    display: block;
  }
}

/* Laatste menu-item in dropdown oranje maken - alleen toepassen op mobiel/tablet weergave */

.elementor-13238 .elementor-element.elementor-element-db051cc .elementor-nav-menu--dropdown .menu-item-13893 a {
    background: var(--e-global-color-primary);
    color: var(--e-global-color-64b1f01);
}

@media (min-width: 768px) {
  .menu-item-13893 a {
    display: none !important;
  }
}

/* Icon list in hero onder knoppen - maak cijfers groter */

.elementor-element-2541a01 strong {
    font-size: 130%;
}

/* Form Vakman - Word Cladix Pro */

:root {
    --wppb-primary-color: #F58330;
    --wppb-secondary-color: #FF9A5A;
    --wppb-button-text-color: #ffffff;
    --wppb-label-size: 1rem;
    --wppb-label-color: #1C2D5A;
    --wppb-label-color_: #1C2D5A;
    --wppb-notifications-text-color: #1C2D5A;
}

#wppb-register-user-formulier-vakman-nl {
  font-family: var(--e-global-typography-primary-font-family), Sans-serif;
  color: var(--e-global-color-secondary);
}
#wppb-form-style-1-wrapper .wppb-default-name-heading h4 {
    color: var(--e-global-color-secondary);
}
#wppb-form-style-1-wrapper .wppb-form-field span.wppb-required {
    color: var(--e-global-color-primary);
}
/* Algemene tekstvelden */
#wppb-form-style-1-wrapper .wppb-form-text-field input:not([type='radio']):not([type='checkbox']):not([type='submit']),
#wppb-form-style-1-wrapper .wppb-form-select-field select,
#wppb-form-style-1-wrapper .wppb-form-text-field textarea {
  border-radius: 0;
}
input[type=button], input[type=reset], input[type=submit], button[type=submit], .button, body div.wpforms-container-full .wpforms-form input[type=submit], body div.wpforms-container-full .wpforms-form button[type=submit], body div.wpforms-container-full .wpforms-form .wpforms-page-button, .woocommerce-cart .wp-element-button, .woocommerce-checkout .wp-element-button, .wp-block-button__link, .elementor-button, .elementor-button:hover, .elementor-button:focus, .elementor-button:active {
    letter-spacing: 0;
}
.wppb-user-forms input[type="button"].wppb-msf-next, .wppb-user-forms input[type="button"].wppb-msf-prev, .wppb-user-forms input[type="submit"]:not(.wppb-search-users input) {
    border-radius: 0;
    padding: 0.75em 2em!important;
    font-size: var(--wppb-label-size);
    height: auto;
}
.wppb-user-forms input[type="button"].wppb-msf-prev {
    background: var(--e-global-color-71e60c4);
    border-color: var(--e-global-color-71e60c4);
    color: var(--wppb-label-color);
}
.wppb-user-forms input[type="button"].wppb-msf-prev:hover {
    background: var(--e-global-color-eb87359);
    border-color: var(--e-global-color-eb87359);
    color: var(--wppb-label-color);
}

.wppb-msf-button.wppb-msf-prev:disabled, .wppb-msf-button.wppb-msf-next:disabled {
    visibility: hidden;
}
#wppb-form-style-1-wrapper #pass-strength-result {
    line-height: 1rem;
    padding: 1em 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 0;
    max-width: 15rem;
    text-transform: uppercase;
}
p.wppb-front-end-logout, p.alert, p.wppb-alert, p.warning, p.error, p.wppb-success {
    border-radius: 0;
    margin-top: 0!important;
    margin-bottom: 0;
}
body #wppb-login-wrap p.login-register-lost-password a {
    font-size: 0.75rem;
    color: var(--e-global-color-8573a49);
}
.wppb-user-forms .wppb-gdpr-checkbox label {
    width: 100%!important;
}

/*** Store Locator Listing design adjustments ***/
#wpsl-wrap #wpsl-result-list a:not(.wpsl-store-name a),
.wpsl-info-window .wpsl-iw-inner span a:not(.wpsl-store-name a),
.wpsl-info-window .wpsl-info-actions a,
.wpsl-info-window .wpsl-actions a {
    color: var(--e-global-color-secondary);
}
#wpsl-wrap #wpsl-result-list a,
.wpsl-info-window .wpsl-iw-inner span a,
.wpsl-info-window .wpsl-info-actions a,
.wpsl-info-window .wpsl-actions a {
    text-decoration: underline;
}
.wpsl-info-window .wpsl-iw-inner span,
.wpsl-info-window .wpsl-iw-inner span a,
.wpsl-info-window .wpsl-info-actions a,
.wpsl-info-window .wpsl-actions a{
    font-size: 0.75rem;
    font-family: var(--e-global-typography-text-font-family);
}
.wpsl-badge--stock,
.wpsl-info-window span.wpsl-badge--stock {
    font-size: 0.7rem;
    text-transform: uppercase;
    line-height: 1em;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.5rem;
    background: var(--e-global-color-eb87359);
    margin: 0 0 1em 0;
    display: inline-block;
}
/*** BLOG en BLOG SINGLES ***/


/* Inhoudstafel */
#elementor-toc__ccfba09 {
	padding: 1rem 2rem;
}
.elementor-toc__list-item .elementor-toc__list-item-text-wrapper {
    align-items: start;
}
.elementor-toc__list-item .elementor-toc__list-item-text-wrapper svg {
    margin-top: 4px;
}
ul.elementor-toc__list-wrapper {
	margin-left: 0;
}

.elementor-toc__body .elementor-toc__list-item .elementor-toc__list-item-text {
	font-size: var(--e-global-typography-7842a1b-font-size);
	line-height: 1.2em;
}
.blog .elementor-widget-theme-post-content h2 {
	font-size: 2rem;
}
.blog .elementor-widget-theme-post-content h3 {
	font-size: var(--e-global-typography-3ea58be-font-size);
}
/*** Floating images ***/
.cloud-float {
  animation: cloudFloat 8s ease-in-out infinite;
}

@keyframes cloudFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}