/*
Theme Name: Workspace 11
Theme URI: https://permiserv.com/themes/workspace11/
Author: PermiServ
Author URI: https://wordpress.org
Description: Workspace 11 is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: workspace11
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/* INTERSECT EFFECTS */
.fade {
    transition: all 1s ease;
    opacity: 0;
}
.fade.visible {
    opacity: 1;
}

.zoom-in {
    transition: all 1s ease;
    transform: scale(0.75);
}
.zoom-in.visible {
    transform: scale(1);
}

.zoom-out {
    transition: all 1s ease;
    transform: scale(1.25);
}
.zoom-out.visible {
    transform: scale(1);
}

.slide-left {
    transition: all 1s ease;
    transform: translateX(-50%);
}
.slide-left.visible {
    transform: translateX(0);
}

.slide-right {
    transition: all 1s ease;
    transform: translateX(50%);
}
.slide-right.visible {
    transform: translateX(0);
}

.slide-up {
    transition: all 1s ease;
    transform: translateY(50%);
}
.slide-up.visible {
    transform: translateY(0);
}

.slide-down {
    transition: all 1s ease;
    transform: translateY(-50%);
}
.slide-down.visible {
    transform: translateY(0);
}

/* MAIN */
body {
    overflow-x: hidden;
}
:root :where(.is-layout-flow) > *, :where(.wp-site-blocks) > * {
    margin-block-start: 0px;
    margin-block-end: 0;
}
.true-fullscreen {
    min-height: calc(100dvh - 255px) !important;
    align-content: center;
}
.no-gap {
    gap: 0px;
}

.header-block {
    z-index: 20;
    position: relative;
    top: 0px;
    left: 0px;
    right: 0px;
}

body.admin-bar .header-block {
    //top: 28px;
}

.footer-block {
    z-index: 10;
    position: relative;
    margin-block-start: 0px;
}

.footer-block-group {
    align-items: flex-end;
}

.roller-panel {
    z-index: 10;
    position: relative;
}

.image-masked-round img {
    mask-image: url('/wp-content/themes/workspace11/assets/images/image_mask.png');
    -webkit-mask-image: url('/wp-content/themes/workspace11/assets/images/image_mask.png');
    -webkit-mask-size: cover;
    mask-size: cover;
}

.cover-start-top {
    align-items: flex-start;
}

/* SELECT STUFF */
/* The container must be positioned relative: */
.custom-select {
    position: relative;
    font-family: Arial;
}

.custom-select select {
    display: none; /*hide original SELECT element: */
}

.select-selected {
    background-color: black;
    text-align: left;
    border: 1px solid white;
}

/* Style the arrow inside the select element: */
.select-selected:after {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-25%);
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    transform: translateY(-75%);
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
    color: #ffffff;
    padding: 8px 32px 8px 8px;

    cursor: pointer;
}

/* Style items (options): */
.select-items {
    position: absolute;
    background-color: #1c1c1c;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    text-align: left;
    border: 1px solid white;
    border-top: 0px;
}
.select-items div {
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
}

/* Hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

/* MENU */
/* Change the WordPress default css breakpoints media query */
@media ( min-width: 782px ) {
    .wp-block-navigation.nav-top--mobile {
        display: none;
    }
}

@media ( max-width: 781px ) {
    .wp-block-navigation.nav-top--desktop {
        display: none;
    }

    body.admin-bar .header-block {
        top: 0px;
        position: sticky;
    }

    .wp-block-navigation__responsive-container {
        background: none !important;
        background-color: transparent !important;
        background-image: url("assets/images/menu_background.png") !important;
    }

    .wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-container {
        animation: slide-out 0.5s forwards;
        -webkit-animation: slide-out 0.5s forwards;
        padding:
                var(--wp--style--root--padding-top,2rem)
                var(--wp--style--root--padding-right,2rem)
                var(--wp--style--root--padding-bottom,2rem)
                var(--wp--style--root--padding-left,2rem);
    }
    .wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-container.is-menu-open {
        animation: slide-in 0.5s forwards;
        -webkit-animation: slide-in 0.5s forwards;
    }
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content{
        padding-top: calc(2rem + 24px);
    }
    .wp-block-navigation.nav-top--mobile .wp-block-navigation__responsive-dialog{
        gap:inherit;
    }
    .wp-block-navigation.nav-top--mobile :where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)){
        padding: 0;
    }

    .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
        background: none !important;
        background-color: transparent !important;
        background-image: url("assets/images/menu_background.png") !important;
    }

}

@media ( max-width: 500px ) {
    .fullscreen-mobile, .fullscreen-mobile img {
        width: 100% !important;
    }
}
/** animation slide-in-out **/
@keyframes slide-in {
    0% {
        -webkit-transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}

@-webkit-keyframes slide-in {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(100%);
    }
}

/* EXPRESSION OF INTEREST FORM */
.expression-of-interest-form {
    width: 600px;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px;
    font-family: "Arial", sans-serif;
}

.form-row {
    margin-bottom: 15px;
}

.form-row label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select {
    width: 100%;
    padding: 10px;
    border: 2px solid transparent;
    border-radius: 0px;
    box-sizing: border-box;
    background: #FCF7E6;
    color: #232735;
    transition: all 0.3s ease-in-out;
    outline: none;
}

.form-row input[type="text"]:focus,
.form-row input[type="email"]:focus,
.form-row input[type="tel"]:focus,
.form-row select:focus {
    border-color: #232735;
    background-color: #ffffff;
}

/* Custom checkbox styling */
.checkbox-container input[type="checkbox"] {
    position: relative;
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid transparent;
    background: #FCF7E6;
    cursor: pointer;
    margin: 0;
    transition: all 0.3s ease-in-out;
}

.checkbox-container input[type="checkbox"]:checked {
    background: #232735;
}

.checkbox-container input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 10px;
    border: solid #FCF7E6;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-container input[type="checkbox"]:focus {
    outline: none;
    border-color: #232735;
}

.checkbox-container label {
    cursor: pointer;
    user-select: none;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

.checkbox-group .checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    margin: 0;
}

.checkbox-group .checkbox-container span {
    font-size: 14px;
}

/* Custom select focus style */
.select-selected:focus,
.select-selected.select-arrow-active {
    border-color: #232735;
    background-color: #1c1c1c;
}


.submit-button {
    background-color: #232735;
    width: 100%;
    color: #FCF7E6;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: 0px;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 20px;
    font-family: "Arial", sans-serif;
}

.submit-button:focus {
    outline: none;
    border-color: #FCF7E6;
}

.submit-button:hover {
    background-color: #2e3245;
}

#submission-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
}

#submission-message .success-message {
    color: #155724;
    background-color: #d4edda;
    padding: 10px;
    border-radius: 0px;
}

#submission-message .error-message {
    color: #721c24;
    background-color: #f8d7da;
    padding: 10px;
    border-radius: 0px;
}