/**
 * JCal Pro — Dark Theme Override
 * Badminton Manawatu
 *
 * Covers: component (calendar/event/location views), default module,
 *         and the custom grid module layout.
 *
 * Deploy: add this file via Gridbox template → Custom CSS,
 *         or link it from your template's index.php.
 *
 * Customise the brand palette below — everything else derives from it.
 * ─────────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════════
   PALETTE  —  edit these to match your brand
   ══════════════════════════════════════════════════════════════════════ */
:root {
    /* Backgrounds — mapped to Gridbox palette */
    --jcal-dark-bg:           var(--bg-primary,   #000000);   /* page / outer wrapper */
    --jcal-dark-surface:      var(--bg-secondary, #0f0f0f);   /* cells, cards, panels */
    --jcal-dark-surface-2:    #1a1a1a;                        /* slightly elevated surface */
    --jcal-dark-surface-3:    #222222;                        /* hover states */

    /* Borders — Gridbox --border is #0f0f0f (too dark for dividers), use fixed values */
    --jcal-dark-border:       #2a2a2a;
    --jcal-dark-border-light: #363636;

    /* Text — mapped to Gridbox palette */
    --jcal-dark-text:         var(--text,  #ffffff);          /* primary */
    --jcal-dark-text-muted:   #9ca3af;                        /* secondary / meta */
    --jcal-dark-text-faint:   #6b7280;                        /* disabled / faint */

    /* Links — Gridbox --primary (bright green) */
    --jcal-dark-link:         var(--primary,   #3bb54a);
    --jcal-dark-link-hover:   var(--secondary, #039447);

    /* Accent / brand — Gridbox --primary (bright green) */
    --jcal-dark-accent:       var(--primary,  #3bb54a);       /* primary action colour  */
    --jcal-dark-accent-hover: var(--hover,    #046938);       /* --hover = dark green   */
    --jcal-dark-accent-text:  #ffffff;                        /* text on coloured btns  */

    /* Day-header row of the calendar grid — dark green from Gridbox */
    --jcal-dark-header-bg:    var(--accent,   #046938);       /* --accent = darkest green */
    --jcal-dark-header-text:  var(--text,     #ffffff);

    /* Today highlight — subtle green tint */
    --jcal-dark-today-bg:     rgba(59, 181, 74, 0.12);        /* --primary at low opacity */
    --jcal-dark-today-border: var(--primary,  #3bb54a);

    /* Toolbar / navbar */
    --jcal-dark-toolbar-bg:   var(--bg-secondary, #0f0f0f);
    --jcal-dark-toolbar-text: var(--text, #ffffff);
}


/* ══════════════════════════════════════════════════════════════════════
   1. COMPONENT — base resets
   ══════════════════════════════════════════════════════════════════════ */
#jcl_component {
    color: var(--jcal-dark-text);
    background: transparent;
}

#jcl_component a {
    color: var(--jcal-dark-link);
}
#jcl_component a:hover,
#jcl_component a:focus,
#jcl_component a:active {
    color: var(--jcal-dark-link-hover);
}


/* ══════════════════════════════════════════════════════════════════════
   2. CALENDAR TABLE  (month / week / day views)
   ══════════════════════════════════════════════════════════════════════ */

/* All cells */
#jcl_component .table-calendar th,
#jcl_component .table-calendar td {
    background: var(--jcal-dark-surface);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}

/* Day-of-week header row */
#jcl_component #jcl_layout_body .monthview th,
#jcl_component .table-calendar thead th {
    background: var(--jcal-dark-header-bg);
    color: var(--jcal-dark-header-text);
    border-color: var(--jcal-dark-border);
}

/* Cells that contain events */
#jcl_component .table-calendar th.cell_events,
#jcl_component .table-calendar td.cell_events {
    background: var(--jcal-dark-surface);
}
#jcl_component .table-calendar th.cell_events:hover,
#jcl_component .table-calendar td.cell_events:hover,
#jcl_component .table-calendar th.cell_events:focus,
#jcl_component .table-calendar td.cell_events:focus {
    background: var(--jcal-dark-surface-3);
}
#jcl_component .table-calendar th.cell_events:hover a,
#jcl_component .table-calendar td.cell_events:hover a {
    color: var(--jcal-dark-link-hover);
}

/* Day number */
#jcl_component .table-calendar td .calendar-day {
    color: var(--jcal-dark-text-muted);
}

/* Today */
#jcl_component .table-calendar td.today {
    background: var(--jcal-dark-today-bg);
    border-top: 2px solid var(--jcal-dark-today-border) !important;
}

/* Disabled (out-of-month) cells */
#jcl_component .disabled,
#jcl_component .table-calendar td.disabled {
    color: var(--jcal-dark-text-faint);
    background: var(--jcal-dark-bg);
}

/* Event title links inside calendar cells */
#jcl_component .table-calendar a.eventtitle {
    color: var(--jcal-dark-text);
    border-bottom-color: var(--jcal-dark-border);
}
#jcl_component .table-calendar a.eventtitle:hover,
#jcl_component .table-calendar a.eventtitle:focus {
    color: var(--jcal-dark-link-hover);
}

/* Category icon dots on calendar cells */
#jcl_component .table-calendar td .calendar-events img.icon {
    background: var(--jcal-dark-surface-2);
}

/* Table borders */
#jcl_component table {
    border-color: var(--jcal-dark-border) !important;
}
#jcl_component .table-bordered td {
    border-right-color: var(--jcal-dark-border);
}
#jcl_component .table-striped tbody tr:nth-child(odd) td,
#jcl_component .table-striped tbody tr:nth-child(odd) th {
    background-color: transparent !important;
}


/* ══════════════════════════════════════════════════════════════════════
   3. TOOLBAR / NAVIGATION
   ══════════════════════════════════════════════════════════════════════ */
#jcl_component .jcl_toolbar,
#jcl_component .jcl_navbar,
#jcl_component .navbar {
    background: var(--jcal-dark-toolbar-bg);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-toolbar-text);
}

#jcl_component .jcl_toolbar .navbar-search input {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}
#jcl_component .jcl_toolbar .navbar-search input::placeholder {
    color: var(--jcal-dark-text-faint);
}

/* Dropdown menus */
#jcl_component .dropdown-menu {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
}
#jcl_component .dropdown-menu > li > a {
    color: var(--jcal-dark-text);
}
#jcl_component .dropdown-menu > li > a:hover,
#jcl_component .dropdown-menu > li > a:focus,
#jcl_component .dropdown-submenu:hover > a,
#jcl_component .dropdown-submenu:focus > a {
    background-color: var(--jcal-dark-accent);
    color: var(--jcal-dark-accent-text);
}


/* ══════════════════════════════════════════════════════════════════════
   4. BUTTONS
   ══════════════════════════════════════════════════════════════════════ */
#jcl_component .btn {
    background-color: var(--jcal-dark-surface-2);
    color: var(--jcal-dark-text);
    border-color: var(--jcal-dark-border);
    text-shadow: none;
}
#jcl_component .btn:hover,
#jcl_component .btn:focus,
#jcl_component .btn:active {
    background-color: var(--jcal-dark-surface-3);
    color: var(--jcal-dark-text);
    border-color: var(--jcal-dark-border-light);
}

#jcl_component .btn-primary {
    background-color: var(--jcal-dark-accent);
    color: var(--jcal-dark-accent-text);
    border-color: var(--jcal-dark-accent);
}
#jcl_component .btn-primary:hover,
#jcl_component .btn-primary:focus,
#jcl_component .btn-primary:active {
    background-color: var(--jcal-dark-accent-hover);
    border-color: var(--jcal-dark-accent-hover);
    color: var(--jcal-dark-accent-text);
}

#jcl_component .btn-success {
    background-color: #15803d;
    border-color: #15803d;
    color: #fff;
}
#jcl_component .btn-success:hover {
    background-color: #166534;
    border-color: #166534;
}

#jcl_component .btn-danger {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}
#jcl_component .btn-danger:hover {
    background-color: #991b1b;
    border-color: #991b1b;
}


/* ══════════════════════════════════════════════════════════════════════
   5. EVENT DETAIL PAGE
   ══════════════════════════════════════════════════════════════════════ */

/* Each metadata row (date, location, categories etc.) */
#jcl_component .jcl_event_detail {
    background: var(--jcal-dark-surface);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}
#jcl_component .jcl_event_detail .label {
    color: var(--jcal-dark-text-muted);
    background: transparent;
    font-weight: 600;
}
#jcl_component .jcl_event_detail .content {
    color: var(--jcal-dark-text);
    background: transparent;
}

/* Event description body */
#jcl_component .jcl_event_body {
    background: var(--jcal-dark-surface);
    color: var(--jcal-dark-text);
    border-color: var(--jcal-dark-border);
}

/* Event & address list items */
#jcl_component .event-item,
#jcl_component .address-item {
    background: var(--jcal-dark-surface);
    color: var(--jcal-dark-text);
    border-color: var(--jcal-dark-border);
}
#jcl_component .event-item h3,
#jcl_component .address-item h3 {
    color: var(--jcal-dark-text);
}

/* Well (used inside some views) */
#jcl_component .well {
    background: var(--jcal-dark-surface);
    border-color: var(--jcal-dark-border);
    box-shadow: none;
}
#jcl_component .jcl_mainview .well,
#jcl_component .jcl_month .jcl_mainview .well {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Page header / titles */
#jcl_component .jcl_header h1,
#jcl_component .jcl_header h2,
#jcl_component .jcl_header h3 {
    color: var(--jcal-dark-text);
    border-bottom-color: var(--jcal-dark-border);
}

/* Labels (category badges) */
#jcl_component .label {
    text-shadow: none;
}
#jcl_component .label.dark {
    color: var(--jcal-dark-text);
    border-color: var(--jcal-dark-border);
    background: var(--jcal-dark-surface-2);
}

/* Category sidebar legend */
#jcl_component .jcl_month .jcal_categories,
#jcl_component .jcal_categories {
    background: transparent;
    border-color: var(--jcal-dark-border);
}
#jcl_component .jcal_categories .btn-block {
    color: var(--jcal-dark-text);
    background: var(--jcal-dark-surface);
    border-color: var(--jcal-dark-border);
}
#jcl_component .jcal_categories .btn-block:hover {
    background: var(--jcal-dark-surface-3);
}

/* Alerts */
#jcl_component .alert {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}
#jcl_component .alert h3 {
    color: var(--jcal-dark-text);
}

/* Form inputs (search bar, date picker etc.) */
#jcl_component input[type="text"],
#jcl_component input[type="search"],
#jcl_component input[type="email"],
#jcl_component select,
#jcl_component textarea {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}
#jcl_component input[type="text"]:focus,
#jcl_component input[type="search"]:focus,
#jcl_component select:focus,
#jcl_component textarea:focus {
    border-color: var(--jcal-dark-accent);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}
#jcl_component input::placeholder,
#jcl_component textarea::placeholder {
    color: var(--jcal-dark-text-faint);
}

/* Input group add-ons (date picker button etc.) */
#jcl_component .input-group-addon,
#jcl_component .add-on {
    background: var(--jcal-dark-surface-3);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}

/* Tabs (registration tabs etc.) */
#jcl_component .nav-tabs {
    border-bottom-color: var(--jcal-dark-border);
}
#jcl_component .nav-tabs > li > a {
    color: var(--jcal-dark-text-muted);
    border-color: var(--jcal-dark-border);
    background: var(--jcal-dark-surface);
}
#jcl_component .nav-tabs > li > a:hover {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}
#jcl_component .nav-tabs > li.active > a,
#jcl_component .nav-tabs > li.active > a:hover,
#jcl_component .nav-tabs > li.active > a:focus {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
    border-bottom-color: var(--jcal-dark-surface-2);
    color: var(--jcal-dark-text);
}
#jcl_component .tab-content {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
    padding: 1rem;
    border-radius: 0 0 0.375rem 0.375rem;
}

/* Pagination */
#jcl_component .pagination ul > li > a,
#jcl_component .pagination ul > li > span {
    background: var(--jcal-dark-surface);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-link);
}
#jcl_component .pagination ul > li > a:hover,
#jcl_component .pagination ul > li > a:focus {
    background: var(--jcal-dark-surface-3);
    color: var(--jcal-dark-link-hover);
}
#jcl_component .pagination ul > .active > a,
#jcl_component .pagination ul > .active > span {
    background: var(--jcal-dark-accent);
    border-color: var(--jcal-dark-accent);
    color: #fff;
}
#jcl_component .pagination ul > .disabled > a,
#jcl_component .pagination ul > .disabled > span {
    background: var(--jcal-dark-surface);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text-faint);
}

/* AJAX loader */
.jcl_ajax_loader {
    background-color: var(--jcal-dark-surface);
}

/* Modal */
#jcl_component .modal-content,
.jcl_modal .modal-content {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}
#jcl_component .modal-header,
.jcl_modal .modal-header {
    border-bottom-color: var(--jcal-dark-border);
}
#jcl_component .modal-footer,
.jcl_modal .modal-footer {
    border-top-color: var(--jcal-dark-border);
    background: var(--jcal-dark-surface);
}


/* ══════════════════════════════════════════════════════════════════════
   6. LOCATION VIEW
   ══════════════════════════════════════════════════════════════════════ */
#jcl_component .jcl_location_search input,
#jcl_component .jcl_location_search select {
    background: var(--jcal-dark-surface-2);
    border-color: var(--jcal-dark-border);
    color: var(--jcal-dark-text);
}
#jcl_component .jcl_location_events h2 {
    color: var(--jcal-dark-text);
    border-bottom-color: var(--jcal-dark-border);
}


/* ══════════════════════════════════════════════════════════════════════
   7. DEFAULT EVENTS MODULE  (.jcalpro_events)
   ══════════════════════════════════════════════════════════════════════ */
.jcalpro_events {
    color: var(--jcal-dark-text);
}

.jcalpro_events ul.jcalpro_events,
.jcalpro_events ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcalpro_events li.jcalpro_events_event {
    border-bottom: 1px solid var(--jcal-dark-border);
    padding: 0.65rem 0;
}
.jcalpro_events li.jcalpro_events_event:last-child {
    border-bottom: none;
}

/* Featured event highlight */
.jcalpro_events li.jcalpro_events_featured {
    border-left: 3px solid var(--jcal-dark-accent);
    padding-left: 0.75rem;
}

.jcalpro_events .jcalpro_events_link a {
    color: var(--jcal-dark-link);
    font-weight: 600;
}
.jcalpro_events .jcalpro_events_link a:hover {
    color: var(--jcal-dark-link-hover);
}

.jcalpro_events .jcalpro_events_date {
    display: block;
    font-size: 0.82rem;
    color: var(--jcal-dark-text-muted);
    margin-top: 0.15rem;
}

.jcalpro_events .jcalpro_events_location {
    display: block;
    font-size: 0.82rem;
    color: var(--jcal-dark-text-muted);
}
.jcalpro_events .jcalpro_events_location a {
    color: var(--jcal-dark-text-muted);
}
.jcalpro_events .jcalpro_events_location a:hover {
    color: var(--jcal-dark-link-hover);
}

.jcalpro_events .jcalpro_events_category {
    display: block;
    font-size: 0.78rem;
    color: var(--jcal-dark-text-faint);
    margin-top: 0.1rem;
}

.jcalpro_events .jcalpro_events_description {
    display: block;
    font-size: 0.85rem;
    color: var(--jcal-dark-text-muted);
    margin-top: 0.25rem;
}

/* Month header dividers */
.jcalpro_events h4.jcalpro_events_month_header {
    color: var(--jcal-dark-header-text);
    border-bottom: 1px solid var(--jcal-dark-border);
    padding-bottom: 0.35rem;
    margin: 1rem 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Date icon (mini calendar icon variant) */
.jcalpro_events li.jcalpro_cal_icon .jcalpro_events_col_date {
    background: var(--jcal-dark-surface-2);
    border: 1px solid var(--jcal-dark-border);
}
.jcalpro_events .jcalpro_events_mini_month {
    background: var(--jcal-dark-accent);
    color: #fff;
}
.jcalpro_events .jcalpro_events_mini_day {
    color: var(--jcal-dark-text);
}


/* ══════════════════════════════════════════════════════════════════════
   8. CUSTOM GRID MODULE  (.jcalpro-grid)
      Overrides the CSS custom properties defined in grid.php
   ══════════════════════════════════════════════════════════════════════ */
.jcalpro-grid {
    --jcal-card-bg:       var(--jcal-dark-surface);
    --jcal-card-border:   var(--jcal-dark-border);
    --jcal-card-radius:   0.5rem;
    --jcal-card-img-bg:   var(--jcal-dark-surface-2);
    --jcal-badge-bg:      var(--jcal-dark-accent);
    --jcal-badge-color:   #ffffff;
    --jcal-link-hover:    var(--jcal-dark-link-hover);
    --jcal-meta-color:    var(--jcal-dark-text-muted);
    --jcal-desc-color:    var(--jcal-dark-text-muted);
    --jcal-btn-border:    var(--jcal-dark-accent);
    --jcal-btn-color:     var(--jcal-dark-link);
    --jcal-btn-bg:        var(--jcal-dark-accent);
    --jcal-btn-bg-hover:  var(--jcal-dark-accent);
    --jcal-btn-bg-dark:   var(--jcal-dark-accent-hover);
}

/* Card title colour */
.jcalpro-grid .jcalpro-grid-title {
    color: var(--jcal-dark-text);
}

/* Subtle card hover glow on dark */
.jcalpro-grid .jcalpro-grid-card:hover {
    box-shadow: 0 4px 24px rgba(37, 99, 235, 0.18);
    border-color: var(--jcal-dark-border-light);
}

/* "View all" / button outline variant on dark */
.jcalpro-grid .jcalpro-grid-btn {
    color: var(--jcal-dark-link);
    border-color: var(--jcal-dark-link);
}
.jcalpro-grid .jcalpro-grid-btn:hover {
    background: var(--jcal-dark-accent);
    border-color: var(--jcal-dark-accent);
    color: #fff;
}

/* Empty state */
.jcalpro-grid .jcalpro-grid-empty {
    color: var(--jcal-dark-text-muted);
    border: 1px dashed var(--jcal-dark-border);
    border-radius: 0.5rem;
}


/* ══════════════════════════════════════════════════════════════════════
   9. GRIDBOX GRID / LIST MODULE  (.ba-item-recent-posts context)

   blog-posts.css (loaded globally when any Gridbox blog-posts block
   exists) sets  .ba-blog-post-image img { opacity: 0 }  because
   Gridbox normally shows images as CSS background-image on the <a>.
   Our module uses a real <img>, so we must restore opacity.

   We activate Gridbox's own card CSS variable system (gridbox.css
   initialises --border-radius, --shadow-*, --border-* to zero so
   cards are invisible by default in the builder). Overriding them
   here gives cards visual weight without adding new CSS patterns.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Fix: make <img> visible (Gridbox hides it in favour of bg-image) */
.jcalpro_events.ba-item-recent-posts .ba-blog-post-image img {
    opacity: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Grid cards — activate Gridbox's CSS variable system ───────────── */
.jcalpro_events.ba-item-recent-posts .ba-grid-layout .ba-blog-post {
    /* Gridbox border variables */
    --border-color:  var(--jcal-dark-border);
    --border-radius: 0.5rem;
    --border-style:  solid;
    --border-width:  1px;
    --border-top:    1;
    --border-right:  1;
    --border-bottom: 1;
    --border-left:   1;
    /* Direct box-shadow so the hover transition animates cleanly */
    background:  var(--jcal-dark-surface);
    box-shadow:  0 4px 16px rgba(0, 0, 0, 0.35);
    transition:  transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    /* box-sizing must be border-box inside our flex grid */
    box-sizing:  border-box !important;
}

.jcalpro_events.ba-item-recent-posts .ba-grid-layout .ba-blog-post:hover {
    --border-color: var(--jcal-dark-border-light);
    transform:   translateY(-3px);
    box-shadow:  0 8px 28px rgba(0, 0, 0, 0.55);
}

/* Image area — fixed 16:9 ratio so all cards align regardless of image */
.jcalpro_events.ba-item-recent-posts .ba-grid-layout .ba-blog-post-image {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* Content area — add vertical padding inside the card */
.jcalpro_events.ba-item-recent-posts .ba-grid-layout .ba-blog-post-content {
    padding: 1rem 1rem 0.5rem !important;
}

/* Featured card — accent border colour */
.jcalpro_events.ba-item-recent-posts .ba-grid-layout .jcalpro_events_featured {
    --border-color: var(--jcal-dark-accent);
}

/* ── Button area (Register / Results links) ────────────────────────── */
.jcalpro_events.ba-item-recent-posts .ba-blog-post-btn {
    display:     flex;
    gap:         0.5rem;
    flex-wrap:   wrap;
    padding:     0.5rem 1rem 1rem;
}

.jcalpro_events.ba-item-recent-posts .ba-blog-post-btn a {
    display:         inline-block;
    padding:         0.28rem 0.75rem;
    border:          1.5px solid var(--jcal-dark-accent);
    border-radius:   0.3rem;
    color:           var(--jcal-dark-link);
    font-size:       0.78rem;
    font-weight:     700;
    text-decoration: none;
    transition:      background 0.15s, color 0.15s;
}

.jcalpro_events.ba-item-recent-posts .ba-blog-post-btn a:hover {
    background: var(--jcal-dark-accent);
    color:      #fff;
}

/* ── Event title ───────────────────────────────────────────────────── */
.jcalpro_events.ba-item-recent-posts .ba-blog-post-title a {
    font-size:       1.05rem;
    font-weight:     700;
    line-height:     1.3;
    color:           var(--jcal-dark-text);
    text-decoration: none;
    display:         block;
}

.jcalpro_events.ba-item-recent-posts .ba-blog-post-title a:hover {
    color: var(--jcal-dark-link);
}

/* ── View-all link ─────────────────────────────────────────────────── */
.jcalpro_events.ba-item-recent-posts .jcalpro_events_link {
    display:    block;
    margin-top: 1.25rem;
    text-align: center;
}

/* ── List layout — dividers only, no card boxing ───────────────────── */
.jcalpro_events.ba-item-recent-posts .ba-blog-posts-wrapper:not(.ba-grid-layout) .ba-blog-post {
    --border-color:  var(--jcal-dark-border);
    --border-style:  solid;
    --border-width:  1px;
    --border-top:    0;
    --border-right:  0;
    --border-bottom: 1;
    --border-left:   0;
    --border-radius: 0;
    padding: 0.65rem 0;
    box-sizing: border-box !important;
}

.jcalpro_events.ba-item-recent-posts .ba-blog-posts-wrapper:not(.ba-grid-layout) .ba-blog-post:last-child {
    --border-color: transparent;
}

/* Featured list item — left accent bar */
.jcalpro_events.ba-item-recent-posts .ba-blog-posts-wrapper:not(.ba-grid-layout) .jcalpro_events_featured {
    --border-left:  1;
    --border-color: var(--jcal-dark-accent);
    padding-left:   0.6rem;
}