/**
 * File: custom-mec-style.css
 * Created At: 1/16/25 | 16:16
 * Author: niklasmeyer
 * Description: [Kurze Beschreibung der Datei]
 * Version: [Version]
 * Last Updated: [Datum]
 * Project: permatrade.DEV
 */


/* =================================================================
 * MEC singele event page
   ================================================================= */

:root {
    --mec-heading-font-family: "Open Sans"; /* nm | 16-01-2025 */
    /*--mec-paragraph-font-family: "Open Sans";*/
    /*--mec-color-skin: #003872;*/
    /*--mec-color-skin-rgba-1: rgba(0, 56, 114, .25);*/
    /*--mec-color-skin-rgba-2: rgba(0, 56, 114, .5);*/
    /*--mec-color-skin-rgba-3: rgba(0, 56, 114, .75);*/
    /*--mec-color-skin-rgba-4: rgba(0, 56, 114, .11);*/
    /*--mec-container-normal-width: 1024px;*/
    /*--mec-container-large-width: 767px;*/
    /*--mec-title-color: #003872;*/
    /*--mec-title-color-hover: #003872;*/
    /*--mec-content-color: #161C2D;*/
    /*--mec-fes-main-color: #40D9F1;*/
    /*--mec-fes-main-color-rgba-1: rgba(64, 217, 241, 0.12);*/
    /*--mec-fes-main-color-rgba-2: rgba(64, 217, 241, 0.23);*/
    /*--mec-fes-main-color-rgba-3: rgba(64, 217, 241, 0.03);*/
    /*--mec-fes-main-color-rgba-4: rgba(64, 217, 241, 0.3);*/
    /*--mec-fes-main-color-rgba-5: rgb(64 217 241 / 7%);*/
    /*--mec-fes-main-color-rgba-6: rgba(64, 217, 241, 0.2);*/
    /*--mec-fluent-main-color: #ADE7FF;*/
    /*--mec-fluent-main-color-rgba-1: rgba(173, 231, 255, 0.3);*/
    /*--mec-fluent-main-color-rgba-2: rgba(173, 231, 255, 0.8);*/
    /*--mec-fluent-main-color-rgba-3: rgba(173, 231, 255, 0.1);*/
    /*--mec-fluent-main-color-rgba-4: rgba(173, 231, 255, 0.2);*/
    /*--mec-fluent-main-color-rgba-5: rgba(173, 231, 255, 0.7);*/
    /*--mec-fluent-main-color-rgba-6: rgba(173, 231, 255, 0.7);*/
    /*--mec-fluent-bold-color: #00ACF8;*/
    /*--mec-fluent-bg-hover-color: #EBF9FF;*/
    /*--mec-fluent-bg-color: #F5F7F8;*/
    /*--mec-fluent-second-bg-color: #D6EEF9;*/
}

.mec-container .mec-wrap {

    /* MEC breadcrumb */

    .mec-breadcrumbs .mec-address *:not(i) {
        font-family: var(--e-global-typography-sk_type_12-font-family), Sans-serif;
        font-size: var(--e-global-typography-sk_type_12-font-size);
        font-weight: var(--e-global-typography-sk_type_12-font-weight);
        line-height: var(--e-global-typography-sk_type_12-line-height);
    }

    /* mec-single-title */

    .mec-event-content {
        display: flex;
        flex-direction: column;
        gap: 24px;

        .mec-single-title {
            font-family: var(--e-global-typography-sk_type_3-font-family), Sans-serif;
            font-size: var(--e-global-typography-sk_type_3-font-size);
            line-height: var(--e-global-typography-sk_type_3-line-height);
            color: var(--e-global-color-primary);
        }

        /* MEC event content */

        .mec-single-event-description.mec-events-content * {

            font-family: var(--e-global-typography-sk_type_10-font-family), Sans-serif;
            font-size: var(--e-global-typography-sk_type_10-font-size);
            font-weight: var(--e-global-typography-sk_type_10-font-weight);
            line-height: var(--e-global-typography-sk_type_10-line-height);
            color: var(--e-global-color-text);
        }
    }

    .mec-event-meta {
        i:not(.mec-fa-angle-right):before {
            display: inline-block;
            height: 24px;
        }

        h3 {
            font-family: var(--e-global-typography-sk_type_16-font-family), Sans-serif;
            font-size: var(--e-global-typography-sk_type_16-font-size);
            font-weight: var(--e-global-typography-sk_type_16-font-weight);
            line-height: var(--e-global-typography-sk_type_16-line-height);
        }

        dd {
            span, a, abbr {
                font-family: var(--e-global-typography-sk_type_12-font-family), Sans-serif;
                font-size: var(--e-global-typography-sk_type_12-font-size);
                font-weight: var(--e-global-typography-sk_type_12-font-weight);
                line-height: var(--e-global-typography-sk_type_12-line-height);
            }
        }
    }

}


/* =================================================================
 * MEC custom events display shortcode
 * ================================================================= */

#um_custom-event-list {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    container-name: um-event-list;
    container-type: inline-size;
    gap: 1rem;
    padding-inline-start: 0;

    .um_custom-event-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 8px 16px;
        border-radius: 4px;
        background: var(--e-global-color-sk_color_2);

        .um_event-info, .um_event-details {
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 1rem;
            min-width: 0;
        }

        .um_event-info {
            flex: 1 1 auto;
        }

        span, a, h3 {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.4;
            margin: 0;
            color: var(--e-global-color-primary);
            word-break: break-word;
        }

        .um_event-title {
            min-width: 0;
        }

        a.um_event-link {
            padding: 10px 16px;
            text-decoration: none;
            color: white !important;
            border-radius: 4px;
            background: #ACAEC2;
            white-space: nowrap;
        }

        .um_event-date {
            margin-inline-end: 0;
            flex: 0 0 auto;
        }

        .um_event-location {
            font-weight: 400;
            color: black;
        }
    }
}

.um_events-all {
    font-size: 14px;
    text-align: right;
    text-decoration: underline;
    padding-block-start: 1rem;

    a {
        color: #000000 !important;
    }
}

@container um-event-list (max-width: 640px) {
    #um_custom-event-list .um_custom-event-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    #um_custom-event-list .um_custom-event-item .um_event-info,
    #um_custom-event-list .um_custom-event-item .um_event-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        width: 100%;
    }

    #um_custom-event-list .um_custom-event-item a.um_event-link {
        align-self: stretch;
        text-align: center;
    }
}