/* Global
   ========================================================================== */

main {
    min-height: 500px;
}

:root :where(.wp-element-button:hover, .wp-block-button__link:hover) {
    transform: translate(3px, 3px);
}

footer {
    margin: 0 !important;
}

body {
    @media screen and (min-width: 600px) {
        --wp--style--root--padding-right: var(--wp--preset--spacing--medium) !important;
        --wp--style--root--padding-left: var(--wp--preset--spacing--medium) !important;
    }
}

code {
	font-family: var(--wp--preset--font-family--body);
}


/* Header
   ========================================================================== */

/* La technique au service du sens animation */
@keyframes slide-technique {

    0%,
    30% {
        transform: translateX(var(--wp--preset--spacing--medium)) matrix(0, -1, 1, 0, 0, 0);
        opacity: 0;
    }

    100% {
        transform: translateX(0) matrix(0, -1, 1, 0, 0, 0);
        opacity: 1;
    }
}

/* Menu item label description animation */
@keyframes appear-menu-desc {

    0%,
    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.smbt-main-columns.wp-block-columns {

    /* Horizontal header for small screens */
    @media screen and (max-width: 1149px),
    screen and (max-height: 724px) {
        flex-direction: column;
    }

    /* Header full screen height for big screens */
    @media screen and (min-width: 1150px) and (min-height: 725px) {
        .smbt-header-rows {
            min-height: calc(100vh - var(--wp-admin--admin-bar--position-offset, 0px));
        }
    }
}

.smbt-header-rows {
    z-index: 12;

    /* Hamburger menu besides logo on tablet */
    @media screen and (max-width: 1149px) {
        flex-direction: row !important;
        align-items: center !important;
        padding-block: 0 !important;

        & .smbt-header-menu-container {
            border-top: none !important;
            padding-top: 0 !important;
        }
    }

    /* La technique au service du sens */
    @media screen and (min-width: 1150px) and (min-height: 725px) {
        position: relative;

        &::before {
            content: "La technique au service du sens";
            font-family: var(--wp--preset--font-family--heading);
            font-size: var(--wp--preset--font-size--x-small);
            color: var(--wp--preset--color--text);
            position: absolute;
            transform-origin: right center;
            top: var(--wp--preset--spacing--medium);
            right: 0;
            transform: translateX(0) matrix(0, -1, 1, 0, 0, 0);
            animation-name: slide-technique;
            animation-duration: 2100ms;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
        }
    }

    /* Force full width of menu items */
    & .wp-block-navigation__container {
        width: 100%;

        & .wp-block-navigation-item {
            width: 100%;

            /* Hamburger open menu padding */
            @media screen and (max-width: 1149px) {
                padding-inline: var(--wp--preset--spacing--medium);
                padding-block: 5px;
                font-size: var(--wp--preset--font-size--medium);
            }

            & .wp-block-navigation-item__content {
                width: 100%;
            }
        }
    }
}

/* Small header logo besides title on small screens  */
.smbt-header-title {

    @media screen and (max-width: 1149px),
    screen and (max-height: 724px) {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        align-items: flex-end;
        column-gap: 1rem;

        & .wp-block-image img {
            max-width: 60px;
        }
    }

    @media screen and (max-width: 599px) {
        & .wp-block-image img {
            max-width: 45px;
        }
    }
}

.smbt-header-menu .wp-block-navigation__container {

    /* Menu item label description */
    & .wp-block-navigation-item__content {
        width: 100%;
        display: flex;
        justify-content: space-between;

        /* Stack description on small screens */
        @media screen and (max-width: 1580px) and (min-width: 1150px) and (min-height: 725px),
        screen and (max-width: 599px) {
            flex-direction: column;
        }

        &::after {
            font-size: var(--wp--preset--font-size--x-small);
            color: var(--wp--preset--color--text-50);
            transition: all 300ms ease;
        }

        & .wp-block-navigation-item__label {
            transform: translateX(calc(0px - var(--icon-w-g)));
            transition: transform 300ms ease;
        }

        &:hover .wp-block-navigation-item__label {
            transform: translateX(0);
        }

        &:focus .wp-block-navigation-item__label {
            @media screen and (min-width: 1150px) {
                transform: translateX(0);
            }
        }
    }

    /* Menu item label hover or current description */
    & .wp-block-navigation-item__content {
        &:hover::after {
            color: var(--wp--preset--color--text);
        }

        &:focus::after {
            @media screen and (min-width: 1150px) {
                color: var(--wp--preset--color--text);
            }
        }
    }

    & .current-menu-item .wp-block-navigation-item__content::after {
        color: var(--wp--preset--color--text);
    }

    & .current-menu-item .wp-block-navigation-item__label {
        transform: translateX(0);
    }

    --icon-width: 20px;
    --icon-gap: 0.6rem;
    --icon-w-g: calc(var(--icon-gap) + var(--icon-width));

    /* Menu item content icon */
    & .wp-block-navigation-item__content .wp-block-navigation-item__label {
        display: flex;
        column-gap: var(--icon-gap);

        &::before {
            content: "";
            background-repeat: no-repeat;
            background-position: center;
            width: var(--icon-width);
            transform: scale(0);
            opacity: 0;
            transition: transform 300ms ease, opacity 200ms ease-out;
        }
    }

    /* Menu item content hover or current icon */
    & .wp-block-navigation-item__content {
        &:hover .wp-block-navigation-item__label::before {
            transform: scale(1);
            opacity: 1;
        }

        &:focus .wp-block-navigation-item__label::before {
            @media screen and (min-width: 1150px) {
                transform: scale(1);
                opacity: 1;
            }
        }
    }

    & .current-menu-item .wp-block-navigation-item__content .wp-block-navigation-item__label::before {
        transform: scale(1);
        opacity: 1;
    }

    /* Nos services */
    & .smbt-header-menu-item-services {

        & .wp-block-navigation-item__content::after {
            content: "technologiques / humains / durables";
            animation-name: appear-menu-desc;
            animation-duration: 600ms;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
        }

        & .wp-block-navigation-item__content .wp-block-navigation-item__label::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M20 12a8 8 0 0 1-8 8a8 8 0 0 1-8-8a8 8 0 0 1 8-8c.76 0 1.5.11 2.2.31l1.57-1.57A9.8 9.8 0 0 0 12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10M7.91 10.08L6.5 11.5L11 16L21 6l-1.41-1.42L11 13.17z'/%3E%3C/svg%3E");
        }
    }


    /* Nos réalisations */
    & .smbt-header-menu-item-realisations {

        & .wp-block-navigation-item__content::after {
            content: "25+ projets réalisés";
            animation-name: appear-menu-desc;
            animation-duration: 900ms;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
        }

        & .wp-block-navigation-item__content .wp-block-navigation-item__label::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M6.1 10L4 18V8h17a2 2 0 0 0-2-2h-7l-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h15c.9 0 1.7-.6 1.9-1.5l2.3-8.5zM19 18H6l1.6-6h13z'/%3E%3C/svg%3E");
        }
    }

    /* La coop */
    & .smbt-header-menu-item-coop {

        & .wp-block-navigation-item__content::after {
            content: "multidisciplinaire et d'ici";
            animation-name: appear-menu-desc;
            animation-duration: 1200ms;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
        }

        & .wp-block-navigation-item__content .wp-block-navigation-item__label::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M1.5 4v1.5c0 4.15 2.21 7.78 5.5 9.8V20h15v-2c0-2.66-5.33-4-8-4h-.25C9 14 5 10 5 5.5V4m9 0a4 4 0 0 0-4 4a4 4 0 0 0 4 4a4 4 0 0 0 4-4a4 4 0 0 0-4-4'/%3E%3C/svg%3E");
        }
    }

    /* Contact */
    & .smbt-header-menu-item-contact {

        & .wp-block-navigation-item__content::after {
            content: "info@symbolitech.com";
            animation-name: appear-menu-desc;
            animation-duration: 1500ms;
            animation-timing-function: ease;
            animation-fill-mode: forwards;
        }

        & .wp-block-navigation-item__content .wp-block-navigation-item__label::before {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z'/%3E%3C/svg%3E");
        }
    }
}

/* Hamburger on tablet */

body .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: block !important;
}

body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
}

@media (min-width: 1150px) {
    body .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }

    body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
    }
}

/* Page nav containers
   ========================================================================== */

.smbt-page-nav-container {

    --icon-width: 26px;
    --icon-gap: 0.6rem;
    --icon-w-g: calc(var(--icon-gap) + var(--icon-width));

    & p>a {
        padding-block: var(--wp--preset--spacing--small);
        background: none;
        display: flex;
        column-gap: var(--icon-gap);
        transform: translateX(calc(0px - var(--icon-w-g)));
        transition: transform 300ms ease;

        &::before {
            content: "";
            display: block;
            background-repeat: no-repeat;
            background-position: center;
            width: var(--icon-width);
            transform: scale(0);
            opacity: 0;
            transition: transform 300ms ease, opacity 200ms ease-out;
        }

        &:is(:hover, :focus) {
            transform: translateX(0);

            &::before {
                transform: scale(1);
                opacity: 1;
            }
        }
    }

    /* La coop */

    /* À propos */
    & p.smbt-page-nav-qui>a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9A3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42c-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3a3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3a3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9c-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65c2.56.34 4.45 1.51 4.45 2.9z'/%3E%3C/svg%3E");
    }

    /* Nos membres */
    & p.smbt-page-nav-membres>a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M1.5 4v1.5c0 4.15 2.21 7.78 5.5 9.8V20h15v-2c0-2.66-5.33-4-8-4h-.25C9 14 5 10 5 5.5V4m9 0a4 4 0 0 0-4 4a4 4 0 0 0 4 4a4 4 0 0 0 4-4a4 4 0 0 0-4-4'/%3E%3C/svg%3E");
    }

    /* Nos partenaires */
    & p.smbt-page-nav-partenaires>a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M11 6h3l3.29-3.3a1 1 0 0 1 1.42 0l2.58 2.59a1 1 0 0 1 0 1.41L19 9h-8v2a1 1 0 0 1-1 1a1 1 0 0 1-1-1V8a2 2 0 0 1 2-2m-6 5v4l-2.29 2.29a1 1 0 0 0 0 1.41l2.58 2.59a1 1 0 0 0 1.42 0L11 17h4a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-1h1a1 1 0 0 0 1-1v-1h-7v1a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9Z'/%3E%3C/svg%3E");
    }

    /* Services */

    /* Développement web */
    & p.smbt-page-nav-web>a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='m12.89 3l1.96.4L11.11 21l-1.96-.4zm6.7 9L16 8.41V5.58L22.42 12L16 18.41v-2.83zM1.58 12L8 5.58v2.83L4.41 12L8 15.58v2.83z'/%3E%3C/svg%3E");
    }

    /* Développement logiciel */
    & p.smbt-page-nav-logiciel>a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.5 8.5L11 10l-3 3l3 3l-1.5 1.5L5 13zm5 9L13 16l3-3l-3-3l1.5-1.5L19 13zM21 2H3a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2m0 18H3V6h18z'/%3E%3C/svg%3E");
    }

    /* Infrastructure et hébergement */
    & p.smbt-page-nav-infra>a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M2 4.6v4.8c0 .9.5 1.6 1.2 1.6h17.7c.6 0 1.2-.7 1.2-1.6V4.6C22 3.7 21.5 3 20.8 3H3.2C2.5 3 2 3.7 2 4.6M10 8V6H9v2zM5 8h2V6H5zm15 1H4V5h16zM2 14.6v4.8c0 .9.5 1.6 1.2 1.6h17.7c.6 0 1.2-.7 1.2-1.6v-4.8c0-.9-.5-1.6-1.2-1.6H3.2c-.7 0-1.2.7-1.2 1.6m8 3.4v-2H9v2zm-5 0h2v-2H5zm15 1H4v-4h16z'/%3E%3C/svg%3E");
    }

    /* Accompagnement et formation */
    & p.smbt-page-nav-formation>a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M20 17a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H9.46c.35.61.54 1.3.54 2h10v11h-9v2m4-10v2H9v13H7v-6H5v6H3v-8H1.5V9a2 2 0 0 1 2-2zM8 4a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
    }

    /* Services connexes */
    & p.smbt-page-nav-connexes>a::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M3 1c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h11c1.11 0 2-.89 2-2v-3h-2v3H3V3h11v2h2V3c0-1.11-.89-2-2-2M9 7c-1.11 0-2 .89-2 2v3h2V9h11v11H9v-2H7v2c0 1.11.89 2 2 2h11c1.11 0 2-.89 2-2V9c0-1.11-.89-2-2-2z'/%3E%3C/svg%3E");
    }
}

/* Transition
   ========================================================================== */

@keyframes timeline-appear {

    0%,
    5% {
        transform: translateY(60px);
        opacity: 0;
    }

    50% {
        transform: translateY(0);
        opacity: 1;
    }
}

.is-style-timeline-appear {
    animation: timeline-appear ease-out forwards;
    animation-timeline: view();
    animation-range-start: cover 0%;
    animation-range-end: cover 100%;
}

/* WP Form
   ========================================================================== */

div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: none !important;
    border: none !important;
    color: var(--wp--preset--color--text-90) !important;
    padding-inline: 0 !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full p,
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) p {
    color: var(--wp--preset--color--text-90) !important;
}

div.wpforms-container-full button[type=submit].wpforms-submit {
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0;
    border-color: var(--wp--preset--color--text);
    border-width: 2px;
    border-style: solid;
    color: var(--wp--preset--color--text);
    font-family: var(--wp--preset--font-family--heading);
    font-size: inherit;
    font-weight: 500;
    line-height: inherit;
    padding-top: .6rem;
    padding-right: 1.6rem;
    padding-bottom: .6rem;
    padding-left: 1.6rem;
    text-decoration: none;
    box-shadow: var(--wp--preset--shadow--retro-outline);
    line-height: 1;

    &:is(:hover, :focus) {
        box-shadow: none;
        transform: translate(3px, 3px);
        color: var(--wp--preset--color--accent);
    }

    &:focus::after {
        display: none;
    }
}

/* Yoast
   ========================================================================== */

.yoast-breadcrumbs>span {
    display: flex;
	flex-wrap: wrap;
    column-gap: 10px;
    font-size: var(--wp--preset--font-size--x-small);

    & a {
        color: var(--wp--preset--color--text);

        &:hover {
            color: var(--wp--preset--color--accent);
        }
    }
}