/* MightyCourse — Core structural styles (always loaded)
 *
 * These rules are required for the registration flow to function on any
 * theme. They are intentionally minimal and unopinionated — visual polish
 * (typography, full color treatment, hover/animation, project list,
 * calendar, etc.) lives in mc-frontend.css and can be disabled by site
 * admins via Settings → MightyCourse → "Load MightyCourse CSS on the
 * frontend".
 *
 * Theme integration
 * -----------------
 * MightyCourse exposes a small public token surface via the CSS custom
 * properties below. Themes can retheme the plugin without disabling any
 * stylesheet by overriding these tokens in the theme's own CSS, e.g.:
 *
 *   :root { --mc-blue: #b91c5c; --mc-radius: 4px; }
 *
 * Both core and visual rules read from these tokens, so an override
 * propagates everywhere.
 *
 * The line between core and visual is "would the form be unusable
 * without this rule?" — anything that hides a native control, blocks
 * interaction during loading, or provides the only affordance for a
 * selectable element belongs here. Pure cosmetics belong in
 * mc-frontend.css.
 */

:root {
	--mc-blue:      #2c6fad;
	--mc-blue-dk:   #1e5a96;
	--mc-green:     #10b981;
	--mc-yellow:    #f59e0b;
	--mc-red:       #ef4444;
	--mc-gray:      #6b7280;
	--mc-light:     #f9fafb;
	--mc-border:    #e5e7eb;
	--mc-radius:    8px;
	--mc-shadow:    0 2px 12px rgba(0,0,0,.08);

	/* Calendar accent — defaults to --mc-blue so retheming the primary
	 * color also rethemes the calendar. The [mc_calendar] shortcode's
	 * `color` attribute sets this inline on its wrapper for per-instance
	 * overrides. */
	--mc-cal-color: var(--mc-blue);
}

/* Defensive box-sizing inside plugin containers. The grid layouts
 * (.mc-field-grid, .mc-session-cards, .mc-project-grid, etc.) assume
 * border-box so padding doesn't push children past their grid track.
 * Wrapped in :where() so specificity stays at 0 and themes can still
 * override per-element. */
:where(.mc-registration-wrap, .mc-modal, .mc-dashboard, .mc-dashboard-grid,
       .mc-project-grid, .mc-project-list, .mc-calendar-wrap, .mc-countdown-wrap),
:where(.mc-registration-wrap, .mc-modal, .mc-dashboard, .mc-dashboard-grid,
       .mc-project-grid, .mc-project-list, .mc-calendar-wrap, .mc-countdown-wrap) *,
:where(.mc-registration-wrap, .mc-modal, .mc-dashboard, .mc-dashboard-grid,
       .mc-project-grid, .mc-project-list, .mc-calendar-wrap, .mc-countdown-wrap) *::before,
:where(.mc-registration-wrap, .mc-modal, .mc-dashboard, .mc-dashboard-grid,
       .mc-project-grid, .mc-project-list, .mc-calendar-wrap, .mc-countdown-wrap) *::after {
	box-sizing: border-box;
}

/* Step visibility — JS toggles .is-active to advance the flow. */
.mc-step { display: none; }
.mc-step.is-active { display: block; }

/* Conditional logic — JS toggles this class on .mc-field-group. */
.mc-field-group.mc-hidden-by-condition { display: none !important; }

/* Selectable session and add-on cards. The <label> wraps a hidden
 * checkbox, so without a visible card and a visible selection state
 * there is nothing for the user to click. */
.mc-session-card input[type="checkbox"] { display: none; }

.mc-session-cards,
.mc-addon-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: 24px;
}
.mc-session-card,
.mc-addon-card {
	display: block;
	border: 2px solid var(--mc-border);
	border-radius: var(--mc-radius);
	cursor: pointer;
}
.mc-session-card:has(input:checked),
.mc-session-card.is-checked,
.mc-addon-card:has(input:checked) {
	border-color: var(--mc-blue);
}
.mc-session-card.is-full {
	opacity: .55;
	cursor: not-allowed;
}
.mc-session-card-body,
.mc-addon-card-body {
	padding: 16px;
}

/* Toggle switch. Same pattern as session cards: the native input is
 * hidden and the visible UI is .mc-toggle-slider. Without these rules
 * the toggle is invisible. */
.mc-toggle {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
}
.mc-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}
.mc-toggle-slider {
	position: absolute;
	inset: 0;
	background: var(--mc-border);
	border-radius: 24px;
	cursor: pointer;
	transition: background .2s;
}
.mc-toggle-slider::before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s;
}
.mc-toggle input:checked + .mc-toggle-slider {
	background: var(--mc-blue);
}
.mc-toggle input:checked + .mc-toggle-slider::before {
	transform: translateX(20px);
}

/* Loading overlay. The semi-transparent background is what actually
 * blocks interaction during AJAX so users can't double-submit by
 * clicking through; the spinner gives visible feedback that work is
 * happening. */
.mc-registration-wrap { position: relative; }
.mc-loading-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .75);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}
.mc-spinner {
	width: 36px;
	height: 36px;
	border: 4px solid var(--mc-border);
	border-top-color: var(--mc-blue);
	border-radius: 50%;
	animation: mc-spin .7s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* Registration modal (rendered by [mc_registration_modal]). The modal
 * shell must always work — it's the entire UI surface for that
 * shortcode. */
.mc-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 40px 16px;
	overflow-y: auto;
}
.mc-modal-overlay[hidden] { display: none; }
.mc-modal {
	position: relative;
	background: #fff;
	border-radius: var(--mc-radius);
	width: 100%;
	max-width: 900px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.mc-modal-content { padding: 24px; }
.mc-modal-close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: var(--mc-gray);
	padding: 4px 8px;
}
.mc-modal-close:hover { color: #000; }
body.mc-modal-open { overflow: hidden; }