/*
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%;
}

/*.elementor-widget-text-editor {
	h1, H2, h3, h4, h5, h6 {
		color: #1C2D5A;
	}
	a {
		color: #F58330;
		text-decoration: underline;
	}
}*/
:root {
  --padding-xxl: 10rem 2rem;
  --padding-xl: 7.5rem 2rem;
  --padding-large: 6rem 2rem;
  --padding-medium: 4rem 2rem;
  --padding-small: 2rem 2rem;
  --padding-none: 0rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --padding-xxl: 8rem 2rem;
    --padding-xl: 6rem 2rem;
    --padding-large: 5rem 2rem;
    --padding-medium: 4rem 2rem;
    --padding-small: 2rem 2rem;
    --padding-none: 0rem;
  }
}

@media (max-width: 767px) {
  :root {
    --padding-xxl: 4rem 2rem;
    --padding-xl: 4rem 2rem;
    --padding-large: 3rem 2rem;
    --padding-medium: 3rem 2rem;
    --padding-small: 2rem 2rem;
    --padding-none: 0rem;
  }
}

/* Alleen toepassen op de outer Elementor containers */
.padding-xxl.e-con.e-parent { padding: var(--padding-xxl); }
.padding-xl.e-con.e-parent { padding: var(--padding-xl); }
.padding-large.e-con.e-parent { padding: var(--padding-large); }
.padding-medium.e-con.e-parent { padding: var(--padding-medium); }
.padding-small.e-con.e-parent { padding: var(--padding-small); }

/* === Globale Row Gap voor Elementor === */

:root { --uabc-row-gap: 4rem; }
@media (max-width: 1024px) { :root { --uabc-row-gap: 3rem; } }
@media (max-width: 767px)  { :root { --uabc-row-gap: 2rem; } }

.e-con > .e-con-inner {
  --row-gap: var(--uabc-row-gap) !important;
  --e-con-row-gap: var(--uabc-row-gap) !important;
}

/*** 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%);
}


/* General Classes */
body {
    max-width: 100vw;
    overflow: hidden;
}

.orange-text {
    color: var(--e-global-color-primary);
}

.clickable {
    cursor: pointer;
}

.elementor-button:hover {
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* 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%;
    }
}