/* =========================================================
   JUKUPO – Hauptnavigation / Submenus
   ========================================================= */

#mainNav .nav > li,
#mainNav .menu-item-has-children {
    position: relative;
}


/* ---------------------------------------------------------
   Toggle Button
   --------------------------------------------------------- */

#mainNav .submenu-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;
    margin-left: 5px;

    border: 0;
    background: transparent;

    color: #EFB70E;

    vertical-align: middle;
    cursor: pointer;
}


/* Pfeil */

#mainNav .submenu-toggle::before {
    content: "";
    display: block;

    width: 9px;
    height: 9px;

    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;

    transform: translateY(-3px) rotate(45deg);

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


/* geöffnet */

#mainNav .submenu-open > .submenu-toggle::before {
    transform: translateY(2px) rotate(225deg);
}


/* ---------------------------------------------------------
   Submenu Desktop
   --------------------------------------------------------- */

#mainNav .sub-menu {
    position: absolute;

    top: calc(100% + 15px);
    left: 0;

    z-index: 1000;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 0 !important;

    min-width: 280px;
    max-width: 360px;

    padding: 12px !important;
    margin: 0 !important;

    list-style: none;

    background: #18283A;

    border: 3px solid #EFB70E;
    border-radius: 4px;

    box-shadow:
        8px 8px 0 rgba(0, 0, 0, 0.18);

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

    transform: translateY(10px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;
}


/*
 * Kleine unsichtbare Brücke zum Hauptmenü,
 * damit das Menü beim Mouseover nicht sofort verschwindet.
 */

#mainNav .sub-menu::before {
    content: "";
    position: absolute;

    left: 0;
    top: -18px;

    width: 100%;
    height: 18px;
}


/* anzeigen */

#mainNav .submenu-open > .sub-menu,
#mainNav li:hover > .sub-menu,
#mainNav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* ---------------------------------------------------------
   Einträge im Dropdown
   --------------------------------------------------------- */

#mainNav .sub-menu li {
    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    text-align: left;
}


#mainNav .sub-menu li + li {
    border-top: 1px solid rgba(255,255,255,0.12);
}


#mainNav .sub-menu a {
    display: block;

    width: 100%;

    padding: 11px 14px;

    box-sizing: border-box;

    font-family: 'SudburyBasin-Regular';
    font-size: 1.45rem !important;
    line-height: 1.15;

    color: #fff;

    text-decoration: none;

    transition:
        color 0.2s ease,
        padding-left 0.2s ease,
        background 0.2s ease;
}


#mainNav .sub-menu a:hover,
#mainNav .sub-menu a:focus-visible {
    padding-left: 20px;

    color: #EFB70E;

    background: rgba(239,183,14,0.08);

    font-family: 'SudburyBasin-Regular';
}


/* aktuelle Seite */

#mainNav .current-menu-item > a,
#mainNav .current-menu-ancestor > a {
    color: #EFB70E;
}


/* ---------------------------------------------------------
   Submenu Ebene 2+
   --------------------------------------------------------- */

#mainNav .sub-menu .sub-menu {
    top: -3px;
    left: calc(100% + 10px);
}


/* =========================================================
   MOBILE
   bestehender Breakpoint deines Themes: 1088px
   ========================================================= */

@media only screen and (max-width: 1088px) {

    #mainNav .nav {
        width: 100%;
    }


    #mainNav .nav > li,
    #mainNav .menu-item-has-children {
        position: relative;

        width: 100%;
    }


    /*
     * Platz für den Pfeil schaffen
     */

    #mainNav .menu-item-has-children > a {
        display: block;

        padding-right: 55px;
    }


    #mainNav .submenu-toggle {
        position: absolute;

        top: 0;
        right: 0;

        width: 48px;
        height: 48px;

        margin: 0;

        border: 2px solid rgba(239,183,14,0.4);
        border-radius: 50%;
    }


    #mainNav .submenu-toggle::before {
        width: 10px;
        height: 10px;
    }


    /*
     * Mobile Submenu:
     * kein schwebendes Dropdown,
     * sondern Accordion.
     */

    #mainNav .sub-menu,
    #mainNav .sub-menu .sub-menu {
        position: relative;

        top: auto;
        left: auto;

        width: 100%;
        min-width: 0;
        max-width: none;

        box-sizing: border-box;

        padding: 0 0 0 20px !important;
        margin: 0 !important;

        background: transparent;

        border: 0;
        border-left: 3px solid #EFB70E;
        border-radius: 0;

        box-shadow: none;

        opacity: 1;

        visibility: visible;
        pointer-events: auto;

        transform: none;

        max-height: 0;
        overflow: hidden;

        transition:
            max-height 0.35s ease,
            margin 0.35s ease,
            padding 0.35s ease;
    }


    #mainNav .submenu-open > .sub-menu {
        max-height: 1000px;

        margin-top: 12px !important;
        margin-bottom: 15px !important;
    }


    /*
     * Hover auf Mobile ignorieren
     */

    #mainNav li:hover > .sub-menu:not(.dummy-selector) {
        /* Öffnung wird über .submenu-open gesteuert */
    }


    #mainNav .sub-menu li {
        border: 0;
    }


    #mainNav .sub-menu li + li {
        border-top: 1px solid rgba(255,255,255,0.1);
    }


    #mainNav .sub-menu a {
        padding: 10px 10px;

        font-size: 1.7rem !important;
    }


    #mainNav .sub-menu a:hover,
    #mainNav .sub-menu a:focus-visible {
        padding-left: 15px;
    }

}


/* ---------------------------------------------------------
   Tastatur-Fokus
   --------------------------------------------------------- */

#mainNav a:focus-visible,
#mainNav .submenu-toggle:focus-visible {
    outline: 3px solid #EFB70E;
    outline-offset: 4px;
}

/* ==========================================================
   JUKUPO – Contact Form 7
   ========================================================== */

.jukupo-contact-form {
    --jukupo-dark: #18283A;
    --jukupo-yellow: #EFB70E;
    --jukupo-white: #FFFFFF;
    --jukupo-text: #18283A;
    --jukupo-border: #18283A;

    width: 100%;
    max-width: 900px;
}


/* Grid
---------------------------------------------------------- */

.jukupo-form-row {
    display: grid;
    gap: 24px;
}

.jukupo-form-row--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* Felder
---------------------------------------------------------- */

.jukupo-form-field {
    margin-bottom: 28px;
}

.jukupo-form-field label {
    display: block;

    margin-bottom: 8px;

    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;

    color: var(--jukupo-text);
}

.jukupo-form-field label span {
    color: var(--jukupo-yellow);
}


/* Inputs
---------------------------------------------------------- */

.jukupo-contact-form input[type="text"],
.jukupo-contact-form input[type="email"],
.jukupo-contact-form input[type="tel"],
.jukupo-contact-form input[type="url"],
.jukupo-contact-form select,
.jukupo-contact-form textarea {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 15px 18px;

    border: 3px solid var(--jukupo-border);
    border-radius: 0;

    background: var(--jukupo-white);

    color: var(--jukupo-text);

    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


/* Textarea */

.jukupo-contact-form textarea {
    min-height: 190px;
    resize: vertical;
}


/* Select */

.jukupo-contact-form select {
    min-height: 58px;

    cursor: pointer;

    appearance: auto;
}


/* Focus
---------------------------------------------------------- */

.jukupo-contact-form input:focus,
.jukupo-contact-form select:focus,
.jukupo-contact-form textarea:focus {
    border-color: var(--jukupo-yellow);

    box-shadow: 5px 5px 0 var(--jukupo-dark);

    transform: translate(-2px, -2px);
}


/* Submit
---------------------------------------------------------- */

.jukupo-form-submit {
    margin-top: 8px;
}

.jukupo-contact-form .jukupo-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;

    padding: 14px 28px;

    border: 3px solid var(--jukupo-dark);
    border-radius: 0;

    background: var(--jukupo-yellow);

    color: var(--jukupo-dark);

    font-family: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow: 6px 6px 0 var(--jukupo-dark);

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


.jukupo-contact-form .jukupo-submit:hover,
.jukupo-contact-form .jukupo-submit:focus-visible {
    transform: translate(3px, 3px);

    box-shadow: 3px 3px 0 var(--jukupo-dark);
}


.jukupo-contact-form .jukupo-submit:active {
    transform: translate(6px, 6px);

    box-shadow: none;
}


/* Contact Form 7 Meldungen
---------------------------------------------------------- */

.jukupo-contact-form .wpcf7-not-valid-tip {
    display: block;

    margin-top: 7px;

    color: #b42318;

    font-size: 0.9rem;
    font-weight: 600;
}


.wpcf7 form .wpcf7-response-output {
    margin: 28px 0 0;
    padding: 16px 20px;

    border: 3px solid var(--jukupo-dark);

    background: var(--jukupo-white);

    color: var(--jukupo-dark);

    font-weight: 600;
}


/* Fehler */

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #b42318;
}


/* Erfolgreich */

.wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--jukupo-yellow);

    box-shadow: 5px 5px 0 var(--jukupo-dark);
}


/* Spinner */

.jukupo-contact-form .wpcf7-spinner {
    margin-left: 15px;
}


/* Mobile
---------------------------------------------------------- */

@media (max-width: 700px) {

    .jukupo-form-row--2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .jukupo-form-field {
        margin-bottom: 22px;
    }

    .jukupo-contact-form input[type="text"],
    .jukupo-contact-form input[type="email"],
    .jukupo-contact-form select,
    .jukupo-contact-form textarea {
        padding: 14px 15px;
    }

    .jukupo-contact-form .jukupo-submit {
        width: 100%;
    }

}