/* ============================================================================
   Schedules block — theme overrides for the Y360 plugin widget.

   The [api_schedules] shortcode ships its own markup + CSS
   (wp-content/plugins/y360/public/css/y360-public.css). We can't edit the plugin,
   so this file re-skins its output to match the KC YMCA design system: Cachet
   heading type, .btn--purple action buttons, theme radii, and theme hover states.

   Scope: every rule is prefixed with `.schedules__calendar #y360-calendar.style-new`
   (1 id + ≥3 classes) so it outranks the plugin's `#y360-calendar.style-new …`
   rules; !important is repeated only where the plugin uses it.

   Notes:
   - The widget accent (`--y360-color`) is #0060af === our --blue-dk, so most color
     is already on-brand; we do NOT remap --y360-color (admin keeps color control).
   - The plugin turns the filter bar into a blue gradient card at ≤992px and inverts
     its colors there. Because our selectors are more specific AND load after the
     plugin, any COLOR we set globally would leak into that mobile treatment — so
     filter-bar color changes are guarded to `@media (min-width: 993px)`. Font/radius
     changes are safe at all widths and stay global.
   ============================================================================ */

/* --- Container ------------------------------------------------------------- */
.schedules__calendar #y360-calendar.style-new {
    border-radius: var(--box-border-radius-lg); /* 16px, matches theme boxes */
}

/* --- Heading typography → Cachet uppercase (the main cohesion win) --------- */
.schedules__calendar #y360-calendar.style-new .filters-header,
.schedules__calendar #y360-calendar.style-new .filter-header,
.schedules__calendar #y360-calendar.style-new .schedules-header .current-day,
.schedules__calendar #y360-calendar.style-new .schedule-header {
    font-family: "Cachet";
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.schedules__calendar #y360-calendar.style-new .filters-header {
    font-size: 22px;
    letter-spacing: -0.7px;
}

.schedules__calendar #y360-calendar.style-new .filter-header {
    font-size: 18px;
}

.schedules__calendar #y360-calendar.style-new .schedules-header .current-day {
    letter-spacing: -0.7px;
}

.schedules__calendar #y360-calendar.style-new .schedule-header {
    font-size: 16px;
    letter-spacing: -0.4px;
}

/* Give the class name in each row a touch more weight for hierarchy (stays Verdana). */
.schedules__calendar #y360-calendar.style-new .schedule-class {
    font-weight: 700;
}

/* Mobile stacked labels ("Class", "Time", …) as small Cachet caps. */
.schedules__calendar #y360-calendar.style-new .mobile-label {
    font-family: "Cachet";
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.3px;
    color: var(--blue-dk);
}

/* --- Action buttons → theme .btn--purple ---------------------------------- */
/* View Today + Download PDF live in the calendar side (never mobile-inverted). */
.schedules__calendar #y360-calendar.style-new .view-today,
.schedules__calendar #y360-calendar.style-new .pdf-btn {
    padding: 12px 24px;
    border-radius: var(--btn-border-radius-sm); /* 8px */
    background: var(--purple-md);
    color: var(--white);
    font-family: "Cachet";
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.4px;
    line-height: 1;
    transition: all 0.3s ease;
}

.schedules__calendar #y360-calendar.style-new .view-today:hover,
.schedules__calendar #y360-calendar.style-new .pdf-btn:hover {
    background: var(--blue-dk);
    color: var(--white);
}

/* Clear Filters is a compact pill (not a full-size button), styled like the primary
   nav menu items (header.css): small rounded pill, Cachet uppercase. Size/shape are
   safe globally; the transparent→purple fill-on-hover is desktop-only so the plugin's
   ≤992px white-on-blue-card treatment (readable on the mobile blue card) stands. */
.schedules__calendar #y360-calendar.style-new .filters-header .filter-reset {
    padding: 6px 18px;
    border-radius: 100px;
    font-family: "Cachet";
    text-transform: uppercase;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.05em;
    transition: all 0.2s ease;
}

/* --- Filter pill toggles + accordion headers: align radius ---------------- */
/* Colors already resolve to theme blue via --y360-color; only shape needs aligning. */
.schedules__calendar #y360-calendar.style-new .filter-item input[type="checkbox"] + label,
.schedules__calendar #y360-calendar.style-new .filter-item input[type="checkbox"] + label::before,
.schedules__calendar #y360-calendar.style-new .filters .filter-header {
    border-radius: var(--btn-border-radius-sm); /* 8px */
}

/* --- Day-nav arrows: add a theme hover (fill on hover), keep circular ------ */
.schedules__calendar #y360-calendar.style-new .schedules-header .arrow-navigation .prev-day,
.schedules__calendar #y360-calendar.style-new .schedules-header .arrow-navigation .next-day {
    transition: all 0.2s ease;
}

.schedules__calendar #y360-calendar.style-new .schedules-header .arrow-navigation .prev-day:not(.disabled):hover,
.schedules__calendar #y360-calendar.style-new .schedules-header .arrow-navigation .next-day:not(.disabled):hover {
    background: var(--blue-dk);
    color: var(--white);
}

/* --- Class rows: align radius (hover handled desktop-only below) ----------- */
.schedules__calendar #y360-calendar.style-new .class-row.is-even,
.schedules__calendar #y360-calendar.style-new .class-row.is-odd {
    border-radius: var(--box-border-radius-sm); /* 10px */
}

/* --- Schedule link pills (Location link, Register): theme fill-on-hover ---- */
.schedules__calendar #y360-calendar.style-new .schedule-location a,
.schedules__calendar #y360-calendar.style-new .schedule-class a {
    border-radius: var(--btn-border-radius-sm);
    border-color: var(--blue-dk);
    color: var(--blue-dk) !important;
    transition: all 0.2s ease;
}

.schedules__calendar #y360-calendar.style-new .schedule-location a:hover,
.schedules__calendar #y360-calendar.style-new .schedule-class a:hover {
    background: var(--blue-dk) !important;
    color: var(--white) !important;
}

/* --- Desktop-only color changes (kept out of the plugin's mobile blue card) - */
@media (min-width: 993px) {
    /* Clear Filters → compact nav-style pill: transparent by default, fills purple
       on hover with white text (mirrors the primary nav menu items in header.css). */
    .schedules__calendar #y360-calendar.style-new .filters-header .filter-reset {
        background: transparent;
        color: var(--purple-dk);
    }

    .schedules__calendar #y360-calendar.style-new .filters-header .filter-reset:hover {
        background: var(--purple-dk);
        color: var(--white);
    }

    /* Subtle row hover — a restrained take on the theme's card hover (no lift:
       too many rows). Overrides the plugin's !important striping bg. */
    .schedules__calendar #y360-calendar.style-new .class-row {
        transition: background 0.2s ease;
    }

    .schedules__calendar #y360-calendar.style-new .class-row:hover {
        background: color-mix(in srgb, var(--blue-dk) 10%, transparent) !important;
    }
}