/**
 * Legend Timetables - colour theme overrides
 *
 * Recolours every element of the [bwm-timetable] shortcode via CSS custom
 * properties. Nothing here changes layout, spacing or typography.
 *
 * ---------------------------------------------------------------------------
 * QUICK START
 * ---------------------------------------------------------------------------
 * Edit the three CORE values in the :root block below. Everything else is
 * derived from them, so changing those recolours the whole timetable.
 *
 * Want finer control? Every derived value can be overridden individually -
 * they are all listed, commented, under the core block.
 *
 * To recolour a single instance rather than every timetable on the site,
 * set the variables on that instance instead:
 *
 *     #app_XXXXXXXXXX { --bwmtt-accent: #b30000; }
 *
 * ---------------------------------------------------------------------------
 * LOADING THIS FILE
 * ---------------------------------------------------------------------------
 * Add to your (child) theme's functions.php - the dependency on
 * 'legend-timetables' guarantees this loads after the plugin's own stylesheet:
 *
 *     add_action( 'wp_enqueue_scripts', function () {
 *         wp_enqueue_style(
 *             'legend-timetables-theme',
 *             get_stylesheet_directory_uri() . '/css/legend-timetables-theme.css',
 *             array( 'legend-timetables' ),
 *             '1.0.0'
 *         );
 *     }, 20 );
 *
 * Every selector below is also scoped under .bwm_timetable_root, which puts it
 * one class above the plugin's own rules - so it wins on specificity even if
 * the load order is not what you expect.
 *
 * Keeping this file in your theme rather than the plugin folder means a plugin
 * update will not overwrite it.
 */

:root {

	/* =====================================================================
	 * BRAND PALETTE
	 *
	 *   #00507D  primary    - the frame: panels, time blocks, card text
	 *   #FFDE38  secondary  - the highlight: active/hover states
	 *   #78D6FF  tertiary   - session times, section headings, empty state
	 *
	 * Black and white carry the contrast where the brand colours cannot.
	 * Every text pairing below meets WCAG AA (4.5:1) or better; every
	 * element meets 3:1 against whatever sits behind it.
	 * ===================================================================== */

	/* --- CORE: edit these three to reskin everything ------------------- */

	--bwmtt-brand-primary:   #00507D;
	--bwmtt-brand-secondary: #FFDE38;
	--bwmtt-brand-tertiary:  #78D6FF;


	/* --- Panels: the timetable frame ----------------------------------- */
	/* Primary blue, with white content sitting on top of it. */
	--bwmtt-panel-bg:            var(--bwmtt-brand-primary);
	--bwmtt-panel-text:          #ffffff;

	/* --- Section headings (day name bars, week date bars) --------------- */
	/* Tertiary: a shade of the primary cannot reach 3:1 against the panel,
	 * so these bands are light in order to read as distinct bands. */
	--bwmtt-heading-bg:          var(--bwmtt-brand-tertiary);
	--bwmtt-heading-text:        var(--bwmtt-brand-primary);

	/* --- Session cards -------------------------------------------------- */
	/* White cards lift off the blue frame at 8.59:1. */
	--bwmtt-session-bg:              #ffffff;
	--bwmtt-session-text:            var(--bwmtt-brand-primary);
	--bwmtt-session-location-text:   var(--bwmtt-brand-primary);
	/* Tertiary block with primary text: 5.26:1. Reads as a soft tint against
	 * the white card (1.59:1) rather than a hard-edged block - set
	 * --bwmtt-session-time-bg to the primary for a firmer edge. */
	--bwmtt-session-time-bg:         var(--bwmtt-brand-tertiary);
	--bwmtt-session-time-text:       var(--bwmtt-brand-primary);

	/* --- Buttons on the panel: view switcher, day picker, show all ------ */
	/* White at rest, brand yellow when selected or hovered - so the
	 * currently active day and view read as highlighted. */
	--bwmtt-btn-bg:              #ffffff;
	--bwmtt-btn-text:            var(--bwmtt-brand-primary);
	--bwmtt-btn-hover-bg:        var(--bwmtt-brand-secondary);
	--bwmtt-btn-hover-text:      var(--bwmtt-brand-primary);

	/* --- "Select Day" open/close button (sits on the panel) ------------- */
	--bwmtt-btn-invert-bg:           var(--bwmtt-brand-secondary);
	--bwmtt-btn-invert-text:         var(--bwmtt-brand-primary);
	--bwmtt-btn-invert-hover-bg:     #ffffff;
	--bwmtt-btn-invert-hover-text:   var(--bwmtt-brand-primary);

	/* --- Controls that sit on a WHITE card, so they must be dark -------- */
	--bwmtt-toggle-bg:           var(--bwmtt-brand-primary);
	--bwmtt-toggle-text:         #ffffff;
	--bwmtt-toggle-hover-bg:     var(--bwmtt-brand-secondary);
	--bwmtt-toggle-hover-text:   var(--bwmtt-brand-primary);

	--bwmtt-booking-bg:          var(--bwmtt-brand-primary);
	--bwmtt-booking-text:        #ffffff;
	--bwmtt-booking-hover-bg:    var(--bwmtt-brand-secondary);
	--bwmtt-booking-hover-text:  var(--bwmtt-brand-primary);

	/* --- Class / location filter dropdowns ------------------------------ */
	--bwmtt-select-bg:           #ffffff;
	--bwmtt-select-text:         var(--bwmtt-brand-primary);

	/* --- "No sessions found" panel -------------------------------------- */
	--bwmtt-empty-bg:            var(--bwmtt-brand-tertiary);
	--bwmtt-empty-text:          var(--bwmtt-brand-primary);

	/* --- Week-view session modal ---------------------------------------- */
	--bwmtt-overlay:             rgba(0, 0, 0, 0.6);
	--bwmtt-modal-bg:            #ffffff;
	--bwmtt-modal-text:          var(--bwmtt-brand-primary);
	--bwmtt-modal-shadow:        rgba(0, 0, 0, 0.35);

	/* Modal buttons sit on white, so they invert the panel buttons. */
	--bwmtt-modal-btn-bg:            var(--bwmtt-brand-primary);
	--bwmtt-modal-btn-text:          #ffffff;
	--bwmtt-modal-btn-hover-bg:      var(--bwmtt-brand-secondary);
	--bwmtt-modal-btn-hover-text:    var(--bwmtt-brand-primary);

	/* --- Keyboard focus ring -------------------------------------------- */
	/* Two rings: yellow reads on the blue panel, primary reads on white
	 * cards. A single colour cannot do both. */
	--bwmtt-focus-ring:          var(--bwmtt-brand-secondary);
	--bwmtt-focus-ring-on-card:  var(--bwmtt-brand-primary);
}


/* =========================================================================
 * 1. TOP BAR - view switcher, week paging, filters, day dropdown
 * ========================================================================= */

.bwm_timetable_root .bwm_timetable .bwm_timetable_top .bwm_timetable_controls,
.bwm_timetable_root .bwm_timetable .bwm_timetable_top .bwm_timetable_filters {
	background-color: var(--bwmtt-panel-bg);
}

/* Day View / Week View / Previous Week / Next Week */
.bwm_timetable_root .bwm_timetable .bwm_timetable_top .bwm_timetable_controls button {
	background-color: var(--bwmtt-btn-bg);
	color: var(--bwmtt-btn-text);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_top .bwm_timetable_controls button.active,
.bwm_timetable_root .bwm_timetable .bwm_timetable_top .bwm_timetable_controls button:hover {
	background-color: var(--bwmtt-btn-hover-bg);
	color: var(--bwmtt-btn-hover-text);
}

/* Class and location filter dropdowns */
.bwm_timetable_root .bwm_timetable .bwm_timetable_top .bwm_timetable_filters select {
	background-color: var(--bwmtt-select-bg);
	color: var(--bwmtt-select-text);
}

/* Native dropdown list - some browsers need this stated separately */
.bwm_timetable_root .bwm_timetable .bwm_timetable_top .bwm_timetable_filters select option {
	background-color: var(--bwmtt-select-bg);
	color: var(--bwmtt-select-text);
}

/* "Select Day:" bar (mobile and tablet only) */
.bwm_timetable_root .bwm_timetable .bwm_timetable_top .open_day_select_dropdown {
	background-color: var(--bwmtt-panel-bg);
	color: var(--bwmtt-panel-text);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_top .open_day_select_dropdown button {
	background-color: var(--bwmtt-btn-invert-bg);
	color: var(--bwmtt-btn-invert-text);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_top .open_day_select_dropdown button:hover {
	background-color: var(--bwmtt-btn-invert-hover-bg);
	color: var(--bwmtt-btn-invert-hover-text);
}


/* =========================================================================
 * 2. DAY SELECTOR STRIP - day buttons and week-view column headings
 * ========================================================================= */

.bwm_timetable_root .bwm_timetable .bwm_timetable_day_select {
	background-color: var(--bwmtt-panel-bg);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_day_select.week_headings h6 {
	color: var(--bwmtt-panel-text);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_day_select .days_select_wrapper button {
	background-color: var(--bwmtt-btn-bg);
	color: var(--bwmtt-btn-text);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_day_select .days_select_wrapper button.active,
.bwm_timetable_root .bwm_timetable .bwm_timetable_day_select .days_select_wrapper button:hover {
	background-color: var(--bwmtt-btn-hover-bg);
	color: var(--bwmtt-btn-hover-text);
}

/* "Show all classes" / "Show fewer classes" toggle beneath the session list */
.bwm_timetable_root .bwm_timetable .toggle_all_classes_button {
	background-color: var(--bwmtt-btn-bg);
	color: var(--bwmtt-btn-text);
}

.bwm_timetable_root .bwm_timetable .toggle_all_classes_button:hover {
	background-color: var(--bwmtt-btn-hover-bg);
	color: var(--bwmtt-btn-hover-text);
}


/* =========================================================================
 * 3. DAY VIEW - session list wrapper, day heading, empty state
 * ========================================================================= */

.bwm_timetable_root .bwm_timetable .bwm_timetable_sessions_wrapper .bwm_timetable_day_wrapper {
	background-color: var(--bwmtt-panel-bg);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_sessions_wrapper .bwm_timetable_day_wrapper > h5 {
	background-color: var(--bwmtt-heading-bg);
	color: var(--bwmtt-heading-text);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_sessions_wrapper .bwm_timetable_day_wrapper .no_sessions_found h4 {
	background-color: var(--bwmtt-empty-bg);
	color: var(--bwmtt-empty-text);
}


/* =========================================================================
 * 4. WEEK VIEW - column wrappers and mobile date headings
 * ========================================================================= */

.bwm_timetable_root .bwm_timetable .bwm_timetable_sessions_wrapper .bwm_timetable_week_wrapper .bwm_timetable_week {
	background-color: var(--bwmtt-panel-bg);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_sessions_wrapper .bwm_timetable_week_wrapper .bwm_timetable_date_day {
	background-color: var(--bwmtt-heading-bg);
}

.bwm_timetable_root .bwm_timetable .bwm_timetable_sessions_wrapper .bwm_timetable_week_wrapper .bwm_timetable_date_day h6 {
	color: var(--bwmtt-heading-text);
}


/* =========================================================================
 * 5. SESSION CARDS - used in both day and week view
 * ========================================================================= */

.bwm_timetable_root .bwm_timetable_session {
	background-color: var(--bwmtt-session-bg);
	color: var(--bwmtt-session-text);
}

/* Start - end time block */
.bwm_timetable_root .bwm_timetable_session .session_main .session_times {
	background-color: var(--bwmtt-session-time-bg);
	color: var(--bwmtt-session-time-text);
}

/* Session name */
.bwm_timetable_root .bwm_timetable_session .session_main .session_details h5 {
	color: var(--bwmtt-session-text);
}

/* Same heading in week view - the plugin styles this separately */
.bwm_timetable_root .bwm_timetable_week_wrapper .bwm_timetable_session .session_main .session_details h5 {
	color: var(--bwmtt-session-text);
}

/* Facility name shown inline on desktop */
.bwm_timetable_root .bwm_timetable_session .session_main .session_details .session_details_right .session_location {
	color: var(--bwmtt-session-location-text);
}

/* The +/- expand toggle */
.bwm_timetable_root .bwm_timetable_session .session_main .session_details .session_details_right button.session_open_below {
	background-color: var(--bwmtt-toggle-bg);
	color: var(--bwmtt-toggle-text);
}

.bwm_timetable_root .bwm_timetable_session .session_main .session_details .session_details_right button.session_open_below:hover {
	background-color: var(--bwmtt-toggle-hover-bg);
	color: var(--bwmtt-toggle-hover-text);
}

/* Expanded panel: "Location: ... | Room: ..." */
.bwm_timetable_root .bwm_timetable_session .session_below .session_location h6 {
	color: var(--bwmtt-session-text);
}

/* Book button. It is an <a>, so states are stated explicitly to beat
 * theme link styling. */
.bwm_timetable_root .bwm_timetable_session .booking_button,
.bwm_timetable_root .bwm_timetable_session a.booking_button:link,
.bwm_timetable_root .bwm_timetable_session a.booking_button:visited {
	background-color: var(--bwmtt-booking-bg);
	color: var(--bwmtt-booking-text);
}

.bwm_timetable_root .bwm_timetable_session .booking_button:hover,
.bwm_timetable_root .bwm_timetable_session a.booking_button:hover,
.bwm_timetable_root .bwm_timetable_session a.booking_button:focus {
	background-color: var(--bwmtt-booking-hover-bg);
	color: var(--bwmtt-booking-hover-text);
}


/* =========================================================================
 * 6. SESSION MODAL - opened from a session in week view
 * ========================================================================= */

.bwm_timetable_root .modal-mask {
	background-color: var(--bwmtt-overlay);
}

.bwm_timetable_root .modal-mask .modal-wrapper .modal-container {
	background-color: var(--bwmtt-modal-bg);
	box-shadow: 0 2px 8px var(--bwmtt-modal-shadow);
}

.bwm_timetable_root .modal-mask .modal-wrapper .modal-container .modal-header h3,
.bwm_timetable_root .modal-mask .modal-wrapper .modal-container .modal-body {
	color: var(--bwmtt-modal-text);
}

.bwm_timetable_root .modal-mask .modal-wrapper .modal-container .modal-footer button {
	background-color: var(--bwmtt-modal-btn-bg);
	color: var(--bwmtt-modal-btn-text);
}

.bwm_timetable_root .modal-mask .modal-wrapper .modal-container .modal-footer button:hover {
	background-color: var(--bwmtt-modal-btn-hover-bg);
	color: var(--bwmtt-modal-btn-hover-text);
}


/* =========================================================================
 * 7. ACCESSIBILITY
 * The plugin sets `outline: none` on all timetable buttons with no
 * replacement, which leaves keyboard users with no visible focus. This
 * restores a ring for keyboard navigation only - mouse clicks are unaffected.
 * ========================================================================= */

/* Controls on the blue panel. */
.bwm_timetable_root .bwm_timetable button:focus-visible,
.bwm_timetable_root .bwm_timetable select:focus-visible {
	outline: 2px solid var(--bwmtt-focus-ring);
	outline-offset: 2px;
}

/* Controls on a white session card or in the modal. */
.bwm_timetable_root .bwm_timetable_session button:focus-visible,
.bwm_timetable_root .bwm_timetable_session a.booking_button:focus-visible,
.bwm_timetable_root .modal-mask button:focus-visible {
	outline: 2px solid var(--bwmtt-focus-ring-on-card);
	outline-offset: 2px;
}


/* =========================================================================
 * 8. PRESET - the plugin's original dark grey theme.
 * Uncomment to revert to how the timetable looked before this file.
 * ========================================================================= */

/*
:root {
	--bwmtt-accent:              #001522;
	--bwmtt-accent-text:         #ffffff;
	--bwmtt-accent-hover:        #292929;
	--bwmtt-accent-hover-text:   #ffffff;

	--bwmtt-panel-bg:            #363636;
	--bwmtt-panel-text:          #ffffff;
	--bwmtt-heading-bg:          #1c1c1c;
	--bwmtt-heading-text:        #ffffff;

	--bwmtt-session-bg:              #292929;
	--bwmtt-session-text:            #ffffff;
	--bwmtt-session-location-text:   #ffffff;
	--bwmtt-session-time-bg:         #001522;
	--bwmtt-session-time-text:       #ffffff;

	--bwmtt-btn-bg:              #001522;
	--bwmtt-btn-text:            #ffffff;
	--bwmtt-btn-hover-bg:        #292929;
	--bwmtt-btn-hover-text:      #ffffff;

	--bwmtt-btn-invert-bg:           #ffffff;
	--bwmtt-btn-invert-text:         #001522;
	--bwmtt-btn-invert-hover-bg:     #001522;
	--bwmtt-btn-invert-hover-text:   #ffffff;

	--bwmtt-toggle-bg:           #001522;
	--bwmtt-toggle-text:         #ffffff;
	--bwmtt-toggle-hover-bg:     #292929;
	--bwmtt-toggle-hover-text:   #ffffff;

	--bwmtt-booking-bg:          #001522;
	--bwmtt-booking-text:        #ffffff;
	--bwmtt-booking-hover-bg:    #292929;
	--bwmtt-booking-hover-text:  #ffffff;

	--bwmtt-select-bg:           #001522;
	--bwmtt-select-text:         #ffffff;

	--bwmtt-empty-bg:            #001522;
	--bwmtt-empty-text:          #ffffff;

	--bwmtt-overlay:             rgba(0, 0, 0, 0.5);
	--bwmtt-modal-bg:            #292929;
	--bwmtt-modal-text:          #ffffff;
	--bwmtt-modal-shadow:        rgba(0, 0, 0, 0.33);
	--bwmtt-modal-btn-bg:            #ffffff;
	--bwmtt-modal-btn-text:          #001522;
	--bwmtt-modal-btn-hover-bg:      #001522;
	--bwmtt-modal-btn-hover-text:    #ffffff;

	--bwmtt-focus-ring:          #ffffff;
	--bwmtt-focus-ring-on-card:  #ffffff;
}
*/

.timetable_loaded .block .container {
	width: 100%;
	margin-inline: 0;
	padding: 0 30px;
}