/*
 Theme Name:   Bookadew
 Theme URI:    https://bookadew.com
 Description:  Use this child theme to extend Bricks.
 Author:       Ben Simons
 Author URI:   https://bookadew.nl
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* footer altijd onderaan plaatsen */

html,
body {
    height: 100%;
}

body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

#brx-content {
    flex: 1 0 auto !important;
}

#brx-footer {
    margin-top: auto !important;
}

/* === Tilt Effects (schaalbaar met variabelen) === */

:root {
    --tilt-height-desktop: 96px;
    --tilt-height-mobile: 48px;
    --tilt-bg: #fff;
}

.tilt-left-bottom,
.tilt-right-bottom,
.tilt-right-top,
.tilt-left-top {
    position: relative;
    overflow: hidden;
}

/* content blijft boven achtergrond, maar onder de tilt */
.tilt-left-bottom > *,
.tilt-right-bottom > *,
.tilt-right-top > *,
.tilt-left-top > * {
    position: relative;
    z-index: 10;
}

/* tilt moet boven content liggen */
.tilt-left-bottom::after,
.tilt-right-bottom::after,
.tilt-right-top::after,
.tilt-left-top::after {
    z-index: 20;
    pointer-events: none;
}

/* Left Bottom */
.tilt-left-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: var(--tilt-height-desktop);
    background: var(--tilt-bg);
    clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 768px) {
    .tilt-left-bottom::after {
        height: var(--tilt-height-mobile);
    }
}

/* Right Bottom */
.tilt-right-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: var(--tilt-height-desktop);
    background: var(--tilt-bg);
    clip-path: polygon(0 100%, 100% 100%, 0 0, 0 100%);
}

@media (max-width: 768px) {
    .tilt-right-bottom::after {
        height: var(--tilt-height-mobile);
    }
}

/* Right Top */
.tilt-right-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: var(--tilt-height-desktop);
    background: var(--tilt-bg);
    clip-path: polygon(0 0, 100% 100%, 100% 0, 0 0);
}

@media (max-width: 768px) {
    .tilt-right-top::after {
        height: var(--tilt-height-mobile);
    }
}

/* Left Top */
.tilt-left-top::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: var(--tilt-height-desktop);
    background: var(--tilt-bg);
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

@media (max-width: 768px) {
    .tilt-left-top::after {
        height: var(--tilt-height-mobile);
    }
}