/* ==========================================================================
   Christ Salvation Ministry — single event styling
   Eigen huisstijl: gouden titels (Classico) op een pastelblauwe/witte basis,
   afgeronde kaarten. Losstaand van andere klant-CSS (discotrain-mec.css).
   ========================================================================== */

.custom-events-single-event {
    --csm-gold: #A9772F;
    --csm-gold-deep: #8A5F22;
    --csm-blue: #EAF3FB;
    --csm-blue-100: #E3F1FA;
    --csm-ink: #20262B;
    --csm-ink-soft: #4B5560;
    --csm-radius: 22px;

    background: #fff;
    /* Font-family + font-size hieronder (--csm-font-*/--csm-size-*/--csm-line-*)
       worden runtime gezet door custom_events_enqueue_typography_vars() op
       basis van Betheme's Theme Options > Typography. De waarde hier na de
       komma is alleen een fallback voor als die functie/thema-optie om wat
       voor reden dan ook niet beschikbaar is. */
    font-family: var(--csm-font-content, Georgia, 'Times New Roman', serif);
    color: var(--csm-ink-soft);
    padding: 40px 6vw 80px;
}

.custom-events-single-wrap {

    margin: 0 auto;
}

.custom-events-breadcrumbs {
    max-width: 860px;
    margin: 0 auto 20px;
}

/* Hero */
.custom-events-hero {
    max-width: 1100px;
    margin: 0 auto 36px;
    min-height: 380px;
    border-radius: var(--csm-radius);
    background-color: var(--csm-blue-100);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(20, 40, 60, .14);
}
.custom-events-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 20, 25, 0) 35%, rgba(15, 15, 20, .78) 100%);
}
.custom-events-hero-inner {
    position: relative;
    z-index: 1;
    padding: 42px 44px;
}
.custom-events-hero .custom-events-eyebrow {
    color: #fff;
    opacity: .92;
}
.custom-events-hero .custom-events-single-title {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
}

/* Hero fallback: geen hero-afbeelding en geen featured image ingesteld */
.custom-events-hero--noimage {
    background-image: none !important;
    background: linear-gradient(135deg, var(--csm-blue), var(--csm-blue-100));
    min-height: 260px;
}
.custom-events-hero--noimage::before {
    display: none;
}
.custom-events-hero--noimage .custom-events-eyebrow {
    color: var(--csm-gold-deep);
    opacity: 1;
}
.custom-events-hero--noimage .custom-events-single-title {
    color: var(--csm-gold);
    text-shadow: none;
}

/* Eyebrow + title */
.custom-events-eyebrow {
    display: inline-block;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    color: var(--csm-gold-deep);
    margin-bottom: 10px;
}

.custom-events-single-title {
    /* Zelfde titel-typografie (font + grootte) als Betheme's eigen paginatitel
       (Theme Options > Typography > Family/Size > Page Title). */
    font-family: var(--csm-font-title, 'Playfair Display', Georgia, serif);
    color: var(--csm-gold);
    font-weight: 600;
    font-size: var(--csm-size-title, 40px);
    line-height: var(--csm-line-title, 1.15);
    margin: 0;
}

/* Cards */
.custom-events-card {
    background: var(--csm-blue);
    border-radius: var(--csm-radius);
    padding: 26px 30px;
    margin-bottom: 20px;
}

.custom-events-card h2 {
    /* Zelfde heading-lettertype als Betheme's "Big Headings"-instelling.
       De grootte blijft bewust een compacte, vaste waarde: dit zijn kleine
       icoon+label-koppen in een kaart, niet volwaardige content-koppen —
       de thema-brede H2-grootte (vaak 40-50px) zou hier niet passen. */
    font-family: var(--csm-font-heading, 'Playfair Display', Georgia, serif);
    color: var(--csm-gold);
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-events-card h6 {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--csm-gold-deep);
    margin: 0 0 4px;
}

.custom-events-icon {
    color: var(--csm-gold);
    flex-shrink: 0;
}

/* Facts card (datum / tijd / locatie) */
.custom-events-facts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.custom-events-facts-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.custom-events-facts-list span {
    color: var(--csm-ink);
    font-size: 16px;
}
.custom-events-address {
    color: var(--csm-ink-soft);
    font-size: 14px;
}

/* Voorganger card */
.custom-events-voorganger-card {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Content card (dienstinformatie) */
.custom-events-content-card {
    background: #fff;
    border: 1px solid var(--csm-blue-100);
}
/* Volledige klassenketen (zoals de markup 'm ook heeft: mec-single-event-
   description + mec-events-content + custom-events-event-content) zodat deze
   regel altijd wint van MEC/Betheme's eigen, minder specifieke opmaak voor
   diezelfde content-tekst. Waarden komen bewust via var(...) uit Betheme's
   theme settings (--csm-font-content / --csm-size-content / --csm-line-content,
   zie custom-events-typography.php) i.p.v. hier vaste getallen neer te
   zetten — anders lopen ze niet meer automatisch mee als iemand later de
   thema-typografie aanpast.

   BELANGRIJK: MEC's eigen frontend.css bevat o.a.
   ".mec-wrap p { font-family: var(--mec-paragraph-font-family), sans-serif;
   font-weight: 300; }" en ".mec-wrap :not(.elementor-widget-container) > p
   { font-size: 14px; }" — en omdat onze wrapper zelf ook de class "mec-wrap"
   heeft (nodig voor MEC), erven de <p>-tags van the_content() dat mee. Een
   font-size/font-family die je alléén op de wrapper-div zet wordt door zo'n
   *rechtstreekse* regel op het kind-element (<p>) overstemd, ongeacht hoe
   specifiek de regel op de wrapper is — overerving verliest altijd van een
   regel die het element zelf raakt. Daarom hieronder expliciet ook <p> en
   <li> zelf targeten. */
.mec-single-event-description.mec-events-content.custom-events-event-content,
.mec-single-event-description.mec-events-content.custom-events-event-content p,
.mec-single-event-description.mec-events-content.custom-events-event-content li {
    font-family: var(--csm-font-content, Georgia, 'Times New Roman', serif);
    color: var(--csm-ink-soft);
    font-size: var(--csm-size-content, 16.5px);
    line-height: var(--csm-line-content, 1.7);
    font-weight: normal;
}
.custom-events-event-content p:last-child {
    margin-bottom: 0;
}

/* Map card */
.custom-events-map-card { padding-bottom: 30px; }
.custom-events-map-address {
    color: var(--csm-ink-soft);
    font-size: 14.5px;
    margin: 0 0 14px;
}
.custom-events-map {
    width: 100%;
    height: 320px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--csm-blue-100);
}

/* External link button */
.custom-events-external-link-wrap {
    text-align: center;
    margin-top: 10px;
}
.custom-events-external-link-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--csm-gold);
    color: #fff !important;
    padding: 16px 34px;
    border-radius: 40px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: 0 10px 24px rgba(169, 119, 47, .3);
}
.custom-events-external-link-button:hover {
    background: var(--csm-gold-deep);
}

@media (max-width: 680px) {
    .custom-events-hero { min-height: 260px; margin-bottom: 26px; }
    .custom-events-hero-inner { padding: 26px 24px; }
    /* Schaalt mee met de thema-titelgrootte i.p.v. een losse vaste waarde. */
    .custom-events-single-title { font-size: calc(var(--csm-size-title, 40px) * 0.7); }
    .custom-events-card { padding: 22px 20px; }
}