/**
 * TAMUK Foundation Integration Styles
 *
 * Styles for EventOn calendar, Blackbaud-powered forms,
 * and other third-party integration overrides.
 *
 * Only loaded when integration plugins are active.
 */

/* ===========================
   EventOn Calendar Overrides
   =========================== */

/* Calendar container */
.eventon_single_event,
.ajde_evcal_calendar {
	font-family: var(--font-body);
}

/* Calendar header / month navigation */
.ajde_evcal_calendar .calendar_header,
.ajde_evcal_calendar .evcal_month_line {
	font-family: var(--font-heading);
}

.ajde_evcal_calendar .evcal_month_line p {
	font-family: var(--font-heading);
	color: var(--tamuk-white);
	font-size: var(--text-xl);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
}

.ajde_evcal_calendar .eventon_events_list .evcal_month_line {
	background: linear-gradient(135deg, var(--tamuk-blue) 0%, #001a4d 100%);
	border-color: var(--tamuk-blue);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
}

/* Month navigation arrows */
.ajde_evcal_calendar .calendar_header .evo_arrows,
.ajde_evcal_calendar .evcal_arrows {
	color: var(--tamuk-blue);
}

.ajde_evcal_calendar .evcal_arrows i,
.ajde_evcal_calendar .calendar_header .evo_arrows span {
	border-radius: var(--radius-full);
	transition: background var(--transition-fast);
}

.ajde_evcal_calendar .evcal_arrows i:hover,
.ajde_evcal_calendar .calendar_header .evo_arrows span:hover {
	background: var(--tamuk-blue-lightest);
}

/* Event list items */
.ajde_evcal_calendar .eventon_list_event {
	border-radius: var(--radius-md);
	margin-bottom: var(--space-2);
	transition: box-shadow var(--transition-fast), transform var(--transition-fast);
	overflow: hidden;
}

.ajde_evcal_calendar .eventon_list_event:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* Event title */
.eventon_single_event .evcal_desc span,
.ajde_evcal_calendar .eventon_list_event .evcal_desc span.evcal_desc2 {
	font-family: var(--font-body);
	color: var(--color-text);
	font-weight: var(--weight-semibold);
}

/* Event date circle / badge */
.ajde_evcal_calendar .eventon_list_event .ev_ftImg {
	border-radius: var(--radius-md);
}

/* Event description */
.ajde_evcal_calendar .event_description .evcal_desc span.evcal_desc3 {
	color: var(--color-text-light);
}

/* Event action buttons / links */
.ajde_evcal_calendar .eventon_list_event .evcal_eventpage a,
.eventon_single_event .evcal_evdata_cell a {
	color: var(--tamuk-blue);
	font-weight: var(--weight-semibold);
	transition: color var(--transition-fast);
}

.ajde_evcal_calendar .eventon_list_event .evcal_eventpage a:hover {
	color: var(--tamuk-blue-light);
}

/* "No Events" message */
.ajde_evcal_calendar .eventon_events_list .no_events p,
.ajde_evcal_calendar .eventon_events_list .evo_no_ev p {
	font-family: var(--font-body);
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	text-align: center;
	padding: var(--space-10) var(--space-4);
}

/* Event detail expanded area */
.ajde_evcal_calendar .eventon_list_event .event_description {
	border-top: 1px solid var(--color-border);
}

/* Accessible focus for calendar elements */
.ajde_evcal_calendar [tabindex]:focus-visible,
.ajde_evcal_calendar a:focus-visible {
	outline: var(--focus-ring-style);
	outline-offset: var(--focus-ring-offset);
}

/* ===========================
   Blackbaud Integration Forms
   =========================== */

/* ---- Form wrapper ---- */
.tamuk-bb-form {
	max-width: var(--container-md);
	margin: 0 auto;
	padding: var(--space-10) var(--space-8);
	background-color: var(--tamuk-white);
	border-radius: var(--radius-xl);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tamuk-bb-form .form-intro {
	text-align: center;
	color: var(--color-text-light);
	margin-bottom: var(--space-8);
	font-size: var(--text-base);
	max-width: 55ch;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Reset fieldset browser defaults ---- */
.tamuk-bb-form fieldset,
.tamuk-bb-form .form-panel {
	border: none;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.tamuk-bb-form legend {
	padding: 0;
}

/* ---- Multi-step form progress indicator ---- */
.form-steps {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
	list-style: none;
	padding: 0;
}

.form-step-indicator {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.form-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	font-weight: var(--weight-bold);
	font-size: var(--text-sm);
	border: var(--border-width-2) solid var(--color-border-dark);
	color: var(--color-text-muted);
	background-color: var(--tamuk-white);
	transition: all var(--transition-fast);
}

.form-step-indicator.is-active .form-step-number {
	background-color: var(--tamuk-blue);
	border-color: var(--tamuk-blue);
	color: var(--tamuk-white);
	box-shadow: 0 0 0 4px rgba(0, 51, 153, 0.15);
}

.form-step-indicator.is-completed .form-step-number {
	background-color: var(--color-success);
	border-color: var(--color-success);
	color: var(--tamuk-white);
}

.form-step-label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.form-step-indicator.is-active .form-step-label {
	color: var(--tamuk-blue);
	font-weight: var(--weight-semibold);
}

.form-step-indicator.is-completed .form-step-label {
	color: var(--color-success);
}

.form-step-connector {
	width: 40px;
	height: 2px;
	background-color: var(--color-border);
	transition: background-color var(--transition-fast);
}

.form-step-connector.is-completed {
	background-color: var(--color-success);
}

@media (max-width: 640px) {
	.form-step-label {
		display: none;
	}

	.form-step-connector {
		width: 20px;
	}

	.tamuk-bb-form {
		padding: var(--space-6) var(--space-4);
	}
}

/* ---- Form inputs ---- */
.tamuk-bb-form input[type="text"],
.tamuk-bb-form input[type="email"],
.tamuk-bb-form input[type="tel"],
.tamuk-bb-form input[type="number"],
.tamuk-bb-form input[type="url"],
.tamuk-bb-form textarea,
.tamuk-bb-form select {
	display: block;
	width: 100%;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-text);
	background-color: var(--tamuk-gray-50);
	border: var(--border-width-2) solid var(--color-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition-fast),
	            box-shadow var(--transition-fast),
	            background-color var(--transition-fast);
	-webkit-appearance: none;
	appearance: none;
}

.tamuk-bb-form input:hover,
.tamuk-bb-form textarea:hover,
.tamuk-bb-form select:hover {
	border-color: var(--color-border-dark);
}

.tamuk-bb-form input:focus,
.tamuk-bb-form textarea:focus,
.tamuk-bb-form select:focus {
	outline: none;
	border-color: var(--tamuk-blue);
	background-color: var(--tamuk-white);
	box-shadow: 0 0 0 3px rgba(0, 51, 153, 0.12);
}

.tamuk-bb-form input::placeholder,
.tamuk-bb-form textarea::placeholder {
	color: var(--tamuk-gray-400);
}

/* Labels */
.tamuk-bb-form label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: var(--weight-semibold);
	font-size: var(--text-sm);
	color: var(--color-text);
}

.tamuk-bb-form .required-indicator {
	color: var(--color-error);
	margin-left: 2px;
}

.tamuk-bb-form .field-help {
	display: block;
	margin-top: var(--space-1);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* Error states */
.tamuk-bb-form .form-group.has-error input,
.tamuk-bb-form .form-group.has-error textarea,
.tamuk-bb-form .form-group.has-error select {
	border-color: var(--color-error);
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.tamuk-bb-form .error-message {
	font-size: var(--text-xs);
	color: var(--color-error);
	margin-top: var(--space-1);
	min-height: 0;
}

.tamuk-bb-form .error-message:empty {
	display: none;
}

/* Section headings within form */
.tamuk-bb-form h3 {
	font-family: var(--font-heading);
	font-size: var(--text-lg);
	color: var(--tamuk-blue);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--tamuk-gold);
}

/* ---- Form field groups ---- */
.form-group {
	margin-bottom: var(--space-5);
}

.form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--space-4);
}

/* ---- Form section panels (one visible at a time in multi-step) ---- */
.form-panel {
	display: none;
}

.form-panel.is-active {
	display: block;
	animation: fadeIn var(--transition-base);
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	@keyframes fadeIn {
		from { opacity: 1; transform: none; }
		to { opacity: 1; transform: none; }
	}
}

/* ---- Form navigation buttons ---- */
.form-navigation {
	display: flex;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 2px solid var(--color-border);
}

.form-navigation .btn {
	min-width: 140px;
}

/* Loading state */
.form-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
}

.form-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid var(--color-border);
	border-top-color: var(--tamuk-blue);
	border-radius: var(--radius-full);
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.form-loading::after {
		animation: none;
		border-top-color: var(--tamuk-gold);
	}
}

/* Form success state */
.form-success {
	text-align: center;
	padding: var(--space-12) var(--space-8);
}

.form-success-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--space-6);
	color: var(--color-success);
}

.form-success h2 {
	color: var(--color-success);
	margin-bottom: var(--space-4);
}

/* Review step (displays entered data before submission) */
.review-summary {
	background-color: var(--tamuk-gray-50);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	margin-top: var(--space-4);
}

.review-table {
	width: 100%;
	margin-bottom: var(--space-4);
	border-collapse: collapse;
}

.review-table th,
.review-table td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: var(--border-width) solid var(--color-border);
	font-size: var(--text-sm);
}

.review-table th {
	background-color: var(--tamuk-gray-100);
	color: var(--color-text);
	font-weight: var(--weight-semibold);
	width: 35%;
}

.review-table td {
	color: var(--color-text);
}

.review-table tr:last-child th,
.review-table tr:last-child td {
	border-bottom: none;
}

/* Page context: give form pages a subtle background so the card stands out */
.entry-content .tamuk-bb-form {
	margin-top: var(--space-2);
	margin-bottom: var(--space-8);
}

/* When Elementor is NOT active, add a light background strip behind the form */
.zone-alumni .entry-content:has(.tamuk-bb-form),
.zone-foundation .entry-content:has(.tamuk-bb-form) {
	background-color: var(--tamuk-gray-50);
	padding-top: var(--space-8);
	padding-bottom: var(--space-12);
	max-width: none;
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* ===========================
   RSVP Button & Modal
   =========================== */

.rsvp-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.rsvp-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: var(--z-modal);
	background-color: rgba(0, 0, 0, 0.5);
}

.rsvp-modal.is-open {
	display: flex;
}

.rsvp-modal-content {
	background-color: var(--tamuk-white);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	max-width: 480px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--shadow-xl);
}

/* ===========================
   Memorial Giving Form
   =========================== */

.memorial-giving-form .gift-type-options {
	display: flex;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.memorial-giving-form .gift-type-option {
	flex: 1;
	text-align: center;
	padding: var(--space-4);
	border: var(--border-width-2) solid var(--color-border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.memorial-giving-form .gift-type-option:hover {
	border-color: var(--tamuk-blue);
}

.memorial-giving-form .gift-type-option.is-selected {
	border-color: var(--tamuk-blue);
	background-color: var(--tamuk-blue-lightest);
}

.memorial-giving-form .gift-type-option input[type="radio"] {
	position: absolute;
	opacity: 0;
}

.memorial-giving-form .gift-type-option input[type="radio"]:focus-visible + .gift-type-label {
	outline: var(--focus-ring-style);
	outline-offset: var(--focus-ring-offset);
}