/**
 * The Events Calendar - customization
 *
 * Enige plek voor TEC-styling. Geladen via functions.php (handle oo-tec).
 *
 * Opbouw:
 *   1. Tokens          - lettertypes + schaal (= thema), die TEC zelf uitleest
 *   2. Typografie      - koppen sans, lopende tekst serif (de enige 2 regels)
 *   3. Basis           - links, subscribe-dropdown
 *   4. Views           - summary (serie), list, widgets
 *   5. Single          - event- en serie-detail
 *   6. Shortcode (ECS) - tecshortcode/*.php
 *
 * Regel: font-family en font-size komen uit 1 en 2. In 4-6 alleen layout.
 * Schaal volgt Newspaper: body 18px Georgia, koppen Rubik 500.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
    /* op :root: ook #tribe-events (legacy single) valt buiten .tribe-common */
    --oo-font-sans: var(--td_default_google_font_1), sans-serif;
    --oo-font-serif: Georgia, Times, "Times New Roman", serif;
}

.tribe-common,
.tribe-events,
.tribe-events-single,
#tribe-events {
    --tec-font-family-serif: var(--oo-font-serif);
    --tec-font-family-sans-serif: var(--oo-font-sans);
    --tec-font-weight-regular: 500;
    --tec-font-weight-bold: 600;

    /*
     * Schaal = Newspaper: 3 is lopende tekst (18px), 5 = h3, 9 = paginatitel.
     * TEC-classes (.tribe-common-h1..h8, -b1..b3) lezen deze tokens zelf.
     */
    --tec-font-size-0: 0.75rem;    /* 12 */
    --tec-font-size-1: 0.875rem;   /* 14 */
    --tec-font-size-2: 1rem;       /* 16 */
    --tec-font-size-3: 1.125rem;   /* 18 */
    --tec-font-size-4: 1.25rem;    /* 20 */
    --tec-font-size-5: 1.375rem;   /* 22 */
    --tec-font-size-6: 1.5rem;     /* 24 */
    --tec-font-size-7: 1.625rem;   /* 26 */
    --tec-font-size-8: 1.875rem;   /* 30 */
    --tec-font-size-9: 2.375rem;   /* 38 */
    --tec-font-size-10: 2.75rem;   /* 44 */

    --tec-color-text-secondary: #000000;
    --tec-color-text-event-date: var(--td_text_color);
    --tec-color-accent-primary: var(--td_theme_color);
    --tec-grid-gutter-page-small: 0;
}

/* Series-overzicht: breedte datum-kolom */
.tribe-common.tribe-events-pro .tribe-events-pro-summary__event-wrapper {
    --tec-grid-gutter-small-half-negative: 0;
}

/* ==========================================================================
   2. Typografie
   Scope: TEC v2 (.tribe-common), serie/pro, legacy single (#tribe-events).
   ========================================================================== */
:is(.tribe-common, .tribe-events, .tribe-events-single, #tribe-events),
:is(.tribe-common, .tribe-events, .tribe-events-single, #tribe-events) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--oo-font-sans);
}

/*
 * TEC-typografieklassen -> schaal. TEC's eigen schaal is voor 14px body; hier
 * volgen ze de koppen van het thema. Geldt voor alle views en widgets.
 * Dubbele .tribe-events-class: wint van TEC's .tribe-common--breakpoint-*-selectors.
 */
.tribe-common.tribe-events.tribe-events :is(.tribe-common-h1, .tribe-common-h1--min-medium) { font-size: var(--tec-font-size-9); }
.tribe-common.tribe-events.tribe-events :is(.tribe-common-h2, .tribe-common-h2--min-medium) { font-size: var(--tec-font-size-8); }
.tribe-common.tribe-events.tribe-events :is(.tribe-common-h3, .tribe-common-h3--min-medium) { font-size: var(--tec-font-size-6); }
.tribe-common.tribe-events.tribe-events :is(.tribe-common-h4, .tribe-common-h4--min-medium) { font-size: var(--tec-font-size-5); }
.tribe-common.tribe-events.tribe-events .tribe-common-h7 {
    font-size: var(--tec-font-size-2);
    font-weight: var(--tec-font-weight-bold);
}
.tribe-common.tribe-events.tribe-events :is(.tribe-common-h5, .tribe-common-h6) {
    font-size: var(--tec-font-size-4);
    font-weight: var(--tec-font-weight-bold);
}
.tribe-common.tribe-events.tribe-events :is(.tribe-common-h8, .tribe-common-h8--min-medium) {
    font-size: var(--tec-font-size-2);
    font-weight: var(--tec-font-weight-bold);
}
.tribe-common.tribe-events.tribe-events :is(.tribe-common-h5--min-medium, .tribe-common-h6--min-medium, .tribe-common-h7--min-medium) {
    font-size: var(--tec-font-size-4);
    font-weight: var(--tec-font-weight-bold);
}
.tribe-common.tribe-events.tribe-events :is(.tribe-common-b1, .tribe-common-b1--min-medium) { font-size: var(--tec-font-size-3); }
.tribe-common.tribe-events.tribe-events :is(.tribe-common-b2, .tribe-common-b2--min-medium,
                                           .tribe-common-b3, .tribe-common-b3--min-medium) { font-size: var(--tec-font-size-2); }

/* Elementen zonder type-class */
.tribe-common.tribe-events.tribe-events button.tribe-events-c-top-bar__datepicker-button {
    font-size: var(--tec-font-size-4);
    font-weight: var(--tec-font-weight-bold);
}

.tribe-common.tribe-events-pro .tribe-events-pro-summary__event-date-tag-weekday {
    font-size: var(--tec-font-size-2);
}

:is(.tribe-common, .tribe-events, .tribe-events-single, #tribe-events) :is(p, .tribe-events-content li) {
    font-family: var(--oo-font-serif);
    font-size: var(--tec-font-size-3);
    line-height: 1.45;
}

/* ==========================================================================
   3. Basis
   ========================================================================== */
.tribe-common a,
.tribe-common a:active,
.tribe-common a:focus,
.tribe-common a:hover,
.tribe-common a:visited {
    color: var(--tec-color-accent-primary) !important;
    outline: 0;
    text-decoration: none;
}

.tribe-events-c-subscribe-dropdown__container {
    display: none !important;
}

.tribe-common.tribe-events .tribe-events-l-container {
    padding: 0;
}

.tribe-common .tribe-events-after-html {
    margin-top: 2rem;
}

/* ==========================================================================
   4. Views
   ========================================================================== */

/* --- Toolbar (prev/next, Vandaag, datumkiezer, view-selector): één lijn --- */
.tribe-common.tribe-events.tribe-events :is(.tribe-events-c-top-bar__nav-list,
                                           .tribe-events-c-top-bar__nav-list-item) {
    display: flex;
    align-items: center;
    margin: 0; /* thema geeft ul/li marge */
}

/* Events-bar bevat alleen de view-selector, en er is maar 1 view */
.tribe-common.tribe-events .tribe-events-header__events-bar {
    display: none;
}

/* --- Summary (serie-overzicht) --- */
.tribe-common.tribe-events-pro .tribe-events-pro-summary__event-date-tag {
    width: 100px;
}

.tribe-common.tribe-events-pro .tribe-events-pro-summary__event-date-tag-datetime {
    padding-top: 0;
}

.tribe-common.tribe-events-pro .tribe-events-pro-summary__event-datetime {
    font-weight: 500;
}

.tribe-common.tribe-events-pro .tribe-events-pro-summary__event-cost {
    margin: 0;
}

.tribe-common.tribe-events-pro .tribe-events-pro-summary__event-datetime-wrapper,
.tribe-common.tribe-events-pro .tribe-events-pro-summary__event-title {
    margin: 0;
}

.tribe-events-pro-summary__event-header .tribe-events-c-small-cta__text {
    background-color: var(--td_header_color, #888888);
    color: #ffffff;
    padding: 0 0.25rem;
}

.tribe-events-pro-summary .tribe-events-c-small-cta__price {
    font-weight: 400;
}

.tribe-events-pro.tribe-common .tribe-events-pro-summary__event-row {
    border: 0;
    padding: 0;
    margin: 0;
}

.tribe-common.tribe-events-pro .tribe-events-pro-summary__event {
    border-bottom: 1px solid #888;
    padding-bottom: 1rem;
    width: 100%;
    line-height: inherit;
    margin-bottom: 10px;
}

/* --- List --- */
.tribe-events-calendar-list__event-description.tribe-common-b2 p {
    margin: 0.25rem 0;
}

/* --- Page builder tekstkolom --- */
.page-template-page-pagebuilder-title .wpb_text_column .tribe-common p:last-child {
    margin-bottom: 0.25rem;
}

/* --- Widgets --- */
.tribe-common.tribe-events-widget .tribe-events-widget-events-list__event-date-tag-datetime {
    text-align: left;
}

.tribe-common.tribe-events-widget .tribe-events-widget-events-list__event-date-tag {
    width: var(--tec-spacer-8);
}

/* ==========================================================================
   5. Single
   ========================================================================== */

/* --- Event: meta onder details --- */
.single-tribe_events .tribe-events-event-meta {
    color: var(--tec-color-text-primary);
}

.single-tribe_events .tribe-events-event-meta .tribe-events-meta-group .tribe-events-single-section-title {
    display: none;
}

.single-tribe_events .tribe-events-event-meta .tribe-events-meta-group h2 {
    margin-top: 0;
}

.single-tribe_events .tribe-events-event-meta .tribe-events-meta-item {
    margin-bottom: var(--tec-spacer-3);
    margin-left: 0;
}

.single-tribe_events .tribe-events-event-meta .tribe-events-meta-item.tribe-venue {
    margin-bottom: 0;
}

.single-tribe_events .tribe-events-event-meta .tribe-events-meta-item abbr[title] {
    border: 0;
    text-decoration: none;
}

.single-tribe_events .tribe-events-event-meta .tribe-events-meta-label {
    line-height: initial;
}

.single-tribe_events .tribe-events-event-meta .tribe-events-gmap {
    display: block;
}

.single-tribe_events .tribe-events-schedule {
    font-size: var(--tec-font-size-3);
    margin: 0 0 0.5rem 0;
}

@media (min-width: 768px) {
    .single-tribe_events .tribe-events-event-meta .tribe-events-meta-group {
        padding: var(--tec-spacer-3) 0;
        width: auto;
        flex: 1 0 200px;
    }
}

/* --- Serie --- */

/* Paginatitel van serie = .post header .entry-title (serie-pagina's hebben geen .post-class) */
.single-tribe_event_series .td-post-header .entry-title {
    font-size: 2.375rem; /* 38px; --tec-* tokens bestaan niet buiten .tribe-common */
    font-weight: 500;
    line-height: 1.16;
}

@media (max-width: 1018px) { /* breakpoint van het thema */
    .single-tribe_event_series .td-post-header .entry-title {
        font-size: 2rem;
        line-height: 1.125;
    }
}

.single-tribe_event_series .tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-summary__event-details {
    width: 100%;
}

.single-tribe_event_series .tribe-common--breakpoint-medium.tribe-events-pro .tribe-events-pro-summary__event-header {
    flex-direction: column;
    align-items: flex-start;
}

.single-tribe_event_series .tribe-common.tribe-events-pro .tribe-events-pro-summary__event {
    border: 0;
}

/* ==========================================================================
   6. Shortcode (Events Calendar Shortcode, tecshortcode/*.php)
   ========================================================================== */
/* Titel zoals thema-titels (.td-module-title) */
.ecs-events .entry-title {
    font-family: var(--oo-font-sans);
    font-size: var(--tec-font-size-4);
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 0.25em;

    a, a:hover {
        color: var(--td_text_color);
    }

    a:hover {
        color: var(--td_theme_color);
    }
}

.ecs-events.grouped {

    .ecs-venue-info {
        font-family: var(--oo-font-sans);
        font-size: var(--tec-font-size-2);
    }

    .ecs-date {
        color: var(--td_theme_color);
    }

    h3 {
        margin: 0;
        font-size: var(--tec-font-size-5);
        font-weight: var(--tec-font-weight-bold);

        a, a:hover {
            color: var(--td_theme_color);
        }
    }
}

.wpb_wrapper .ecs-pagination :is(.ecs-next, .ecs-prev) button {
    font-family: inherit;
    border-radius: 0;
    border: 0;
    background-color: var(--td_theme_color);
    color: #ffffff;
}

/* ==========================================================================
   7. Legacy v1 (#tribe-events): koppen
   ========================================================================== */
#tribe-events :is(h1, h2, h3, h4, h5, h6) {
    color: var(--td_text_color);
    font-weight: 600;
    margin: 0 0 0.75em 0;
}

/* = .post header .entry-title (Newspaper: 38px/44px, 500, #111) */
#tribe-events h1 {
    font-size: var(--tec-font-size-9);
    line-height: 1.16;
    margin-bottom: 0.25em;
}