/********** Website body layout styling **********/

/* This layout is used to ensure that the footer always remains at the bottom of each webpage*/

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the site stretches the full height of the viewport */
}


/* Ensure that there is no scroll when the wp admin bar is present */
body.admin-bar {
    min-height: calc(100vh - 32px)!important;
}

.wp-site-blocks {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto; /* Flex properties to ensure footer sticks to the bottom */
}

.wp-site-blocks header {
    width: 100%;
    z-index: 1000; /* Ensures the header overlaps other content as needed */
}

.wp-site-blocks footer {
    align-self: flex-end;
    width: 100%;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    flex-shrink: 0;
    margin-top: auto; /* Positions the footer at the bottom of the viewport */
    position: relative;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        min-height: calc(100vh - 46px)!important; /* Adjust for taller admin bar on small screens */
    }
}

/* Hide default off-canvas button */
.tecology-off-canvas-button-wrapper {
    display: none !important;
}

/* Style for custom open-canvas trigger elements */
.open-canvas {
    cursor: pointer;
}

/* Ensure off-canvas width is respected on desktop */
.tecology-off-canvas-container .tecology-off-canvas.tecology-off-canvas-left,
.tecology-off-canvas-container .tecology-off-canvas.tecology-off-canvas-right {
    width: var(--tecology-off-canvas-size) !important;
    max-width: 100%;
}

/* Make off-canvas 100% wide on mobile devices */
@media screen and (max-width: 768px) {
    .tecology-off-canvas-container .tecology-off-canvas.tecology-off-canvas-left,
    .tecology-off-canvas-container .tecology-off-canvas.tecology-off-canvas-right {
        width: 100% !important;
    }
}