/*
 Theme Name: Stuwit Core Child — Maeva
 Template: stuwit-core/theme
*/

/* Sitefont: Instrument Sans (variable, 400–700, OFL, self-hosted) voor body én koppen — 2026-11-04, was Manrope.
   Familie met Instrument Serif (sierletter op <em> in koppen). */
@font-face {
    font-family: "Instrument Sans";
    src: url("instrument-sans/InstrumentSans-latin-wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("instrument-sans/InstrumentSans-latin-ext-wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --site-font-family: "Instrument Sans";
    --font-display: "Instrument Sans", system-ui, sans-serif;
    --font-sans: "Instrument Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Brand palette Verloskundig en Vrouwencentrum Maeva (V2, uit bricks: primary #8BA172, secondary #454952) */
    --brand-1: #8BA172;      /* saliegroen — merkkleur (vlakken, accenten) */
    --brand-1-strong: #8BA172; /* = live-groen (op verzoek, 2026-11-03; was #6E8656 voor contrast) */
    --brand-2: #454952;      /* antraciet */
    --brand-dark: #3A3E46;   /* donkere tint — mobiel menu, cards op donker */
    --brand-darker: #2E3138; /* donkerste tint — donkere secties, footer, tekst */
    --brand-white: #FFFFFE;
    --brand-cta: #8BA172;
    --brand-cta-hover: #7A9063;

    /* Semantic tokens (gebruik deze in components/utilities) */
    --color-primary: var(--brand-1-strong);
    --color-secondary: var(--brand-2);

    --color-foreground: var(--brand-darker);
    --color-muted: #6B7380;
    --color-muted-80: #4E5663;
    /* Prose-tekst op lichte achtergronden: getinte shade van de donkere tint i.p.v. vlak grijs */
    --color-prose-fg: color-mix(in srgb, var(--brand-darker) 64%, transparent); /* Mandelo: merk-donker ~64% */
    --color-prose-body: var(--color-prose-fg);
    --color-prose-invert-body: color-mix(in srgb, var(--brand-white) 82%, transparent);
    --color-prose-invert-captions: color-mix(in srgb, var(--brand-white) 72%, transparent);
    --color-prose-invert-border: color-mix(in srgb, var(--brand-white) 28%, transparent);
    --color-surface: var(--brand-white);

    /* Lichte tinten zijn afgeleid van brand-1 via color-mix() — pas het
       percentage aan om de tint bij te sturen. */
    /* Warm off-white (zoals bricks #F8F7F5) + zachte saliegroene tinten. */
    --color-background: #F8F7F4;
    --color-background-tinted: var(--color-background);
    --color-shade-1: #EEF1E9;
    --color-shade-2: #DCE4D2;
    --color-border: color-mix(in srgb, var(--brand-1) 18%, var(--brand-white));
    --color-heading-default: var(--color-foreground);
    --color-heading-inverse: var(--color-surface);

    --color-tinted-card: var(--color-shade-1);
    --color-primary-shade: color-mix(in srgb, var(--brand-1) 85%, black);
    --color-secondary-shade: color-mix(in srgb, var(--brand-2) 85%, black);

    /* text-dark / bg-dark = donkere tint primary (Tailwind-default is anders) */
    --color-dark: var(--brand-dark);

    /* Typography plugin */
    --tw-prose-body: var(--color-foreground);
    --tw-prose-invert-body: var(--brand-white);

    /* Standaard section-tokens (lichte achtergrond als default) */
    --section-bg: var(--color-surface);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(46, 49, 56, 0.10);
    --section-border-strong: rgba(46, 49, 56, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-1-strong);
    --section-eyebrow-accent: var(--brand-1-strong);
    --section-card-bg: var(--color-surface); /* 2026-11-04: kaarten wit (was tinted) */
    --section-card-fg: var(--color-foreground);
}


/* ============================================================
   Section-tokens per achtergrondklasse
   De parent (base.css) consumeert deze tokens voor headings,
   eyebrow en prose. Utilities.css consumeert ze voor prose vars.
   ============================================================ */

.bg-background {
    --section-bg: var(--color-background-tinted);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-1-strong);
    --section-eyebrow-accent: var(--brand-1-strong);
    --section-card-bg: var(--color-surface); /* 2026-11-04: kaarten wit (was tinted) */
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-background-tinted);
    color: var(--section-fg);
}

.bg-surface {
    --section-bg: var(--color-surface);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-1-strong);
    --section-eyebrow-accent: var(--brand-1-strong);
    --section-card-bg: var(--color-tinted-card);
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-surface);
    color: var(--section-fg);
}

.bg-shade-1 {
    --section-bg: var(--color-shade-1);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-1-strong);
    --section-eyebrow-accent: var(--brand-1-strong);
    --section-card-bg: var(--color-surface); /* 2026-11-04: kaarten wit (was tinted) */
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-shade-1);
    color: var(--section-fg);
}

.bg-shade-2 {
    --section-bg: var(--color-shade-2);
    --section-fg: var(--color-prose-fg);
    --section-heading: var(--color-foreground);
    --section-muted: var(--color-muted-80);
    --section-border: rgba(0, 0, 0, 0.10);
    --section-border-strong: rgba(0, 0, 0, 0.22);
    --section-link: var(--color-primary);
    --section-eyebrow: var(--brand-1-strong);
    --section-eyebrow-accent: var(--brand-1-strong);
    --section-card-bg: var(--color-surface); /* 2026-11-04: kaarten wit (was tinted) */
    --section-card-fg: var(--color-foreground);
    background-color: var(--color-shade-2);
    color: var(--section-fg);
}

.bg-primary {
    --section-bg: var(--brand-1-strong);
    --section-fg: rgba(255, 255, 254, 0.92);
    --section-heading: var(--color-surface);
    --section-muted: rgba(255, 255, 254, 0.65);
    --section-border: rgba(255, 255, 254, 0.20);
    --section-border-strong: rgba(255, 255, 254, 0.45);
    --section-link: var(--color-surface);
    --section-eyebrow: rgba(255, 255, 254, 0.70);
    --section-eyebrow-accent: var(--color-surface);
    --section-card-bg: var(--color-primary-shade);
    --section-card-fg: var(--color-surface);
    background-color: var(--brand-1-strong);
    color: var(--section-fg);
}

/* Donkerste tint (#2E3138): donkere secties, hero, footer. Cards hierop = brand-dark. */
.bg-surface-inverse {
    --section-bg: var(--brand-darker);
    --section-fg: rgba(255, 255, 254, 0.88);
    --section-heading: var(--color-surface);
    --section-muted: rgba(255, 255, 254, 0.60);
    --section-border: rgba(255, 255, 254, 0.14);
    --section-border-strong: rgba(255, 255, 254, 0.36);
    --section-link: var(--color-surface);
    --section-eyebrow: rgba(255, 255, 254, 0.70);
    --section-eyebrow-accent: var(--color-shade-2);
    --section-card-bg: var(--brand-dark);
    --section-card-fg: var(--color-surface);
    background-color: var(--brand-darker);
    color: var(--section-fg);
}

/* Donkere tint (#3A3E46): navbar, mega-menu, mobiel menu, cards op donker. */
.bg-surface-inverse-alt {
    --section-bg: var(--brand-dark);
    --section-fg: rgba(255, 255, 254, 0.88);
    --section-heading: var(--color-surface);
    --section-muted: rgba(255, 255, 254, 0.60);
    --section-border: rgba(255, 255, 254, 0.14);
    --section-border-strong: rgba(255, 255, 254, 0.36);
    --section-link: var(--color-surface);
    --section-eyebrow: rgba(255, 255, 254, 0.70);
    --section-eyebrow-accent: var(--color-shade-2);
    --section-card-bg: color-mix(in srgb, var(--brand-1) 22%, var(--brand-dark));
    --section-card-fg: var(--color-surface);
    background-color: var(--brand-dark);
    color: var(--section-fg);
}

/* Cards die zelf bg-surface-inverse hebben (project-/vacature-items, cta, counter)
   zouden op een donkere sectie wegvallen — daar schuiven ze één tint lichter. */
.bg-surface-inverse .bg-surface-inverse {
    --section-bg: var(--brand-dark);
    background-color: var(--brand-dark);
}

/* Secondary = antraciet. */
.bg-secondary {
    --section-bg: var(--brand-2);
    --section-fg: rgba(255, 255, 254, 0.88);
    --section-heading: var(--color-surface);
    --section-muted: rgba(255, 255, 254, 0.60);
    --section-border: rgba(255, 255, 254, 0.14);
    --section-border-strong: rgba(255, 255, 254, 0.36);
    --section-link: var(--color-surface);
    --section-eyebrow: rgba(255, 255, 254, 0.70);
    --section-eyebrow-accent: var(--color-surface);
    --section-card-bg: var(--color-secondary-shade);
    --section-card-fg: var(--color-surface);
    background-color: var(--brand-2);
    color: var(--section-fg);
}

/* SVG fill utilities */
.fill-surface { fill: var(--color-surface); }
.stroke-surface { stroke: var(--color-surface); }

.fill-shade-1 { fill: var(--color-shade-1); }
.stroke-shade-1 { stroke: var(--color-shade-1); }

.fill-shade-2 { fill: var(--color-shade-2); }
.stroke-shade-2 { stroke: var(--color-shade-2); }

.fill-surface-inverse { fill: var(--brand-darker); }
.stroke-surface-inverse { stroke: var(--brand-darker); }

.fill-surface-inverse-alt { fill: var(--brand-dark); }
.stroke-surface-inverse-alt { stroke: var(--brand-dark); }

/* Prose links op bg-primary: zelfde kleur als bg, dus inherit + underline */
.bg-primary .prose a {
    color: inherit;
    text-decoration-line: underline;
    text-underline-offset: 3px;
}

/* Prose links op bg-surface-inverse: zelfde behandeling als de footer-widgets
   (die ook op bg-surface-inverse staan) — inherit + hover naar lichte groene tint. */
.bg-surface-inverse .prose a,
.bg-surface-inverse-alt .prose a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bg-surface-inverse .prose a:hover,
.bg-surface-inverse .prose a:focus-visible,
.bg-surface-inverse-alt .prose a:hover,
.bg-surface-inverse-alt .prose a:focus-visible {
    color: var(--color-shade-2);
    text-decoration: none;
}


/* Knop-CTA (palet btn-offerte): aanmeldknoppen. Maeva: stevig groen, witte tekst. */
.btn-cta {
    background-color: var(--brand-cta);
    color: var(--brand-white) !important;
}

.btn-cta:hover,
.btn-cta:focus-visible {
    background-color: var(--brand-cta-hover);
}

/* Lopende tekst iets voller (variable font, 2026-11-03). <strong>/<b> houden hun eigen gewicht (typography). */
.prose,
.prose :where(p, li, dd, td, blockquote, figcaption) {
    font-weight: 450;
}

/* Sierletter (2026-11-03): Instrument Serif (OFL, self-hosted, latin) voor <em> in koppen — knipoog naar het
   script in het logo. Gebruik: zet een woord in de titel tussen <em>…</em>, bv. "Verloskundig en Vrouwencentrum <em>Maeva</em>". */
@font-face {
    font-family: "Instrument Serif";
    src: url("instrument-serif/InstrumentSerif-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Serif";
    src: url("instrument-serif/InstrumentSerif-Regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
:is(h1, h2, h3, h4, .footer-cta p) em {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 1.12em;   /* serif oogt kleiner naast Instrument Sans */
    line-height: 1;
    padding-right: 0.04em; /* italic loopt anders over de split-mask-rand */
}

/* ============================================================
   The Events Calendar — single evenement (2026-11-03) in stuwit-huisstijl.
   Template: standaard events-template (#tribe-events-pg-template), plugin-CSS 'tribe'.
   ============================================================ */
#tribe-events-pg-template {
    max-width: none;
    padding: calc(var(--nav-h, 7.4rem) + 3.5rem) 5vw 3rem;
    font-family: var(--font-sans);
    color: var(--color-prose-fg);
}
@media (min-width: 1024px) { #tribe-events-pg-template { padding-left: 3vw; padding-right: 3vw; } }
#tribe-events-pg-template .tribe-events-single { max-width: 52rem; margin: 0 auto; }
#tribe-events-pg-template .tribe-events-back,
#tribe-events-pg-template .tribe-events-series-relationship-single-marker { margin-bottom: 1rem; font-size: 0.8125rem; font-weight: 500; }
#tribe-events-pg-template .tribe-events-series-relationship-single-marker,
#tribe-events-pg-template .tribe-events-series-relationship-single-marker * { color: var(--color-primary) !important; font-family: var(--font-sans) !important; }
#tribe-events-pg-template .tribe-events-single-event-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);
    line-height: 1.16;
    letter-spacing: -0.025em;
    color: var(--color-foreground);
    margin: 0 0 0.75rem;
}
#tribe-events-pg-template .tribe-events-schedule { margin: 0 0 2rem; }
#tribe-events-pg-template .tribe-events-schedule h2,
#tribe-events-pg-template .tribe-events-schedule * {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: var(--color-primary) !important;
}
#tribe-events-pg-template .tribe-events-content,
#tribe-events-pg-template .tribe-events-content p { font-size: 1.0625rem; line-height: 1.7; font-weight: 450; color: var(--color-prose-fg); }
#tribe-events-pg-template a { color: var(--color-primary); }
#tribe-events-pg-template a:hover { color: var(--color-foreground); }

/* Toevoegen aan kalender → outline-knop */
#tribe-events-pg-template .tribe-events-c-subscribe-dropdown__button {
    border: 1px solid var(--color-primary) !important;
    border-radius: 9999px !important;
    background: transparent !important;
    color: var(--color-primary) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
}
#tribe-events-pg-template .tribe-events-c-subscribe-dropdown__button:hover,
#tribe-events-pg-template .tribe-events-c-subscribe-dropdown__button:focus-within { background: var(--color-primary) !important; color: #fff !important; }
#tribe-events-pg-template .tribe-events-c-subscribe-dropdown__button * { color: inherit !important; fill: currentColor; }

/* Gegevens / locatie / organisator → witte kaart */
#tribe-events-pg-template .tribe-events-event-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.5rem 2rem;
    margin: 2.5rem 0;
    padding: 2rem;
    background: var(--color-surface);
    border: 0 !important;
    border-radius: 1.25rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
}
#tribe-events-pg-template .tribe-events-event-meta > div,
#tribe-events-pg-template .tribe-events-meta-group { width: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; }
#tribe-events-pg-template .tribe-events-single-section-title {
    font-family: var(--font-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--color-primary) !important;
    margin: 0 0 0.75rem !important;
}
#tribe-events-pg-template .tribe-events-event-meta dt { font-weight: 600; color: var(--color-foreground); margin-top: 0.6rem; }
#tribe-events-pg-template .tribe-events-event-meta dt:first-child { margin-top: 0; }
#tribe-events-pg-template .tribe-events-event-meta dd { margin: 0; color: var(--color-prose-fg); }
#tribe-events-pg-template .tribe-events-event-meta abbr { text-decoration: none; border: 0; }

/* Gerelateerde evenementen → witte kaarten, geen grijze placeholder-kalenders */
#tribe-events-pg-template .tribe-events-related-events-title {
    font-family: var(--font-display) !important;
    font-weight: 500 !important;
    font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem) !important;
    letter-spacing: -0.02em;
    color: var(--color-foreground) !important;
    border: 0 !important;
}
#tribe-events-pg-template .tribe-related-events { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }
#tribe-events-pg-template .tribe-related-events > li {
    width: auto !important; margin: 0 !important; padding: 1.25rem 1.5rem !important;
    background: var(--color-surface) !important; border-radius: 1.25rem; float: none !important;
}
#tribe-events-pg-template .tribe-related-events-thumbnail:has(img[src*="placeholder"]),
#tribe-events-pg-template .tribe-related-events-thumbnail:has(.tribe-events-event-image-placeholder) { display: none !important; }
#tribe-events-pg-template .tribe-related-event-info { padding: 0 !important; background: transparent !important; }
#tribe-events-pg-template .tribe-related-events-title,
#tribe-events-pg-template .tribe-related-events-title a { font-family: var(--font-sans) !important; font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--color-foreground) !important; }
#tribe-events-pg-template .tribe-related-event-info .tribe-event-date-start,
#tribe-events-pg-template .tribe-related-event-info { font-size: 0.875rem; color: var(--color-prose-fg); }

/* Vorige / volgende */
#tribe-events-pg-template #tribe-events-footer { border-color: color-mix(in srgb, var(--color-foreground) 10%, transparent) !important; }
#tribe-events-pg-template #tribe-events-footer a { color: var(--color-foreground); font-weight: 500; font-family: var(--font-sans); }
#tribe-events-pg-template #tribe-events-footer a:hover { color: var(--color-primary); }
/* TEC single: alles in de sitefont; gegevenskaart over de volle breedte in kolommen */
#tribe-events-pg-template,
#tribe-events-pg-template :where(p, li, dt, dd, span, a, div, h2, h3, abbr) { font-family: var(--font-sans); }
#tribe-events-pg-template .tribe-events-single-event-title { font-family: var(--font-display); }
#tribe-events-pg-template .tribe-events-event-meta { width: 100% !important; box-sizing: border-box; }
#tribe-events-pg-template .tribe-events-event-meta.secondary:empty,
#tribe-events-pg-template .tribe-events-event-meta::before,
#tribe-events-pg-template .tribe-events-event-meta::after { display: none !important; }
#tribe-events-pg-template .tribe-events-event-meta .tribe-events-meta-group { border: 0 !important; }
#tribe-events-pg-template .tribe-events-meta-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
#tribe-events-pg-template .tribe-events-meta-item { margin: 0; }
#tribe-events-pg-template .tribe-events-meta-label { display: block; font-weight: 600; color: var(--color-foreground); }
#tribe-events-pg-template .tribe-events-meta-value { color: var(--color-prose-fg); }
@media (min-width: 768px) { #tribe-events-pg-template .tribe-related-events { grid-template-columns: repeat(3, 1fr); } }
#tribe-events-pg-template .tribe-events-back { margin-top: 1.25rem; }

/* Footer-CTA (2026-11-04): het wit van de footer loopt tot halverwege de CTA onder het groene blok door. */
.footer-cta::before {
	content: "";
	position: absolute;
	inset: 50% 0 0 0;
	background: #fff;
	z-index: 0;
}

/* Kruimelpad-balk onder de beeld-hero (2026-11-04, zoals live): Home e.d. groen, huidige pagina grijs. */
.breadcrumbs-bar .breadcrumbs,
.breadcrumbs-inline .breadcrumbs { font-size: 0.8125rem; }
.breadcrumbs-bar .breadcrumbs a,
.breadcrumbs-inline .breadcrumbs a { color: var(--color-primary); }
.breadcrumbs-bar .breadcrumbs .last,
.breadcrumbs-inline .breadcrumbs .last { color: color-mix(in srgb, var(--color-foreground) 60%, transparent); opacity: 1; }
.breadcrumbs-bar .breadcrumbs .separator,
.breadcrumbs-inline .breadcrumbs .separator { color: color-mix(in srgb, var(--color-foreground) 30%, transparent); }

/* ============================================================
   TEC (2026-11-04): single opgeschoond + agenda (maandweergave V2) rustiger
   ============================================================ */
#tribe-events-pg-template .tribe-events-back,
#tribe-events-pg-template .tribe-events-series-relationship-single-marker,
#tribe-events-pg-template .tribe-events-schedule .timezone,
#tribe-events-pg-template .tribe-events-event-meta .tribe-events-timezone,
.tribe-events .tribe-events-calendar-month__calendar-event-datetime .tribe-events-calendar-series-archive__container,
.tribe-events .tribe-events-c-view-selector { display: none !important; }
#tribe-events-pg-template .tribe-events-single { max-width: 52rem; }
#tribe-events-pg-template .maeva-event-crumbs { max-width: 52rem; margin: 0 auto; }
#tribe-events-pg-template .maeva-related-events h2 { font-family: var(--font-display); color: var(--color-foreground); }
#tribe-events-pg-template .maeva-related-events a { color: inherit; }
#tribe-events-pg-template .maeva-related-events a:hover { color: var(--color-primary); }

/* Agenda */
.maeva-agenda-head { padding-top: calc(var(--nav-h, 7.4rem) + 3rem); }
.maeva-agenda-intro { margin: 0.75rem 0 0; color: var(--color-prose-fg); font-size: 1.0625rem; }
.tribe-events.tribe-events-view--month {
	--tec-font-family-sans-serif: var(--font-sans);
	--tec-font-family-base: var(--font-sans);
	--tec-color-accent-primary: var(--color-primary);
	--tec-color-accent-primary-hover: var(--brand-cta-hover, var(--color-primary));
	--tec-color-accent-primary-active: var(--color-primary);
	--tec-color-link-accent: var(--color-primary);
	--tec-color-text-primary: var(--color-foreground);
	--tec-color-text-secondary: var(--color-prose-fg);
	--tec-color-icon-active: var(--color-primary);
	--tec-color-border-default: color-mix(in srgb, var(--color-foreground) 8%, transparent);
	--tec-color-border-secondary: color-mix(in srgb, var(--color-foreground) 8%, transparent);
	--tec-color-background-events: transparent;
	--tec-color-day-marker-month: var(--color-foreground);
	--tec-color-day-marker-past-month: color-mix(in srgb, var(--color-foreground) 35%, transparent);
	--tec-color-background-secondary: #fff;
	padding-top: 2rem !important;
	padding-bottom: 4rem !important;
	background: transparent;
}
.tribe-events-view--month .tribe-events-calendar-month__header-column { padding-left: 0.75rem !important; }
.tribe-events-view--month .tribe-common-l-container { max-width: none !important; padding: 0 !important; min-height: 0; }
.tribe-events-view--month .tribe-events-header { padding: 0 !important; margin: 0 0 1.25rem !important; }
.tribe-events-view--month .tribe-events-c-top-bar__datepicker-desktop { font-family: var(--font-display) !important; font-weight: 500 !important; font-size: 1.5rem !important; }
.tribe-events-view--month .tribe-events-c-top-bar__today-button { border-radius: 9999px !important; border-color: color-mix(in srgb, var(--color-foreground) 14%, transparent) !important; font-weight: 600 !important; }
.tribe-events-view--month .tribe-events-calendar-month {
	background: #fff;
	border-radius: 1.25rem;
	padding: 0.75rem;
	overflow: hidden;
}
.tribe-events-view--month .tribe-events-calendar-month__header-column-title { font-size: 0.75rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--color-foreground) 50%, transparent) !important; }
@media (min-width: 768px) { .tribe-events-view--month .tribe-events-calendar-month__day { min-height: 7.5rem !important; } }
@media (max-width: 767px) {
	.tribe-events-view--month .tribe-events-c-top-bar { padding: 0 !important; margin: 0 !important; }
	.tribe-events-view--month .tribe-events-c-top-bar__datepicker { margin-left: 0 !important; }
	.tribe-events-view--month .tribe-events-calendar-month { padding: 0.5rem; }
	.tribe-events-view--month .tribe-events-calendar-month__day-cell--mobile { border-radius: 0.6rem; }
}
.tribe-events-view--month .tribe-events-calendar-month__day-date { font-size: 0.875rem !important; font-weight: 600 !important; }
.tribe-events-view--month .tribe-events-calendar-month__day-date-daynum { font-size: inherit !important; font-weight: inherit !important; }
.tribe-events-view--month .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
	display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 9999px;
	background: var(--color-primary); color: #fff !important;
}
.tribe-events-view--month .tribe-events-calendar-month__calendar-event {
	margin: 0.4rem 0.5rem 0 !important;
	padding: 0.4rem 0.55rem !important;
	border-radius: 0.6rem;
	background: color-mix(in srgb, var(--color-primary) 12%, #fff);
	border-left: 3px solid var(--color-primary);
}
.tribe-events-view--month .tribe-events-calendar-month__calendar-event-datetime { font-size: 0.6875rem !important; font-weight: 600 !important; color: var(--color-primary) !important; margin-bottom: 0.1rem; }
.tribe-events-view--month .tribe-events-calendar-month__calendar-event-title,
.tribe-events-view--month .tribe-events-calendar-month__calendar-event-title a { font-size: 0.8125rem !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--color-foreground) !important; }
.tribe-events-view--month .tribe-events-calendar-month__day--past .tribe-events-calendar-month__calendar-event { opacity: 0.55; }
.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button {
	border: 1px solid var(--color-primary) !important; border-radius: 9999px !important; background: transparent !important;
	color: var(--color-primary) !important; font-weight: 600 !important;
}
.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button:hover { background: var(--color-primary) !important; color: #fff !important; }
.tribe-events-view--month .tribe-events-c-subscribe-dropdown__button * { color: inherit !important; }
#tribe-events-pg-template .tribe-events-single-section { float: none !important; width: 100% !important; }
#tribe-events-pg-template .maeva-related-events { clear: both; order: 3; width: 100%; } /* TEC zet de gegevenskaart op order 2 */
/* Single evenement: inhoud onder het hangende logoblok laten beginnen */
#tribe-events-pg-template { padding-top: calc(var(--nav-h, 7.4rem) + 6rem); }