/* ==========================
CUSTOMIZATION FOR THE EVENTS CALENDAR
========================= */

/* 1. "<< ALL EVENTS" LINK AT THE TOP */
.tribe-events-single .tribe-events-back a,
.tribe-events-single a.tribe-events-back,
main .tribe-events-back__link {
    color: #2F3088 !important;
}

/* 2. MAIN EVENT DESCRIPTION (Body Text) */
.tribe-events-single-event-description p,
.tribe-events-single .tribe-events-content p,
.entry-content .tribe-events-single-event-description {
    color: #2F3088 !important;
}

/* 3. VENUE NAME HEADING */
.tribe-events-meta-group .tribe-events-venue,
.tribe-events-meta-group dd.tribe-venue,
.tribe-events-meta-group .tribe-events-venue a,
.tribe-events-single dd.author.fn.org {
    color: #2F3088 !important;
}

/* 4. DETAILS SECTION LABELS (Headers like "Details", "Organizer", "Venue", "Category", "Website", "Phone") */
.tribe-events-meta-group dt,
.tribe-events-meta-group .tribe-events-single-section-title,
.tribe-events-single .tribe-events-meta-group h2,
.tribe-events-single .tribe-events-meta-group h3,
.tribe-events-meta-group dt.tribe-common-b2--bold {
    color: #2F3088 !important;
}

/* 5. METADATA VALUES (The Phone Number, Categories, & Website details) */
.tribe-events-meta-group dd.tribe-events-event-categories a,
.tribe-events-meta-group dd.tribe-events-event-url a,
.tribe-events-meta-group .tribe-events-organizer-phone,
.tribe-events-meta-group dd {
    color: #2F3088 !important;
}

/* Change description/excerpt text color on Calendar Views (List, Month tooltips) */
.tribe-events-calendar-list__event-description,
.tribe-events-calendar-list__event-description p {
    color: #2F3088 !important;
}

/* Force Venue text & headers */
.tribe-events-meta-group dt,
.tribe-events-meta-group dd,
.tribe-events-venue,
.tribe-events-venue-details,
.tribe-events-address span,
.tribe-common-b2--bold {
    color: #2F3088 !important;
}

/* The main price tag text */
.tribe-events-cost,
.tribe-events-event-cost,
.tribe-events-calendar-list__event-price,
.tribe-common-b2--bold.tribe-events-calendar-list__event-price {
    color: #2F3088 !important;
}

/* Targets the month separator headers in List View */
.tribe-events-calendar-list__month-separator-text {
    color: #2F3088 !important;
}

/* Change the Day number text color */
.tribe-events-calendar-list__event-date-tag-daynum {
    color: #2F3088 !important;
}

/* Change the color of the day of the week text */
.tribe-events-calendar-list__event-date-tag-weekday {
    color: #2F3088 !important;
}

/* Change the font color of the "Events From" / datepicker button text */
.tribe-events button.tribe-events-c-top-bar__datepicker-button,
.tribe-common .tribe-events-c-top-bar__datepicker-button {
    color: #2F3088 !important;
}

/* Change the color of the little calendar icon inside that button */
.tribe-events-c-top-bar__datepicker-button-icon-svg path {
    fill: #2F3088 !important;
}

/* Change header days (Su, Mo, Tu...) inside the popup */
.datepicker table tr th.dow {
    color: #2F3088 !important;
}

/* Change the color of the left and right navigation arrows */
.tribe-events-c-top-bar__nav-link svg,
.tribe-events-c-top-bar__nav-link path {
    fill: #2F3088 !important;
}

/* 1. Set the initial button colors (Light Blue background, Dark Blue text) */
.tribe-events .tribe-events-c-top-bar__today-button,
.tribe-common .tribe-events-c-top-bar__today-button,
button.tribe-events-c-top-bar__today-button {
    background-color: #B8D7F2 !important;
    color: #2F3088 !important;
	  border-color: #B8D7F2 !important;
		font-weight: 600 !important;
}

/* 2. REVERSE colors on hover (Dark Blue background, Light Blue text) */
.tribe-events .tribe-events-c-top-bar__today-button:hover,
button.tribe-events-c-top-bar__today-button:hover {
    background-color: #2F3088 !important;
    color: #B8D7F2 !important;
    border-color: #2F3088 !important;
		font-weight: 600 !important;
}

/* Change the color of the active view underline */
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after,
.tribe-common .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after {
    background-color: #2F3088 !important;
}

/* Change the color of the search magnifying glass icon */
.tribe-events-c-search__input-control-has-icon .tribe-events-c-search__input-control-icon-svg path,
.tribe-common .tribe-events-c-search__input-control-icon-svg path {
    fill: #2F3088 !important;
}

/* Change Find Events button hover color */
.tribe-common .tribe-events-c-search__button:hover,
.tribe-common-c-btn.tribe-events-c-search__button:hover {
    background-color: #2F3088 !important;
    color: #B8D7F2 !important;
}

/* Change color for the entire venue address block */
.tribe-events .tribe-events-calendar-list__event-venue,
.tribe-common .tribe-events-calendar-list__event-venue-address,
.tribe-common .tribe-events-calendar-list__event-venue-title {
    color: #2F3088 !important;
}

/* Change the category text color inside colored pill blocks */
/* Target any container text that mentions 'category' or 'categories' inside the calendar */
.tribe-events *[class*="category"],
.tribe-events *[class*="categories"],
.tribe-common *[class*="category"] {
    color: #2F3088 !important;
}

/* 1. Target the main price text in the event list view */
.tribe-events .tribe-events-calendar-list__event-cost,
.tribe-common .tribe-events-calendar-list__event-cost,
.tribe-events-event-cost span {
    color: #2F3088 !important;
}

/* POPUP CALENDAR */
/* Change the Month and Year title color at the top of the popup calendar */
.datepicker-dropdown .datepicker-switch,
.datepicker table tr th.datepicker-switch,
.datepicker table thead tr:first-child th {
    color: #2F3088 !important;
}

/* Change the color of the previous and next arrows in the popup header */
/* If the arrows are drawn via background URL masks or SVGs */
.datepicker th.prev svg path,
.datepicker th.next svg path,
.datepicker-dropdown .prev, 
.datepicker-dropdown .next {
    fill: #2F3088 !important;
	  stroke: #2F3088 !important;
    color: #2F3088 !important;
}

/* Force color on any text element inside the picker day grid */
div[class*="datepicker"] td,
div[class*="datepicker"] td * {
    color: #2F3088 !important;
}

/* Target past date buttons inside the calendar dropdown picker */
.tribe-events button.day.past,
.tribe-common button.day.past,
button.day.past {
    color: #2F3088 !important;
    opacity: 0.50 !important;  
    background: transparent !important;
}

/* Change the border/outline color of the selected active date button */
.tribe-events button.day.active,
.tribe-common button.day.active,
button.day.active {
    outline-color: #2F3088 !important;
    border-color: #2F3088 !important;
}

/* Change the outline color and thickness when hovering over non-selected dates */
.tribe-events button.day:not(.active):hover,
.tribe-common button.day:not(.active):hover,
button.day:not(.active):hover {
 outline-color: #2F3088 !important;
    border-color: #2F3088 !important;
}

/* MONTH VIEW ON EVENTS PAGE */
/* Target the main notice text string */
.tribe-events .tribe-events-c-messages__message,
.tribe-common .tribe-events-c-messages__message-list-item,
.tribe-events-c-messages__message-list-item {
    color: #2F3088 !important;
}

/* Change the color of the calendar 'X' icon inside the notice banner */
.tribe-events .tribe-events-c-messages__message-icon-svg,
.tribe-events .tribe-events-c-messages__message-icon-svg path,
.tribe-common .tribe-events-c-messages__message-icon-svg path {
    stroke: #2F3088 !important;
}

/* Change the border/outline color of the selected active month button */
.tribe-events button.month.active,
.tribe-common button.month.active,
button.month.active,
button.month.current {
    /* 1. Force clear the plugin's solid default shadow behavior */
    box-shadow: none !important;
    border: none !important;

    /* 2. Recreate your clean outline with a crisp 2px gap around the button */
    outline: 2px solid #2F3088 !important;
    outline-offset: 2px !important; /* This creates the clear gap/space */
}

/* Change the outline color and thickness when hovering over non-selected month */
.tribe-events button.month:not(.active):hover,
.tribe-common button.month:not(.active):hover,
button.month:not(.active):hover,
button.month.focused:hover {
    box-shadow: none !important;
    border: none !important;
    outline: 2px solid #2F3088 !important;
    outline-offset: 2px !important; /* Keeps the gap look identical on hover */
}

/* Target past month buttons inside the Month View selection dropdown panel */
.tribe-events button.month.past,
.tribe-common button.month.past,
button.month.past {
    color: #2F3088 !important;
    opacity: 0.50 !important; 
    background: transparent !important;
}

/* Target the event title links inside the Month View grid */
.tribe-events .tribe-events-calendar-month__calendar-event-title-link,
.tribe-common .tribe-events-calendar-month__calendar-event-title-link,
.tribe-events-calendar-month__calendar-event-title a {
    color: #2F3088 !important;
}

/* Target the event time text inside Month View grid entries */
.tribe-events .tribe-events-calendar-month__calendar-event-datetime,
.tribe-common .tribe-events-calendar-month__calendar-event-datetime,
time.tribe-events-calendar-month__calendar-event-datetime {
    color: #2F3088 !important;
}

/* Target the regular description text paragraph inside the hover popup */
.tribe-events-calendar-month__calendar-event-tooltip-description,
.tribe-common .tribe-events-calendar-month__calendar-event-tooltip-description p,
.tribe-events .tribe-events-calendar-month__calendar-event-tooltip-description {
    color: #2F3088 !important;
}

/* Target the price text inside the Month View hover tooltip */
.tribe-events .tribe-events-calendar-month__calendar-event-tooltip-cost,
.tribe-common .tribe-events-calendar-month__calendar-event-tooltip-cost,
.tribe-events-calendar-month__calendar-event-tooltip-cost span {
    color: #2F3088 !important;
}

/* INDIVIDUAL EVENT PAGES */
/* 1. Change the color of the single event navigation link text */
.tribe-events-sub-nav li a,
.tribe-events-single-nav-links a,
.tribe-events-c-nav__list-item-link,
.tribe-events-nav-previous a,
.tribe-events-nav-next a {
    color: #2F3088 !important; 
	font-weight: 600 !important;
}

/* Keep it blue on hover, but make it semi-transparent/faded */
.tribe-events-sub-nav li a:hover,
.tribe-events-single-nav-links a:hover,
.tribe-events-c-nav__list-item-link:hover,
.tribe-events-nav-previous a:hover,
.tribe-events-nav-next a:hover,
.tribe-events-c-nav__list-item-link:hover path {
    color: #2F3088 !important;
    fill: #2F3088 !important;
    stroke: #2F3088 !important;
	font-weight: 600 !important;
    opacity: 0.60 !important; 
}

/* Change all meta list labels and detail nodes to blue */
.tribe-events-meta-group span[class*="label"],
.tribe-events-meta-group [class*="tribe-venue"],
.tribe-events-meta-item * {
    color: #2F3088 !important;
}

/* Only change column widths on tablets and desktop screens */
@media screen and (min-width: 768px) {
    
    /* 1. Target the 'Details' meta group block */
    .tribe-events-meta-group.tribe-events-meta-group-details {
        width: 40% !important;
        float: left !important;
        clear: none !important;
    }

    /* 2. Target the 'Venue' meta group block */
    .tribe-events-meta-group.tribe-events-meta-group-venue {
        width: 40% !important;
        float: left !important;
        clear: none !important;
    }

    /* 3. Target the 'Map' visualization container wrapper */
    .tribe-events-single-meta-block.tribe-events-meta-group-gmap {
        width: 20% !important;
        float: left !important;
        clear: none !important;
        padding-left: 20px !important;
        box-sizing: border-box !important;
    }
}

/* ADD TO CALENDAR BUTTON */
/* 1. Set the initial button colors (Light Blue background, Dark Blue text) */
.tribe-events .tribe-events-c-subscribe-dropdown__button,
.tribe-common .tribe-events-c-subscribe-dropdown__button,
button.tribe-events-c-subscribe-dropdown__button {
    background-color: #B8D7F2 !important;
    color: #2F3088 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important; /* Smooth color swap animation */
}

/* 2. Change the tiny arrow icon inside the button to match the dark blue text */
.tribe-events-c-subscribe-dropdown__button-icon-svg path {
    fill: #2F3088 !important;
}

/* 3. REVERSE colors on hover (Dark Blue background, Light Blue text) */
.tribe-events .tribe-events-c-subscribe-dropdown__button:hover,
button.tribe-events-c-subscribe-dropdown__button:hover {
    background-color: #2F3088 !important;
    color: #B8D7F2 !important;
    opacity: 1 !important;                 /* Keeps colors bright and fully solid */
}

/* Ensure the tiny arrow inside the button also reverses cleanly on hover */
button.tribe-events-c-subscribe-dropdown__button:hover .tribe-events-c-subscribe-dropdown__button-icon-svg path {
    fill: #B8D7F2 !important;
}

/* Style the inside of the dropdown list once clicked (Google/iCal links) */
.tribe-events-c-subscribe-dropdown__list-item-link,
a.tribe-events-c-subscribe-dropdown__list-item-link {
    color: #2F3088 !important;
}

/* LIST VIEW */
/* 1. Target the text span labels for the bottom navigation buttons */
.tribe-events span.tribe-events-c-nav__prev-label,
.tribe-events span.tribe-events-c-nav__next-label,
span[class*="tribe-events-c-nav__"] {
    color: #2F3088 !important;
    font-weight: 600 !important;
}

/* Change previous/next arrow color */
.tribe-events .tribe-events-c-nav__list-item-link svg,
.tribe-events .tribe-events-c-nav__list-item-link svg path,
a[class*="tribe-events-c-nav__"] svg,
a[class*="tribe-events-c-nav__"] path {
    fill: #2F3088 !important;
    color: #2F3088 !important;
}

/* 1. Reset disabled navigation buttons to a light gray color */
.tribe-events .tribe-events-c-nav__list-item[aria-disabled="true"] .tribe-events-c-nav__prev-label,
.tribe-events .tribe-events-c-nav__list-item[aria-disabled="true"] .tribe-events-c-nav__next-label,
.tribe-events .tribe-events-c-nav__list-item[aria-disabled="true"] svg,
.tribe-events .tribe-events-c-nav__list-item[aria-disabled="true"] path,
.tribe-events-c-nav__list-item--disabled *,
.tribe-events-c-nav__list-item[disabled] * {
    color: #a8a8a8 !important;
    fill: #a8a8a8 !important; 
}