/*
 * Theme Name: JuKomm Diakonie Württemberg
 * Description: JuKomm Wordpress Theme
 * Author: BOLD & EPIC CODE GMBH
*/

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    /* montserrat-300 - latin */
    @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 300;
        src: url("../../assets/fonts/montserrat-v29-latin-300.eot"); /* IE9 Compat Modes */
        src: url("../../assets/fonts/montserrat-v29-latin-300.eot?#iefix")
        format("embedded-opentype"),
            /* IE6-IE8 */ url("../../assets/fonts/montserrat-v29-latin-300.woff2")
        format("woff2"),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url("../../assets/fonts/montserrat-v29-latin-300.woff") format("woff"),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url("../../assets/fonts/montserrat-v29-latin-300.ttf") format("truetype"),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url("../../assets/fonts/montserrat-v29-latin-300.svg#Montserrat")
        format("svg"); /* Legacy iOS */
    }
    /* montserrat-regular - latin */
    @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 400;
        src: url("../../assets/fonts/montserrat-v29-latin-regular.eot"); /* IE9 Compat Modes */
        src: url("../../assets/fonts/montserrat-v29-latin-regular.eot?#iefix")
        format("embedded-opentype"),
            /* IE6-IE8 */ url("../../assets/fonts/montserrat-v29-latin-regular.woff2")
        format("woff2"),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url("../../assets/fonts/montserrat-v29-latin-regular.woff") format("woff"),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url("../../assets/fonts/montserrat-v29-latin-regular.ttf")
        format("truetype"),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url("../../assets/fonts/montserrat-v29-latin-regular.svg#Montserrat")
        format("svg"); /* Legacy iOS */
    }
    /* montserrat-500 - latin */
    @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 500;
        src: url("../../assets/fonts/montserrat-v29-latin-500.eot"); /* IE9 Compat Modes */
        src: url("../../assets/fonts/montserrat-v29-latin-500.eot?#iefix")
        format("embedded-opentype"),
            /* IE6-IE8 */ url("../../assets/fonts/montserrat-v29-latin-500.woff2")
        format("woff2"),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url("../../assets/fonts/montserrat-v29-latin-500.woff") format("woff"),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url("../../assets/fonts/montserrat-v29-latin-500.ttf") format("truetype"),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url("../../assets/fonts/montserrat-v29-latin-500.svg#Montserrat")
        format("svg"); /* Legacy iOS */
    }
    /* montserrat-600 - latin */
    @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 600;
        src: url("../../assets/fonts/montserrat-v29-latin-600.eot"); /* IE9 Compat Modes */
        src: url("../../assets/fonts/montserrat-v29-latin-600.eot?#iefix")
        format("embedded-opentype"),
            /* IE6-IE8 */ url("../../assets/fonts/montserrat-v29-latin-600.woff2")
        format("woff2"),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url("../../assets/fonts/montserrat-v29-latin-600.woff") format("woff"),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url("../../assets/fonts/montserrat-v29-latin-600.ttf") format("truetype"),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url("../../assets/fonts/montserrat-v29-latin-600.svg#Montserrat")
        format("svg"); /* Legacy iOS */
    }
    /* montserrat-700 - latin */
    @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 700;
        src: url("../../assets/fonts/montserrat-v29-latin-700.eot"); /* IE9 Compat Modes */
        src: url("../../assets/fonts/montserrat-v29-latin-700.eot?#iefix")
        format("embedded-opentype"),
            /* IE6-IE8 */ url("../../assets/fonts/montserrat-v29-latin-700.woff2")
        format("woff2"),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url("../../assets/fonts/montserrat-v29-latin-700.woff") format("woff"),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url("../../assets/fonts/montserrat-v29-latin-700.ttf") format("truetype"),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url("../../assets/fonts/montserrat-v29-latin-700.svg#Montserrat")
        format("svg"); /* Legacy iOS */
    }
    /* montserrat-800 - latin */
    @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 800;
        src: url("../../assets/fonts/montserrat-v29-latin-800.eot"); /* IE9 Compat Modes */
        src: url("../../assets/fonts/montserrat-v29-latin-800.eot?#iefix")
        format("embedded-opentype"),
            /* IE6-IE8 */ url("../../assets/fonts/montserrat-v29-latin-800.woff2")
        format("woff2"),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url("../../assets/fonts/montserrat-v29-latin-800.woff") format("woff"),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url("../../assets/fonts/montserrat-v29-latin-800.ttf") format("truetype"),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url("../../assets/fonts/montserrat-v29-latin-800.svg#Montserrat")
        format("svg"); /* Legacy iOS */
    }
    /* montserrat-900 - latin */
    @font-face {
        font-family: "Montserrat";
        font-style: normal;
        font-weight: 900;
        src: url("../../assets/fonts/montserrat-v29-latin-900.eot"); /* IE9 Compat Modes */
        src: url("../../assets/fonts/montserrat-v29-latin-900.eot?#iefix")
        format("embedded-opentype"),
            /* IE6-IE8 */ url("../../assets/fonts/montserrat-v29-latin-900.woff2")
        format("woff2"),
            /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
        url("../../assets/fonts/montserrat-v29-latin-900.woff") format("woff"),
            /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
        url("../../assets/fonts/montserrat-v29-latin-900.ttf") format("truetype"),
            /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
        url("../../assets/fonts/montserrat-v29-latin-900.svg#Montserrat")
        format("svg"); /* Legacy iOS */
    }

    body {
        @apply font-montserrat;
    }

    body.logged-in header {
        @apply top-[32px];
    }
}

@layer components {
    .bb-container {
        @apply w-[90.7%] lg:w-[85.42%] mx-auto;
    }
}

/* ===========================
   WPFORMS FORM SECTION STYLES
   =========================== */

/* Reset WPForms container defaults */
.form-wrapper .wpforms-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Field container: full width, 2-col on lg+ */
.form-wrapper .wpforms-field-container {
    width: 100%;
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
    overflow: visible;
}

@media (min-width: 1024px) {
    .form-wrapper .wpforms-field-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Fix HTML order: field_5 (Kinder) left, field_7 (Begleitperson) right */
@media (min-width: 1024px) {
    #wpforms-54-field_5-container { grid-column: 1; grid-row: 3; }
    #wpforms-54-field_7-container { grid-column: 2; grid-row: 3; }
    #wpforms-54-field_9-container { grid-column: 1 / -1; }
}

/* Honeypot field: hidden but in DOM for spam protection */
#wpforms-54-field_10-container {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}

/* Top-level field vertical spacing */
.form-wrapper .wpforms-field-container > .wpforms-field {
    padding-top: 28px;
}

.form-wrapper .wpforms-container .wpforms-field {
    padding-bottom: 0;
}

.form-wrapper .wpforms-container .wpforms-field-repeater-display-rows {
    @apply !pt-[40px];
}

/* Column spacing via padding (no column-gap keeps border-bottom continuous) */
@media (min-width: 1024px) {
    #wpforms-54-field_1-container,
    #wpforms-54-field_3-container,
    #wpforms-54-field_5-container { padding-right: 80px; }

    #wpforms-54-field_2-container,
    #wpforms-54-field_4-container,
    #wpforms-54-field_7-container { padding-left: 80px; }
}

/* Row separators: full-width line after rows 1, 2, 3 */

/* Labels: normal flow above the underline */
.form-wrapper .wpforms-field-label {
    color: white !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
}

.form-wrapper .wpforms-required-label {
    color: white !important;
}

/* Override WPForms field size classes */
.form-wrapper .wpforms-field-medium,
.form-wrapper .wpforms-field-large,
.form-wrapper .wpforms-field-small {
    width: 100% !important;
    max-width: 100% !important;
}

/* Input: underline only, no box border */
.form-wrapper .wpforms-field input[type="text"],
.form-wrapper .wpforms-field input[type="number"],
.form-wrapper .wpforms-field input[type="email"],
.form-wrapper .wpforms-render-modern .wpforms-field input[type="text"],
.form-wrapper .wpforms-render-modern .wpforms-field input[type="email"] {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid white !important;
    color: #ffffff !important;
    padding: 10px 0 !important;
    font-size: 16px !important;
    font-family: inherit !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: auto !important;
}

.form-wrapper .wpforms-field input[type="text"]:focus,
.form-wrapper .wpforms-field input[type="number"],
.form-wrapper .wpforms-field input[type="email"]:focus {
    border-bottom-color: white !important;
}

/* Repeater: flex column so default row stays at bottom, clones appear above */
.form-wrapper .wpforms-field-repeater {
    display: flex;
    flex-direction: column;
}

.form-wrapper .wpforms-field-repeater > .wpforms-field-layout-rows {
    order: 9999;
}

/* Repeater: show h3 title next to + button */
.form-wrapper .wpforms-field-repeater h3.wpforms-field-label {
    color: white !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    position: static !important;
}

.form-wrapper .wpforms-layout-row {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    justify-content: start !important;
    flex-direction: row !important;
}

.form-wrapper .wpforms-layout-column {
    flex: 1;
}

/* Default row (direct child of repeater): hide the input column — only + button + h3 visible */
.form-wrapper .wpforms-field-repeater > .wpforms-field-layout-rows .wpforms-layout-column {
    display: none !important;
}

/* Cloned rows: show the input column */
.form-wrapper .wpforms-field-repeater-clone-wrap .wpforms-layout-column {
    display: block !important;
    flex: 1 !important;
}

/* Cloned rows: show the field label above the input */
.form-wrapper .wpforms-field-repeater-clone-wrap .wpforms-field-label {
    display: block !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    margin-bottom: 10px !important;
}

/* Cloned rows: show the input */
.form-wrapper .wpforms-field-repeater-clone-wrap input[type="text"] {
    display: block !important;
}

/* Cloned rows: hide the entire buttons container — default row handles add/remove */
.form-wrapper .wpforms-field-repeater-clone-wrap .wpforms-field-repeater-display-rows-buttons {
    display: none !important;
}

/* Default row buttons: flex row with + and - */
.form-wrapper .wpforms-field-repeater-display-rows-buttons {
    order: -1;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: static !important;
    top: auto !important;
    padding-top: 0 !important;
}

.form-wrapper .wpforms-field-repeater-button-add,
.form-wrapper .wpforms-field-repeater-button-remove {
    background: transparent !important;
    border: none !important;
    color: white !important;
    opacity: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.form-wrapper div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-repeater .wpforms-field-layout-rows .wpforms-field-repeater-display-rows-buttons button.wpforms-field-repeater-button-add:hover,
.form-wrapper .wpforms-field-repeater-button-remove:hover {
    opacity: 1 !important;
    color: white !important;
}

/* Hide original SVGs, replace with text */
.form-wrapper .wpforms-field-repeater-button-add svg,
.form-wrapper .wpforms-field-repeater-button-remove svg {
    display: none !important;
}

.form-wrapper div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-repeater .wpforms-field-layout-rows .wpforms-field-repeater-display-rows-buttons button.wpforms-field-repeater-button-add.wpforms-disabled,
.form-wrapper div.wpforms-container.wpforms-container-full .wpforms-form .wpforms-field-repeater .wpforms-field-layout-rows .wpforms-field-repeater-display-rows-buttons button.wpforms-field-repeater-button-remove.wpforms-disabled {
    opacity: 1 !important;
    cursor: pointer !important;
}

.form-wrapper .wpforms-field-repeater-button-add::before {
    content: '+';
    color: white !important;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    opacity: 1 !important;
}

.form-wrapper .wpforms-field-repeater-button-remove::before {
    content: '−';
    color: #ffffff !important;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    opacity: 1 !important;
}

/* Remove button: hidden until entries exist, shown via JS adding wpforms-repeater-active */
.form-wrapper .wpforms-field-repeater > .wpforms-field-layout-rows .wpforms-field-repeater-button-remove {
    display: none !important;
}

.form-wrapper .wpforms-field-repeater > .wpforms-field-layout-rows .wpforms-field-repeater-button-remove.wpforms-repeater-active {
    display: flex !important;
    cursor: pointer !important;
    opacity: 1 !important;
}

/* Checkbox */
.form-wrapper .wpforms-field-checkbox {
    @apply !pt-[43px] lg:!pt-[77px] !pb-[77px];
}

.form-wrapper .wpforms-field-checkbox fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.form-wrapper .wpforms-field-checkbox legend {
    display: none;
}

.form-wrapper .wpforms-field-checkbox ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.form-wrapper .wpforms-field-checkbox li {
    @apply flex items-start lg:items-center;
}

/* Hide native checkbox — use label::before for the circle */
.form-wrapper .wpforms-field-checkbox input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.form-wrapper .wpforms-field-checkbox .wpforms-field-label-inline {
    position: relative !important;
    padding-left: 46px !important;
    cursor: pointer !important;
}

.form-wrapper .wpforms-field-checkbox .wpforms-field-label-inline::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    border: 1px solid white !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

.form-wrapper .wpforms-field-checkbox input[type="checkbox"]:checked + .wpforms-field-label-inline::before {
    border-color: white !important;
}

.form-wrapper .wpforms-field-checkbox input[type="checkbox"]:checked + .wpforms-field-label-inline::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 12px !important;
    height: 12px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M1 5.5L5 9.5L13 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
}

.form-wrapper .wpforms-field-label-inline {
    color: white !important;
    font-size: 15px !important;
    font-weight: 400 !important;
}

/* Submit container */
.form-wrapper .wpforms-submit-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Submit button */
.form-wrapper .wpforms-submit {
    @apply !text-[28px] lg:!text-[40px] !font-bold !py-[35px] !w-full lg:!w-fit lg:!px-[110px];
    background: transparent !important;
    border: 10px solid #B1D600 !important;
    color: white !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border-radius: 0 !important;
    height: auto !important
}

.form-wrapper .wpforms-submit:hover {
    background: transparent !important;
}

/* Validation errors */
.form-wrapper label.wpforms-error {
    color: #ff6b6b;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Spinner */
.form-wrapper .wpforms-submit-spinner {
    display: none;
}