/*
==================================
IT DEVELOPMENT
MOBILE HEADER / LIQUID MENU
==================================
*/

.itd-mobile-toggle,
.itd-mobile-contact {
    display: none;
}

/* Desktop protection */
@media (min-width: 769px) {

    .itd-mobile-toggle,
    .itd-mobile-contact {
        display: none !important;
    }

    .itd-menu-wrapper {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        height: auto !important;
        background: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

/* Mobile */
@media (max-width: 768px) {

    html {
        scroll-behavior: smooth;
    }

    #kontakt {
        scroll-margin-top: 120px;
    }

    .itd-header,
    .itd-header * {
        box-sizing: border-box;
    }

    .itd-header {
        position: fixed !important;
        top: 16px !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
        z-index: 99999 !important;
    }

    body.admin-bar .itd-header {
        top: 62px !important;
    }

    .itd-nav {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 58px !important;
        padding: 0 18px !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;

        border-radius: 999px !important;
        background: rgba(17,17,17,.78) !important;
        border: 1px solid rgba(255,255,255,.12) !important;

        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            0 18px 45px rgba(0,0,0,.35) !important;
    }

    .itd-logo {
        position: relative;
        z-index: 10004;
        display: flex !important;
        align-items: center !important;
        flex: 0 1 auto !important;
        max-width: calc(100% - 56px) !important;
        min-width: 0 !important;
        overflow: hidden;
    }

    .itd-logo a {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .itd-logo img,
    .itd-logo .custom-logo {
        max-height: 34px !important;
        width: auto !important;
        display: block !important;
    }

    .itd-logo-text {
        display: none !important;
    }

    .itd-nav > .itd-contact {
        display: none !important;
    }

    .itd-mobile-toggle {
        position: relative !important;
        z-index: 10005;
        width: 40px !important;
        height: 40px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        flex: 0 0 40px !important;
        margin-left: auto !important;
        padding: 0 !important;

        border: none !important;
        background: transparent !important;
        cursor: pointer;

        appearance: none;
        -webkit-appearance: none;
    }

    .itd-mobile-toggle span {
        display: block;
        width: 28px;
        height: 2px;
        background: #fff;
        border-radius: 999px;

        transition:
            transform .22s ease,
            opacity .22s ease;
    }

    body.itd-menu-open .itd-mobile-toggle span:first-child {
        transform: translateY(5px) rotate(45deg);
    }

    body.itd-menu-open .itd-mobile-toggle span:last-child {
        transform: translateY(-5px) rotate(-45deg);
    }

    .itd-menu-wrapper {
        position: fixed !important;
        top: 16px !important;
        left: 16px !important;
        right: 16px !important;

        width: auto !important;
        max-width: none !important;

        height: calc(100dvh - 32px) !important;
        min-height: 540px;

        padding: 96px 28px 42px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 32px !important;

        background: rgba(5,5,5,.92) !important;
        border: 1px solid rgba(255,255,255,.12) !important;

        backdrop-filter: blur(28px) !important;
        -webkit-backdrop-filter: blur(28px) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 30px 90px rgba(0,0,0,.58) !important;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-8px) scale(.98) !important;
        transform-origin: top center !important;

        transition:
            opacity .22s ease,
            visibility .22s ease,
            transform .22s ease;

        z-index: 10003 !important;

        overflow: hidden;
    }

    body.admin-bar .itd-menu-wrapper {
        top: 62px !important;
        height: calc(100dvh - 78px) !important;
    }

    body.itd-menu-open .itd-menu-wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1) !important;
    }

    .itd-menu {
        width: 100%;
        list-style: none;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 18px !important;
    }

    .itd-menu li {
        width: 100%;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center;
    }

    .itd-menu a {
        width: 100%;
        min-height: 56px;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 22px;
        border-radius: 999px;

        color: rgba(255,255,255,.88) !important;
        background: transparent;
        border: 1px solid transparent;

        text-decoration: none !important;

        font-size: 18px;
        font-weight: 800;
        letter-spacing: .035em;
        text-transform: uppercase;

        transition:
            color .22s ease,
            background .22s ease,
            border-color .22s ease,
            transform .22s ease;
    }

    .itd-menu a:hover,
    .itd-menu a:focus,
    .itd-menu a:active {
        color: #111 !important;
        background: #ff6b1a !important;
        border-color: rgba(255,107,26,.70) !important;
        transform: translateY(-2px);
        outline: none;
    }

    .itd-mobile-contact {
        width: 100%;
        display: flex !important;
        justify-content: center;
        margin-top: 34px;
    }

    .itd-mobile-contact .itd-contact {
        width: 100%;
        max-width: 280px;
        min-height: 56px;

        display: flex !important;
        align-items: center;
        justify-content: center;

        padding: 0 28px;
        border-radius: 999px;

        background: #ff6b1a !important;
        border: 1px solid rgba(255,107,26,.70);

        color: #111 !important;
        text-decoration: none !important;

        font-size: 16px;
        font-weight: 800;

        box-shadow: 0 14px 35px rgba(255,107,26,.28);

        transition:
            background .22s ease,
            transform .22s ease,
            box-shadow .22s ease;
    }

    .itd-mobile-contact .itd-contact:hover,
    .itd-mobile-contact .itd-contact:focus,
    .itd-mobile-contact .itd-contact:active {
        background: #ff7a2f !important;
        color: #111 !important;
        transform: translateY(-2px);
        box-shadow: 0 18px 42px rgba(255,107,26,.36);
        outline: none;
    }

    body.itd-menu-open {
        overflow: hidden;
        touch-action: none;
    }
}

/* Small phones */
@media (max-width: 390px) {

    .itd-header {
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;
    }

    body.admin-bar .itd-header {
        top: 58px !important;
    }

    .itd-nav {
        height: 54px !important;
        padding: 0 16px !important;
    }

    .itd-menu-wrapper {
        top: 12px !important;
        left: 12px !important;
        right: 12px !important;

        height: calc(100dvh - 24px) !important;
        min-height: 520px;

        padding: 88px 22px 34px !important;

        border-radius: 28px !important;
    }

    body.admin-bar .itd-menu-wrapper {
        top: 58px !important;
        height: calc(100dvh - 70px) !important;
    }

    .itd-menu {
        gap: 15px !important;
    }

    .itd-menu a {
        min-height: 52px;
        font-size: 16px;
    }

    .itd-mobile-contact {
        margin-top: 28px;
    }

    .itd-mobile-contact .itd-contact {
        min-height: 52px;
        font-size: 15px;
    }
}