/* ==========================================================================
   The Events Calendar — Río Hondo College styles
   Enqueued only on Events Calendar pages (see functions/enqueue-scripts.php).

   1. Río palette applied through the plugin's CSS custom properties
   2. Calendar views (month/list/day) — plain layout, brand accents
   3. Single event — banner (mirrors the Inner Banner block), schedule,
      description, meta, prev/next navigation
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Plugin CSS custom properties — Río palette
   Gold #F9C900 / Black #000 (primary); Dark Blue #2A6491,
   Med Blue #2A96C6, Green #33A961 (secondary accents)
   -------------------------------------------------------------------------- */

/* :root:root doubles the specificity on purpose: the WordPress Customizer's
   old Events Calendar color settings (orange #dd9933) print an inline :root
   block in the footer, after this stylesheet — these declarations must win. */
:root:root {
    /* Type — match the theme */
    --tec-font-family-sans-serif: 'SourceSansPro-Regular', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --tec-font-family-base: var(--tec-font-family-sans-serif);

    /* Links, active view, datepicker highlights */
    --tec-color-link-primary: #2a6491;
    --tec-color-link-accent: #2a6491;
    --tec-color-link-accent-hover: rgba(42, 100, 145, 0.8);
    --tec-color-accent-primary: #2a6491;
    --tec-color-accent-primary-hover: rgba(42, 100, 145, 0.85);
    --tec-color-accent-primary-active: rgba(42, 100, 145, 0.95);
    --tec-color-accent-primary-background: rgba(42, 100, 145, 0.07);
    --tec-color-accent-secondary: #000000;

    /* Datepicker + month view day markers */
    --tec-color-background-secondary-datepicker: rgba(42, 100, 145, 0.5);
    --tec-color-accent-primary-background-datepicker: #2a6491;
    --tec-color-day-marker-current-month: #2a6491;
    --tec-color-day-marker-current-month-hover: rgba(42, 100, 145, 0.8);
    --tec-color-day-marker-current-month-active: rgba(42, 100, 145, 0.9);

    /* Buttons (base — the Find Events button is restyled gold below) */
    --tec-color-button-primary: #2a6491;
    --tec-color-button-primary-hover: rgba(42, 100, 145, 0.85);
    --tec-color-button-primary-active: rgba(42, 100, 145, 0.95);
    --tec-color-button-primary-background: #2a6491;

    /* Events bar (search) */
    --tec-color-icon-events-bar: #000000;
    --tec-color-icon-events-bar-hover: #2a6491;
    --tec-color-icon-events-bar-active: #2a6491;
    --tec-color-background-events-bar: #ffffff;
    --tec-color-background-events-bar-tabs: #ffffff;
    --tec-color-border-events-bar: #e0e0e0;
    --tec-color-background-events-bar-submit-button: #2a6491;
    --tec-color-background-events-bar-submit-button-hover: #22527a;
    --tec-color-background-events-bar-submit-button-active: #22527a;

    /* Text */
    --tec-color-text-events-title: #000000;
    --tec-color-text-event-date: #333333;

    /* Multi-day event bars in month view */
    --tec-color-accent-primary-multiday: rgba(42, 150, 198, 0.25);
    --tec-color-accent-primary-multiday-hover: rgba(42, 150, 198, 0.4);
    --tec-color-background-primary-multiday: rgba(42, 150, 198, 0.25);
    --tec-color-background-primary-multiday-hover: rgba(42, 150, 198, 0.4);
    --tec-color-background-primary-multiday-active: rgba(42, 150, 198, 0.4);
    --tec-color-background-secondary-multiday: rgba(51, 169, 97, 0.25);
    --tec-color-background-secondary-multiday-hover: rgba(51, 169, 97, 0.4);
}


/* --------------------------------------------------------------------------
   2. Calendar views (month / list / day) — plain, brand-aligned
   -------------------------------------------------------------------------- */

/* Match the theme's default content width instead of the plugin's 1048px,
   with breathing room below the auto inner banner */
.tribe-events-pg-template {
    max-width: 1215px;
    margin: 0 auto;
    padding: 30px 15px 60px;
}

/* Single events manage their own width (full-width banner + centered body).
   body + ID selector on purpose: on single events the plugin loads a legacy
   #tribe-events-pg-template { max-width: 1048px } ID rule that outranks
   plain class selectors */
body.single-tribe_events #tribe-events-pg-template,
.single-tribe_events .tribe-events-pg-template {
    max-width: none;
    padding: 0;
}

/* Breadcrumbs strip below the auto inner banner (parts/breadcrumbs-events.php) */
.rhc-events-breadcrumbs {
    margin-top: 18px;
}

.rhc-events-breadcrumbs #breadcrumbs {
    margin-bottom: 0;
}

/* "Find Events" button — solid Río Dark Blue (extra class in the selector:
   the plugin re-prints some stylesheets in the footer, after this file,
   so plain two-class selectors lose the cascade) */
.tribe-events .tribe-events-c-search .tribe-events-c-search__button {
    background-color: #2a6491;
    color: #ffffff;
    font-family: 'SourceSansPro-Bold', sans-serif;
}

.tribe-events .tribe-events-c-search .tribe-events-c-search__button:hover,
.tribe-events .tribe-events-c-search .tribe-events-c-search__button:focus,
.tribe-events .tribe-events-c-search .tribe-events-c-search__button:active {
    background-color: #22527a;
    color: #ffffff;
}

/* Event titles in the views — soft black, dark blue on hover (site link pattern) */
.tribe-common .tribe-events-calendar-list__event-title-link,
.tribe-common .tribe-events-calendar-day__event-title-link,
.tribe-common .tribe-events-calendar-month__calendar-event-title-link,
.tribe-common .tribe-events-calendar-month-mobile-events__mobile-event-title-link,
.tribe-common .tribe-events-calendar-month__multiday-event-bar-title {
    color: #222222;
}

.tribe-common .tribe-events-calendar-list__event-title-link:hover,
.tribe-common .tribe-events-calendar-list__event-title-link:focus,
.tribe-common .tribe-events-calendar-day__event-title-link:hover,
.tribe-common .tribe-events-calendar-day__event-title-link:focus,
.tribe-common .tribe-events-calendar-month__calendar-event-title-link:hover,
.tribe-common .tribe-events-calendar-month__calendar-event-title-link:focus,
.tribe-common .tribe-events-calendar-month-mobile-events__mobile-event-title-link:hover,
.tribe-common .tribe-events-calendar-month-mobile-events__mobile-event-title-link:focus {
    color: #2a6491;
}

/* Featured events — mark with Río Gold instead of the plugin blue */
.tribe-events .tribe-events-calendar-list__event-row--featured .tribe-events-calendar-list__event-date-tag-datetime:after,
.tribe-events .tribe-events-calendar-day__event--featured:after {
    background-color: #f9c900;
}

.tribe-common .tribe-common-svgicon--featured path,
.tribe-events .tribe-events-calendar-month__calendar-event--featured .tribe-events-calendar-month__calendar-event-featured-icon-svg path {
    fill: #f9c900;
    stroke: #000000;
    stroke-width: 0.5px;
}

/* --- Brand accents (subtle) --------------------------------------------
   #222222 for text/outlines, thin gold rules as brand cues, Río blues for
   actions. Selectors carry an extra class where the plugin re-prints its
   stylesheets in the footer (after this file), so the cascade holds. */

/* Events bar (search + views) — gold left edge, echoing the banner motif */
.tribe-events .tribe-events-c-events-bar.tribe-events-c-events-bar--border {
    border: 1px solid #d5d5d5;
    border-left: 5px solid #f9c900;
}

/* Filter toggle icon button — soft black, dark blue on hover */
.tribe-common .tribe-events-c-events-bar__filter-button {
    color: #222222;
}

.tribe-common .tribe-events-c-events-bar__filter-button:hover,
.tribe-common .tribe-events-c-events-bar__filter-button:focus,
.tribe-common .tribe-events-c-events-bar__filter-button--active {
    color: #2a6491;
}

/* Filter bar pills (Event Category, Venues) — quiet outline, faint gold
   wash on hover/open */
.tribe-common .tribe-filter-bar-c-pill .tribe-filter-bar-c-pill__pill {
    border: 1px solid #9b9b9b;
    color: #222222;
}

.tribe-common .tribe-filter-bar-c-pill .tribe-filter-bar-c-pill__pill:hover,
.tribe-common .tribe-filter-bar-c-pill .tribe-filter-bar-c-pill__pill:focus,
.tribe-common .tribe-filter-bar-c-pill .tribe-filter-bar-c-pill__pill[aria-expanded="true"] {
    background-color: rgba(249, 201, 0, 0.15);
    border-color: #222222;
    color: #222222;
}

.tribe-common .tribe-filter-bar-c-filter__toggle {
    color: #222222;
}

/* Outline buttons — "This Month", "Subscribe to calendar", filter bar
   "Done" and "Clear": soft black outline, gentle gold fill on hover */
.tribe-common .tribe-common-c-btn-border,
.tribe-common a.tribe-common-c-btn-border,
.tribe-common .tribe-common-c-btn-border-small,
.tribe-common a.tribe-common-c-btn-border-small {
    border-color: #222222;
    color: #222222;
}

.tribe-common .tribe-common-c-btn-border:hover,
.tribe-common .tribe-common-c-btn-border:focus,
.tribe-common a.tribe-common-c-btn-border:hover,
.tribe-common a.tribe-common-c-btn-border:focus,
.tribe-common .tribe-common-c-btn-border-small:hover,
.tribe-common .tribe-common-c-btn-border-small:focus,
.tribe-common a.tribe-common-c-btn-border-small:hover,
.tribe-common a.tribe-common-c-btn-border-small:focus {
    background-color: rgba(249, 201, 0, 0.25);
    border-color: #222222;
    color: #222222;
}

/* Subscribe to calendar — inner text follows the same treatment */
.tribe-common .tribe-events-c-subscribe-dropdown__button-text {
    color: #222222;
}

/* Month view weekday header — clean light row with a thin gold rule under
   it (no heavy fills) */
.tribe-events .tribe-events-calendar-month__header-column {
    background-color: transparent;
    border-bottom: 3px solid #f9c900;
}

.tribe-events .tribe-events-calendar-month__header-column-title {
    color: #222222;
    font-family: 'SourceSansPro-Bold', sans-serif;
}

/* Today's cell — slim gold top bar and a whisper of gold */
.tribe-events .tribe-events-calendar-month__day--current {
    background-color: rgba(249, 201, 0, 0.07);
    box-shadow: inset 0 3px 0 0 #f9c900;
}

/* Event marker dot on mobile month cells — gold */
.tribe-events .tribe-events-calendar-month__mobile-events-icon--event {
    background-color: #f9c900;
}

/* Month/day/list top-bar navigation arrows and bottom prev/next links —
   dark blue, matching the site's link color */
.tribe-common .tribe-events-c-top-bar__nav-link,
.tribe-common .tribe-events-c-nav__prev,
.tribe-common .tribe-events-c-nav__next,
.tribe-common .tribe-events-c-nav__today {
    color: #2a6491;
}

.tribe-common .tribe-events-c-top-bar__nav-link:hover,
.tribe-common .tribe-events-c-top-bar__nav-link:focus,
.tribe-common .tribe-events-c-nav__prev:hover,
.tribe-common .tribe-events-c-nav__prev:focus,
.tribe-common .tribe-events-c-nav__next:hover,
.tribe-common .tribe-events-c-nav__next:focus,
.tribe-common .tribe-events-c-nav__today:hover,
.tribe-common .tribe-events-c-nav__today:focus {
    color: #222222;
}

/* Month title in the top bar — bold, soft black */
.tribe-common .tribe-events-c-top-bar__datepicker-button {
    color: #222222;
    font-family: 'SourceSansPro-Bold', sans-serif;
}

/* Event entries inside month cells — dark blue time, #222 titles */
.tribe-events .tribe-events-calendar-month__calendar-event-datetime {
    color: #2a6491;
}

/* Event tooltip title (month view hover cards) */
.tribe-common .tribe-events-calendar-month__calendar-event-tooltip-title-link {
    color: #222222;
}

.tribe-common .tribe-events-calendar-month__calendar-event-tooltip-title-link:hover,
.tribe-common .tribe-events-calendar-month__calendar-event-tooltip-title-link:focus {
    color: #2a6491;
}

/* AJAX loader dots — Río Gold */
.tribe-common .tribe-common-c-loader__dot {
    color: #f9c900;
    fill: #f9c900;
}


/* --------------------------------------------------------------------------
   3. Auto inner banner + single event
   -------------------------------------------------------------------------- */

/* 3a. Auto inner banner (parts/banner-inner.php, used by the calendar views
   and single events) — mirrors acf-blocks/inner-banner (that stylesheet only
   loads where the block is used, so the rules needed here are scoped and
   repeated) */

.rhc-event-banner .inner-banner {
    background-color: #2a96c6;
}

.rhc-event-banner .inner-banner-text {
    padding-top: 20px;
    padding-bottom: 30px;
}

.rhc-event-banner .inner-banner-image {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    width: 100%;
    height: 100%;
}

.rhc-event-banner .inner-banner .banner-text {
    margin: 0 auto;
}

.rhc-event-banner .banner-title-container {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    padding-top: 80px;
    padding-bottom: 80px;
}

.rhc-event-banner .banner-title-container-text-only {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    flex-direction: column;
}

.rhc-event-banner .inner-banner h1 {
    font-size: 3.75rem;
    line-height: 4.25rem;
    color: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 30px;
}

.rhc-event-banner .inner-banner-image-wrapper {
    position: relative;
}

.rhc-event-banner .banner-overlay-transparency {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 8%;
    background-color: rgba(42, 150, 198, 1);
    mix-blend-mode: multiply;
}

/* 3b. Event body */

.rhc-event-body {
    padding-top: 30px;
    padding-bottom: 60px;
}

/* Back to all events */
.rhc-event-single .tribe-events-back {
    margin-bottom: 25px;
}

.rhc-event-single .tribe-events-back a {
    font-family: 'SourceSansPro-Bold', sans-serif;
    color: #000000;
    text-decoration: none;
    border-bottom: 3px solid #f9c900;
    padding-bottom: 2px;
}

.rhc-event-single .tribe-events-back a:hover,
.rhc-event-single .tribe-events-back a:focus {
    color: #2a6491;
    border-bottom-color: #2a6491;
}

/* Schedule (date/time) and cost — .tribe-events-schedule covers both the
   classic template's schedule bar and the Event Date Time block's output */
.rhc-event-single .tribe-events-schedule {
    border-left: 6px solid #f9c900;
    background-color: #f5f5f5;
    padding: 18px 24px;
    margin-bottom: 35px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}

.rhc-event-single .tribe-events-schedule .rhc-event-schedule-details,
.rhc-event-single .tribe-events-schedule .tribe-events-schedule__datetime,
.rhc-event-single .tribe-events-schedule h2 {
    font-family: 'SourceSansPro-Bold', sans-serif;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: #000000;
    margin: 0;
    padding: 0;
}

.rhc-event-single .tribe-events-schedule .tribe-events-cost {
    display: inline-block;
    background-color: #f9c900;
    color: #000000;
    font-family: 'SourceSansPro-Bold', sans-serif;
    font-size: 1.1rem;
    padding: 4px 14px;
}

/* Recurring-event markers picked up inside the schedule details */
.rhc-event-single .tribe-events-schedule .tribe-events-divider {
    color: #767676;
}

/* Description */
.rhc-event-single .tribe-events-single-event-description {
    margin-bottom: 40px;
}

/* 3c. Meta (details / venue / organizer) */

.rhc-event-single .tribe-events-single-section.tribe-events-event-meta {
    background-color: #f5f5f5;
    border: 0;
    border-left: 6px solid #f9c900;
    padding: 25px 30px;
    margin: 0 0 30px;
}

.rhc-event-single .tribe-events-meta-group {
    padding: 0 40px 0 0;
}

.rhc-event-single .tribe-events-event-meta .tribe-events-single-section-title {
    font-family: 'SourceSansPro-Bold', sans-serif;
    font-size: 1.5rem;
    color: #000000;
    border-bottom: 3px solid #f9c900;
    display: inline-block;
    padding-bottom: 4px;
    margin-bottom: 14px;
}

.rhc-event-single .tribe-events-event-meta dt {
    font-family: 'SourceSansPro-Bold', sans-serif;
    color: #000000;
    margin-top: 12px;
}

.rhc-event-single .tribe-events-event-meta dd {
    color: #333333;
    margin-bottom: 8px;
}

.rhc-event-single .tribe-events-event-meta a {
    color: #2a6491;
    text-decoration: underline;
}

.rhc-event-single .tribe-events-event-meta a:hover,
.rhc-event-single .tribe-events-event-meta a:focus {
    color: #000000;
}

/* 3d. Block-editor events (tribe-events/single-event-blocks.php) */

/* The banner already shows the featured image — hide the Featured Image
   block inside the event content so it does not appear twice
   (the block renders as .tribe-events-event-image) */
.rhc-event-single--blocks .tribe-block__featured-image,
.rhc-event-single--blocks .tribe-events-event-image {
    display: none;
}

/* Price block — gold badge, matching the classic cost badge */
.rhc-event-single--blocks .tribe-block__event-price {
    margin-bottom: 30px;
}

.rhc-event-single--blocks .tribe-block__event-price span {
    display: inline-block;
    background-color: #f9c900;
    color: #000000;
    font-family: 'SourceSansPro-Bold', sans-serif;
    font-size: 1.1rem;
    padding: 4px 14px;
}

/* Venue / organizer / details blocks — brand link + label colors */
.rhc-event-single--blocks .tribe-block__venue a,
.rhc-event-single--blocks .tribe-block__organizer__details a,
.rhc-event-single--blocks .tribe-block__event-website a {
    color: #2a6491;
}

.rhc-event-single--blocks .tribe-block__venue a:hover,
.rhc-event-single--blocks .tribe-block__organizer__details a:hover,
.rhc-event-single--blocks .tribe-block__event-website a:hover {
    color: #000000;
}


/* 3e. Previous / next event navigation */

.rhc-event-single #tribe-events-footer {
    border-top: 1px solid #d8d8d8;
    margin-top: 20px;
    padding-top: 20px;
}

.rhc-event-single .tribe-events-sub-nav {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rhc-event-single .tribe-events-sub-nav li {
    list-style: none;
    max-width: 45%;
}

.rhc-event-single .tribe-events-sub-nav li.tribe-events-nav-next {
    margin-left: auto;
    text-align: right;
}

.rhc-event-single .tribe-events-sub-nav a {
    font-family: 'SourceSansPro-Bold', sans-serif;
    color: #2a6491;
    text-decoration: none;
}

.rhc-event-single .tribe-events-sub-nav a:hover,
.rhc-event-single .tribe-events-sub-nav a:focus {
    color: #000000;
}

.rhc-event-single .tribe-events-sub-nav a span {
    color: #f9c900;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Small only */
@media screen and (max-width: 39.9375em) {

    .rhc-event-banner .inner-banner-image-wrapper {
        height: 300px;
        position: relative;
    }

    .rhc-event-banner .inner-banner h1 {
        font-size: 2.7rem;
        padding-right: 5px;
        padding-left: 5px;
        line-height: 3rem;
    }

    .rhc-event-banner .banner-title-container.btc-with-image,
    .rhc-event-banner .banner-title-container-text-only {
        padding-left: 20px;
        padding-top: 10px;
    }

    .rhc-event-single .rhc-event-schedule .rhc-event-schedule-details,
    .rhc-event-single .rhc-event-schedule .tribe-events-schedule__datetime {
        font-size: 1.15rem;
        line-height: 1.5rem;
    }

    .rhc-event-single .tribe-events-meta-group {
        padding-right: 0;
    }

    .rhc-event-single .tribe-events-sub-nav li {
        max-width: 100%;
    }
}