/* =============================================================
   Clover Studios — Brand tokens
   ============================================================= */

body[data-brand="studios"] {
    --color-primary:    #92CCAE;

    /* Light mode (default) */
    --color-bg:         #ffffff;
    --color-text:       #000000;
    --color-text-60:    rgba(0, 0, 0, 0.6);
	--color-text-30:    rgba(0, 0, 0, 0.3);
    --color-text-10:    rgba(0, 0, 0, 0.1);

    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

body[data-brand="studios"][data-mode="dark"] {
    --color-bg:         #000000;
    --color-text:       #ffffff;
    --color-text-60:    rgba(255, 255, 255, 0.6);
	--color-text-30:    rgba(255, 255, 255, 0.3);
    --color-text-10:    rgba(255, 255, 255, 0.1);
}

/* =============================================================
   Hero
   ============================================================= */

/* bg-cover + ::after overlay — niet te doen met utility classes */
.hero-studios__bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-studios__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}

/* Hover animatie play knop */
.hero-studios__play {
    background: none;
    border: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.hero-studios__play:hover {
    transform: scale(1.08);
    opacity: 0.85;
}

/* Preloader */
.hero-studios__preloader {
    background: var(--color-bg);
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.hero-studios__preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.preloader-spinner {
    display: flex;
    gap: 12px;
    align-items: center;
}

.preloader-circle {
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    animation: pulse 1.4s ease-in-out infinite;
}

.preloader-circle:nth-child(1) {
    animation-delay: 0s;
}

.preloader-circle:nth-child(2) {
    animation-delay: 0.2s;
}

.preloader-circle:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

/* =============================================================
   Video Controls
   ============================================================= */

.video-control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.video-control-btn:active {
    transform: scale(0.95);
}

/* =============================================================
   Video modal
   ============================================================= */

/* Fade + pointer-events — utility classes hebben geen is-open state */
.video-modal {
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.video-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.video-modal__overlay {
    background: rgba(0, 0, 0, 0.85);
}

.video-modal__inner {
    width: 90vw;
    max-width: 1100px;
}

.video-modal__close {
    top: -48px;
    right: 0;
    background: none;
    border: none;
    padding: 8px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.video-modal__close:hover {
    opacity: 1;
}

/* 16:9 ratio via padding-bottom truc */
.video-modal__embed {
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}

/* =============================================================
   Timeline
   ============================================================= */

#timeline {
    overflow: hidden;
}

.timeline__track {
    width: max-content;
}

.timeline__step {
    width: calc(100vw / 3);
    min-width: 280px;
    flex-shrink: 0;
}

@media (max-width: 818px) {
    #timeline {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #timeline::-webkit-scrollbar {
        display: none;
    }
    .timeline__step {
        width: 80vw;
        min-width: 0;
    }
}

.timeline__dot {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    border: 1.5px solid var(--color-text);
    background: var(--color-text);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.timeline__dot.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.timeline__line {
    flex: 1;
    height: 1px;
    background: var(--color-text-10);
}

.timeline__line-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 0;
    background: var(--color-primary);
}

/* =============================================================
   Tabs
   ============================================================= */

.tabs__nav {
    border-bottom: 1px solid var(--color-text-10);
}

.tabs__btn {
    background: none;
    border: none;
    font-family: inherit;
    color: var(--color-text);
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.tabs__btn:hover {
    opacity: 1;
}

.tabs__btn.is-active {
    opacity: 1;
    color: var(--color-primary);
}

.tabs__indicator {
    height: 2px;
    background-color: var(--color-primary);
    left: 0;
    width: 0;
}

/* =============================================================
   Work slider
   ============================================================= */

.work-slider__track {
    will-change: transform;
	flex-wrap: nowrap;
}

.work-slider__image {
    width: 100%;
}

.work-slider__image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
	border-radius: 16px;
	border: 1px solid var(--color-text-30);
}


.work-slider__card {
    flex-shrink: 0;
    width: calc(100vw / 3.75);
    padding: 16px;
    /*border: 1px solid var(--color-text-10);*/
    margin-right: 16px;
    color: var(--color-text);
}

@media (max-width: 1024px) {
    .work-slider__card {
        width: calc(100vw - 96px);
    }
}

/* =============================================================
   Check list
   ============================================================= */

.list--check {
    list-style: none;
}

.list--check li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.list--check li::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background-image: url('../../../../../uploads/2026/03/checkmark-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.wpforms-field-required, .wpforms-field-large{
    background-color: var(--color-text-10) !important;
    border-radius:100px !important;
    border:none !important;
    color:var(--color-text) !important;
    outline:none !important;
}

.wpforms-field-medium{
    background-color: var(--color-text-10) !important;
    border-radius:16px !important;
    border:none !important;
    color:var(--color-text) !important;
    outline:none !important;
}

.wpforms-container .wpforms-field, .wp-core-ui div.wpforms-container .wpforms-field{
    padding:8px 0 !important;
}

.wpforms-field-required::placeholder, .wpforms-field-large::placeholder, .wpforms-field-medium::placeholder{
        color:var(--color-text) !important;
}

.wpforms-submit {
    background: #a6d7be !important;
    width: 100% !important;
    border-radius: 50px !important;
    text-align: center !important;
    color:var(--color-text) !important;
}

div.wpforms-container-full button[type=submit]:focus:after{
	border: 0px !important;
}

.wpforms-submit::after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33325 8.00016H12.6666M12.6666 8.00016L7.99992 3.3335M12.6666 8.00016L7.99992 12.6668' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

body[data-brand="studios"]:not([data-mode="dark"]) .wpforms-submit::after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.33325 8.00016H12.6666M12.6666 8.00016L7.99992 3.3335M12.6666 8.00016L7.99992 12.6668' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}



@media (max-width: 1024px) {
	.wpforms-submit {
		font-size: 14px !important;
	}
}