/*
 * tribe-events.css
 * Custom styling for The Events Calendar plugin to match jaw-theme.
 * Loaded via functions.php (jaw_enqueue_tribe_styles).
 *
 * IMPORTANT: In Events → Settings → Display, set:
 *   - "Enable Skeleton Styles" (radio) — ON
 *   - "Events Template" — "Default Events Template" (NOT Default Page Template)
 */

/* ── Reset tribe defaults ───────────────────────────────── */
.tribe-events *,
.tribe-events *::before,
.tribe-events *::after {
    box-sizing: border-box;
}

.tribe-events {
    color: var(--color-text) !important;
    font-family: var(--font-body) !important;
    background: transparent !important;
}

/* ── Typography ─────────────────────────────────────────── */
.tribe-events h1,
.tribe-events h2,
.tribe-events h3,
.tribe-events h4,
.tribe-events h5,
.tribe-events h6 {
    font-family: var(--font-display) !important;
    color: var(--color-text) !important;
}

.tribe-events p,
.tribe-events span,
.tribe-events div {
    color: var(--color-text-muted);
}

/* ── Links ──────────────────────────────────────────────── */
.tribe-events a {
    color: var(--color-accent) !important;
    text-decoration: none !important;
}
.tribe-events a:hover {
    color: var(--color-accent-light) !important;
}

/* ── Header bar (month title + nav arrows) ──────────────── */
.tribe-events-calendar-month__header-column,
.tribe-events-pro-summary__event-date-tag-weekday,
.tribe-events-header__nav-list-item-link,
.tribe-events-c-nav__next,
.tribe-events-c-nav__prev {
    color: var(--color-text) !important;
    background: transparent !important;
    border: none !important;
}

.tribe-events-c-nav__next:hover,
.tribe-events-c-nav__prev:hover {
    color: var(--color-accent) !important;
}

/* ── View switcher (Month / List) ───────────────────────── */
.tribe-events-c-view-selector__list-item-link,
.tribe-events-c-view-selector__button {
    color: var(--color-text-muted) !important;
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    padding: 0.35rem 0.85rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.tribe-events-c-view-selector__list-item-link:hover,
.tribe-events-c-view-selector__button:hover,
.tribe-events-c-view-selector__list-item-link--active {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background: transparent !important;
}

/* ── Today button ────────────────────────────────────────── */
.tribe-events-c-top-bar__today-button,
.tribe-events-c-nav__today {
    color: var(--color-text-muted) !important;
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    padding: 0.35rem 0.85rem !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.tribe-events-c-top-bar__today-button:hover,
.tribe-events-c-nav__today:hover {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

/* ── Calendar grid ───────────────────────────────────────── */
.tribe-events-calendar-month__body {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
}

.tribe-events-calendar-month__calendar-event,
.tribe-events-calendar-month__grid-cell {
    background: transparent !important;
    border-color: var(--color-border) !important;
}

.tribe-events-calendar-month__calendar-event:hover {
    background: var(--color-surface-2) !important;
}

.tribe-events-calendar-month__grid-cell-date {
    color: var(--color-text-muted) !important;
}

.tribe-events-calendar-month__grid-cell--today {
    background: rgba(201, 168, 76, 0.08) !important;
}

.tribe-events-calendar-month__grid-cell--today .tribe-events-calendar-month__grid-cell-date {
    color: var(--color-accent) !important;
}

/* ── Event titles in grid ─────────────────────────────────── */
.tribe-events-calendar-month__calendar-event-title,
.tribe-events-calendar-month__calendar-event-title a {
    color: var(--color-text) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
}

.tribe-events-calendar-month__calendar-event-title a:hover {
    color: var(--color-accent) !important;
}

/* ── List view ───────────────────────────────────────────── */
.tribe-events-calendar-list__event {
    border-bottom: 1px solid var(--color-border) !important;
    padding: 2rem 0 !important;
    background: transparent !important;
}

.tribe-events-calendar-list__event-date-tag-month,
.tribe-events-calendar-list__event-date-tag-daynum {
    color: var(--color-accent) !important;
    font-family: var(--font-display) !important;
}

.tribe-events-calendar-list__event-date-tag-month {
    font-size: 0.75rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.tribe-events-calendar-list__event-date-tag-daynum {
    font-size: 2.5rem !important;
    line-height: 1 !important;
}

.tribe-events-calendar-list__event-title,
.tribe-events-calendar-list__event-title a {
    font-family: var(--font-display) !important;
    font-size: 1.5rem !important;
    color: var(--color-text) !important;
}

.tribe-events-calendar-list__event-title a:hover {
    color: var(--color-accent) !important;
}

.tribe-events-calendar-list__event-datetime-wrapper,
.tribe-events-calendar-list__event-venue {
    color: var(--color-text-muted) !important;
    font-size: 0.85rem !important;
}

/* ── Single event page ───────────────────────────────────── */
.tribe-events-single .tribe-events-single-section {
    color: var(--color-text-muted) !important;
}

.tribe-events-single-event-title {
    font-family: var(--font-display) !important;
    color: var(--color-text) !important;
}

.tribe-events-single .tribe-venue {
    color: var(--color-text-muted) !important;
}

/* ── Buttons (general) ───────────────────────────────────── */
.tribe-events .tribe-common-c-btn,
.tribe-events .tribe-common-c-btn-border,
.tribe-events button[class*="tribe"],
.tribe-events a[class*="tribe-common-c-btn"] {
    background: transparent !important;
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border) !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 0.5rem 1.2rem !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
}

.tribe-events .tribe-common-c-btn:hover,
.tribe-events .tribe-common-c-btn-border:hover,
.tribe-events button[class*="tribe"]:hover,
.tribe-events a[class*="tribe-common-c-btn"]:hover {
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    background: transparent !important;
}

/* ── Month/year header text ──────────────────────────────── */
.tribe-events-c-top-bar__datepicker-button,
.tribe-events-c-top-bar__month-year {
    font-family: var(--font-display) !important;
    font-size: 1.4rem !important;
    color: var(--color-text) !important;
    background: transparent !important;
    border: none !important;
}

/* ── Datepicker / tooltip ────────────────────────────────── */
.tribe-events-calendar-month__calendar-event-tooltip {
    background: var(--color-surface-2) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
}

.tribe-events-calendar-month__calendar-event-tooltip-title {
    color: var(--color-text) !important;
    font-family: var(--font-display) !important;
}

.tribe-events-calendar-month__calendar-event-tooltip-datetime {
    color: var(--color-text-muted) !important;
}

/* ── Mobile overrides ────────────────────────────────────── */
@media (max-width: 768px) {
    .tribe-events-calendar-month__grid-cell-date {
        font-size: 0.75rem !important;
    }
}