/**
Theme Name: Viimsi Vabakogudus Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viimsi-vabakogudus-child
Template: astra
*/

/* ================================
   EVENTS HOME – GRID CARDS (Simple Calendar)
   Scope: add CSS class "events-home" to the section/container in Elementor
================================ */

/* Container spacing */
.events-home .simcal-calendar {
    max-width: 950px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hide month header/navigation */
.events-home .simcal-calendar-head,
.events-home .simcal-calendar-nav {
    display: none !important;
}

/* Flatten day/week wrappers AND individual ULs so all cards sit in one grid */
.events-home .simcal-day,
.events-home .simcal-week,
.events-home ul.simcal-events {
    display: contents !important;
}

/* ── SLIDER WRAPPER (Desktop only) ── */
.events-home .ev-slider-wrapper {
    position: relative;
    max-width: 100%;
    /* Will naturally fill up to Elementor's 1140px */
    margin: 0 auto;
    /* Removed large side padding to give cards maximum width */
}

/* ── SLIDER VIEWPORT ── */
.events-home .ev-slider-viewport {
    overflow: hidden;
    width: 100%;
}

/* ── SLIDER TRACK ── */
.events-home .ev-slider-track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Hide scrollbar on desktop for cleaner look, optional */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.events-home .ev-slider-track::-webkit-scrollbar {
    display: none;
}

/* On desktop, slides are 100% of viewport and contain a 2x2 grid */
.events-home .ev-slide {
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: max-content;
    /* Prevents 1-card slides from stretching vertically */
    align-content: start;
    gap: 24px;
    /* space between cards */
    scroll-snap-align: start;
}

/* ── SLIDER ARROWS ── */
.events-home .ev-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: color 0.2s, opacity 0.2s;
}

.events-home .ev-arrow svg {
    width: 32px;
    height: 32px;
}

.events-home .ev-arrow:hover {
    color: #e2e8f0;
}

.events-home .ev-arrow.disabled {
    opacity: 0.2;
    cursor: default;
}

.events-home .ev-arrow-prev {
    left: -50px;
    /* Place 50px carefully outside the 1140px wrapper */
}

.events-home .ev-arrow-next {
    right: -50px;
}

/* ── SLIDER DOTS ── */
.events-home .ev-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.events-home .ev-dot {
    width: 18px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s, width 0.3s ease;
}

.events-home .ev-dot.active {
    background: #ffffff;
    width: 30px;
    /* Expands active dot to match JetCarousel style */
}

/* ── RESPONSIVE ARROWS & NATIVE SCROLL FIXES ── */
@media (max-width: 1240px) {

    /* Bring arrows inward since there might not be 50px of empty screen edge */
    .events-home .ev-arrow-prev {
        left: -15px;
    }

    .events-home .ev-arrow-next {
        right: -15px;
    }
}

@media (max-width: 1024px) {

    /* Remove wrapper padding and hide arrows to favor native swipe and wider cards */
    .events-home .ev-slider-wrapper {
        padding: 0;
    }

    .events-home .ev-arrow {
        display: none !important;
    }

    .events-home .ev-slider-track {
        padding-bottom: 20px !important;
        gap: 16px;
        /* Show a styled scrollbar as visual indicator */
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    /* Flatten slides so cards sit side by side in the track */
    .events-home .ev-slide {
        display: contents !important;
    }

    .events-home .ev-slider-track::-webkit-scrollbar {
        height: 6px;
    }

    .events-home .ev-slider-track::-webkit-scrollbar-track {
        background: transparent;
    }

    .events-home .ev-slider-track::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
    }

    .events-home .ev-slider-track .simcal-event {
        margin-right: 0;
        /* Reset desktop margin */
    }
}

@media (max-width: 600px) {

    /* Remove wrapper padding to let cards stretch to maximum width */
    .events-home .ev-slider-wrapper {
        padding: 0;
    }

    /* Hide arrows on phone in favor of pagination dots and swiping */
    .events-home .ev-arrow {
        display: none !important;
    }
}

/* List items reset */
.events-home li.simcal-event {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

@media (max-width: 1024px) {
    .events-home li.simcal-event {
        /* On tablet, show ~1.5 cards */
        flex: 0 0 65% !important;
        scroll-snap-align: start;
    }
}

@media (max-width: 600px) {
    .events-home li.simcal-event {
        /* On phone, show 1 card with a little peek of the next */
        flex: 0 0 calc(100% - 30px) !important;
    }
}

/* ── CARD ── */
.events-home .simcal-event {
    display: grid !important;
    grid-template-columns: 110px 1fr;
    align-items: stretch;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 140px;
}

.events-home .simcal-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* ── LEFT DATE BLOCK (generated by JS) ── */
.events-home .ev-date-block {
    grid-column: 1;
    border-radius: 10px 0 0 10px;
    grid-row: 1 / -1;
    background: #2E2A28;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 10px;
    text-align: center;
}

.events-home .ev-date-day {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.events-home .ev-date-month {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}

/* ── RIGHT CONTENT AREA ── */
.events-home .ev-info {
    grid-column: 2;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Header (title + tag) */
.events-home .ev-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 10px;
}

.events-home .ev-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #1a202c;
    line-height: 1.3;
}

/* ── MEDIA QUERIES FOR SMALL MOBILE (< 600px) ── */
@media (max-width: 600px) {
    .events-home .simcal-event {
        grid-template-columns: 85px 1fr !important;
        min-height: 125px;
    }

    .events-home .ev-date-block {
        padding: 15px 5px;
    }

    .events-home .ev-date-day {
        font-size: 26px;
    }

    .events-home .ev-date-month {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    .events-home .ev-info {
        padding: 16px 14px;
    }

    .events-home .ev-header {
        flex-direction: column;
        gap: 6px;
    }

    .events-home .ev-header h3 {
        font-size: 15px;
    }

    .events-home .ev-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ── TAGS ── */
.events-home .event-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    background: #2E2A28;
    color: #fff;
}

/* ── Description ── */
.events-home .ev-desc {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #4a5568;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Service metadata (Jutlustab / Juhatab / Ülistus) */
.events-home .ev-service-meta {
    margin: 0 0 10px 0;
}

.events-home .ev-service-meta p {
    margin: 0 0 2px 0;
    font-size: 13px;
    color: #4a5568;
    line-height: 1.5;
}

.events-home .ev-service-meta strong {
    color: #2d3748;
    font-weight: 600;
}

/* ── Event Meta (Time / Location) ── */
.events-home .ev-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #718096;
    margin-top: auto;
}

.events-home .ev-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.events-home .ev-meta-item svg {
    opacity: 0.6;
    flex-shrink: 0;
}

/* ── Hide plugin chrome ── */
.simcal-edit-calendar {
    display: none !important;
}

.events-home .simcal-event hr {
    display: none !important;
}

/* ── MEDIA QUERIES FOR SMALL MOBILE (< 600px) ── */
@media (max-width: 600px) {
    .events-home li.simcal-event {
        /* On phone, show 1 card with a little peek of the next */
        flex: 0 0 calc(100% - 30px) !important;
    }

    .events-home .simcal-event {
        grid-template-columns: 80px 1fr !important;
        min-height: 110px;
    }

    .events-home .ev-date-block {
        padding: 12px 5px;
    }

    .events-home .ev-date-day {
        font-size: 24px;
    }

    .events-home .ev-date-month {
        font-size: 9px;
    }

    .events-home .ev-info {
        padding: 12px;
    }

    .events-home .ev-header {
        margin-bottom: 8px;
    }

    .events-home .ev-header .event-tag {
        display: none;
    }

    .events-home .ev-header h3 {
        font-size: 15px;
    }

    .events-home .ev-meta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        font-size: 11px;
    }

    .events-home .ev-meta svg {
        width: 12px;
        height: 12px;
    }

    .events-home .ev-service-meta p,
    .events-home .ev-desc {
        font-size: 12px;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
    }
}

/* ── Map Iframe ── */
.map-wrapper {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    line-height: 0;
}

.map-wrapper iframe {
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}

/* ── JET CAROUSEL PILL PAGINATION (FIXED) ── */

/* 1. Reset the container */
.elementor-element-0d47b6d .jet-carousel .jet-slick-dots,
.custom-pager2 .jet-carousel .jet-slick-dots,
.custom-pager3 .jet-carousel .jet-slick-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

/* 2. Style the LI items as the pills */
.elementor-element-0d47b6d .jet-carousel .jet-slick-dots li,
.custom-pager2 .jet-carousel .jet-slick-dots li,
.custom-pager3 .jet-carousel .jet-slick-dots li {
    display: block !important;
    width: 18px !important;
    height: 4px !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    /* Light gray for light BG */
    border-radius: 4px !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Fixes the padding seen in your screenshot */
    border: none !important;
    min-width: 0 !important;
}

/* 3. Hide the number spans inside */
.elementor-element-0d47b6d .jet-carousel .jet-slick-dots li span,
.custom-pager2 .jet-carousel .jet-slick-dots li span,
.custom-pager3 .jet-carousel .jet-slick-dots li span {
    display: none !important;
}

/* 4. Active State Pill */
.elementor-element-0d47b6d .jet-carousel .jet-slick-dots li.slick-active,
.custom-pager2 .jet-carousel .jet-slick-dots li.slick-active,
.custom-pager3 .jet-carousel .jet-slick-dots li.slick-active {
    background-color: #2E2A28 !important;
    /* Your dark color from the calendar */
    width: 30px !important;
    /* Makes it a longer pill when active */
}

.vk-live-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #111;
    margin: 0 auto;
}

/* Ensure container maintains aspect ratio for live stream */
.vk-live-wrap .vk-live-online {
    position: relative;
    width: 100%;
}

.vk-live-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.vk-live-overlay {
    position: absolute;
    inset: 0;
    background: rgba(46, 42, 40, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.vk-live-content {
    max-width: 640px;
    font-family: "Nunito", sans-serif;
    color: #fff;
}

.vk-live-content h3 {
    margin: 0 0 16px;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}

.vk-live-content p {
    margin: 0 0 26px;
    font-size: 20px;
    line-height: 1.5;
    color: #fff;
}

.vk-live-content a {
    display: inline-block;
    padding: 9px 18px;
    background: #fff;
    color: #111;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
}

.vk-live-iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Ensure proper display states */
.vk-live-offline {
    display: block;
}

.vk-live-online {
    display: none;
}

/* Elementor widget compatibility */
.elementor-widget-shortcode .vk-live-wrap,
.elementor-shortcode .vk-live-wrap {
    width: 100%;
    max-width: 100%;
}

/* Ensure iframe loads properly when shown */
.vk-live-online iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    .vk-live-wrap {
        border-radius: 12px;
    }

    .vk-live-overlay {
        padding: 24px;
        /* Fixed padded overflow */
    }

    .vk-live-image,
    .vk-live-iframe {
        height: 360px;
    }

    .vk-live-content h3 {
        font-size: 20px;
        white-space: nowrap;
        margin-bottom: 12px;
    }

    .vk-live-content p {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .vk-live-content a {
        padding: 8px 16px;
        font-size: 13px;
        white-space: normal;
    }
}

/* ── SERMONS SECTION ── */
.vk-sermons {
    display: grid;
    grid-template-columns: 7fr 4fr;
    gap: 24px;
    align-items: stretch;
    max-width: 100%;
}

/* ── Player ── */
.vk-sermons__player {
    position: relative;
    min-width: 0;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
}

.vk-sermons__player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ── Video Facade ── */
.vk-video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.vk-facade-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.vk-video-facade:hover .vk-facade-bg {
    opacity: 1;
}

.vk-facade-play {
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
}

.vk-video-facade:hover .vk-facade-play {
    transform: scale(1.05);
}

/* ── Sidebar (list only, no CTA) ── */
.vk-sermons__sidebar {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vk-sermons__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 6px;
    flex: 1;
    min-height: 0;
}

/* Custom scrollbar */
.vk-sermons__list::-webkit-scrollbar {
    width: 4px;
}

.vk-sermons__list::-webkit-scrollbar-track {
    background: transparent;
}

.vk-sermons__list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.vk-sermons__list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ── Sermon Item Buttons ── */
.vk-sermon-item {
    display: flex;
    gap: 14px;
    align-items: stretch;
    border: 1px solid rgba(0, 0, 0, 0.04);
    background: rgba(0, 0, 0, 0.03);
    /* Subtle backdrop so it isn't floating */
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    text-align: left;
    font-family: inherit;
    color: inherit;
    flex: 1;
    outline: none !important;
    /* Fixes random blue focus glow */
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    /* Kills iOS tap blue flash entirely */
}

/* Hard reset for Astra theme focus styles */
.vk-sermon-item:focus,
.vk-sermon-item:focus-visible,
.vk-sermon-item:active {
    outline: none !important;
    box-shadow: none !important;
}

.vk-sermon-item:hover {
    opacity: 0.8;
    transform: translateY(-1px);
}

.vk-sermon-item.is-active {
    background: #2E2A28 !important;
    border-color: #2E2A28 !important;
    color: #fff !important;
    opacity: 1;
    transform: none;
}

.vk-sermon-item img {
    width: 130px;
    min-height: 80px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}

/* Text block inside sermon item */
.vk-sermon-item .vk-sermon-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.vk-sermon-item .vk-sermon-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    margin-top: auto;
    margin-bottom: auto;
}

.vk-sermon-item .vk-sermon-text::before {
    content: 'Teemal';
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(0, 0, 0, 0.35);
}

.vk-sermon-item.is-active .vk-sermon-text::before {
    color: rgba(255, 255, 255, 0.45);
}

.vk-sermon-tags {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: auto;
    overflow: hidden;
}

.vk-sermon-tag {
    display: inline-flex;
    align-items: center;
    background: #2E2A28;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize;
}

.vk-sermon-item.is-active .vk-sermon-tag {
    background: #fff;
    color: #2E2A28;
}

/* Fallback: if no .vk-sermon-text wrapper, style the bare <span> */
.vk-sermon-item>span {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

/* ── Sermons Tablet & Mobile ── */
@media (max-width: 1024px) {
    .vk-sermons {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .vk-sermons__list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap !important;
        /* Force row preservation on mobile */
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        /* Scrollbar breathing room */
        padding-right: 20px;
        gap: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar in FF */
    }

    /* Hide scrollbar in WebKit but keep functionality */
    .vk-sermons__list::-webkit-scrollbar {
        display: none;
    }

    .vk-sermon-item {
        flex: 0 0 calc(90vw - 30px);
        /* Slightly narrower to show next card peeking */
        max-width: 320px;
        /* Cap width on tablets so they don't get massive */
        scroll-snap-align: start;
        min-height: 80px;
        padding: 10px;    /* Less padding on mobile to save space */
        gap: 10px;        /* Tighter gap between thumb and text */
    }

    .vk-sermon-item img {
        width: 100px;      /* Smaller thumb on mobile */
        min-height: 70px;
    }

    .vk-sermon-item .vk-sermon-title {
        font-size: 14px;   /* Slightly smaller title */
    }

    .vk-sermon-tag {
        font-size: 9px;
        padding: 4px 8px;  /* Tighter tags */
    }

    /* ── Sermon Slider Dots ── */
    .vk-sermons-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }

    .vk-dot {
        width: 18px;
        height: 4px;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s, width 0.3s ease;
    }

    .vk-dot.active {
        background: #2E2A28;
        /* The dark branding color */
        width: 30px;
    }
}

/* ================================
   GRID CALENDAR STYLING (ID 3213)
   Applied via class "vk-grid-calendar"
================================ *//* 1. Header & Navigation - STYLES FOR THE JS-DETACHED HEADER */
/* 1. Header & Navigation - STYLES FOR THE JS-DETACHED HEADER */
.vk-calendar-header-wrap {
    display: flex !important;
    width: 100% !important;
    background: #3C3C3C !important;
    padding: 25px 0 15px 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    margin: 0 !important;
    border: 1px solid #3C3C3C !important; /* Unified side color */
    border-bottom: none !important; /* Remove internal divider */
}

.vk-calendar-header-wrap .simcal-nav:first-child,
.vk-calendar-header-wrap .simcal-nav:last-child {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 60px !important;
    padding: 0 !important;
    z-index: 100 !important;
    background: transparent !important;
    border: none !important;
}

.vk-calendar-header-wrap .simcal-nav:first-child {
    left: 15px !important;
}

.vk-calendar-header-wrap .simcal-nav:last-child {
    right: 15px !important;
}

.vk-calendar-header-wrap .simcal-nav.simcal-current {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
}

.vk-calendar-header-wrap .simcal-nav.simcal-current h3 {
    margin: 0 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #fff !important;
}

/* 2. Grid Table - PURE TABLE LOGIC FOR 100% RELIABILITY */
.vk-grid-calendar .simcal-calendar-head {
    display: table-header-group !important;
}

.vk-grid-calendar .simcal-calendar-grid,
.vk-grid-calendar table {
    display: table !important;
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

.vk-grid-calendar .simcal-calendar-head tr.simcal-weekdays,
.vk-grid-calendar .simcal-weekdays {
    display: table-row !important;
    background: #3C3C3C !important;
    border: none !important; /* Remove internal row borders */
}

.vk-grid-calendar .simcal-weekdays th {
    display: table-cell !important;
    width: 14.2857% !important;
    padding: 15px 0 !important; /* More breathing room */
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #fff !important;
    vertical-align: middle !important;
    border: none !important; /* Remove cell borders in header */
}

/* Re-show text once JS translates it */
.vk-grid-calendar.vk-translated .vk-calendar-header-wrap h3,
.vk-grid-calendar.vk-translated .simcal-weekdays th {
    opacity: 1 !important;
}

/* Header row dark background */
.vk-grid-calendar .simcal-calendar-head tr:first-child {
    background: #3C3C3C !important;
}

.vk-grid-calendar .simcal-nav-button {
    background: rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease;
    border: none !important;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.vk-grid-calendar .simcal-nav-button * {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.vk-grid-calendar .simcal-nav-button:hover {
    background: rgba(255,255,255,0.3) !important;
}

/* 2. Grid Table - PURE TABLE LOGIC FOR 100% RELIABILITY */
.vk-grid-calendar .simcal-calendar-grid {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #fff !important;
    border: 1px solid #3C3C3C !important; /* Matches header sides */
    border-top: none !important; /* Flush with header */
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    overflow: hidden;
    margin: 0 !important;
}

.vk-grid-calendar .simcal-calendar-grid th,
.vk-grid-calendar .simcal-calendar-grid td {
    box-sizing: border-box !important;
    border: 1px solid #eee !important;
    padding: 10px 5px !important;
}

/* Weekday Headers & Day Cells (Enforce exactly 7 columns) */
.vk-grid-calendar .simcal-calendar-grid thead.simcal-weekdays th,
.vk-grid-calendar .simcal-weekdays th,
.vk-grid-calendar .simcal-day,
.vk-grid-calendar .simcal-day-empty {
    width: 14.285% !important;
}

/* Weekday Headers */
.vk-grid-calendar .simcal-calendar-grid thead th,
.vk-grid-calendar .simcal-weekdays th {
    background: #3C3C3C !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    border-color: #3C3C3C !important;
    padding: 12px 5px !important;
}

/* Anti-flicker specifically for the weekday text */
.vk-grid-calendar .simcal-weekdays th {
    color: transparent !important;
}

/* 3. Day Cells */
.vk-grid-calendar .simcal-day {
    height: 120px !important;
    min-height: 120px !important;
    max-height: 120px !important;
    vertical-align: top !important;
    background: #fff;
    transition: all 0.2s ease;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative;
    /* Hide scrollbar for a cleaner grid appearance but keep scroll functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vk-grid-calendar .simcal-day::-webkit-scrollbar {
    display: none;
}

/* CRITICAL: The plugin injects inline min-heights (e.g., 350px) into a wrapper div inside every cell.
   This rule overrides that behavior to prevent massive, unwanted calendar stretching. */
.vk-grid-calendar .simcal-day > div {
    min-height: 0 !important;
}

.vk-grid-calendar .simcal-day:not(.simcal-day-has-events) {
    background: #faf8f5 !important;
    opacity: 0.5;
}

.vk-grid-calendar .simcal-day-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2A2A2A !important;
    margin-bottom: 8px;
    display: block;
    background: none !important;
}

/* Today highlight */
.vk-grid-calendar .simcal-today {
    background-color: #F4EFE6 !important;
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid #eee !important;
    opacity: 1 !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Strip any injected focus rings or blue borders inside the today cell */
.vk-grid-calendar .simcal-today *,
.vk-grid-calendar .simcal-today > div,
.vk-grid-calendar .simcal-today .simcal-day-label,
.vk-grid-calendar .simcal-today .simcal-day-number {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

.vk-grid-calendar .simcal-today .simcal-day-label {
    color: #2E2A28 !important;
    line-height: 1 !important;
}

/* 3. Event Pills - GLOBAL VISIBILITY (Fixes March "Black Line" issue) */
.vk-grid-calendar li.simcal-event {
    background: #2E2A28 !important;
    color: #fff !important;
    padding: 6px 4px !important;
    margin: 3px 0 !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    white-space: normal !important; /* Wrap globally */
    word-break: break-word !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-height: min-content !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
}

.vk-grid-calendar .simcal-event .simcal-event-title {
    display: block !important;
    color: #fff !important;
    visibility: visible !important;
    font-size: 11px !important;
}

.vk-grid-calendar .simcal-event:hover {
    background-color: #4a4542 !important;
}

/* Hide raw payload inside grid */
.vk-grid-calendar .simcal-event-details,
.vk-grid-calendar .simcal-tooltip-content {
    display: none !important;
}

/* 5. Kill blue focus/active outlines (SAFE VERSION) */
.vk-grid-calendar *:focus,
.vk-grid-calendar *:active,
.vk-grid-calendar .simcal-event:focus,
.vk-grid-calendar .simcal-event:active {
    outline: none !important;
    box-shadow: none !important;
    /* Removed border: none to prevent layout shifting on click */
}

.vk-grid-calendar .simcal-calendar-grid td {
    outline: none !important;
}

/* Ensure tooltips are always on top */
.qtip {
    z-index: 2000000000 !important;
}

/* 6. Mobile Overrides - Disable Dots & Force Event Cards */
.vk-grid-calendar .simcal-events-dots {
    display: none !important;
}

/* Force the parent <ul> and child <li> to remain fully visible */
.vk-grid-calendar .simcal-events,
.vk-grid-calendar .simcal-event {
    display: block !important; 
    visibility: visible !important;
}

/* Ensure the raw plugin event payload remains hidden inside the grid pill on mobile */
.vk-grid-calendar .simcal-calendar-grid .simcal-event-details,
.vk-grid-calendar .simcal-calendar-grid .simcal-tooltip-content {
    display: none !important;
}

/* On mobile, clicking a cell with dots normally opens a giant day view popup.
   This disables that click behavior since the cards now have their own tooltips. */
.vk-grid-calendar .simcal-day-has-events {
    cursor: default !important;
}

@media (max-width: 768px) {
    .vk-grid-calendar li.simcal-event,
    .vk-grid-calendar .simcal-event {
        padding: 2px 1px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        border-radius: 2px !important;
        margin-bottom: 2px !important;
        text-align: center !important;
        height: auto !important;
        min-height: 12px !important;
        white-space: normal !important; /* Wrap text on mobile */
        word-break: break-word !important;
        overflow: visible !important; /* Don't clip text */
    }

    /* Force the title text to actually show up (plugin hides it on mobile) */
    .vk-grid-calendar .simcal-event .simcal-event-title {
        display: block !important;
        color: #fff !important;
        visibility: visible !important;
        font-size: 8px !important;
    }
    
    /* Hide the time in the tiny pill on mobile to save space for the title */
    .vk-grid-calendar .simcal-event .simcal-event-start,
    .vk-grid-calendar .simcal-event .simcal-event-end {
        display: none !important;
    }
}



/* ================================
   TOOLTIP / POPUP (Card Style)
   Matches home page event cards
================================ */

.qtip.simcal-default-calendar {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
    background: #fff !important;
    max-width: 420px !important;
    min-width: 320px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

.qtip.simcal-default-calendar .qtip-content {
    padding: 0 !important;
}

/* Hide default plugin details immediately to prevent flash of unstyled content */
.qtip.simcal-default-calendar .simcal-event-details {
    display: none !important;
}

/* Card layout container (built by JS) */
.vk-tooltip-card {
    display: flex;
    font-family: 'Nunito', sans-serif;
    color: #2A2A2A;
    min-height: 140px;
}

.vk-tooltip-card .vk-tc-date {
    background: #2E2A28;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    padding: 20px 16px;
    flex-shrink: 0;
}

.vk-tooltip-card .vk-tc-date .vk-tc-day {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.vk-tooltip-card .vk-tc-date .vk-tc-month {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
    opacity: 0.85;
}

.vk-tooltip-card .vk-tc-info {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.vk-tooltip-card .vk-tc-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.vk-tooltip-card .vk-tc-header h3 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: #2A2A2A;
    line-height: 1.3;
}

.vk-tooltip-card .vk-tc-tag {
    display: inline-block;
    background: #2E2A28;
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.vk-tooltip-card .vk-tc-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 10px;
}

.vk-tooltip-card .vk-tc-desc p {
    margin: 2px 0;
}

.vk-tooltip-card .vk-tc-desc strong {
    color: #2A2A2A;
}

.vk-tooltip-card .vk-tc-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: auto;
}

.vk-tooltip-card .vk-tc-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #666;
    font-weight: 600;
}

.vk-tooltip-card .vk-tc-meta-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Hide default tooltip content when our card is injected */
.qtip .simcal-event-details.vk-card-applied {
    display: none !important;
}

/* 6. Responsive */
@media (max-width: 900px) {
    .vk-grid-calendar .simcal-day {
        height: 90px !important;
    }
}

@media (max-width: 600px) {
    .vk-grid-calendar {
        padding: 12px;
    }

    .vk-calendar-header-wrap .simcal-nav.simcal-current h3 {
        font-size: 20px !important;
    }

    .vk-grid-calendar .simcal-day {
        height: 65px !important;
        padding: 3px !important;
    }

    .vk-grid-calendar .simcal-day-label {
        font-size: 11px !important;
        margin-bottom: 3px;
    }

    .vk-grid-calendar li.simcal-event {
        font-size: 8px !important;
        padding: 4px 1px !important;
        border-radius: 4px !important;
        margin-bottom: 2px !important;
        height: auto !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow: visible !important;
        user-select: none;
    }

    /* Force visibility at small screen */
    .vk-grid-calendar .simcal-event .simcal-event-title {
        display: block !important;
        visibility: visible !important;
        color: #fff !important;
        font-size: 8px !important;
    }

    .vk-grid-calendar .simcal-event .simcal-event-title * {
        pointer-events: none !important;
    }

    .vk-tooltip-card {
        flex-direction: column;
    }

    .vk-tooltip-card .vk-tc-date {
        flex-direction: row;
        gap: 8px;
        padding: 12px 16px;
        min-width: unset;
    }

    .vk-tooltip-card .vk-tc-date .vk-tc-day {
        font-size: 24px;
    }

    .qtip.simcal-default-calendar {
        max-width: 300px !important;
        min-width: 260px !important;
    }
}